유령이 나오는 젤리하우스

웹/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..

웹/일반

[모던 프론트엔드 구성] 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..

웹/일반

[Jest 입문] Jest를 왜 사용할까?? && Jest의 Matcher

작은 지식이라도, 하루에 하나씩. 한 줄 요약 🦄Jest는 페이스 북에서 관리하는 JavaScript 테스트 프레임워크이다.🦄 🦄Jest를 통해 개발자가 작성한 코드가 그 의도대로 동작하는지, 돌발상황에도 대처가 가능한지 확인할 수 있다.🦄 개요 앞서 말했듯, Jest는 페이스북이 만든 프론트엔드 테스트 프레임워크다. 테스트 프레임워크라고 하니 참 감이 안오는데, 말 그대로 코드가 제대로 동작하는 test를 위한 프레임워크라는 뜻이다. 사실 이전부터 Jest가 뭐하는 친구인지는 알고 있었고, 앞으로의 내 개발 커리어에 꼭 필요하다는 사실도 알고 있었지만 막상 별로 배우고 싶지는 않았다. 왜냐하면, 아직까지 이 친구의 필요성을 느끼지 못했기 때문이다. 비록 console.log 하나 하나 찍어가며 낑낑거리..

웹/일반

Javascript에서 ['10','10','10'].map(parseInt) 가 [1,NaN,3]인 이유

TL;DR 🦄자바스크립트가 너무 관대해서 벌어진 일이다.🦄 🦄매개변수를 받는 함수에 아무런 값도 넣어주지 않으면, JS는 자동으로 매개변수를 넣어준다🦄 본문 map이 뭐하는 함수인지도, parseInt가 뭐하는 함수인지도 다 알고 있겠지만, 그래도 다시 한번 하나 씩 살펴봅시다. map은 배열 내의 모든 요소에 대하여 주어진 함수를 호출한 후, 그 결과를 모아 새로운 배열을 만드는 메서드이다 parseInt는 문자열 인자를 숫자로 반환하는 함수이다. 이 정도야 기본 중의 기본이지만, 그럼 혹시 map의 3번째 매개변수는 무엇인지 아는가?? 아니면 parseInt의 2번째 매개변수에 대해서는 아시나요?? 잘 몰라도 괜찮다. 애초에 이 수수께끼가 그것들 때문에 생긴건 아니니까요 그래도 한번 공식 문서를 보고..