JavaScript

NextJS 공식문서로 공부하기 - Next.js 동작 원리

나의 NEXT.JS 입문기 사실 NextJS는 예전에 수강한 리액트 강의에서 블로그 만들기 수준으로 대강 다뤄본 경험은 있었지만 아직 제대로 공부해본 적은 없었다. 마침 진행하던 프로젝트도 끝난 상황이라 잘됐다 생각하여 시작해보기로 마음 먹었다. 따로 강의를 사서 볼까도 했지만, 워낙 NextJS팀의 공식문서가 잘 되어있다는 말을 많이 들었다. 이미 직접 프로젝트로 만들어보며 '우와!' 하는 것은 많이 해봤기 때문에 이번엔 동작 원리부터 제대로 공부해보려고 한다. 최근에 버전 13으로 올라가며 변한 부분도 많다고 들었는데 반영이 안 된 강의가 대부분인 것 같기도 했다. 아마 나만 볼 기록이 될 가능성이 크지만... 누군가 보신다면 부족한 공식문서 번역 + 제가 다시 이해하여 부족한 번역에 첨언한 내용이라..

JSDoc 페이지를 GitHub Page로 배포하기

JSDoc JSDoc's purpose is to document the API of your JavaScript application or library. - Use JSDoc JSDoc은 Javascript의 API Document를 간단하게 만들어주는 라이브러리이다. JSDoc 설치 및 사용 방법 JSDoc은 전역으로(globally) 설치해야한다. (경우에 따라서는 sudo가 필요할 수도 있다) npm i -g jsdoc 사용방법은 간단하다. 적용하기 원하는 변수나 함수 등 위에 /** */스타일의 주석을 작성하면 된다. /** This is a description of the foo function. */ function foo() { } 공식 문서에 자세한 사용법이 작성되어 있다. https..

[TypeScript] 타입스크립트 입문(6) - JSDoc, 유틸리티 타입, 모듈, 타입선언, 네임스페이스

타입스크립트 심화 JSDoc https://jsdoc.app 타입스크립트를 쓰지 않고도 타입을 선언할 수 있다! 타입스크립트에 없는 기능들도 구현 가능 문서화 및 배포도 가능! 유틸리티 타입 전역적으로 사용이 가능한 타입 변환 도구 이해하고 사용한다면 생산성을 증가시킬 수 있다 직접 만들고 직접 사용하면 이해도를 높일 수 있다! 모듈 타입스크립트도 자바스크립트 ES2015+처럼 모듈을 선언하여 사용이 가능하다.(ex. import & export) 모듈 선언이 없는 경우 전역 범위에서 사용 가능하도록 처리됨 3.8 버전부터는 타입 전용 선언 가능(import type & export type) 설정 혹은 CLI 지원 -> tsconfig / module -> tsc -module commonjs Some..

TIL#2 - 많은 사진을 import / 스타일드 컴포넌트 / 이벤트 버블링

특정 규칙이 있는 많은 사진을 불러 오기 인턴십 클론 코딩 활동 중, 댓글의 프로필 이미지를 랜더링 해야할 일이 생겼다. 일반적인 프로필이라면 그냥 JSON의 프로필 이미지 url을 땡겨오면 그만이겠지만 옥소폴리틱스는 특이하게도 유저의 성향과 응답에 따라 댓글의 프로필이미지가 달라졌다. 성향은 총 5개, 응답은 4개였으므로 총 20개의 이미지 파일 중에 골라 프로필 사진으로 띄워야 했다. 전부 import? 처음 떠올린 것은 20장 이미지를 전부 import한 뒤 원하는 키워드로 등록해서 img를 리턴하는 함수를 만드는 것이었다. 코드가 길어지는 것도 문제지만 수정사항이 생겼을 때 골치가 아파질 것이 너무 자명했다. import ans1-tribe1 from '../img/ans1-tribe1.png';..