하나씩 배워나가는 개발일지

OSI 7 계층이란?OSI 7 계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈 것을 말한다.OSI 7 계층을 나눈이유는?계층을 나눈 이유는 통신이 일어나는 과정을 단계별로 파악할 수 있기 때문이다.흐름을 한눈에 알아보기 쉽고, 사람들이 이해하기 쉽고, 7단계 중 특정한 곳에 이상이 생기면 다른 단계의 장비 및 소프트웨어를 건들이지 않고도 이상이 생긴 단계만 고칠 수 있기 때문이다.ex) PC방에서 오버워치를 하는데 연결이 끊겼다.한 PC만 문제가 있고 오버워치 소프트웨어에 문제가 있다면(7계층 어플리케이션 계층)있다고 판단해 다른 계층에 있는 장비나 소프트웨어를 건들이지 않는 것오버워치 소프트웨어에 문제가 없고, 스위치에 문제가 있으면(2계층 데이터링크 계층)모든 PC가 문제가 있다면 라우터의 ..

불변성이란?메모리에 있는 값을 변경할 수 없는 것을 말한다.원시 데이터(string, number, boolean, null, undefined, Symbol): 불변성 있다.원시데이터는 수정시, 메모리에 저장된 값 자체는 바꿀 수 없고, 새로운 메모리 저장공간에 새로운 값을 저장원시 데이터가 아닌 데이터(Object타입: 객체, 배열, 함수 ..): 불변성 없다.원시데이터가 아닌 데이터는 수정했을 때 기존에 저장되어 있던 메모리 저장공간의 값 자체를 변경리액트에서 상태 불변성리액트에서 불변성의 지키는 것이 중요한 이유리액트가 상태 업데이트를 하는 원리때문리액트가 화면을 리렌더링하는기준state가 변하면 리렌더링!state가 변하지 않으면 리렌더링 xstate가 변했는지 변하지 않았는지 확인하는 방법?s..

Next 13 업데이트에 app directory가 되면서, app directory 내부 모든 컴포넌트는 기본적으로 '서버 컴포넌트'로 동작하게끔 설정되었습니다.app directory 내부에서 '클라이언트 컴포넌트'로 지정하고 싶다면, 아래와 같이 파일 최상단에 'use client' directive를 명시해야 합니다.'use client' // HERE ! import { useState } from 'react' export default function Counter() { const [count, setCount] = useState(0) return ( You clicked {count} times setCount(count + 1)}>Click me ..

Virtual DOM리액트에서는 가상 돔을 사용가상 돔이란, 실제 DOM(Document Object Model)을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 구성해 원래 DOM과 비교하여 달라진 부분을 리렌더링 하는 방식으로 작동이 때 가상 돔을 잘 이해해야만 **리액트의 상태(state)**에 대해 잘 이해하고 다룰 수 있음Virtual DOM을 사용하는 이유자바스크립트의 모던한 방식(Vanilla Javascript)의 DOM을 조작하는 방식은 무거운 작동방식이다.실제 DOM에는 브라우저가 화면을 그리는데 필요한 모든 정보가 들어있기 때문그래서 리액트는 깜빡거림 없이 부드러운 UX를 사용자에게 제공하고자 변경사항만 빠르게 파악하고 리렌더링 하기 위해 DOM을 만들어 비교하는 방식을..

Promise비동기 작업의 완료 또는 실패를 나타내는 객체callback 방식의 call back 지옥을 해결하기 위해 사용Promise의 3가지 상태Pending (대기): 초기 상태로, 이 상태에서는 작업이 아직 완료되지 않음Fulfilled (이행): 작업이 성공적으로 완료된 상태로, 결과값이 존재Rejected (거부): 작업이 실패한 상태로, 실패 원인(에러)가 존재Promise의 장점비동기 처리 시점 명확히 표현연속된 비동기 처리 작업 수정, 삭제, 추가 유연비동기 작업 상태 쉽게 확인 가능유지보수 쉬움후속 처리 메소드thenthen 메소드는 두 개의 콜백 함수를 인자로 전달받음첫 번째 콜백 함수: 성공(fulfilled, resolve 함수가 호출된 경우)시에 실행두 번째 콜백 함수: (re..

패스트캠퍼스 x 야놀자 웹 프론트엔드 부트캠프 파이널 프로젝트를 준비중인데, 팀원 중 한 분이 상태관리로 React Query를 쓰는 것이 어떻겠냐고 하셔서 React Query가 무엇인지 공부하고 정리하고자 한다. React Query 란 ? 공식 문서에 따르면, 아주 강력한 비동기 상태를 관리하는 툴이라고 한다. 그럼 이 상태가 무엇인지 알아보자. 상태(State) 란 ? 주어진 시간에 대한 시스템을 표현한 것 문자열, 배열, 객체 등 다양한 형태로 Application에 저장된 데이터 이를 프론트 개발자 입장에서 본다면, 페이지가 로드되거나 렌더링된 이후 사용자가 수행한 모든 동작에 대한 결과라 할 수 있다. 사용자가 액션을 취하면 그 액션에 따라 상태(state)가 바뀔거고 변경된 상태에 따라 V..

리덕스란? 자바스크립트 어플리케이션을 위한 상태 관리 라이브러리 리덕스 Data Flow Action: 간단한 JS 객체. 작업 유형을 지정하는 type 속성이 있으며 선택적으로 redux 저장소에 일부 데이터를 보내는 데 사용되는 payload 속성도 가질 수 있음 Reducer: 어플리케이션 상태 변경 사항을 결정하고 업데이트된 상태를 반환하는 함수. 인수로 조치를 취하고 store 내부 상태 업데이트함 Redux store: 이들을 하나로 모으는 객체 저장소는 어플의 전체 상태 트리를 보유. 내부 상태를 변경하는 유일한 방법은 해당 상태에 대한 Action을 전달하는 것. Redux store는 클래스가 아님. 몇 가지 메소드가 있는 객체일 뿐 Dispatch: 스토어 내장 함수 중 하나로 리듀서에..

리액트에서 한 컴포넌트 안에서 데이터를 생성하거나 업데이트하거나 다른 컴포넌트와 데이터를 공유해서 사용하는 방법에는 여러가지가 있음 React Context란? Context는 모든 수준에서 수동으로 props를 전달하지 않고도 구성 요소 트리를 통해 데이터를 전달할 수 있는 방법을 제공 React Context는 컴포넌트 트리의 깊이에 관계없이 props를 전달하지 않고도 컴포넌트에 데이터를 제공 Context는 전역 데이터를 관리하는 데 사용 ex) 전역 상태, 테마, 서비스, 사용자 설정 등 Context API란? 전역 데이터를 Context에 담아서 사용하려면 먼저 Context를 생성해야 함 const MyContext = React.createContext(defaultValue); Cont..

이번에는 리액트를 사용해 디지니플러스 웹사이트를 만들 예정이다. 만들기 전에 필요한 기초 부분을 살펴보자. The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기 Axios란? 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 Axios 사용방법 axios 모듈 설치: npm install axios --save Axios 인스턴스화 하는 이유 중복된 부분을 계속 입력하지 않아도 되기 때문에 cf) js파일에 'racfe' 치면 functional한 컴포넌트 바로 생성! Styled Component란? CSS-in-JS라고 하는 JS 파일 안에서 CSS를 처리할 수 있게 해주는 대표적인 라이브러리 설치 방법 1. npm - n..