전체 글
2022년 회고
올해는 무엇을 했나? 이직 2022년에는 이직이 있었다. 2번의 이직 과정을 준비하고 경험하면서, 부족한 점이 무엇이고 더불어 내가 어떠한 사람이며 어떤 회사에 맞는 지를 다시 한번 생각하는 시간을 가졌었다. 이 과정속에서 운이 좋게도, 만족하는 조건으로 현재 근무하고 있는 곳에 이직을 하게 되었다. 입사 후에 내가 기대했던 점들 중에서 가장 만족했던 점은, 개발문화와 사람이었다. 현재 다니고 있는 회사는 서비스 확장을 위해 플랫폼 개발팀의 구성원들을 추가 채용함으로써 규모가 급격하게 늘어났다. 아무래도 구성원들이 늘면서 자칫 어수선한 분위기속에 업무 진행에 대한 많은 이슈와 차질이 형성될 수도 있지만, 개선을 위해 모두들 자유롭게 수평적인 분위기속에서 적극적으로 의견을 자유롭게 제시하며 합리적인 방법으..
TIL | Custom hook with return tuple type array
ISSUE // 단순 예시입니다. import { useState } from "react"; const useToast = () => { const [isOpen, setIsOpen] = useState(false); const handleToast = () => { setIsOpen((prev) => !prev); }; return [isOpen, handleToast]; }; export default useToast; // error // const handleToast: boolean | (() => void) // This expression is not callable. // Not all constituents of type 'boolean | (() => void)' are..
TIL | Next.js 13 간단 정리
얼마전, vercel에서 Nextjs ver13 관련 컨퍼런스를 진행하였다. 해당 컨퍼런스를 보고 블로그 및 문서들을 참고하여 어떠한 내용이 추가되었는지 정리해보았다. Install npx create-next-app@latest --experimental-app 시작하기 앞서, nextjs의 최신 버전을 설치하게 되면, 위와 같은 구조로 설치가 된다. 이전과 다르게 app 폴더가 생겼으며 tsx를 default로 설치가 된다. Router 가장 큰 특징중 하나로는 라우팅 구조이다. 기존에는 page 폴더에서 페이지 라우팅 컴포넌트만 선언하고 다른 폴더에서 관련 컴포넌트를 주입해 사용했던 구조였지만, 페이지 라우팅 컴포넌트 이외 컴포넌트들도 선언 및 활용이 가능할 수 있는 app 폴더가 생겼다. 이로 인..
TIL | Reflow, Repaint
Reflow, Repaint JS 코드에 의해 DOM or CSSOM을 변경하는 DOM API가 사용될 경우, DOM or CSSOM이 변경된다. 이때 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합되고 변경된 트리를 기반으로 레이아웃과 페인트 과정을 브라우저 화면에 다시 렌더링하게 되는데, 이러한 과정을 리플로우(Reflow), 리페인트(Repaint)라고 한다. Reflow 레이아웃의 재계산하는 것을 말하며, 다음과 같이 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 재배치를 위한 위치 계산 작업이 이루어진다. DOM 노드의 추가, 제거 DOM 노드의 위치 변경 DOM 노드의 크기 변경(margin, padding, border, width, height 등..) CSS3 애니메이션과 트랜지..
TIL | env파일 자동완성 및 Triple-Slash Directives 정리
env 파일 자동완성 및 에러 해결 const fetchData = async () => { const response = await fetch(process.env.REACT_APP_TEST_ENV) // Type 'undefined' is not assignable to type 'RequestInfo | URL'.ts(2345) const result = response.json() return result } useEffect(() => { fetchData().then(console.log) },[]) 위와 같이 .env 파일의 타입 이슈를 해결하기 위해서는 환경 변수(.env) 타입 설정이 필요하다. CRA 를 ts로 설치하였을때 src 디렉토리에 react-app-env.d.ts 파일이 생기..
TIL | 브라우저에 url 입력 후 콘텐츠 렌더링까지의 프로세스
브라우저에 url을 입력시, 다음과 같은 과정을 거쳐 원하는 페이지에 접근할 수 있다. 브라우저에 url 입력 웹사이트를 호스팅하는 웹 서버의 위치 조회 웹 서버에 연결 호스팅 페이지를 가져오기 위한 요청 전송 서버의 응답 페이지의 렌더링(HTML, CSS, Javascript) 브라우저에 url 입력 웹사이트를 호스팅하는 웹 서버의 위치 조회 브라우저에 원하는 도메인을 입력하고 사이트로 접속을 하게 되면, DNS(Domain Name System)에 의해 해당 웹사이트를 호스팅하고 있는 웹서버의 IP 주소를 조회할 수 있다. DNS는 복잡하고 매우 빨라야 하기 때문에, 웹 브라우저 사이의 서로 다른 계층과 다양한 위치에 임시로 저장된다. 이를 캐시라 부르며, 웹 브라우저는 DNS 기록을 찾기 위해 우선..