프론트엔드8 Suspense를 사용하자 *react conf 2021 동영상을 참고했습니다. Suspense를 사용해야하는 이유 리액트는 데이터가 위에서 아래로 즉 단방향으로 흐르기때문에 서비스의 전반적인 흐름을 쉽게 이해 할 수 있습니다. 각 컴포넌트는 데이터를 가공하거나 사용하여 jsx를 반환합니다. 컴포넌트 내부에서도 코드의 흐름은 위에서 아래로 흐릅니다. 하지만 비동기적인 코드가 사용되면 그 흐름은 깨집니다. 코드를 건너 뛰어가며 보고 이해해야하기 때문입니다. // 비동기 코드가 들어간다면 function List({pageId})) { const [items, setItems] = useState(); // useEffect를 사용하여 fetch를 하게 되고 // fullfill 상태가 되면 state가 업데이트 되어 re-rende.. 2021. 12. 14. Core Web Vitals Core Web Vital Web Vitals은 간단하게 말하자면 웹사이트에 대한 유저의 경험을 정량화 시킨 가이드라인이라고 할 수 있습니다. Core Web Vitals는 Web Vital의 부분 집합니다. 아래 세가지의 지표를 보여주는 역할을 합니다. Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) 위의 세개지 지표에서 좋은 점수를 받는다면 좋은 UX를 지닌 웹사이트라 평가될 수 있습니다. 좋은 점수를 받지 못한다면 Core Web Vitals 를 랭킹 지표로 사용하는는 구글에서는 좋은 랭킹을 받을 수 없습니다. Good, Needs Improvement, Poor Core Web Vital은 Go.. 2021. 12. 13. Rendering 전략 Rendering 종류 Static Site Generation (SSG) HTML 파일을 빌드타임에 생성하는 pre-rendering 기술이다. 이렇게 미리 생성된 HTML 파일이 요청시 사용된다. 가장 많이 사용되는 방식이며 성능적으로 가장 좋다. Server-Side Rendering (SSR) SSG와 마찬가지로 pre-rendering 기술이지만 빌드타임에 생성되는 것이 아닌 요청시 생성된다. SSG와 비교하면 조금 느리지만 요청에 따라 달라질 수 있는 다이나믹한 페이지를 생성할때 필요하다. Incremental Static Regeneraion (ISR) 페이지의 갯수가 많다면 모든 페이지를 빌드타임에 생성하는것은 시간이 오래걸리고 효율적이지 못하다. ISR을 통해 원하는 만큼의 페이지를 빌드.. 2021. 12. 12. Robots.tsx robots.txt 파일이 무엇인가요? 웹사이트의 정보를 수집하는 'search engine crawlers' 들에게 어떤 '페이지'나 '파일'을 허용/금지 하는지 알려주는 역할을 하는 web standard 파일입니다. 해당 파일은 host의 root에 위치해 있어야 합니다. (보통 public 폴더 안 root directory에 위치한다) robots.txt 파일 예시 //robots.txt # 모든 크롤러 /accounts 경로 접근 금지 User-agent: * Disallow: /accounts # 모든 크롤러에게 공개 (Default 값이며 사실상 명시하지 않아도 된다) User-agent: * Allow: / # 사이트 맵 Sitemap: Sitemap 웹사이트에서 사용하는 url을 가르키.. 2021. 12. 11. Metadata Metadata 웹 사이트의 컨텐츠를 title, description, image의 추상적인 형태로 보여주는 데이터이다. Title 구글 크롤러가 페이지에 대한 분석을 할때 필요로 하는 중요한 SEO element중 하나이다. 키워드를 사용하면 검색엔진에서 좋은 랭킹을 받을 수 있다. iPhone 12 XS Max For Sale in Colorado - Big Discounts | Apple 해당 타이틀은 유저들이 궁금해하는 수 많은 키워드를 담고 있어 SEO 점수를 높게 받을 수 있는 타이틀이라고 할 수 있다. Description title만큼은 아니지만 중요한 SEO element 중 하나이다. 구글에 의하면 description 은 검색 랭킹에 영향을 주진 않지만 검색 결과에서 클릭률을 높일 .. 2021. 12. 11. [Drag and Drop API] 드래그 엔 드롭 기능 개발 기록 자바스크립트 드래그 엔 드롭 이벤트를 다루어 볼 수 있는 좋은 기회가 찾아 왔다. 실제 회사 서비스에 도입 하기 전, 테스트 겸 해당 기능을 갖춘 UI를 퀵퀵퀵(?) 하게 만들어 보고 싶었지만 난 "신입 개발자야" 티를 내듯 별것 아닌 기능에 생각보다 많은 고민과 시간을 투자했다. 어쨋든, 혼자서 구현해본 이 작은 기능이 내부적으로 어떻게 돌아가게 만들었는지 공유하고 싶어졌다. 로직 해당 기능의 로직을 포인트로 간단하게 적어보자면 1. 자바스크립트가 load 되면 selector를 이용해 id가 app인 HTML 요소를 App이라는 함수의 인자로 넘겨 해당 함수 scope 에서 사용할 수 있게 만든다. 2. 넘겨 받은 인자를 부모로 기본 UI를 렌더링 하고 드래그 엔 드롭 이벤트를 바인드 시켜준다. 3... 2021. 1. 31. 신입 프론트엔드 개발자의 첫 3개월 [2편] 지난 편에 이어서 중요도가 높은 2가지의 사이드 프로젝트를 기록해보고자 한다. 프론트엔드 개발자로 입사를 했지만 부끄럽게도 프론트엔드의 프자도 몰랐다.. 특히 자바스크립트라는 언어와 리액트와 같은 대세 프론트엔드 라이브러리를 제대로 사용해본 적이 없기에 이에 대한 갈급함이 매우 컸다. 사이드 프로젝트로 리액트 애플리케이션을 만들어 개발 실력을 키우자라는 마음을 먹었다. 회사에는 커피 및 다양한 음료를 무료로 제공하는 카페가 있는데 바쁜 시간에는 사람들이 많이 붐벼 대기를 해야 했다. 순간, 주문을 간편하고 쉽게 할 수 없을까라는 생각이 들었고 스타벅스의 사이렌 오더 처럼 우리 회사만의 사이렌 오더 애플리케이션을 만들어보면 잼있겠다는 생각에 사로잡혔다. 본격적으로 사이렌 오더 애플리케이션에 대해 기록하기 .. 2020. 11. 14. 신입 프론트엔드 개발자의 첫 3개월 [1편] 지난 3개월을 되돌아보면 나는 과연 잘 살았다고 할 수 있을까? n개월의 수습기간을 거쳐야 정직원이 되는 보통의 IT회사와 같이 내가 입사한 회사에서도 3개월의 수습기간이 주어졌다. 그리고 11월 11일, 장그래의 시간은 끝났고 정식으로 회사의 한 일원이 되었다. 나는 지난 3개월 동안 열심히 살았다고 생각한다. 하지만 무의미하게 시간을 보냈다는 대조적인 생각이 들기도 한다. 개발자로서 크게 성장을 했다고 느끼면서 동시에 성장을 하지 못했다고 느낀다. 회고록을 적으면 이에 대한 답을 찾을 수 있을까? 수습기간에는 수습 과제에만 집중하는 기존 문화와 달리 투입된 팀의 서비스가 대외적으로 유명세를 얻으면서 개발 일손이 부족해지기 시작하자 수습 과제를 업무로 대체하였다. 해당 팀에서는 webRTC를 기반으로 .. 2020. 11. 14. 이전 1 다음
