내가 보려고 만든 개발 공부 일지

어느 기술 인터뷰에서 리플로우와 리페인트에 대해 설명해 달라는 질문을 받은적이 있었다. 아는대로 설명을 하긴 했지만 언제 어떻게 발생되고 성능적으로 어떻게 개선할 수 있을지에 대해서는 자세하게 대답하지 못했었다. 그래서 이번 포스팅에서는 리플로우와 리페인트가 무엇이고 개발할때 어떤 부분을 신경써야 하는지 정리해보려 한다. 브라우저 렌더링 과정 브라우저의 역할은 사용자가 보고자 하는 웹페이지를 서버에 요청하고 서버에서 보내준 응답을 받아 브라우저 화면에 그려주는 것이다. 보통 서버는 응답으로 html 파일을 보내준다. 브라우저의 렌더링 엔진은 이 html 파일을 해석하여 DOM 트리와 CSSOM 트리를 만들고, 이 둘을 결합하여 렌더 트리를 만든다. 이렇게 만들어진 렌더 트리를 기반으로 UI가 그려지게 된..

넘블에서 주도하는 챌린지중 프론트엔드 클론 코딩 챌린지에 참여한 후 작성하는 프로젝트 관련 정리 글입니다. 리디북스 or 클래스101 의 실제 사이트를 보고 3주 안에 클론 코딩하는것이 임무였고, 필자는 리디북스를 선택하여 개발을 진행했습니다. API는 넘블에서 제공하는것을 사용하였고 React, Typescript 베이스로 개발하였습니다. 상태 관리는 Redux, 간단한 아이콘은 react-icons 라는 라이브러리를 사용했습니다. 필자는 회사를 다니고 있기에 평일에는 거의 작업을 못했고, 주말에 작업을 몰아서 진행하였기 때문에 꽤나 빡센(?) 3주였습니다.. 중간에 삽질도 하면서 아까운 시간을 많이 까먹기도 했지만,, 어찌어찌 할 수 있는데 까지만 구현하고 마무리를 지었습니다. 😵 [ 주요코드 설명 ..

웹 개발을 할때 내가 작업한 결과를 바로바로 확인하는 곳이 localhost 이다. 포트번호는 주로 8080, 리액트라면 3000 일것이다. 근데 내가 작업중인 화면을 다른 누군가에게 보여줘야할 일이 생길 수 있다. 그치만 아직 개발중이고 배포된 상태도 아니니 외부에서 접속할 URL 도 없다. 근데 이를 가능하게 해주는 기술이 있는데 바로 localtunnel 이다. localtunnel 은 내 로컬 환경을 외부에서 접속해 볼 수 있는 주소를 만들어주는 녀석이다. Node.js 패키지이기 때문에 npm 으로 설치해서 사용할 수 있다. 사용법 ) 1. cmd 창을열고 아래 명령어를 입력. npm install -g localtunnel : localtunnel 을 전역 설치해준다. 2. 설치가 완료되면 아..

webpack 이 뭐고 왜쓰는지에 대해 간단히 적어봅니다. 웹팩은 웹개발을 도와주는 많은 기능들을 가지고 있는 자바스크립트 모듈 번들러이다. 기본적으로 import, export 를 통해 서로 의존관계에 있는 html, js, img, css 같은 모든 리소스들을(= 모듈) 모두 찾아서 연결해주고 하나의 파일로 만들어준다. 웹팩을 쓰지 않고 그냥 import 구문을 쓰게되면 브라우져에서 실행 시 에러가 난다. 브라우저가 import, export 를 못알아먹기 때문인데, 그래서 스크립트 태그에 이런식으로 타입=모듈 을 명시해줘서 '이 스크립트는 모듈이다' 하고 브라우저에게 알려줘야 import export 를 쓸 수 있다. 그치만 웹팩을 사용하면 파일들을 하나의 결과물 파일로 만들어주기 때문에 위처럼 일..