전체 글
React에서 중요하게 알아야 할 몇가지 개념 정리
기술면접 준비를 위해 React 관련해서 중요한 내용을 정리하게 되었다. 간단하게 정리했으니 더 자세한 사항은 React 공식문서와 velopert 님의 강의문서를 참고하길 바란다. React 공식문서에서는 React를 이렇게 설명하고 있다. 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 1. React 특징 선언형(Declarative) 인터렉티브한 UI를 만들 때 생기는 어려움을 줄여줌 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링 함 컴포넌트 기반 스스로 상태를 관리하는 캡슐화된 컴포넌트 컴포넌트 로직은 JavaScript로 작성되기 때문에 다양한 형식의 데이터를 앱 안에서 손쉽게 전달할 수 있고, DOM과는 별개로 상태를 관리할 수 있음 2. React 기본적..
Redux에서 사용되는 주요 키워드들
액션(action) 상태에 어떠한 변화가 필요하게 될 때 액션을 발생시킴. 어떻게 업데이트 할지 정의하는 정보를 가진 객체. { type: "ADD_TODO", data: { id: 0, text: "리덕스 배우기" } } 액션 생성함수(Action Creator) 액션을 만들어주는 함수. 단순히 파라미터를 받아와서 액션 객체를 만들어주는 함수이다. 필수는 아니지만, 나중에 더 편하게 액션 객체를 만들 수 있다. export function addTodo(data) { return { type: "ADD_TODO", data }; } // 화살표 함수로도 가능 리듀서(reducer) 상태를 바꿔주는 함수. 액션 타입이 무엇이냐에 따라 다른 업데이트 작업을 한다. 불변성 유지를 위해 spread연산자나 c..
ContextAPI에는 없지만 Redux에 있는 장점들
1. 미들웨어 비동기 작업을 더욱 체계적으로 관리 가능 2. 유용한 함수와 Hooks 1) connect: 전역적인 상태를 props로 받아와서 쓸 수 있음. 2) useSelector, useDispatch, useStore를 통해 Redux에서 관리하는 상태를 쉽게 조회하고 액션을 쉽게 dispatch 할 수 있음. 3. 기본적인 최적화가 이미 되어있음 4. 모든 글로벌 상태들을 크게 하나로 만들 수 있음 5. DevTools 6. 이미 Redux를 사용중인 프로젝트가 많음 *Redux를 쓰면 유용한 경우 1. 프로젝트 규모가 크다. 2. 비동기 작업을 자주 한다. 3. 리덕스가 사용하기 편하다. https://react.vlpt.us/ 강의자료를 참고하여 작성하였습니다.
CORS 간단히 알아보기
CORS(Cross-Origin Resource Sharing) 직역하면 '교차 출처 리소스 공유'이다. 처음 이 말을 들었을 때 무슨 말인지 몰랐다. 그래서 이렇게 생각하는 편이 나을 것 같다. '다른 출처에 있는 리소스를 공유하는 것'. 여기서 또 이해가 가지 않는 부분은 Origin(출처)이다. 대략적으로 도메인이라고 생각하면 된다. (도메인이란 ip주소에 이름을 부여한 것을 말한다. 예를 들어 naver.com 과 같은 url이 있다.) 더 구체적으로는 scheme, protocol, host, path, query string, fragment, port등을 포함한 서버의 위치를 말한다. 골치아픈 CORS 정책 위반 골치아픈 CORS 정책을 왜 지켜야 하는걸까? 클라이언트 어플리케이션은 사용자의..
함수형 JavaScript 기본기
아래의 순서대로 살펴볼 것이다. 평가와 일급 일급 함수 고차 함수 1. 평가와 일급 평가 - 코드가 계산되어 값을 만드는 것 ex) 1 + 1 이라는 코드가 있다고 가정을 한다면 이 코드는 2로 평가된다. 일급 - 값으로 다룰 수 있다. - 변수에 담을 수 있다. - 함수의 인자로 사용될 수 있다. - 함수의 결과로 사용될 수 있다. const a = 10; const add10 = a => a + 10; const r = add10(a); console.log(r); //20 2. 일급 함수 자바스크립트에서 함수는 일급이다. 함수가 일급이라는 것은 곧 값으로 다룰 수 있다는 말이며, 함수안에 값으로서 담길 수 있다는 말이다. const log = console.log const add5 = a => a..
함수형 JavaScript 공부하기
JavaScript를 더 깊이 공부함으로 함수형 패러다임을 통해 보다 효율적인 코드를 만드는 법을 공부해보려고 한다. 사실 JavaScript도 잘 모르는데 라이브러리(react.js 등등)들을 사용하여 코드를 짜는 나를 보면, 근본도 모르고 코드를 짜는 거 같다. 그래서 시간될 때 틈틈히 inflearn을 통해 공부하며 이곳에 조금씩 정리해보려고 한다. 밤에 요즘 잠이 안오는데, 그럴 때 공부하면 잠 잘 올 거 같다. 혹시 나처럼 공부를 하시는 분이 계시다면 앞으로의 포스팅들이 도움이 되면 좋겠다.
JavaScript에서의 비동기 프로그래밍 정리
비동기적(Asychronous) 이란? 하나의 프로세서에서 작업이 진행중일 때 다른 프로세서에서 작업을 수행할 수 있게 하는 것. JavaScript는 기본적으로 single threaded 이기 때문에 하나의 작업이 진행되는 동안 다른 작업을 진행할 수 없다. 더보기 Threads란? Thread는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스이다. 각 스레드는 한 번에 하나의 작업만 수행할 수 있다. 앞의 작업이 완료되어야만 다음 작업을 실행할 수 있다. 현재, 많은 컴퓨터들이 CPU 코어를 가지고 있다. 따라서 한번에 여러가지 일을 수행할 수 있다. 그래서 multiple thread를 지원하는 프로그래밍 언어는 멀티코어 컴퓨터의 CPU를 사용하여 여러 작업을 동시에 처리할 ..
useRef 사용법 정리
HTML과 JavaScript를 사용할 때, 특정 DOM을 선택해야 하는 상황에서 어떤 메서드를 사용하는가? 바로 DOM 함수인 getElementById(), querySelector() 를 사용한다. React를 사용하는 프로젝트에서도 가끔 DOM을 직접 선택해야 하는 상황이 발생할 수 있다. 예를 들어, 특정 Element의 크기나 위치를 가져와야 할 때, 스크롤바 위치를 가져오거나 설정해줘야 할 때, focus를 설정해줘야 할 때 등, 다양한 상황이 있다. 또한 video.js, jw player와 같은 HTML5 비디오 관련 라이브러리를 사용할 때나 D3, chart.js 같은 그래프 관련 라이브러리를 사용하게 될 때도 특정 DOM에 라이브러리를 적용하기 때문에 DOM을 선택해야 하는 상황이 발..