Just Do IT!

정규 표현식 문자열에서 특정 문자 조합을 찾기 위한 패턴 JavaScript에서의 정규 표현식은 객체이다 RegExp의 exec()와 test() 메서드를 사용할 수 있다 String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있다 정규 표현식 만들기 정규 표현식 리터럴 슬래시(/)로 패턴을 감싸서 작성 바뀔일이 없는 패턴의 경우 리터럴을 사용하면 성능이 향상될 수 있다 const re = /ab+c/ RegExp 객체의 생성자 호출 const re = new RegExp('ab+c') 정규 표현식 패턴 작성하기 단순한 문자로 구성되거나 단순한 문자와 특수 문자의 조합으로 구성할 수 있다 (\d+)\.\d..

Class Component 더 이상 주류는 아니다. 그러나 함수 컴포넌트와 hook을 같이 쓰는 것이 주류가 되기 이전에는 클래스 컴포넌트만 사용했고 그만큼 리액트의 동작 원리를 이해하는데 도움을 준다 추후 입사한 회사에서 클래스 컴포넌트를 사용할 수 있는데, 그 때 코드를 읽고 분석할 줄 알아야 한다. Mount 1. constructor (생성자) 컴포넌트를 만들 때 처음으로 실행되며 초기 state를 정할 수 있다 // class class Example extends React.component { constructor(props) { super(props); this.state = { count: 0 }; } // Hooks const Example = () => { const [count, ..

Redux가 필요한 이유 순수 리액트 개발 방법의 한계 사용하지 않는데 넘겨주기 위해 전달받는 문제 발생 (prop drilling) 전달 받아야 할 중간 컴포넌트가 많아지면 그 컴포넌드들을 전부 바꿔줘야 한다 여러 곳에서 수정되는 state ☞ 어디서 잘못되었는지 찾기 어렵다 Redux가 필요한 이유 props가 복잡하다 퍼져있는 state, 버그 발생 시 책임 소재 파악의 용이성 기존에 state를 변경/참조하는 곳이 여러곳일 때 오류 핸들링의 어려움 증가 Redux에서는 state를 변경하는 방법을 Redux에서만 관리한다 이를 통해 자체적인 문서가 되고 문제 발생 시 원인을 빠르게 찾을 수 있다 Redux의 흐름 이해하기 UI (컴포넌트) → Dispatch 기존에 많은 곳에서 참조하고 관리되었던..

컴포넌트 꾸미기 (CSS-in-JS) CSS-in-JS 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 styled-components : 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 styled-components 준비하기 VSCode 플러그인 : vscode-styled-components 설치 styled-components 설치하기 # npm을 사용하는 경우 npm install --save styled-componetns # yarn을 사용하는 경우 yarn add styled-components styled-components 사용하기 예제 // src/App.js import React from "react"; // styled-compon..

리액트 소개 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 라이브러리 : 자주 사용되는 기능들을 정리해 모아 놓은 것 사용자 인터페이스(User Interface, UI) : 사용자와 컴퓨터가 서로 상호작용하기 위해 중간에서 서로간의 입력과 출력을 제어해주는 것 사용자 인터페이스를 위한 라이브러리 = UI 라이브러리 (화면을 만들기 위해 모아놓은 것) Angular.js, React, Vue.js 등 웹사이트의 작동 원리와 흐름을 함께 이해하는 것이 중요하다. 리액트의 장점 빠른 업데이트(화면이 바뀌는 속도) & 렌더링 속도 ⇒ Virtual DOM 사용 화면 업데이트 = DOM이 수정된다 업데이트할 최소한의 부분만 update한다. Component-Based 모든 페이지가 컴포넌트로 구성되어..

React란? SPA란? Single Page Application 서버에서 HTML 페이지들을 일일이 다운로드하는 것이 아니라, 하나의 마크업(markup) HTML 파일을 받아 클라이언트에서 데이터를 직접 로딩해 동적으로 화면을 표시 사용자가 페이지를 다시 로딩할 필요가 없어진다. Virtual DOM DOM (Document Object Model) : HTML 마크업 구조를 자바스크립트로 조작이 가능한 객체 형태로 모델링한 것 어떤 DOM 요소를 변경하게 되면 브라우저는 새롭게 변경된 DOM을 토대로 새로운 화면을 그린다. DOM 요소의 변화 레이아웃 단계 : DOM 요소의 변화 이후 요소들의 위치를 계산 페인트 단계 : 새로운 화면을 다시 그리는 단계 Virtual Dom : 실제로 랜더링 되지..

1. 실행 컨텍스트란? 스택(stack) : Last in, first out 실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체 콜 스택(call stack) 안에 실행 컨텍스트가 모아져 있다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장 (LIFO) 컨텍스트의 구성 방법 전역 공간 eval() 함수 함수 ☞ 우리가 흔히 실행 컨텍스트를 구성하는 방법 실행컨텍스트 구성 예시 실행 컨텍스트 객체 생성(활성화) 시점 : 한 '실행 컨텍스트'가 콜 스택의 맨 위에 쌓이는 순간이 곧 현재 실행한 코드에 관여하게 되는 시점 생성 시점에 JS 엔진은 해당 컨텍스트에 관련된 코드를 실행하는데 필요한 환경 정보들을 수집해서 실행 컨테스트 객체에 저장 실행..

기본적인 HTML 파일을 빨리 볼 수 있지만 사용자가 의미 있는 콘텐츠를 보기 위해서는 fetching과 실행하는 시간을 기다려야 한다. 3. head + async JS 파일 다운로드 받는 시간 절약 가능 자바스크립트 파일에서 DOM 요소를 조작하려는 시점에 HTML 파일이 정의되지 않는 위험한 요소가 생길 수 있다. 사용자들이 페이지를 로드하는데 여전히 시간이 걸린다. 4. head + defer 가장 좋은 옵션 순서대로 실행할 수 있어서 가장 안전하다 5. head + async 먼저 다운로드 된 파일을 먼저 실행 (정의된 순서는 상관이 없다) 순서에 의존적이라면 문제가 발생할 수 있다. 드림코딩 자바스크립트 강의를 들을 때 가장 처음으로 나왔던 부분인데, 영 헷갈려서 나중에 찾아볼 수 있을 것 같..

DOM (Document Object Model) 1. Javascript가 생긴 이유 브라우저에서 쓰려고 만들어진 JS (출처: https://roseline.oopy.io/dev/javascript-back-to-the-basic/history-of-javascript) 본연의 역할 웹 페이지를 동적으로 만들기 위해 즉, HTML 문서를 조작해서 생명력을 불어넣어주기 위해 만들어진 언어이다. 2. 웹 페이지가 뜨는 과정 www.naver.com (클라이언트 → 서버) HTML 문서를 수신 (서버 → 클라이언트) 브라우저가 HTML 파일을 해석 (parsing) 브라우저에는 기본적으로 랜더링 엔진이 있다 랜더링 엔진이 HTML 문서에 코드 한줄, 한줄 보면서 '해석' 한다. DOM Tree를 구성 HT..