profile
프론트엔드 개발자로 점프업!
태그 목록
전체보기 (56)ssg(3)SSR(3)배포(3)정적라우팅(1)Throttling(1)object.values(1)modal(1)promise.all(1)오픈API(1)container(1)nullish coalescing(1)scope(1)git(1)test(1)typescript(1)state원리(1)ci(1)정규표현식(1)Immutable(1)undefined(1)fp(1)virtual DOM(1)component(1)Hydration-Issue(1)hydration(1)web editor(1)promise(1)import(1)DestructuringAssignment(1)깊은복사(1)dynamic routing(1)global state(1)로드밸런서(1)싱글페이지어플리케이션(1)session storage(1)framework(1)library(1)workflow(1)OOP(1)refresh-token(1)http(1)DNS(1)cookies(1)복호화(1)Thread(1)stack(1)queue(1)호이스팅(1)REST(1)image(1)inputs(1)React currying(1)mutable(1)memoization(1)recursion(1)state prev(1)FileReader(1)gitflow(1)결제하기(1)연산자(1)callback(1)lazyload(1)MPA(1)getServerSideProps(1)scraping(1)Shallow Routing(1)preload(1)Browser’s Rendering Process(1)Firebase(1)null(1)await(1)event loop(1)async(1)class(1)Presenter(1)JavaScript(1)export(1)&&(1)unflatten(1)pagination(1)useApolloClient(1)graphql(1)ESLint(1)Prettier(1)Debouncing(1)비동기적방식(1)observable(1)optional chaining(1)Backend(1)layout(1)Generic(1)hoisting(1)XSS(1)https(1)@media(1)JWT(1)Optimistic UI(1)http status code(1)const(1)let(1)var(1)docker(1)diffing(1)얕은복사(1)filter(1)CSS in JS(1)Atomic Pattern(1)동적라우팅(1)삼항연산자(1)local storage(1)cd(1)State(1)this(1)event bubbling(1)Custom Hooks(1)global style(1)object.entries(1)구조분해할당(1)reduce(1)accesstoken(1)동기적방식(1)서버사이드렌더링(1)멀티페이지어플리케이션(1)HoF(1)v8(1)Cache-Modify(1)infinite scroll(1)flatten(1)암호화(1)tryCatch(1)form(1)yup(1)spa(1)HoC(1)조건부렌더링(1)Crawling(1)seo(1)JSX(1)static routing(1)object.keys(1)State Lifting(1)life cycle(1)template literal(1)Map(1)Injection(1)Props(1)
post-thumbnail

Day-38 getServersideProps, gitflow, workflow

ext.js에서 특정 부분을 서버사이드렌더링을 하기 위해서 getServersideProps 함수를 사용한다. `export const getServerSideProps = (context) => {}`getServersideProps 함수는 특정컴포넌트에는 적지

약 14시간 전
·
0개의 댓글
post-thumbnail

Day-37 Docker, CI/CD

운영체제에 따라 달라지는 환경이어서내 컴퓨터 말고 가상머신에서 동일한 Linux을 설치하여 공유했지만 너무 느림따라서 부팅 등 운영체제의 핵심 기능(커널)을 공유하는 가상머신인 Docker를 설치하여 용량과 메모리를 가볍게 해준다.도커 안에 리눅스가 있으며, OS 전체

4일 전
·
0개의 댓글

Immutable & Mutable

객체는 크게 Immutable와 Mutable 2가지로 나눌 수 있다.Immutable은 객체가 생성된 이후에 상태나 내용을 변경할 수 없는 것을 의미하고 object와 array 객체를 제외한 나머지 객체들을 말한다.aaa가 생성된 이후 aaa안에는 "음식"이라는 단

4일 전
·
0개의 댓글

Typescript Generic

Generic이란 타입을 일반화하는 것을 의미한다.생성시점에서 타입을 명시하여 하나의 타입이 아닌 다양한 타입을 사용할 수 있도록 하는 방법을 말하며Generic을 사용하지 않으면 불필요한 타입 변환이 되기 때문에 비효율적이다.1~6번의 예시는 일반적인 타입을 지정해주

4일 전
·
0개의 댓글
post-thumbnail

Observable

Observer란 관측자, 감시자라는 뜻을 가지는데 프로그래밍에서 Observer패턴을 이용하여 상태변화를 별도의 함수 없이 호출하여 즉각적으로 알 수 있게 하여 효율적인 프로그래밍을 가능하게 한다.Observable은 관찰 가능한 대상을 말하는데 관찰자가 관찰 가능한

4일 전
·
0개의 댓글

flatten vs unflatten

unflatten이란 배열이 중첩되어 있는 구조를 말한다.flatten란 array 구조 안에 또 다른 array를 인덱스로 가질 때 array를 평평하게 만드는 기능을 말한다.flat() 메서드를 사용하게 되는데 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어

4일 전
·
0개의 댓글

Shallow routing, React Currying

Shallow routing이란 새로고침을 하지 않고 url을 불러올 수 있는 Next.js의 기능을 말한다.Shallow routing을 사용하면 getStaticProps, getServerSideProps, getInitialProps 메서드를 실행하지 않고도 U

4일 전
·
0개의 댓글
post-thumbnail

Day-36 http vs https, SSR 배포

웹사이트 주소를 자세히 보면 http 또는 https로 시작하는 주소를 볼 수 있다.http는 주의요함이라는 글자와 함께 경고 표시가 나타나며https는 안전한 자물쇠모양으로 되있는 것을 볼 수 있다.접속을 하기 위한 버튼 등을 누르게 되면 api 정보, 보안이 필요한

4일 전
·
0개의 댓글
post-thumbnail

V8

V8이란 웹브라우저를 만드는 기반을 제공하는 구글에서 개발한 C++로 작성된오픈소스 자바스크립트 엔진을 말한다. => 따라서 V8은 자바스크립트 코드를 받아 컴파일하고 실행하는 C++ 프로그램이다.

6일 전
·
0개의 댓글

React-router vs Next-router

React-router는 경로 및 컴포넌트 설정에 있어 Next-router보다 조금 더 복잡한 방식으로 이루어져 있다.위의 예시처럼 Next에서는 router.push만을 사용하여 그 페이지가 주소가 되는 직관적인 구조를 가지고 있어 React보다 더 간단한 것을 볼

6일 전
·
0개의 댓글
post-thumbnail

Atomic Pattern

Atomic Pattern이란 작은 단위의 컴포넌트로 쪼개어 재사용하고 설계함으로서 지속적으로 개발에 용이하게 하는 방식이다. 1. Atom(원자) 가장 작은 단위의 컴포넌트 원자는 어떠한 context가 주어지든지 이에 해당하는 컴포넌트가 생성될 수 있어야

6일 전
·
0개의 댓글

OOP vs FP

OOP(Object Oriented Programming)란 객체지향 프로그래밍을 말한다.객체를 기본 단위로 나누고 이들의 상호작용으로 서술하는 방식이다.장점으로는코드의 재사용성 증가생산성 향상유지보수 편리단점으로는개발속도가 느림실행속도가 느림FP(Functional

6일 전
·
0개의 댓글

얕은복사 vs 깊은복사

얕은복사란 사본을 수정했을 때 원본이 바뀌는 경우를 말하는데 중첩 객체에서만 일어나는 일이고,깊은복사란 사본을 수정했을 때 원본이 바뀌지 않는 경우를 말한다.위의 예시처럼 깊은 복사는 원본이 바뀌지 않는 것을 볼 수 있으며, 얕은 복사는 중첩객체에서 원본이 바뀐 것을

6일 전
·
0개의 댓글
post-thumbnail

Day-35 SSG 배포

배포를 하기 위해서 우선 vscode에 npx create-next-app 폴더이름 명령어를 이용해 배포용 폴더를 만들어 준다.여기서 SSR(동적) 배포는 최적화(=yarn build) 후 서버를 실행(=yarn start)하는 방법을 사용하고,SSG(정적) 배포는 미

6일 전
·
0개의 댓글
post-thumbnail

Browser’s Rendering Process, Virtual DOM

브라우저가 렌더링 하는 과정으로는 아래와 같이 9가지 단계를 거친다.사용자가 사용자 인터페이스에 주소표시줄에 URI를 입력하여 브라우저 엔진에 전달한다.브라우저 엔진은 자료 저장소에서 URI에 해당하는 자료를 찾고, 해당 자료를 쿠키로 저장했다면 그 자료를 렌더링 엔진

6일 전
·
0개의 댓글
post-thumbnail

Day-34 배포의 흐름(SSG, SSR), 로드밸런서, DNS, test

배포란 사용자가 주소를 입력하면 접속가능하게 만들어주는 것을 말한다.접속이 가능하려면 프론트엔드 서버는 종료되지 않아야 하며 24시간 동안 켜져있어야 한다.SSR이란 로드밸런서를 이용한 배포방법으로 동적으로 변하는 파일들을 처리한다.브라우저에 접속하면 도메인 주소를 I

7일 전
·
0개의 댓글
post-thumbnail

recursion(재귀함수), reduce, Object.keys, values, entries

재귀함수란 원하는 결과가 나올때까지 자기 자신을 무한하게 실행하는 함수이다.따라서 원하는 결과가 나오려면 종료시점을 작성해주어야하며, while 반복문을 대체해서 사용할 수 있다.종료시점을 설정해주고 recursion인 자기자신을 반복하기 위해 return해준다.하지만

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

Day-33 Optimistic-UI, 서버사이드렌더링(Scraping, Crawling, SEO, SSG, SSR)

우리는 데이터를 받아올 때 백엔드에 api를 요청하고 DB에 가서 받아와서 화면에 그려주는 단계를 거치게 되는데Optimistic-UI는 데이터를 받아오는 것을 기다리지 않고 어차피 성공할 것이라고 판단하여 바로 캐시스테이트에 업데이트를 하는 것을 말한다.Optimis

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

Day-32 Memoization, @Media

특정 페이지의 state가 변할때 그 안의 모든 컴포넌트들이 아래와 같이 전부 다시 그려지는 매우 불필요한 과정이 생기기 때문에 이를 방지하기 위해 memoization을 사용한다.부모가 리렌더시 자식도 리렌더되는 상황리렌더시 변수가 새로 만들어지는 상황함수가 새로 만

2022년 6월 22일
·
0개의 댓글

Day-31 FileReader, Promise.all, LazyLoad & PreLoad

기존방식대로 이미지를 올릴 때는 몇가지 비효율적인 면이 존재한다.이미지 파일을 불러왔는데 등록은 하지 않고 뒤로가게 되면 사용되지 않는 파일이 스토리지에 남아있어 용량이 많이 찬다.스토리지에서 받아오는 파일의 속도가 느려진다.따라서 이미지 선택 후 백엔드로 보내주지 않

2022년 6월 21일
·
0개의 댓글