profile
개발자로 성장하기
post-thumbnail

[Next js] Route 이해하기

React 프로젝트를 Next js로 마이그레이션 하면서 느꼈던 차이점은 라우팅하는 방법이였다. Next js는 pages 폴더 내의 폴더, 파일명으로 자동으로 path가 설정되기 때문에 이를 먼저 이해하고 디렉토리 구조를 결정해야 한다. React와의 다른 라우팅 방

2022년 6월 19일
·
0개의 댓글
·
post-thumbnail

[Next js] SSR, SSG, ISR 이해하기

시작하며 현업에서 프론트엔드 개발자로 일한지 거의 3개월이 넘어가면서 그동안 사용한 Next js에 대해 정리해보려고 한다. 기존에 javaScript + React로 프로젝트를 진행했었고 현업에서는 typeScirpt + Next js를 주로 사용했는데 typeSci

2022년 6월 16일
·
0개의 댓글
·
post-thumbnail

누구나 자료구조와 알고리즘 #7

19장 공간 제약 다루기 공간 복잡도의 빅 오 책의 전반에서 다양한 알고리즘의 효율성을 분석하면서 오로지 알고리즘이 얼마나 빠른가, 즉 시간 복잡도에만 초점을 맞췄다면 또 다른 척도로 얼마나 많은 메모리를 소모하는가인 공간 복잡도가 유용할 수 있다. 공간복잡도

2022년 6월 4일
·
0개의 댓글
·
post-thumbnail

누구나 자료구조와 알고리즘 #6

17장 트라이(trie)해 보는 것도 나쁘지 않다. 트라이 트라이(trie)는 자동 완성 같은 텍스트 기반 기능에 이상적인 자료구조로 추출(retrieval)이라는 단어에서 유래되었으나 트리(tree)와의 혼동을 막기 위해 트라이로 발음한다. 트라이도 트리처

2022년 5월 29일
·
0개의 댓글
·
post-thumbnail

누구나 자료구조와 알고리즘 #5

14장 노드 기반 자료 구조 연결 리스트 연결 리스트는 항목의 리스트를 표현하는 자료구조로, 메모리 곳곳에 흩어진 데이터(노드)들이 다음 노드의 메모리 주소를 포함하고 있는 구조이다. Node 클래스에 노드의 값과 다음 노드로의 링크인 next_node를 저장

2022년 5월 26일
·
0개의 댓글
·
post-thumbnail

누구나 자료구조와 알고리즘 #4

11장 재귀적으로 작성하는 법 재귀 카테고리 : 반복실행 추가 인자 넘기기 재귀 카테고리 : 계산 factorial(6) = 6 * factorial(5) 인것 처럼 호출되는 재귀 함수를 하위 문제라고 부르며 하위 문제를 호출하면 계산하는 방식을 하향식

2022년 5월 19일
·
0개의 댓글
·
post-thumbnail

누구나 자료구조와 알고리즘 #3

8장 해시 테이블로 매우 빠른 룩업 해시 테이블 해시 테이블은 키(key), 값(value)이 쌍으로 이루어진 값들의 리스트로 조회할때 딱 한단계만 걸리므로 효율성이 O(1)이다. 해시 함수로 해싱 문자를 가져와 숫자로 변환하는 과정을 해싱(hashing)이

2022년 5월 14일
·
0개의 댓글
·
post-thumbnail

누구나 자료 구조와 알고리즘 #2

5장 빅 오를 사용하거나 사용하 않는 코드 최적화 선택정렬 0번째 인덱스에 있는 값과 그 다음 값들을 비교하여 가장 작은 값과 0번째 인덱스의 값과 자리를 바꾼다. 1번 과정을 1번째, 2번째 ... n-1번째 인덱스(길이가 n인 배열)까지 반복한다. 원

2022년 5월 12일
·
0개의 댓글
·
post-thumbnail

누구나 자료 구조와 알고리즘 #1

비전공자 개발자로서 CS 지식이 부족하다고 항상 생각해왔고, 아직 실무에서 깊은 CS 지식이 필요하지는 않지만 추후에 최적화나 성능 관련 이슈를 해결하려면 기본이 되어야 한다고 생각한다. 이런 생각을 팀장님께 말씀드렸더니 실무에 적용할 수 있는 자료구조와 알고리즘 관련

2022년 5월 8일
·
0개의 댓글
·
post-thumbnail

[React] Suspense란?

Suspense는 아직 렌더링이 준비되지 않은 컴포넌트가 있을때 로딩 화면을 보여주고 로딩이 완료되면 해당 컴포넌트를 보여주는 React에 내장되어 있는 기능이다.리액트 공식문서(https://ko.reactjs.org/docs/react-api.htmlSPA

2022년 5월 7일
·
0개의 댓글
·
post-thumbnail

Polyfill과 Transfile

폴리필은 브라우저에서 지원하지 않는 코드를 사용 가능한 코드 조각이나 플러그인으로 변환한 코드를 의미한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다.자바스크립트는 각 버전별로 지원하는 메소드가 상이하고 브라

2022년 5월 1일
·
0개의 댓글
·
post-thumbnail

로컬 호스트 서버 배포하기 (ngrok, localtunnel)

개발을 하다보면 다른 환경에서 테스트가 필요한 경우가 있다. 다른 운영체제나 브라우저에서 기능이 정상적으로 작동하는지, 모바일 환경에서 반응형 웹페이지가 의도한 대로 보여지는지를 확인할 때 개발 서버 배포가 구현되어 있지 않은 경우 실제 환경에서 테스트가 불가능하다.개

2022년 4월 30일
·
0개의 댓글
·
post-thumbnail

[React] 에러 바운더리(Error Boundary)

에러 바운더리는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트로 에러 경계는 렌더링 도중 생명주기 메서드 및 그 아래에 있는 전체 트리에서 에러를 잡아낸다.(React 공식문서 https&

2022년 4월 23일
·
0개의 댓글
·
post-thumbnail

MSW로 Mocking 하기

mock이란 가짜의라는 뜻으로 프로그래밍에서 mocking은 실제 객체를 제대로 구현하기 어려운 경우에 가짜 객체를 만들어 사용하는 것을 말한다.프론트엔드에서 서버가 구현되기 전에 요청/응답이 필요한 경우 mocking을 통해 제대로 구현이 되는지 확인할 수 있다.서버

2022년 4월 22일
·
0개의 댓글
·
post-thumbnail

Mac OS 단축키 리스트

단축키 정리 창 컨트롤 |단축키|기능| |:-|:-| |command + m|창 최소화| |command + tab으로 선택 후 -tab +alt |최소화 창 복구| |command + t|새 탭| |command + shift + t|마지막으로 닫은 탭 복구|

2022년 4월 20일
·
0개의 댓글
·
post-thumbnail

[TypeScript 독학] #10 이펙티브 타입스크립트(4)

시작하며 7장 코드를 작성하고 실행하기 타입스크립트 기능보다는 ECMAScript 기능을 사용하기 객체를 순회하는 노하우 DOM 계층 구조 이해하기 정보를 감추는 목적으로 private 사용하지 않기 소스맵을 사용하여 타입스크립트 디버깅하기 8장 타입스크립

2022년 4월 17일
·
0개의 댓글
·
post-thumbnail

맥북 셋업

설치 완료 후 터미널에 나오는 커맨드 라인 두 줄 실행.zshrc 실행 후 아래 내용 추가 후 저장vi 단축키i : 삽입esc : 편집모드에서 나가기:wq+ enter : 저장 후 나가기아래처럼 테마 변경 후 저장터미널 종료 후 재시작 시 테마 설정 마법사 시작폰트 설

2022년 4월 15일
·
0개의 댓글
·
post-thumbnail

[TypeScript 독학] #9 이펙티브 타입스크립트(3)

지난글에 이어서 이펙티브 타입스크립트의 5,6장의 내용을 정리하였다. 이번 챕터에는 any에 대한 내용과 타입스크립트가 어떻게 타입을 추론하는지에 대한 내용이 담겨 있고 이를 적절하게 활용하기 위해서 어떻게 코드를 작성해야 하는지에 대한 내용이 포함되어 있다.책의 후반

2022년 4월 10일
·
0개의 댓글
·
post-thumbnail

[TypeScript 독학] #8 이펙티브 타입스크립트(2)

시작하며 지난글에 이어서 이펙티브 타입스크립트란 책을 읽으면서 중요하다고 생각하는 내용을 간단하게 정리해보려고 한다. 3장 타입 추론 타입을 정의하면 변수가 선언되는 시점에 잉여 속성체크가 작동한다. let과 const의 타입 추론 let은 string 타입으로

2022년 4월 2일
·
0개의 댓글
·
post-thumbnail

[TypeScript 독학] #7 이펙티브 타입스크립트(1)

시작하며 프론트엔드 개발자로 입사를 하고 가장 먼저 한 일은 타입스크립트 공부였다. 회사에서 진행 중인 프로젝트는 모두 타입스크립트와 리액트 기반였고, 이전에 타입스크립트에 대해 공부했지만 실제 프로젝트에서 사용하기에는 부족했다. 이펙티브 타입스크립트라는 책을 추천받아

2022년 3월 30일
·
0개의 댓글
·