코드로 대화하기

안녕하세요! 오늘은 typeof Array[number]에 대하여 알아보겠습니다. 최근에 이직을 하고 정신이 없어서 블로그 글도 못 올리고 1일 1 깃도 못했네요. typeof Array[number]? const names = ["Song", "James", "Mike"] as const; type Name = typeof names[number]; // type Name: "Song", "James", "Mike" 패턴은 위와 같이 생겼는데요. Name 타입을 정의할 때 유니온 타입을 사용하여 Song, James, Mike를 중복해서 적지 않은 것을 확인할 수 있습니다. 문제점과 패턴에 대해 자세히 살펴보겠습니다. 문제점 만약 이 방식을 사용하지 않으면 어떻게 될까요? 1. 타입을 정의하지 않는다...

안녕하세요! 오늘은 pre-rendering과 data fetching에 관련된 지식들을 알아보겠습니다. Pre-rendering? nextjs에서 가장 중요한 개념 중 하나인 Pre-rendering을 먼저 얘기해보겠습니다. nextjs는 클라이언트 측에서 자바스크립트로 모든 작업을 실행하는 대신 각 페이지에 대한 HTML을 미리 생성하는데 이것이 pre-redering(사전 렌더링)입니다. 사전 렌더링을 하면 렌더링 성능과 SEO가 향상됩니다. * 기본적으로 next.js는 모든 페이지를 사전 렌더링 합니다. 그림을 통해 더 자세히 알아보겠습니다. Pre-rendering을 하지 않으면, 초기에는 렌더링이 되지 않았다가 자바스크립트가 로드되면 페이지 요소들이 채워집니다. 반면 Pre-rendering..

안녕하세요! 이전 글에서 다이나믹 라우팅에 대해 살펴보았는데요. 오늘은 넥스트에서 페이지 전환할 때 사용하는 방법인 Link, Router에 대하여 알아보겠습니다. 페이지를 이동할 때 a태그를 사용한다면 전체 새로고침이 되며 다시 정보들을 새롭게 가져오게 됩니다. 이는 흰 화면이 보일 수도 있고 매번 통신을 새롭게 하다 보니 사용자 경험 측면에서도 떨어집니다. 1. Link import Link from "next/link"; ... // path item name // object item name * Link 태그에 href 속성을 추가하여 가고자 하는 주소를 넣습니다. (a 태그의 href와 동일합니다.) * 안쪽에는 a 태그로 감싸줍니다. * className과 같은 속성들을 a 태그에 추가합니다..

안녕하세요! 오늘은 Next.js의 Dynamic Routes, Error Page에 대하여 알아보겠습니다. 리액트에서는 react-router-dom을 설치하고 여러 세팅들을 하였습니다. 반면 넥스트는 폴더와 파일 단위로 라우팅을 합니다. pages 안에 있는 폴더와 파일들을 읽어 라우팅을 하고 url 주소가 생성됩니다. 1. pages, dynamic routes pages └── about.tsx -> localhost:3000/about pages 폴더안에 about.tsx가 있다면 따로 더 설정할 필요 없이 url 주소는 "localhost:3000/about" 이 됩니다. pages ├── detail │ └─ [id].tsx -> localhost:3000/detail/1, localhost..

안녕하세요! 오늘은 Next.js의 _app과 _document에 대하여 알아보겠습니다. next.js를 처음 설치하면 pages 폴더 안에 _app파일이 보이실 겁니다. _document가 없을 경우 따로 만드시면 됩니다. 저는 타입스크립트여서 .tsx 입니다. 1. _app 가장 먼저 실행되는 컴포넌트로, 모든 페이지는 _app을 통해 실행됩니다. 다음과 같은 특성들이 있습니다. 1. 페이지가 변경되어도 레이아웃과 상태 값을 유지합니다. 2. "componentDidCatch"를 통해 에러 핸들링이 가능합니다. 3. 페이지에 추가적인 데이터를 삽입할 수 있습니다. 4. Global CSS는 이곳에 추가합니다. 5. 헤더와 푸터같이 공통적으로 사용하는 레이아웃은 이곳에 추가합니다. import '../..

안녕하세요. 오늘은 nextjs를 시작해보겠습니다. 타입스크립트로 프로젝트를 진행하겠습니다. 1. 초기 세팅 설치 npx create-next-app --ts # or yarn create next-app --typescript 명령어를 입력하면 "What is your project named?"와 함께 프로젝트 이름을 입력하라고 나옵니다. 실행 # 개발자 모드 npm run dev # 릴리즈 모드 npm run build npm run start ESLint, Prettier세팅 ESLint와 Prettier 세팅을 해줍니다. 저번 글에 자세한 설명이 있으니 참고해주시면 감사하겠습니다. .eslintrc module.exports = { root: true, env: { browser: true, n..

안녕하세요. 오늘은 Next.js에 대해 알아보겠습니다. Next.js? Next.js란 Verceld에서 만든 React 프레임워크입니다. SSR, SEO 등 많은 특징들을 가지고 있습니다. 쫌 더 자세히 알아보겠습니다. 1. Server Side Rendering (SSR) 넥스트의 가장 대표적인 특징은 SSR입니다. 리액트는 CSR로 SSR에 비해 초기 페이지 로딩이 오래 걸리고 SEO가 어렵다는 단점이 있습니다. 반면 SSR은 서버에서 완성된 HTML을 보내주기 때문에 렌더링 속도가 빨라 로드 시간이 짧고 SEO가 좋습니다. CSR보다 서버에 부하가 많고 페이지 이동 시 깜빡임 현상이 있을 수 있다는 단점이 있습니다. 2. Search Engine Optimization (SEO) 1번 특징에서 ..

npm install --save-dev --save-exact prettier 안녕하세요! 오늘은 ESLint, Prettier에 대해 알아보겠습니다. "어떻게"보다 "왜"에 집중해보겠습니다. 왜 ESLint, Prettier를 써야 하는 걸까요? 프로젝트를 하다 보면 팀 단위로 진행을 할 때가 많습니다. 그럴 때 깔끔하고 통일된 코드를 위해 규칙을 정합니다. 코드 컨벤션을 만드는 것이죠. ESLint는 코드 퀄리티를 보장하며, Prettier는 코드 스타일을 보장합니다. ESLint? 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 품질로 작성하도록 도와줍니다. 외부에 공개되어 많은 개발자가 사용 중인 Airbnb Style Guide, Google Style Guide 가 그 대표적인 예입니다. ..

안녕하세요 오늘은 @react-three/fiber의 useFrame을 사용하여 geometry에 애니메이션을 추가해 보겠습니다. 애니메이션 Vanila JS에서는 requestAnimationFrame을 사용했지만 react에서는 useFrame을 사용합니다. y 축으로 계속 회전하는 애니메이션입니다. import { useFrame } from '@react-three/fiber'; import React, { useRef } from 'react'; const ReactModel = (props) => { const modelRef = useRef(); useFrame(() => { modelRef.current.rotation.y += 0.01; }) return( ) }; export defau..

안녕하세요. 오늘은 개발을 하면서 빼놓을 수 없는 비동기에 대해서 알아보겠습니다. Event Loop에 대한 지식이 있다면 이해하기 더 쉬우실 겁니다. 동기? 비동기? Javascript에서의 비동기를 알아보기 전에 동기와 비동기의 차이점을 아시나요? 동기 서버에 요청을 보냈을 때 응답이 돌아와야만 다음 동작을 실행합니다. 한 번에 한 가지씩 진행되는 것이죠. 비동기 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것입니다. Javascript 비동기 자바스크립트에서 비동기가 필요한 이유는 서버로 데이터를 요청했을 때 모든 코드를 한줄한줄 기다렸다가 실행을 할 수 없기 때문입니다. 자바스크립트에서 비동기를 처리하는 방법 세 가지를 소개해드리겠습니다. 1. Callback 콜백..