전체 글
모던 리액트 deep dive 스터디 - 8주차 발표 정리
모던 리액트 deep dive 스터디 - 8주차 발표 정리 주제: 15장. 마치며 리액트 프로젝트를 시작할 때 고려해야 할 사항 1. 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자. 리액트 17 버전은 새로운 기능 출시 및 호환성이 깨지는 변경 사항을 최소한으로 맞춘 업데이트라 가능하면 업데이트 해두는 것이 좋다. 그렇다고, 클래스형으로 작성한 컴포넌트를 함수형으로까지 바꿀 필요는 없음. 클래스형 컴포넌트는 사라질 계획이 없기 때문에 둘 다 능숙하게 다룰줄 알아야한다. 2. 인터넷 익스플로러 11지원을 목표로 했다면 각별히 더 주의를 기하기. 인터넷 익스플로러에 대해 지원을 공식적으로 하지 않기때문에 버전 업데이트시 주의하기 3. 서버 사이드 ..
모던 리액트 deep dive 스터디 - 7주차 발표 정리
모던 리액트 deep dive 스터디 - 7주차 발표 정리 주제: 13장. 웹페이지의 성능을 측정하는 다양한 방법 📌 create-react-app crate-react-app을 통해 프로젝트를 생성하면, reportWebVitals라는 함수를 볼 수 있을 것이다. - 누적 레이아웃 이동 (CLS) - 최초 입력 지연 (FID) - 최초 콘텐츠풀 페인트(FCP) - 최대 콘텐츠 페인팅 (LCP) - 첫 바이트까지의 시간 (TTFB) 이 함수는 위의 것들을 측정하는 용도로 사용된다. 이러한 지표는 web-vitals 라이브러리를 통해 웹페이지 성능을 측정하는데, 이는 PerformanceObserver라는 API를 사용하기 때문이다. ❓PerformanceObserver 브라우저에서 웹페이지의 성능을 측정..
KAKAO TECH MEET 5회 참석 후기
4월 11일에 kakao tech meet에 다녀왔습니다. 이번 주제는 프론트엔드 관련 주제들이라 꼭 가고 싶었는데, 운 좋게 뽑혀서 갈 수 있었네요. 두근거리는 마음으로 입장했던 카카오 아지트 이때는 몰랐는데, 이 건물 말고도 판교역 주변으로 다 카카오 건물이더라고요.... (지린다) 그리고 진행된 kakao tech meet 발표는 총 3개의 세션으로 다음과 같은 순서로 진행되었어요. 1. 스벨트 이미지 뷰어 라이브러리(phocus) 2. 웹 텍스트 에디터 3. 웹뷰 디버깅 환경 만들기 카카오 프론트엔드 개발자 분들이 발표를 해주셨고, 그들의 개발 방식과 개발을 어떤식으로 하는지 새로운 기술 개념들을 배울 수 있었습니다. 쉬는 시간에 찍은 사진 편해보이는 의자들이 놓여져있는 카카오 사내의 쉼터 kak..
4월 COMMIT - 당근 해외 진출 고군분투기
구름의 4월 COMMIT에 다녀왔다. 이번 내용은 당근이 어떻게 성공적으로 해외에 진출 할 수 있었는지에 대한 내용이다. 발표 내용은 따로 직접적으로 유출하면 안되는걸로 알고 있어서 자세히 적지는 않겠다. https://open.substack.com/pub/lauriehwang/p/work-1n?utm_campaign=post&utm_medium=web 1. 당근마켓 영국 사업 - 출장 가기 전까지 서울에서 준비 코로나 시대에 해외 진출한 당근마켓, 서울에서 어떤 일들을 했을까? lauriehwang.substack.com 위는 발표자분께서 해외 진출에 대한 내용을 자세하게 적은 글이다. 궁금하다면, 위 글을 참고하면 좋을 것 같다. 💁♂️ 소감 3월에도 COMMIT을 다녀왔는데, 따로 소감 같은걸 ..
React, Next 배포와 배포 자동화 A부터 Z [1주차] [GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)]
React, Next 배포와 배포 자동화 A부터 Z [1주차] [GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)] 실습 참고 CloudFront, S3 쉽게 배포하기 GitHub Action에서 React 지속적 전달 구현하기 (CF, S3) 이번 1주차에 진행했던 내용은 GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)에 대한 내용이였습니다. 이번 주차에서 중점으로 배웠던 항목은 다음과 같습니다. GitHub Action의 특성 CI/CD 개념 aws cli, terraform GH CLI 이번 주차의 과정을 진행하면서 얻고자하는 역량은 무엇일까요? 구매한 도메인을 AWS를 통해 배포를 하는 것 뿐..
모던 리액트 deep dive 스터디 - 6주차 발표 정리
모던 리액트 deep dive 스터디 - 6주차 발표 정리 주제: 11장. Next.js 13과 리액트 18 Next.js 13 📋 app 디렉터리의 등장 Next 13 버전 이전까지 모든 페이지는 각각의 물리적으로 구별된 파일로 독립되어 있었습니다. 만약 페이지 공통으로 무언가를 넣어야 한다면, 그곳은 _document와 _app이 유일했죠. 이마저도 _document와 _app은 목적이 서로 달랐습니다. _document는 , 태그를 수정하거나 서버 사이드 렌더링 시 CSS-in-JS를 지원하기 위한 코드를 삽입하는 제한적 용도, _app은 글로벌하게 React, Next 엘리먼트를 컨트롤 하는 용도로 사용되어야 했습니다. 무언가 페이지 공통 레이아웃을 유지할려면 그 방법은 _app에서만 했어야 했죠..
모던 리액트 deep dive 스터디 - 5주차 발표 정리
모던 리액트 deep dive 스터디 - 5주차 발표 정리 (9장) *본 글은 발표 대본용이라 상세 정보는 들어가 있지 않습니다. 9장 모던 리액트 개발 도구로 개발 및 배포 환경 구축하기 우리에게 편리함을 가져다주는 create-react-app과 create-next-app 편리한게 좋긴하지만 어떻게 프로젝트 구조가 잡히는지, 어떤 설정들이 필요한지에 대해서 깊게 생각하지 않고 만들게 된다. 이 편리한 CLI 도구를 사용해보지 않고 프로젝트 환경설정을 해보자. Next 프로젝트를 위해 설치할 것들 react react-dom next typescript @types/react @types/react-dom @types/node eslint eslint-config-next tsconfig.json {..
사내스터디 - GraphQL 스터디 1주차
사내스터디 - GraphQL 스터디 1주차 📋 범위 1장 *본 글은 발표 대본용이라 상세 정보는 들어가 있지 않습니다. GraphQL이란? - API를 만들 때 사용할 수 있는 쿼리 언어 - 쿼리에 대한 데이터를 받을 수 있는 런타임 보통 쿼리 언어라 하면 SQL이 먼저 떠오른다. SQL과 동일한 쿼리 언어지만, 차이가 있다. SQL은 데이터베이스 시스템에 저장된 데이터를 효율적으로 가져오는 것이 목적이라면 GraphQL은 웹 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적이다. GraphQL에 대한 특징을 살펴보자. - 요청 값에 맞게 데이터들이 response되어 원하는 데이터 형태만을 받아올 수 있다. - HTTP 요청 하나가지고 입맛에 맞게 원하는 타입대로 요청을 진행할 수 있다. ..