myinfo7091 님의 블로그

오늘의 학습내용 :  중첩 라우팅, useSearchParams ◆ 중첩 라우팅 중첩 라우팅(Nested Routing)은 특정 라우트 내에서 추가적으로 라우트를 정의하는 방식이다. 여러 계층의 UI를 웹 애플리케이션에서 구성할 때 사용할 수 있다. 하나의 Route 안에 또다른 Route를 포함시키고, 이를 통해 복잡한 구조를 더 효율적으로 렌더링할 수 있다. 만약 /home이라는 페이지의 하위에 Location이라는 컴포넌트가 있을 경우, /home/location 으로 접속하면 home 컴포넌트 안에서 location 컴포넌트를 함께 보여줄 수 있게 된다. (참고: https://monamigoon.tistory.com/ ) // Outlet 으로 중첩 라우팅 구현하기import { Outlet }..

오늘의 학습내용 :  Dynamic Route, Path Parameter  ◆ Dynamic Route 동적 라우팅(Dynamic Routing)은 웹 어플리케이션에서 클라이언트의 요청에 따라 동적으로 경로를 처리하는 라우팅 방식이다. 사용자의 입력과 상태의 변화 등 여러 조건에 따라 서버가 제공할 페이지와 리소스를 결정하며, 정적 라우팅(Static Routing)과는 다르게 라우팅 규칙이 실행 시에 결정된다. 어떤 웹사이트가 전체 아이템을 보여주는 리스트 페이지와 특정 아이템의 정보를 보여주는 상세 페이지로 구성되어 있을 때, 특정 아이템 카드를 클릭하면 해당 아이템의 id값에 해당하는 데이터로 이동하는 것을 알 수 있다. 동적 라우팅은 라우트 경로에 특정 값을 넣어주고 각각에 맞는 페이지로 이동할..

오늘의 학습내용 :  Action Creator  ◆ Action Redux에서 Action은 영단어의 본뜻과 마찬가지로 행동(동작)을 말한다. 정확히는 상태에 영향을 미치는 어떤 행동인데, 스토어에 저장된 데이터에 변화를 주기 위함이다. Action은 자바스크립트 객체 형태로 존재하며, type이라는 필드를 반드시 포함한다. { type: 'ADD_TODO', text: '내배캠 강의 복습하기'} 개발자는 type 필드를 통해 해당 Action이 정의할 수 있고, 객체에 포함된 부가적인 데이터를 통해 Action을 처리하게 된다. 애플리케이션의 규모가 클수록 객체는 훨씬 더 많은 데이터를 포함하게 되고, 디버깅할 때 redux-devtools 등의 도구를 이용해서 각 Action을 살펴보아야..

오늘의 학습내용 :  Redux  ◆ ReduxRedux는 자바스크립트 어플리케이션 상태 관리 라이브러리로, React Tool kit을 설치해서 React 라이브러리와 함께 사용할 수도 있다. 프론트엔드 개발에서는 전역 상태 관리 라이브러리로 표현되는데, Global State를 관리하도록 돕기 때문이다.동일한 상태와 액션이 리듀서에 전달되면 순수함수인 리듀서는 멱등성을 보장한다.다른 상태관리 라이브러리에 비해 엄격한 코드 구성 방법을 갖추고 있어 코드 유지보수에 유용하다.액션, 상태 변화가 로그에 기록되기 때문에 개발자가 디버깅하기 용이하다.다만 리덕스를 사용해서 코드를 작성할 경우 필수적으로 만들어지는 파일이 있는데다가 스토어와 컴포넌트를 연결할 때 메서드를 필요로 하기 때문에 사용되는 코드의 양이..

오늘의 학습내용 :  useEffect, useRef, useContext Hook  ◆ useEffect  useEffect는 side effect를 발생시킬 때 사용하는 React Hook이다. 쉽게 말해서 어떤 컴포넌트가 렌더링 된 이후마다 특정한 작업을 수행하도록 설정하고 싶을 때 사용하는 것이다. React 공식 문서에서 useEffect는 외부 시스템과 컴포넌트의 싱크를 맞춘다고 설명하는데, 렌더링이 끝난 다음에 실행되기 때문에 컴포넌트의 렌더링 과정을 순수하게 유지시킬 수 있다. import React, { useEffect } from "react";const App = () => { useEffect(() => { console.log("hello useEffect"); }); ..

오늘의 학습내용 :  styled 컴포넌트  ◆ CSS in JS CSS in JS는 스타일의 정의를 자바스크립트로 작성된 컴포넌트에 바로 삽입하는 방식이다. 쉽게 말해 자바스크립트 코드로 css 코드를 작성하여 컴포넌트를 꾸밀 수 있다고 생각하면 좋다. 이전까지 배웠던 style 관련 코드를 작성할 때에는 css 파일을 생성하고 이를 import 했지만, 조금 더 간편한 방법으로 컴포넌트 꾸미기가 가능하다.왜 이런 방식의 개발이 주류가 될까?기존에는 HTML, CSS, JS를 별도의 파일로 정리하는 방법을 선호했지만, React 등 모던 자바스크립트 라이브러리가 등장하면서 웹 애플리케이션을 재사용하기 편리한 여러 블록으로 분리하여 개발하는 컴포넌트 기반의 방식이 많이 쓰이게 되었다. 웹 페이지를 여러 ..

오늘의 학습내용 :  React 컴포넌트  ◆ 컴포넌트 컴포넌트(Component)란, 프로그래밍에서 재사용할 수 있는 독립된 모듈들을 말한다. 컴포넌트를 기반으로 하는 프로그래밍에서는 블록을 조립하듯 화면을 구성하게 되는데, 웹 컴포넌트는 이를 웹에서 적용할 수 있도록 정한 것이다. React는 컴포넌트 기반의 구조라는 특징을 갖는데, 페이지를 컴포넌트로 구성하고, 하나의 컴포넌트가 다른 여러 개의 컴포넌트 조합으로 구성될 수 있다. 개발자는 컴포넌트를 활용해 사용되는 전체 코드의 양을 줄일 수 있고, 개발 시간을 단축할 수 있으며, 유지 보수 비용을 줄일 수 있다.  ◆ useState hook useState는 컴포넌트에 state 변수를 추가할 수 있는 React Hook이다. 먼저 컴포넌트의 최..

오늘의 학습내용 :  React 개발환경 세팅하기  ◆ Yarn앞으로 개인 과제를 진행하면서 사용하게 될 패키지 툴이다. 간단한 커맨드로 게시된 패키지들을 설치받아 사용할 수 있고, 이를 통해 보다 효율적인 개발이 가능하다. 대표적인 패키지 관리 툴에는 npm, 그리고 yarn이 있는데, 각각 어떤 특징을 가지고 있는지 간단하게 알아보았다. NPM(Node Package Manager)은 자바스크립트 언어를 위한 패키지 관리자이다. Node 패키지를 만들고, 업로드하여 공유하여 누구나 사용할 수 있다. NPM이 없었을 때에는 필요한 기능을 추가하려면 직접 작성하거나 깃허브를 통해 다운로드할 수밖에 없었다. 이런 불편을 해소하기 위해 Node.js를 설치하면 기본적으로 내장된 npm을 사용할 수 있게 되었..

오늘의 학습내용 :  React 소개 ◆ React.js 주특기 입문주차에 들어서면서 React를 처음 접하게 되었다. React는 메타에서 개발한 오픈소스 자바스크립트 라이브러리로, 요즘에는 프론트엔드 개발자들 사이에서 많은 인기를 얻고 있다. SPA를 전제로 하고, 업데이트가 필요한 DOM요소를 찾아 해당 부분을 빠르게 업데이트하기 때문에 동적인 웹에서 좋은 퍼포먼스를 낼 수 있다. React 그 자체만으로는 프레임워크라고 불리기에 부족한 기능들이 있지만, 대신 라이브러리라는 특성을 살려 다른 프레임워크에 붙여 사용하거나 각종 메소드를 지원받고 프론트엔드 개발자라면 익혀야 할 표준으로 자리잡았다. 웹개발자로 일하고 싶으면 리액트 배워  홈페이지에서 간단한 특징 소개를 읽어보았다.애플리케이션의 각 상태..

오늘의 학습내용 :  Class ◆ Class 생성하기자바스크립트는 프로토타입 기반의 객체 지향 프로그래밍 언어이다. 다만 생성자, 상속 등 클래스를 기반으로 하는 다른 언어에 익숙한 개발자들이 적응할 수 있도록 ES6부터 class가 추가되었다. ES6에서 기존 자바스크립트가 가지고 있던 많은 단점들이 개선되었다. 그리고 배워야 할 것도 늘어났다 class를 통해 코드를 직관적으로 읽고 편리하게 작성할 수 있다.클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위한 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다. (참고: 모던 JavaScript 튜토리얼) class User { constructor(name) { this.name..