프론트엔드 개발

자료구조(data structure)는 컴퓨터 과학에서 효율적인 접근 및 수정을 가능케 하는 자료의 조직, 관리, 저장을 의미한다. 자료 구조는 데이터 값의 모임, 또 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수나 명령을 의미한다. - 위키백과 자료구조의 종류 선형 구조 : 한 종류의 데이터가 선처럼 길게 나열된 자료구조. 배열 해시 스택 큐 덱 연결리스트 비선형 구조 : 선형 구조가 아닌 모든 자료구조. i번째 값을 탐색한 뒤의 i+1이 정해지지 않는 구조 그래프 트리 자바스크립트의 자료구조 배열(Array) 배열은 대부분의 프로그래밍 언어에서, 가장 간단하고 가장 많이 쓰이는 자료구조형이다. 일반적인 배열은 인덱스로 배열 요소에 빠르게 접근할 수 있습니다. 하지만 특정 요소를 탐색하거나 ..

Big-O란 무엇인가? 알고리즘 성능을 수학적으로 표기해주는 표기법 시간과 공간 복잡도를 표현 데이터나 사용자의 증가율에 따른 알고리즘의 성능을 예측하는게 목표, 상수와 같은 숫자들은 모두 1이 된다. 시간복잡도 시간복잡도란 알고리즘이 문제를 해결하기 위한 시간(연산)의 횟수를 말한다. 알고리즘을 평가하는데 있어 수행시간과 메모리 사용량을 평가기준으로 두는데 수행시간에 해당하는 것이 시간 복잡도 Time Complexity 메모리 사용량에 해당하는 것이 공간 복잡도 Space Complexity 연산 횟수를 카운팅 할때 3가지 경우가 있다. 최선의 경우 Best Case 최악의 경우 Worst Case 평균적인 경우 Average Case 빅오표기법 예제 O(1) constant time 입력 데이터 크..

'프론트엔드 개발환경의 이해'강의를 듣고 정리를 하였는데, 이해를 바탕으로 직접 webpack과 babel을 세팅을 해보고자 합니다. 기존에는 CRA를 이용하여 React를 쉽게 바로 쓸 수 있는 장점이 있었기 때문에 사용하였습니다. CRA를 이용하면 Webpack 및 Babel 등 설정하기 까다로운 것들을 편하게 쓸 수 있었는데, 나중에 이러한 구성요소들을 변경을 하고자 할 때 이해해야 할 수 있기 때문에 직접 리액트 환경을 Webpack을 통해서 구축해보는 시간을 갖도록 하겠습니다. React + Typescript + Webpack 구성 먼저 package manager는 이 글을 참고하여 yarn으로 진행하도록 하겠습니다. node 14.17.3, yarn: 1.22.17 버전으로 진행하였습니다...

Webpack과 Bundle.js Webpack은 css,js,file 등을 하나의 파일로 만드는 만큼 용량이 클 수 밖에 없습니다. 어떻게 이 용량을 줄일 수 있는 지 알아보겠습니다. 성능 측정 PageSpeed Insights 측정 도구 Tool: @next/bundle-analyzer cmd yarn add @next/bundle-analyzer next.config.js const withPlugins = require('next-compose-plugins') const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true', }) module.exports = withPlugin..

유튜브 채널 우아한 Tech에서 본 영상을 다시 글로 보기 위해 만들었습니다. 이미지와 내용 출처는 하단에 있습니다. 목표 상태관리란 무엇인가? 반응형 프로그래밍이란 무엇인가? 상태(state)란? 변화하는 데이터 UI에 동적으로 표현되는 데이터, 사용자에 action에 따라서 변경될 수 있는 컴포넌트의 부분, 자바스크립트의 객체 상태관리란? 변화하는 데이터관리 여러 컴포넌트 간에 데이터 전달과 이벤트 통신을 한곳에서 관리하는 것 상태관리는 왜 필요할까? 데이터가 바뀌어도 페이지가 렌더링 되지 않게 하기 위해 상태가 너무 복잡하기 때문이다, 상태들이 복잡하게 얽혀있다면, 상호간에 의존성이 많아지게 되어 UI가 어떻게 변하는지 알기 어려울 수 있기에 효율적으로 관리해야한다. 컴포넌트는 각각 다르지만, 사용..

아래 예제에는 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(`..

유튜브 채널 우아한 Tech에서 본 영상을 다시 글로 보기 위해 만들었습니다. 이미지와 내용 출처는 하단에 있습니다. 이번 내용은 실행컨텍스트 구성 중 Record와 Outer에 집중하여 보겠습니다. 목차 1. Record(EnvironmentRecord)로 JS 호이스팅 이해하기 2. Outer(Outer Environment Reference)로 JS 스코프체이닝 이해하기 3. Execution Context 정리 1. Record로 JS 호이스팅 이해하기 console.log(laptop); // undefined var laptop = "macbook"; console.log(laptop); // macbook 위 예제 첫번째 줄에서 호이스팅이 발생하여 undefined를 출력되는 것을 볼 수 ..

이번에 새로산 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..