브라우저 렌더링 엔진 동작과정은 크게 4~6단계로 이루어진다! 1. HTML,CSS 파싱 2. DOM Tree 구축, CSSOM Tree 구축 3. 렌더 트리 구축 4. 렌더 트리 배치(Layout 단계 ⇒ Paint 단계) 5. 렌더 트리를 Reflow해서 그리기 6. Repaint까지 1. 파싱이란? 파싱이란 '(문장을 문법적으로) 분석하다' 라는 뜻으로 하나의 프로그램을 런타임환경 (예를 들면, 브라우저 내 자바스크립트 엔진)이 실제로 행할 수 있게 분석하고 변환해주는 것을 의미한다! 파싱은 다운로드한 HTML을 해석하여 DOM 트리를 구성 HTML 또는 리소스에 CSS가 포함된 경우에는 CSSOM 트리 구성 작업도 함께 진행 DOM 트리 구성 DOM이란 Document Object Model 의 ..
프로젝트를 하면서 회원가입이 페이지가 총 두 페이지로 나눠진다. 첫 번째는 이메일과 비밀번호를 입력하는 페이지고 두 번째는 프로필(닉네임, 프로필 사진) 을 입력하는 페이지이다. 페이지는 두개지만 서버에서 받는 회원가입 api는 하나였다. 여기서 고민은 1. 서버 회원가입 api를 둘로 나눌지 2. props로 전달해줄지 고민이 되었다. 유저가 프로필 설정 없이 이메일, 비밀번호를 설정하고 나가버리면 db에 데이터가 쌓여버리고 그렇다고 db에 저장하지 않으면 api를 분리하는 이유가 없어지는 문제가 발생한다. 따라서 서버 api는 하나로 두고 props로 전달해주는 방법을 쓰기로 했다. 여기서도 redux를 이용하여 이메일, 비밀번호를 전역으로 저장하여 프로필..
서버에서 로딕을 짤 때 이렇게 데이터를 넣어 보내면 저 나라에 맞는 데이터 array를 응답으로 주기로 햇다. 분명 postman에서도 잘 작동이 되는데 왜 왜 안 될까.... 한 두시간 정도의 삽질 끝에 얻은 결과는 "get은 body에 data를 넣어 보낼 수 없다" 였다..! axios.get(url[, config]) // GET axios.post(url[, data[, config]]) // POST axios.put(url[, data[, config]]) // PUT axios.patch(url[, data[, config]]) // PATCH axios.delete(url[, config]) // DELETE axios.request(config) axios.head(url[, confi..
Problem 하루 글을 조회할 때 url에 postId를 요청하여 응답을 받는다. 근데 이 postId를 어떻게 저장해서 서버에 요청을 보내야하나? 기존 게시판과 같은 경우, 먼저 content들을 다 뿌려주고 이미 뿌려진 값들의 postId를 받아서 세부 페이지 요청을 보낸다. 하지만 우리 서비스는 유저 자신이 작성한 글만 봐야한다. 그렇다고 api에서 해당 유저가 쓴 글 리스트를 보내주는 것도 아니다. postId를 작성하기에는 localDB에 저장하는 방법도 있는데 돌아가는 방법인 것 같았다. 당시, 조회할 수 있는 api는 이랬다. 백엔드와 프론트엔드 간 소통이 필요하다고 생각하여, 회의를 잡았다. 방법1 하루 작성할 때 서버에서 postId를 응답바..
