프론트엔드 개발

아래 예제에는 NextJs 안에서 getServerSideProps 안에서 one, two, three까지 3개에 api에 요청하여 데이터를 가져오고 있습니다. 가져오는 데이터의 크기가 크지 않다면 이렇게 사용할 수 있지만, 가져오는 데이터의 크기가 크거나, 3개의 api요청이 아닌 1000개의 api요청 같을 때는 느려질 수 있습니다. 어떻게 고칠 수 있을까요? example) export const getServerSideProps = async function (ctx) { const one = await fetchJson(`${process.env.NEXT_PUBLIC_ENV_VARIABLE}/api/~`, { method: 'GET', }); const two = await fetchJson(`..

이번에 새로산 m1 pro 에서 homebrew 설치하다 보면 Warning 이 나타났는데요. command에서 brew 명령어를 사용할 수 없었습니다. 간단하게 따라하면서 고쳐보겠습니다. Warning을 자세히 보면, Next Steps에 두 줄을 커맨드에 add 하라고 나와있습니다. Warning 해결하는 법 1. homebrew가 설치가 되어있지 않다면, - homebrew 설치: https://brew.sh/index_ko /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. 아래 명령어 한줄씩 입력 echo 'eval "$(/opt/homebrew/bin/brew shel..

바로 전에, primitive type과 reference type의 차이점을 메모리에 어떻게 할당되는지 알아보았습니다. 오늘은 referenct type에서 객체를 복사할 때 얕은 복사와 깊은 복사의 차이점을 공부해보겠습니다. primitive type의 값을 복사할 때는, 다른 메모리에 할당하기 때문에 원래의 값과 복사된 값이 서로에게 영향을 미치지 않습니다. const age = 29; let nextYearAge = age; nextYearAge += 1; console.log(age); // 29 console.log(nextYearAge); // 30 reference type의 값을 복사할 때는, 선언된 변수의 주소가 객체의 주소를 가리키고 있기 때문에, 아래와 같습니다 const me = ..

웹팩을 공부하면서, 공식 홈페이지에서 Core Concepts부분을 번역하였습니다. webpack Core Concepts: Entry Output Loaders Plugins Mode Browser Compatibility Entry Webpack이 내부 *dependency graph 구축을 시작하기 위해 사용해야 하는 모듈을 나타냅니다. Webpack은 entry(진입점)이 (직간접적으로) 의존하는 다른 모듈과 라이브러리를 알아낼 것입니다. 기본적으로 값은 ./src/index.js이지만 Webpack 구성에서 항목 속성을 설정하여 다른(또는 2개 이상의 entry)을 지정할 수 있습니다. 예시, webpack.config.js module.exports = { entry: './path/to/my..

React를 사용할 때, CRA로 부르면 너무 잘 구성되어있는 webpack에 대한 이해가 부족하였는데 직접 바닐라 js에서 환경을 구축해보고, 웹팩에서 사용되는 용어를 정리하고자 작성하였습니다. webpack이란? 최신 JavaScript 애플리케이션을 구축하고 있다면 "webpack"이라는 용어를 들어본 적이 있을 것입니다. Webpack은 JavaScript 응용 프로그램을 위한 정적 모듈 번들러입니다. 응용 프로그램에서 모든 코드를 가져와 웹 브라우저에서 사용할 수 있도록 합니다. Webpack은 앱에서 코드가 어떻게 사용되는지에 따라 코드를 분리하며, 이러한 모듈식 책임 분류를 통해 코드를 훨씬 쉽게 관리, 디버그, 확인 및 테스트할 수 있습니다. 모듈 번들러란? 웹 애플리케이션을 구성하는 자원..

Jest 공식 홈페이지를 보고, 번역하면서 작성하였습니다 Jest 라이브러리 설치 1) yarn을 이용 yarn add --dev jest 2) npm을 이용 npm install --save-dev jest 테스트 파일 생성 파일 위치 : 테스트할 파일이 있는 폴더 내 폴더 이름 : __test__ 파일 이름 : 파일 이름.test.js 또는 파일 이름.spec.js 테스트 코드 작성 두 개의 숫자를 더하는 가상 함수에 대한 테스트를 작성하는 것으로 시작해 보겠습니다. 먼저 sum.js 파일을 만듭니다. sum.js function sum(a, b) { return a + b; } module.exports = sum; sum.test.js const sum = require('./sum'); test..

전 글 에서는 TDD를 알아보게 되었는데, 테스팅 라이브러리 중 요즘 핫하고, 나중에 react와 typescript에서도 적용할 수 있는 Jest에 대해서 알아보겠습니다. 이번 시간은 간단하게 알아보고, 다음에는 실습을 직접 해보겠습니다! Jest란 Jest는 단순성에 중점을 둔 페이스북에서 만든 자바스크립트 JavaScript 테스팅 프레임워크입니다. Babel, TypeScript, Node, React, Angular, Vue 등을 사용하는 프로젝트에서 작동합니다! Jest 특징 zero config Jest는 대부분의 JavaScript 프로젝트에서 구성 없이 즉시 사용할 수 있도록 하는 것을 목표로 합니다. snapshots 큰 물체를 쉽게 추적하는 테스트를 만드십시오. 스냅숏은 테스트와 함께..

과제를 준비하면서 TDD 처음 접해보았는데 TDD란 무엇이고, 어떻게 적용하면 될지 공부해야 할 필요성을 느꼈습니다. TDD란, TDD(Test-Driven-Development) '테스트 주도 개발' 소프트웨어 개발 방법론 중의 하나로, 반복 테스트를 이용한 소프트웨어 방법론으로, 작은 단위의 테스트 케이스를 작성하고 이를 통과하는 코드를 추가하는 단계를 반복하여 구현합니다. TDD 의 3가지 절차 RED - 실패하는 테스트 생성. - 실패하는 테스트 케이스를 만들 때는 프로젝트의 전체 기능에 대하여 처음부터 모든 테스트 케이스를 작성하는 것이 아니라, 지금 가장 먼저 구현할 기능 하나씩 테스트 케이스를 작성합니다. GREEN - 테스트에 통과하는 코드 작성 - 우리가 작성하는 실패하는 테스트 케이스를..