코공기(코딩 공부 기록) 코공기(코딩 공부 기록)

1. 비동기 프로그래밍 (Asynchronous Programming)일반적으로 코드 실행은 순차적(동기적)으로 이루진다.하지만 네트워크 요청이나 파일 읽기처럼 시간이 오래 걸리는 작업이 있을 때 동기적으로 처리할 경우, 앞선 작업이 모두 완료되어야 다음 작업을 실행할 수 있기 때문에 이에 따른 딜레이가 생긴다. 이와 반대의 개념이 비(not) + 동기적 프로그래밍인데,실행 중인 코드의 완료 여부와 무관하게 다음 코드로 넘어가는 방식을 의미한다.console.log("1: 시작");// 2초 후 실행되는 비동기 코드setTimeout(() => { console.log("2: 비동기 작업 완료");}, 2000);console.log("3: 종료");// 1: 시작 // 3: 종료 // 2: 비동기 작..

우리가 지금까지 공부해온 내용들은 중요한 부분이지만 한 페이지 내에서만 이루어졌기 때문에 아쉬움이 있었다.그렇다면 오늘은 SPA의 진가인 라우팅 처리를 해주는 React Router Dom에 대해 알아보자. 1. React Router Dom프론트엔드 개발에서 라우팅(Routing)은 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 기능을 의미한다. 그렇지만 각 페이지마다 HTML 파일이 존재하는 것은 아니고하나의 HTML 파일로 컴포넌트 렌더링 방식을 활용하여 화면을 전환하는 식으로 진행하는데이 역할을 도와주는 것이 React Router Dom이다. (1) 주요 기능React Router Dom의 주요 기능은 다음과 같다.- URL 경로에 따라 컴포넌트 렌더링- 동적 라우팅 지원- 중첩 라우팅..

리액트 스터디 3주차 과정 진행 중 Action Creator, Payload, Duck 패턴이라는 것에 대해 처음 접하게 됐다.Redux를 공부로만 접해보고 실무에서 사용해본 적이 없다보니 깊이있는 내용에 대해서는 잘 모르는 것 같아서 새로운 개념을 알게 된 것에 기분이 좋았다. 1. Action CreatorRedux에서 상태(state)를 변경하는 방법은 action을 dispatch하는 것이다.여기서 Action은 단순히 무슨 일이 일어났는지를 설명하는 자바스크립트 객체로, 반드시 type 속성을 가져야 한다. 이 때 Action 객체를 만들어주는 것을 Action Creator라고 한다.const addTodo = (text: string) => { return { type: "ADD_T..

1. 생명주기(Life Cycle)리액트 컴포넌트에는 생명주기가 있다.생명주기란, 말 그대로 컴포넌트가 생성되고 수정되고 소멸될 때까지의 과정을 의미하며모든 컴포넌트에는 각각의 생명주기가 존재한다. 이 때 각 시점에 자동으로 호출되는 메서드를 라이프 사이클 이벤트라고 하고함수형 컴포넌트에서는 Hook을 이용해서 생명주기를 관리한다. 생명주기에는 세가지 유형이 있는데 유형은 아래와 같다. (1) 마운트(Mount)컴포넌트가 생성되어 DOM 노드에 추가할 때 발생하며, 4개의 메서드가 존재한다. (1-1) constructor() 생성자라고 불리며, 컴포넌트가 맨 처음 만들어질 때 호출되어 초기 state를 설정한다. (1-2) getDerivedStateFromProps(nextProps, prevStat..

이번주부터 React 스터디를 시작했다.그래도 React를 아예 처음 해보는 것도 아니고 토이 프로젝트도 해봤으니 입문 단계는 아닌 것 같아 숙련 단계 가이드대로 진행하기로 했고1주차의 주제는 Styled Component와 React Hook들에 대해 다루기로 했다. 1. Styled-ComponentsStyled-Components란 무엇일까?공식 문서를 보면 아래와 같이 설명하고 있다. Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It als..

hook은 React 16.8 버전부터 추가된 요소로, hook을 활용함으로써 기존 Class 바탕의 코드를 작성할 필요없이 상태 값과 React의 여러 기능을 사용할 수 있다.우리가 늘 사용하던 방식으로만 사용하게 되는 hook에 대해 기초적인 정의부터 다시 파악함으로써 정복을 도전해보자.1. Hook이란?Hook은 함수형 컴포넌트에서 React의 상태(state)와 생명주기(lifecycle)를 다룰 수 있게 해준다.Hook의 주요 특징은 아래와 같다. Hook은 클래스 컴포넌트에서는 사용할 수 없고 함수형 컴포넌트에서만 사용 가능하다.Hook은 컴포넌트의 최상위 레벨에서만 호출해야 하기에 조건문이나 반복문 내부에서 사용할 수 없다.모든 Hook은 use로 시작하는 이름을 가진다. 2. 주요 Hook..

1. 서버 사이드 렌더링(Server Side Rendering)서버 사이드 렌더링이란, 말 그대로 웹 페이지의 HTML을 서버쪽에서 렌더링하여 클라이언트에게 전달하는 방식을 의미한다.서버에서 HTML 파일을 미리 생성하여 전달하는 것이기 때문에 사용자가 사이트에 접속했을 때 바로 콘텐츠를 볼 수 있다. 위 이미지는 SSR 과정을 설명해주는 그림이다.사용자가 웹사이트에 요청을 보낸다.서버가 렌더 준비가 된 HTML 파일을 생성한다.브라우저가 HTML을 렌더할 수 있지만 js 파일을 읽기 전이기 때문에 조작은 불가능한 상태이다.브라우저가 Javascript를 읽는다.유저는 콘텐츠를 볼 수 있고 조작도 기록된다.브라우저가 리액트와 같은 JS 프레임워크를 실행한다.기록된 사용자 조작이 실행되고 페이지 상호작용..

금주부터 React Deep-dive 스터디를 진행하기로 했다.리액트의 가장 큰 특징인 JSX와 가상 DOM, 리액트 파이버부터 깊게 알아가보자. 1. JSX란?JSX(Javascript XML)는 리액트에서 자바스크립트 코드와 HTML 구조를 결합한 문법으로,자바스크립트 파일 내에서 HTML과 유사한 문법을 사용할 수 있게 해준다. JSX는 브라우저가 직접 이해할 수 있는 형식은 아니지만 리액트가 이를 자바스크립트 코드로 변환해서 실행한다.이를 통해 개발자들이 좀 더 직관적으로 UI를 구성하고 관리할 수 있게 한다. (1) JSX의 특징(1-1) HTML과 유사한 문법JSX는 HTML과 유사한 문법으로 작성함으로써 컴포넌트의 렌더링 로직을 좀 더 직관적으로 작성할 수 있고 이를 통해 UI와 관련된 코드..