전체 글85 비동기 프로그래밍 입문 # 비동기 프로그래밍 개요 1. 개념 비(not) + 동기적 프로그래밍이다. 그럼 먼저 동기적 프로그래밍이 뭔지부터 살펴보자. o 동기(synchronous)적 방식이란? 현재 실행중인 코드가 끝나야 다음 코드를 실행하는 방식 일반적인 프로그래밍 세계에서는 코드는 모드 동기적으로 실행된다. 즉, 앞선 코드가 끝나야만 그 다음 코드가 수행이 된다. // (1) const a = 1; // (2) const b = 2; // (3) console.log(`a의 값은 ${a}입니다.`); // (4) alert(`hello ${b}!`); // 항상 코드는 (1) -> (4)의 순서대로 실행이 됩니다. 이러한 방식을 동기적 방식이라 하고, 비동기는 그에 반한 방식이다. 비동기(asynchronous)적 방식이.. 2023. 4. 20. React Router Dom - Dynamic Route, useParam # 상세 페이지 구현하기 1. Dynamic Route란? Dynamic Route란, 동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말한다. 예를 들어, works 페이지에 여러개의 work가 보이고 우리가 work마다 독립적인 페이지를 가지도록 구현하려면 어떻게 해야할까? 아래 코드 처럼 페이지마다 각각 works/1, works/2, works/3 이런식으로 구현하는 것은 굉장히 비효율적일 것이다. import React from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import Works .. 2023. 4. 20. React Router Dom - 소개, hooks, children # react-router-dom이란? 1. 페이지를 구현할 수 있게 해주는 패키지 react-router-dom을 사용하면 여러 페이지를 가진 웹을 만들 수 있게 된다. # react-router-dom 설치하기 1. 패키지 설치 yarn add react-router-dom # react-router-dom 사용하기 # 사용방법 순서 페이지 컴포넌트 생성 Router.js 생성 및 router 설정 코드 작성 App.js에 import 및 적용 페이지 이동 테스트 1. 페이지 컴포넌트 생성 Home, About, Contact, Works 라는 가상의 페이지, 총 4개의 컴포넌트를 만들어봤다. src 폴더에 pages 라는 폴더를 만들고 그 안에 만들면 된다. 2. Router.js 생성 및 rout.. 2023. 4. 19. Redux - Payload 및 Ducks 패턴 # Payload란? 1. 만들 새로운 기능 다시말해 사용자가 5을 더하고 싶으면 어떤 input에 5를 입력해서 버튼을 누르면 5가 더해지고, 10을 더하고 싶으면 10을 입력하고 버튼을 눌렀을 때 10이 더해지는 프로그램 2. Payload란 무엇인가? 이제 “N을 더해” 라고 N을 같이 리듀서에서 보내야 한다. 지금까지는 ~을 이라는 목적어가 없었다면, 이제는 그 목적어가 생긴것이고 목적어도 액션객체에 담아 같이 보내줘야 한다. 이렇게 액션객체에 같이 담아 보내주는 그 것을 payload라고 한다. 만약 10을 더해 라는 것을 리듀서에게 보내고 싶으면 액션객체에 payload를 같이 담아주는 것이다. 코드로 보면 아래와 같다. // payload가 추가된 액션객체 {type: "ADD_NUMBER".. 2023. 4. 19. 이전 1 2 3 4 5 6 7 8 ··· 22 다음
