Reflow, Repaint, Composite 이전 포스팅에서 다루었던 브라우저 렌더링 과정에서 언급되었던 Reflow, Repaint 그리고 Composite에 대해서 알아보려고한다 Composite Composite은 Paint단계 다음에 일어나는 과정으로 Render 트리에 두 개 이상의 Layer가 존재한다면 각각의 Layer를 병렬적으로 Paint한 후 Layer들을 합치는 과정이다 브라우저에 시각적 변화가 일어날 때 유저가 웹에서 상호작용을 하면서 시각적 변화가 일어날 때 브라우저는 조건에 따라 각각 다음과 같은 변화가 일어난다 Reflow 레이아웃의 높이, 너비, 그리고 위치 등에 변화 그리고 DOM이 추가되거나 삭제되면 Reflow가 일어난다 Reflow는 그림에서 보이는 부분을 모두 수행해야하며 다른 모든 노드의 위치를 다시 계산하고.. Frontend 3년 전
브라우저 렌더링 과정 우리가 브라우저에서 주소창에 주소를 검색하면 페이지가 나타나게 된다 어떠한 과정을 거쳐서 이런 일이 일어나는지 한 번 알아보자 1. 주소창에 검색하기 (서버에 요청하기) 기본 페이지를 설정해놓지 않는 이상 브라우저를 띄우기만 해서는 아무런 페이지도 나타나지 않는다 브라우저를 띄우고 주소창에 검색하게 되면 해당하는 서버에 어떠한 요청을 보내게되고 요청을 받은 서버는 우리에게 응답을 돌려준다 이렇게 페이지를 나타내기 위한 html, css, js, 이미지 파일들을 응답으로 받아오게 된다 2. 해석하기 (파싱) 1번에서 받아온 파일 중 기둥이 되는 것이 두 가지가 있는데 바로 html과 css이다 html 파일을 의미있는 단위로 나누고 브라우저가 알아볼 수 있게 노드로 바꿔준 뒤 노드들 끼리의 관계도를 만드는.. Frontend 3년 전
웹 소켓 HTTP의 문제점 여태까지 내가 해 본 서버와의 통신은 HTTP를 이용한 통신이었다 HTTP를 이용하면 클라이언트에서 서버에게 요청하고 서버는 받은 요청에 대한 응답을 보내주는 통신이 가능한데 비동기 통신인 Ajax 도 http를 이용한 통신 중에 하나이다 이러한 http 통신에는 문제가 있는데 클라이언트에서 요청하기 전까지는 서버에서 응답을 받을 수 없다는 것이다 얼핏 보면 양방향 통신으로 보이지만 사실 조건부 양방향 통신이었던 것 웹 소켓 이런 불편함을 해소하기위해 새로운 통신 규약 웹 소켓이 나왔다 웹 소켓이 나오기 이전에는 클라이언트에서 어떠한 동작을 취해야만 서버에서 응답을 받아올 수 있었다 새로고침을 눌러서 최신 데이터를 본다던가 다른 주소로 이동할 때만 데이터를 받아올 수 있다던가 웹 소켓을.. Frontend 4년 전
git cannot lock, cannot create 에러 요즘 브랜치를 활용하는 법을 익히려고 이렇게 저렇게 사용해보고 있다 그러던 중에 브랜치를 만드는에 다음과 같은 에러가 발생했다 fatal: cannot lock ref 'refs/heads/...' cannot create 'refs/heads/...' 뭐지..? 평소같이 만들었는데 왜 안되는 걸까 여기저기 검색하다 보니 내 경우에는 브랜치 네이밍 문제였는데 브랜치 명을 test로 할 경우 다음과 같은 경로에 저장된다 refs/heads/test test에서 작업을 하다가 여기서 파생되는 작업을 하고싶어서 브랜치를 또 만드는데 그 이름을 test의 파생임을 나타내기 위해 하위 경로로 지정한다 test/something 하지만 이런 네이밍을 사용하면 에러가 발생한다 찾아보니 브.. Frontend 4년 전
parcel 정적 파일 빌드 기존의 정적 파일 parcel로 서버를 실행하면 entry 파일에서 시작하여 거치는 모든 파일들은 dist폴더에 빌드가 된다 이 때 빌드되는 과정에서 파일명은 이름.해쉬값.확장자의 형태로 바뀐다 바로 여기서 오는 문제점이 하나 존재하는데 기존 코드에서 사용하지않고 동적으로 불러오는 파일, 비동기로 접근하는 파일의 경우에는 빌드 대상에 포함되지 않는 것 나의 경우는 이랬다 처음 js가 실행될 때는 불러오지 않고 입력 이벤트가 발생할 때 경로를 전달 받아서 이미지를 렌더링하려했다 이 때 html.index 파일에서 경로는 ./assets/directory.png를 가르키게된다 위의 폴더 사진을 다시 한 번 보자 내가 사용할 directory.png파일은 빌드되지 않았고 빌드되었다고 해도 해쉬값으로 파일 이름.. Frontend 4년 전
regeneratorRuntime 어떤 오류인가 아마 Webpack, parcel 등의 번들러를 사용하다가 지원하지 않는 문법을 만나면 이런 에러가 발생하는 듯하다 나의 경우에는 parcel로 돌리다가 async / await를 사용했을 때 발생하였다 해결 방법 해결 방법에는 여러 가지가 존재한다 import 최신 문법을 지원하지 않아서 발생하는 에러이니 바벨을 사용해서 폴리필을 해주면 된다 npm install @babel/plugin-transform-runtime 로 설치해준 뒤에 entry가 되는 js파일이나 해당 해당 문법을 사용하고 있는 js의 상단에 import 해주면된다 import '@babel/plugin-transform-runtime'babelrc 블로그를 전전하다 보니 위의 방법은 전역 스코프가 오염.. Frontend 4년 전
토큰 기반 인증 로그인 인증 로그인 시스템을 구현할 때 사용하는 두 가지 인증 방식이 있는데 세션 기반 인증과 토큰 기반 인증이 그것이다 세션 기반 인증 유저가 로그인시에 서버에서 그 정보를 저장하고 유저에게 아이디를 지급해준다 이후 유저가 http 요청시에 발급받은 아이디와 함께 전달하고 이 때 받은 아이디가 최초에 지급해준 아이디와 같은지 확인하고 요청을 수행한다 토큰 기반 인증 유저가 로그인시에 유저에게 토큰을 지급해준다 이후 유저는 http 요청시에 발급받은 토큰을 함께 전달하고 이 때 서버에서 토큰이 유효한지 확인하고 요청을 수행한다 차이점 큰 차이점은 서버에서 정보를 가지고 있는가 그렇지 않은가 이다 세션 기반은 서버에 유저의 정보를 가지고 있다가 일치 여부를 확인하지만 토큰 기반은 유저에게 준 토큰이 유효한.. Frontend 4년 전
다크 모드 구현 다크 모드의 기본 골자는 대략 다음과 같다 사용자가 원하는 모드(다크/라이트)를 요청한다 혹은 기본 모드 해당하는 모드에 맞게 페이지의 스타일을 수정한다 조건을 먼저 나열해 보면 사용자의 요청에 따라 모드가 바뀌어야한다 라이트와 다크 모드일 때 전체 CSS의 색상이 반전되어야한다 사용자의 요청이 없다면 기본 모드로 설정된다 1. 사용자의 요청에 따라 모드 변경하기 어떻게 모드를 변경할 수 있을까? 여기서 변경되는 모드는 페이지 전체를 대변해야하며 CSS가 그 변경을 감지할 수 있어야한다 그래서 DOM의 최상위인 html에 속성값을 넣어줄 것이다 https://ko.javascript.info/dom-navigation DOM 탐색하기 ko.javascript.info html은 곧 documentElem.. Frontend 4년 전
프론트엔드 개발환경의 이해 : 핫 로딩, 최적화 핫 모듈 리플레이스먼트 이전에 적용했던 웹팩 개발 서버는 코드의 변화를 감지해서 브라우저의 새로고침을 만들어줘서 생산성을 높여줬다 하지만 이 새로고침이 가끔 거슬릴 때가 있다 SPA를 개발할 때는 브라우저에서 데이터를 다 들고있기 때문에 새로고침을 해버리면 데이터가 다 사라진다 이때 화면 전체를 새로고침하지 않고 코드가 변경된 부분의 모듈만 새로고침해주는 기능을 제공하는 것이 핫 모듈 리플레이스먼트이다 설정 웹팩 개발서버에서 제공하는 옵션이기 때문에 따로 패키지를 설치하지 않고 바로 설정에 들어가면된다 devServer: { ... hot: true, ... }, 그냥 핫을 true로 켜주기만하면 된다 그러면 코드를 고칠 때 그 모듈에 해당하는 부분만 새로고침이 되게 된다 최적화 개발하다보면 코드가 커지.. Frontend 4년 전
프론트엔드 개발환경의 이해 : Webpack (심화) 개발 환경 지금까지는 프로젝트 상단에 파일, 이미지 등을 직접 로딩해서 결과물을 확인했다 하지만 실제 운영으로 들어가면 인터넷에서 이 파일들을 읽어 온 뒤에 클라이언트에 전달해주어야한다 개발환경도 위와 같은 운영환경과 유사하게 맞추어 주는 것이 좋다 배포시에 발생할 수 있는 잠재적인 문제들을 미리 확인할 수 있기도 하기 때문 이러한 서버를 제공해주는 것이 webpack-dev-server다 설치 및 사용 npm i -D webpack-dev-server으로 설치한 후에 package.json에서 스크립트 명령어를 추가해주자 ... scripts: { ... start: "webpack-dev-server" } ... start는 기본 명령어이기 때문에 run을 붙여주지 않아도 실행이 가능하다 npm st.. Frontend 4년 전
