코드로 대화하기

2022년 꿈만같은 1년이였다. 생각하지 못했던 일들이 일어났고, 좋은 분들을 만났다. 소중한 추억들을 남기고자 회고를 작성해본다. 안녕, 나의 첫 회사 첫 회사에서 퇴사를 하였다. 처음부터 직접 만들어나간 팀을 떠나려니 정이 많이 들었고 아쉬웠지만 개발과 성장에 대한 욕망이 너무나도 강했다. SI 회사에서 단순히 프로젝트만 납품하는것이 아닌 지속 가능한 서비스를 만들고 싶었다. 직접 만든 제품이 사용자에게 어떤 영향을 끼치는지, 어떤 점을 개선해야 하는지 알고 싶었다. 하지만 SI 특성상 내 욕망을 충족시키기에 어려웠다. 고민 끝에 이런 생각들을 회사와 솔직하게 논의하였고 퇴사를 할 때쯤 대표님께서도 응원을 해주셨다. 그렇게 1년간의 첫 회사 생활이 끝났다. 이직 아쉬움을 뒤로한채 바로 이직 준비를 하..

안녕하세요! 오늘은 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. 타입을 정의하지 않는다...

안녕하세요! 오랜만에 제 이야기를 해보려고 합니다. 3월 11일 퇴사 후 5월 16일 새로운 회사에 입사하였습니다. 다른 이직 회고 글들을 찾아보았는데요. 저는 회사를 하나씩 리뷰하기보다는 전체적인 이직 과정을 말씀드리려하려 합니다. 입사 지원 포트폴리오 사이트는 따로 만들지 않았고 노션으로 이력서를 만들어 지원하였습니다. 이전 글에서 처음 취업을 할 때는 100곳 이상 무지성으로 입사 지원을 했다고 말했었는데요. 이번 이직은 아래 기준을 정하여 꼭 가고 싶은 회사만 지원하였습니다. 1. 서비스 회사에 가서 하나의 서비스를 깊게 파고들고 싶다. - si 회사에서 정말 많은 것을 배웠고 소중한 경험들을 하였지만, si 특성상 심도 깊은 개발은 불가능하다고 판단하였습니다. - 제작한 프로젝트가 사람들에게 어..

안녕하세요! 오늘은 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 가 그 대표적인 예입니다. ..