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

LAN과 WAN이란?보통 인터넷 라우터를 통해 연결된 좁은 범위에서의 연결된 네트워크를 LAN(Local Area Network)라고 부른다.그래서 보통 LAN선이라고 부르는 것이다.이러한 LAN이 모여 세계의 네트워크를 구성하는 방식이 WAN(Wide Area Network)프로토콜(protocol)우리가 일상적으로 사용하는 네트워크의 확장 방식은 크게 두 가지 방법이 있다.한 네트워크를 확장하는 방법네트워크와 네크워크를 연결하는 방법여러 네트워크를 연결하는 방법을 인터네트워킹 이라고하는데 인터네크워킹을 통해서 네트워크의 일부가 고장나도 영향이 광범위하게 퍼지지 않거나, 불필요한 통신이 확산되지 않게 한다는 장점이 있다.이때에 인터넷에 연결되어 있는 컴퓨터들끼리의 소통이 필요한데 이를 위해서 일종의 약..

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..