천천히 느리게 천천히 느리게

◎ 면접을 진행하다 보면 이벤트 버블링과 이벤트 캡쳐의 차이에 대하 자주 물어본다. 근본적인 지식에 대한 정보는 없어서 정리를 한번 해볼까 한다. 1. 이벤트 버블링이란? ◎ 이벤트 버블링(Event Bubbling)은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위 요소들로 전달되어 가는 특성을 의미한다. 여기서 상위 요소란, HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 한다. 다음 코드를 봐보자. 세 개의 div 태그가 있고 가장 아래에 있는 div 태그에서 이벤트가 발생했을 때 최상위 요소인 body 태그까지 이벤트가 전달되는 코드이다. 위의 코드는 세 개의 div 태그에 모두 클릭 이벤트를 등록하고 클릭했을 때 ..

◎ 지금까지는 객체지향 프로그래밍이었다면 이제 함수를 기반하는 함수형 프로그래밍으로 많이 작성한다. 함수형 프로그래밍에 대해서 간략하게 알아보자! 1. 함수형 프로그래밍이란? ◎ 함수형 프로그래밍은 순수한 함수를 작성하고, 공유된 상태와 변경 가능한 데이터 및 부작용을 피하여 소프트웨어를 작성하는 프로세스이다. 함수형 프로그래밍은 선언형이며, 애플리케이션의 상태는 순수한 함수를 통해 전달된다. 애플리케이션의 상태가 공유되고, 객체의 메서드와 사용되는 객체 지향 프로그래밍과는 대조된다. 2. 순수 함수 (pure function) ◎ 순수 함수란 하나 이상의 인자를 받고, 받은 인자를 처리하여 반드시 결과물을 돌려주어야 한다는 것이다. 인자를 제외한 다른 변수는 사용하면 안 되고 받은 인자만으로 결과물을 ..

◎ 아직까지도 헷갈리는 개념!! 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 개념과 지식에 대해 알아보자. 1. 렌더링 ◎ 렌더링이란, 요청받은 내용을 브라우저에 화면에 표시하는 것이다. 예를 들어, 우리가 어떠한 홈페이지를 접속하게 되면 브라우저에 해당하는 홈페이지가 나오는 것이라고 생각하면 된다. 1-1. 렌더링의 과정 로더(Loader)가 서버로부터 정보들을 불러옴 파싱(Phasing)을 통해 문서를 DOM 트리로 만듦 DOM 트리가 구축되는 동안 브라우저는 렌더 트리를 구축 CSS 설정/레이아웃 위치 지정 렌더링 트리가 그려짐 2. 서버 사이드 렌더링(SSR) ◎ 웹의 시작부터 MPA(Multiple Page Application)이 있었다. 웹의 초기부터 SPA에 대한 개념이 나오기 전까지 ..

◎ 백엔드와 통신할 때 자주 목격한 에러에 대해 정리하겠다. 1. 문제 ◎ 백엔드와 통신할 때 Unexpected end of JSON input 에러 메시지를 몇 번 목격하였다. 코드는 다음과 같다. handleGoCart = () => { const token = localStorage.getItem("access_token"); const { productDetail , optionId, number } = this.state; fetch(`${API}/order/cart` , { method: "POST", headers: { "Content-Type": "application/json", Authorization : token }, body: JSON.stringify({ product_id :..

1. 비동기 방식 ◎ 비동기 방식이란, 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 말한다. 기다리는 과정에서 다른 함수를 호출할 수 있다. ※ 동기적 방식 : 작업이 끝날 때까지 다른 작업을 할 수 없다. 동기적과 비동기적 방식을 밑의 그림처럼 표현할 수 있다. 동기적은 1번이 끝날 때까지 2번을 시작하지 못한다. 1번이 끝나야 비로소 2번이 실행되고, 2번이 끝나야 3번을 시작할 수 있다. 하지만 비동기는 1번이 끝나기 전에 2번의 코드를 실행할 수 있고, 2번이 끝나기 전에 3번을 시작할 수 있다. setTimeout() 함수가 대표적인 비동기 함수이다. setTimeout()은 코드를 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행하는 것..

◎ 리덕스.. 어렵다.. 처음 위코드에서 리덕스에 대해 배울 때 정말 이해가 안됬다. 프로젝트 진행할 때 리덕스 사용을 해봤지만.. 그래도 모르겠다. 그래서 다시 강의를 보면서 예제를 따라치며 내 것으로 만들기로 했다. 0. 설치 npm install redux npm install react-redux npm install redux-devtools-extension 1. 리덕스 모듈 ◎ 리액트 프로젝트에서 리덕스 모듈 만드는 방법은 다양하다. 리덕스 모듈이란 액션 타입, 액션 생성 함수, 리듀서가 들어있는 자바스크립트 파일을 의미한다. 첫 번째 방식은, 액션과 리듀서가 서로 다른 파일로 만드는 법이다. ● actions 폴더 - index.js 파일 ● reducers 폴더 - index.js 파일 ..

1. Redux 란 ◎ 리액트 생태계에서 가장 많이 사용하고 있는 상태 관리 라이브러리이다. 컴포넌트 상태 관리 로직을 다른 파일로 분리하여 더욱 효율적으로 관리할 수 있으며, 글로벌 상태 관리에도 좋다. 참고로 리덕스는 리액트에서 사용하기 위해 만들어진 라이브러리이긴 하지만, 무조건 리액트와 함께 사용할 필요는 없다. 일반 Javascript 환경이나 Angular 와 같은 다른 프레임워크에서도 사용되기도 한다. 위의 사진을 보면, 시간이 좀 된 그래프이지만, 리액트를 사용하는 프로젝트 중 45%가 리덕스를 사용하고 있다. 단순히 글로벌 상태 관리를 위한 것이라면 ContextAPI를 활용하는 것도 괜찮다. 2. Redux 와 Context API의 차이점. (리덕스 위주) 미들웨어: 리덕스에는 미들웨..