WBlog

1. WebVitals LCP : 로딩 성능(페이지에서 가장 큰 콘텐츠의)을 측정한다 . 우수한 UX를 제공하려면 페이지가 처음으로 로딩된 후 2.5초 이내에 LCP가 발생해야 함. FID : 상호 작용을 측정. 우수한 UX를 제공하려면 페이지의 FID가 100ms 이하여야 함. CLS : 시각적 안정성 측정. 페이지에서 0.1 이하의 CLS를 유지해야 함. FCP : 브라우저가 화면에 그려지기 까지의 시간 측정 TTFB : 첫번째 요청과 그 응답을 받는데 까지 걸리는 시간 측정 2. Code splitting - 빌드된 앱에선 기본적으로 1개의 파일에 모든 로직이 들어가게 된다. 그러면 프로젝트가 커질수록 해당 파일의 용량도 커지게 될텐데, 페이지 로딩 시간도 길어지게 될 것 이다. 코드 스플리팅은 당..

1. 일주일간의 리액트 심화과정 - 리액트 라이프사이클의 이해 라이프 사이클은 위 그림과 같이 총 9개가 존재한다. 크게 세가지 유형으로 나눌 수 있는데 생성 될때, 업데이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다. 앞으로 위의 그림 을 보면서 아래 글을 참조한다면 더욱 더 유용한 글이 될 것 같다. 사실 위 그림이 리액트 사이클의 전부이긴 하다. 여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다. 주의하여 볼 것은 업데이트 부분인데, 업데이트는 다음과 같은 4가지 상황에서 발생한다. props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate..

1. 부트캠프 2주차 드디어 React 주특기 과정을 시작하였다. 부트캠프에서 React(프론트), Node.js(백엔드), Spring(백엔드) 이렇게 3개의 주특기 중 하나를 택할 수 있는데, 전부터 공부해오던 React를 선택하였다. 이번 부트캠프에선 각각 2:1:1 비율로 선택되었다고 한다. 면접 때 어느 과정에 흥미를 두고 있는지 물었던 만큼, 비율이 꽤나 잘 맞아떨어진 것 같다. 2. 주특기 기본과정 프로젝트 이번은 팀 프로젝트가 아니며, 부트캠프에서 제공한 React강의로 학습을 하고나서 위의 프로젝트를 혼자서 진행해야 한다. 3. React 강의에서 배운 것들 React router - SPA에서는 서버에서 주는 html이 1개 뿐이다. 그렇다면 웹사이트에서 페이지 구분.. 즉 url 구분..

1. 부트캠프 시작 부트캠프 1주차를 시작하였다. 4인 1팀이며, 팀원 및 팀장은 랜덤으로 배정되었다. 부트캠프에 대한 설명회는 약 30분만에 끝이나고 바로 팀프로젝트 주제를 받고 시작하였다. 2. 첫 번째 프로젝트 Javascript와 python, aws ec2 를 이용하여 닷새 안에 웹 사이트를 완성해야 했다. 만들 웹사이트의 컨셉은 내 아이디어로 하기로 됐는데, 예능 "안녕하세요"를 본따서 웹사이트에 접속한 유저가 고민글을 올리면 다른 유저들이 추천 혹은 비추천을 투표할 수 있으며, 추천수가 높은 게시물들은 메인페이지에 따로 출력되도록 하는 컨셉으로 정했다. 3. 나의 역할과 진행 메인 페이지와 로그인 및 회원가입 페이지의 프론트엔드 담당을 하였다. 4. 문제 발생과 해결 (1) 자바스크립트에서 ..