유령이 나오는 젤리하우스

STO 번역

Prettier를 vscode extension으로 사용할 때와 npm 패키지로 사용할 때의 차이점?

원문 https://stackoverflow.com/questions/61925900/what-is-the-difference-between-installing-prettier-as-a-npm-package-and-installi what is the difference between installing prettier as a NPM package and installing prettier extension in VS Code I'm new to web programming and I learned that we can type npm i -D prettier to install prettier as one of the devDependency and use it to format our code. T..

웹/React

[Next.js] Data Fetching의 방법들

한 줄 요약 Next.js는 4가지의 Data Fetching을 제공한다. 1. SSR 2. CSR 3. SSG 4. ISR 1. SSR SSR. (Server Side Render)는 말 그대로 서버에서 데이터를 패칭하여 화면을 그린다는 뜻이다. 서버 측에서 화면을 준비할 수 있다는 것은 React와 차별되는 Next만의 큰 장점인 만큼, 공식화된 방법을 통하여서만 수행할 수 있다. 이때 사용하는 함수가 getServerSideProps이다. export async function getServerSideProps() { return { props: { randoms: Math.round(Math.random() * 100) }, }; } export default function Home({ rand..

TIL

[예전 글 다시쓰기] .d.ts 파일이란?

과거에 썼던 글 https://spookyjelly.tistory.com/39 을 다시 쓴 글입니다. 0. 들어가는 말 약 1년 전에 d.ts 파일에 관해 글을 적었는데, 지금 와서 다시 읽어보니 글의 깊이가 없고 거의 위키 글을 복붙한 수준이라 다시 한번 작성합니다. 놀랍게도 저 글이 지금 제 블로그 인기 글 중 하나라는 건데, 계속 방치 해두고 있다가는 블로그의 신용을 마구 깍아 먹을 것 같습니다. 제대로 된 지식을 공유하고자 하는 목적과 블로그의 신용 회복이라는 두 마리 토끼를 잡기 위해 .d.ts 파일에 대한 지식이 어느 정도 쌓인 지금, 다시 한 번 .d.ts 파일에 대한 글을 써보려고 합니다. 1. d.ts 파일이 필요한 이유 .d.ts 파일은 JS 모듈을 TS에서도 사용할 수 있도록 타입만을..

웹/일반

[모던 프론트엔드 구성] 2. npm workspace로 각 패키지별 dep 설정하기

TLDR; 🦄-w 플래그로 각 패키지 별로 다른 버전의 라이브러리를 설치하여 운용할 수 있다🦄 🦄 각 패키지는 자신의 package.json에 선언된 종속성을 우선적으로 따라 간다.🦄 🦄 그러나, 모노레포는 컨테이너 개념이 아닌, 관심사의 분리에 촛점을 맞춘 개념이므로, 패키지 간 종속성 교환을 완전히 막을 수는 없다 🦄 Previously on lastest post... 지난 포스트에서는 npm workspace를 이용해서 각 모듈을 패키지화하여 하나의 저장소에 관리할 수 있는 모노레포 구조를 구현해봤습니다. 모노레포 구조를 가져가게 된다면, 의존성 지옥에 빠지는 일 없이, 개발자들이 각자의 관심사에만 집중할 수 있고, 작업환경의 통일로 데브옵스에서도 큰 이득을 얻을 수 있다고 했습니다. 그러나, 만..

웹/일반

[모던 프론트엔드 구성] 1. npm workspace로 모노레포 구현하기

TLDR; 🦄 npm workspace를 사용하여 모노레포를 구성해봅시다🦄 ✨Sample Code✨ https://github.com/SpookyJelly/workspace GitHub - SpookyJelly/workspace: study in workspace for own good study in workspace for own good. Contribute to SpookyJelly/workspace development by creating an account on GitHub. github.com Before we start npm workspace는 npm 7 버전 이상부터 사용할 수 있습니다. node.js LTS를 설치하셨다면 기본적으로 npm 8 버전이 설치되어있어 바로 시작하시는데 문..

웹/일반

[모던 프론트엔드 구성 ] 0. 모노레포의 개념과 구현 방법

TLDR; 🦄모노레포 구조란, 하나의 저장소에 여러개의 서브 프로젝트가 존재하는 환경으로, 관심사의 분리를 용이하게 할 수 있도록 하는 방법론이다. 🦄 모놀리식 애플리케이션 모노레포를 설명하기 앞서, 모놀리식 애플리케이션에 대한 설명을 잠시 하겠습니다. 모노리스 (Monolith) 라고도 부르는 이 아키텍쳐는 이름처럼 크고 거대한 하나의 대규모 구조로, 어플리케이션에 사용되는 모든 코드가 들어가있습니다. 거대한 아키텍처는 그 자체로 강건한 아키텍처를 빠르게 구축할 수 있다는 장점이 있었으나, 아이러닉하게도 프로젝트의 규모가 커지면 커질수록 생산성이 떨어지게 됩니다. 모놀리식 애플리케이션의 한계는 다음 3가지로 줄일 수 있습니다. 1. 사소한 수정에도 기나긴 빌드, 배포 시간을 가지게 된다. - 내부 컴포..

웹/일반

도와줘요!! Antd DatePicker에서 한글이 안나와요!!

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄 import 'moment/dist/locale/ko'🦄 🦄 import 'moment/locale/ko' 아님!!!🦄 🦄아주 황당한 일이 생겼으니 재미로 봐주세요🦄 본문 Dependency antd: ^4.19.5 moment: ^2.29.2 아시다시피, antd는 moment를 사용합니다. 모멘트가 사망선고가 내려진지 엉겁의 시간이 흘렀지만, 모멘트가 감히 사망할것이라 추측하지 못한 탓인지, 아니면 그간 정이 너무 들었던지는 몰라도 antd는 계속해서 moment를 사용하고 있습니다. API도 moment 객체를 기준으로 설명하고 있고요. 물론, 모멘트 사후 moment.js를 쓰는 Component를 Day.js로 바꾸는 방법도 소개하고 있는데, 이..

웹/React

JSX에서 list를 랜더링 하는 방식

한 줄 요약 🦄React는 Array와 같이 이더너블 한 객체 안에 있는 태그들을 인덱스 순서대로 차례차례 랜더링한다🦄 🦄이때, Virtual DOM에서 어떤 요소에 변화가 있는지 감지하기 위해 부여하는 안정적인 고유값이다🦄 빌드업 리액트를 사용하다보면, 동일한 타입을 가진 데이터들을 비슷한 모습의 컴포넌트로 랜더링 해야할 경우가 많다. 여러개의 컴포넌트를 렌더링 하기 위해서 리액트는 엘리먼트의 모음을 { } 사이로 낑겨넣어서 JSX에 포함시킬 수도록 해줍니다. 쇼핑몰 홈페이지에 보여질 품목 리스트를 화면에 그린다고 간주해봅시다. const items = [ {title:'노트북',price:'1000000',stock:12}, {title:'커피콩', price:'5000', stock:100}, {t..