profile
풀스택 개발자를 지향하는 개발자

[Next js] getInitialProps, getStaticProps

우선 getInitialProps, getStaticProps 2가지 기능은 모두 pre-rendering가 필요한 상황에서만 사용하는 것이 좋습니다.next 에서 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해서 pre-rendering을 수행합니다.p

2022년 5월 28일
·
0개의 댓글

Storybook 이용해보기!

Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구입니다.Storybook을 사용하면 실제 웹 어플리케이션의 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능합니다.그 외에도 컴포넌트의 문서화 도구로도 사용이 가능합니다.스토리북 설치UntitledU

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

React - 불변성

불변성이란?불변성은 값이나 상태를 변경할 수 없는 것을 의미합니다원시타입? 참조타입?원시타입은 불변성을 가지고있음 그렇다면 원시타입은 값을 변경할 수 없는 것일까요?위 예제를 실행해보면 string의 변수 값은 hello 에서 bye로 변경되었습니다.그런데 자세하게 살

2022년 5월 11일
·
0개의 댓글

[React] Atomic Design

Design Pattern 디자인 패턴은 소프트웨어를 설계할 때 자주 발생하는 고질적인 문제들이 또 발생했을 때 재사용할 수 있는 해결책입니다. 오늘은 React에서 자주 사용되는 Design Pattern중 하나인 Atomic Design Pattern을 알아보도록

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

Svelte - Todo List 만들어보기

우선 프로젝트 세팅을 해줍니다.그리고 svelte에서 scss를 사용하기 위하여 세팅을 해줍니다.rollup.config.js에서 다음과 같이 수정을 해줍니다.svelte에서는 상태관리 라이브러리를 따로 지원하지않고, 내부에 포함되어 있습니다.store를 이용하여 일정

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

Svelte 알아보기

svelt는 2016년 출시한 프론트엔드 프레임워크입니다.또한 Svelte는 자바스크립트 설문조사 State of JS 2020의 프론트엔드 프레임워크 카테고리에서 만족도·관심도 부문 1위로 선정되었습니다.Write less code코드가 많은수록 애플리케이션의 버그는

2022년 4월 18일
·
0개의 댓글

[JS] - Map, Filter, reduce

Map, Filter, Reduce 모두 ES6에서 추가된 메서드입니다.모두 배열에서 사용을하며 각 요소들을 파라미터로 받아 작동 합니다.map은 배열의 각 요소에 대하여 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환합니다.예를 들어 배열에서 각 요소의 제곱 값

2022년 4월 9일
·
0개의 댓글

ESLint는 무엇일까?

ESLint 에서 ES는 EcmaScript를 의미하고 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다. 즉 ESLint는 JS문법 중 에러가 있는 곳에 표시를 달아놓는 도구를 뜻합니다.ESLint는 사용자가 직접 정의한대로에러를 검사하고 볼 수 있습니다

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

[React] 성능 최적화

React에서는 컴포넌트가 구독하고 있는 상태 값이나 부모로부터 받은 Props가 변한다거나 부모 컴포넌트가 리렌더링되면 컴포넌트가 리렌더링이 된다.React는 수 많은 컴포넌트들이 부모-자식 관계로 얽혀있는데 이 부분에서 불필요한 렌더링이 일어난다면 이를 방지해줘야한

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

[JavaScript] Generator

Generator function은 사용자가 원할 때 값을 꺼내올 수 있습니다.실행을 잠시 멈췄다가 나중에 다시 접근할 수 있습니다.즉 반복 가능한 iterator를 반환하며, 한번의 호출에 의해서 함수의 실행이 완료되지 않고 사용자의 요구에 따라 정지될 수도 있고 다

2022년 2월 23일
·
0개의 댓글

TypeScript

JavaScript는 동적 타입 언어로 타입을 따로 지정하지 않습니다.그에 반해 TypeScript는 JavaScript에 타입을 부여한 JavaScript의 확장된 언어입니다.컴파일 언어, 정적 타입 언어자바스크립트는 동적 타입의 인터프리터 언어로 런타임에서 오류 발

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

Github + S3 + Cloud Front 배포하기 - 2

클라우드 프론트를 생성해줍니다.원본 도메인을 정적 웹 호스팅을 한 s3의 도메인을 입력합니다.이름 부분에도 도메인을 입력해줍니다ㅣ.OAI사용을 선택합니다.새 OAi를 생성하고 버킷 정책 업데이트를 체크합니다.Origin Shield 활성화는 캐싱 인프라에 CloudF

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

Github + S3 + Cloud Front 배포하기 - 1

Cloud Front는 CDN (Contents Delivery Network) 서비스입니다. 이미지나 동영상 같은 정적 파일들을 서비스하는데 서버가 있는 데이터 센터에서 서비스를 하게되면 네트워크 성능이 저하되는 문제가 있기때문에 전 세계의 여러 데이터 센터에 서버를

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

[CI/CD] Github action, code deploy로 배포 자동화[1]

Github action은 workflow를 자동화할 수 있도록 도와주는 도구입니다. 테스트, 빌드, 배포 등의 다양한 작업들을 자동화하여 처리를 합니다.우선 github action을 적용할 수 있는 방법은 두가지가 있습니다.프로젝트 폴더안에 .github/workf

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

Next js를 알아보자

Next js는 SPA(Single Page Application)으로 구성되어 있는 React의 SSR(Server Side Rendering)을 쉽게 구현할 수 있게 도와주는 프레임워크입니다. React에서도 SSR이 구현이 가능하긴 하나 개발환경을 구현하는 것이

2022년 1월 9일
·
0개의 댓글

GraphQL 이란?

GraphQL은 SQL(Structed Query Language)와 마찬가지로 쿼리 언어입니다.SQL이 데이터베이스에서 저장된 데이터를 효율적으로 가져오는 것이 목적이라면 GraphQL은 클라이언트가 데이터를 서버로부터 효율적으로 가져오는 것이 목적입니다.Rest A

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

[React] Recoil을 알아보자

Recoil은 React의 상태관리 라이브러리중 하나입니다.리액트를 개발한 페이스북 개발팀이 만들었고 react를 지원하는 전용 상태관리 라이브러리이기 때문에 react내부에 대한 접근이 가능하고 동시성 모드, Suspense 등을 손쉽게 지원 가능하다는 장점이 있습니

2021년 12월 29일
·
0개의 댓글
post-thumbnail

[React] Jotai넌 누구냐??

React의 상태관리 라이브러리중 하나입니다.jotai는 매우 간단하고 작은 단위로 전역 상태 관리가 가능한데요.recoil과 매유 유사합니다. 주로 많이 쓰는 Redux같은 경우에는 Flux패턴을 사용하여 액션을 통해 앱의 상태를 변화시키고, 컴퍼넌트는 selecto

2021년 12월 23일
·
0개의 댓글

[React] Code Splitting

앱을 개발하고 배포를 하게되면 사용하는 모든 코드들이 하나의 번들로 묶여지게 됩니다.규모가 크지 않다면 그렇게 문제가 되지 않지만 규모가 커진다면 번들을 로드하는데 시간이 오래 걸리게 됩니다.이렇게 번들이 커져 로드하는 시간이 커지게 된다면 초기 렌더링 시간이 길어져

2021년 12월 22일
·
0개의 댓글
post-thumbnail

[Front] 웹 성능 개선하기

웹 페이지의 속도는 사용자에게 매우 중요한 부분이라고 할 수 있습니다.Akamai의 2017보고서를 살펴보면 다음과 같이 나와있습니다.사이트 로딩 속도가 0.1초 지연되면 매출이 7% 감소할 수 있습니다하루에 100만원을 번다고 했을때, 웹 성능 저하가 있을시 7만원을

2021년 12월 20일
·
0개의 댓글