post-thumbnail

블로킹 vs 논블로킹 / 동기 vs 비동기

Block과 non-block, sync와 async 개념을 이해하기 위해서는 다음의 두 용어를 짚고 넘어가야 한다.제어권은 자신(함수)의 코드를 실행할 권리 같은 것이다. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려준다.A 함수

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

Headless 컴포넌트 (부제:관심사 분리)

프론트엔드에서 Headless가 어떤 의미를 뜻할까? 먼저 프론트엔드 개발을 하면서 느껴봤을 법한 일을 떠올려보자.외부 UI 라이브러리를 사용할 경우, 유스케이스에 맞게 기능을 새로 추가하거나 변경하고 싶어도 그에 맞게 디자인이나 기능을 수정하기가 매우 어렵다.더 나아

2022년 9월 18일
·
0개의 댓글
·
post-thumbnail

Process vs Thread

어떤 작업을 하기 위해 실행할 수 있는 파일메모리에 적재되고 CPU 자원을 할당받아 프로그램이 실행되고 있는 상태원칙적으로 서로 다른 프로세스간의 메모리 공간 접근은 허용되지 않는다.만약 프로세스간 서로 다른 자원에 접근하려면 프로세스간의 통신을 해야한다.(IPC)프로

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

Flux

Flux 출현 배경기존의 어플리케이션 환경에서 보편적으로 사용되는 패턴은 MVC이다. Model에 데이터를 정의해 두고, Controller를 이용해 Model 데이터를 생성, 조회, 수정, 삭제하고 변경된 데이터는 View에 출력되면서 사용자에게 전달된다.이 패턴의

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

MVC

MVC란 Model-View-Controller의 약자로 애플리케이션을 세 가지 역할로 구분한 디자인 패턴중 하나이다.소프트웨어 디자인 패턴은 소프트웨어 공학의 소프트웨어 설계에서 특정 상황에 공통적으로 발생하는 문제에 대한 해결책이다.사용자가 입력을 담당하는 View

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

JS 함수정의 방법

자바스크립트에서 원시 타입을 제외한 모든 데이터 타입(객체, 함수, 배열, 정규표현식 등)은 객체다.객체가 보유한 값을 '프로퍼티'라고 하며, 객체가 보유한 함수를 '메서드'라고 한다.프로퍼티는 키와 값으로 구성된다.

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

JS 객체생성 방법

자바스크립트에서 원시 타입을 제외한 모든 데이터 타입(객체, 함수, 배열, 정규표현식 등)은 객체다.객체가 보유한 값을 '프로퍼티'라고 하며, 객체가 보유한 함수를 '메서드'라고 한다.프로퍼티는 키와 값으로 구성된다. Object.create(프로토타입)  : 프로토타

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

webpack dev server

webpack dev server는 웹 애플리케이션을 개발하는 과정에서 실시간으로 리로드가 되는 웹팩의 개발 서버이다.매번 웹팩 명령어를 사용할 필요없이 코드의 변경사항을 감지해 브라우저에 반영해준다.webpack-dev-server의 동작원리서버 실행 시 소스 파일들

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

next.js data fetching

Next.js에서 Data를 Fetching하는 방식은 아래의 4가지 방식이 있다.CSR(Client Side Rendering)SSR(Server Side Rendering)SSG(Static Site Generation)ISR(Incremental Static Re

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

next.js

React에서는 라우터가 없어서 보통 react-router-dom을 사용해서 렌더링한다하지만 Nest.js의 경우 별 다른 설정없이 Routing을 할 수 있다.폴더 내부의 파일위치나 파일명에 따라서 routing을 할 수 있다.이곳에서 렌더링 하는 값은 무조건 모든

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

immer

immer는 currentState의 프록시객체인 임시 draftState를 생성하여 수정, nextState를 생성하게 된다. 불변성을 유지하기위해 기존 reducer에서는 전개연산자 ,concat, filter, map같은 함수를 이용했지만, 가독성이 떨어지면 직관

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

redux-persist

Redux store를 브라우저에서 기본적으로 제공해주는 저장소인 localstorage와 sessiongstorage에 저장하게 해주는 라이브러리이다.persisConfig = {} : 새로운 persist 선언key : reducer의 어느 지점에서부터 데이터를 저

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

redux-thunk

리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리 할 때 가장 기본적인 방법으로는 redux-thunk 라는 미들웨어를 사용하는것입니다. 이 미들웨어는 비동기 작업을 다룹니다. 이를 사용하여 비동기 작업을 관리하는건 매우 직관적이고 간단하다.액션생성함수도 객체,함

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

redux API

redux를 사용시, 유의할 점은 앱에 하나 이외의 스토어를 만들면 안된다는 것이다. 그렇기에 코드의 유지보수를 위해서 단위별로 reducer를 분기하여 사용하게 되는게 일반적인데 이때, 여러개의 reducer들을 단 하나의 reducer로 사용하기 위해 combine

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

babel

바벨은 ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환 시켜 IE나 다른 브라우저에서 동작할 수 있도록 하는 역할을 한다. 크로스 브라우징은 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를

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

webpack plugin

플러그인(plugin)은 웹팩의 기본적인 동작에 추가적인 기능을 제공하는 속성이다.로더랑 비교하면 로더는 파일을 해석하고 변환하는 과정에 관여하는 반면,플러그인은 번들된 결과물을 처리한다. 번들된 자바스크립트를 난독화 한다거나 특정 텍스트를 추출하는 용도로 사용한다결과

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

webpack loader

웹팩은 모든것을 모듈로 바라보기 때문에 자바스크립트 뿐만 아니라 스타일시트로 import 구문으로 불러 올수 있다.CSS 파일을 자바스크립트에서 불러와 사용하려면 CSS를 모듈로 변환하는 작업이 필요하다. css-loader가 그러한 역할을 가능하게 해준다.모듈로 변경

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

webpack

프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러이다.모듈 번들러란, 애플리케이션을 구성하는 파일(HTML, CSS, Javscript, Images, font)등을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다. 자바스크

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

데이터 타입

데이터타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다.자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 한다. 자바스크립트의 기본 타입은 크게 원시 타입과 참조 타입으로 구분할 수 있다.값을

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

ES6 문법 정리

들어가기 전에Node.js와 React관련 프로젝트를 진행하면서 기존에 배워왔던 jQuery를 활용한 ES5 문법으로 JavaScript 코드를 작성하였지만 이제는 최신 트렌드에 맞게 ES6 문법으로 JavaScript 코드를 작성하는 요구사항이 많아지기 시작하였습니다

2022년 8월 7일
·
0개의 댓글
·