클라이언트와 서버를 연결하고 실시간으로 통신이 가능하도록 하는 첨단 기술연결이 설정되면 별도의 요청을 보내지 않고도 데이터를 수실할 수 있다.작동 방식클라이언트와 서버간의 연결은 당사자 중 하나에 의해 종료되거나 시간초과에 의해 닫힐 때 까지 열린 상태로 유지된다.설정

컴포넌트 렌더링DOM 업데이트useEffect 실행만약 useEffect가 의존성 배열을 가지고 있다면 그 배열 내의 값이 변결될 때마다 useEffect가 다시 실행됩니다.

useRef는 리액트의 Hook 중 하나로, 랜더 사이클에 영향을 주지 않는 참조를 만들 때 사용합니다.useRef를 사용하면 직접적으로 리얼DOM 엘리먼트에 접근할 수 있습니다.예를 들어 특정 input 엘리먼트에 포커스를 주거나, 엘리먹트 크리와 위치 정보를 얻을

Reciol기본적인 단위는 Atom과 Selector입니다.Atom은 상태 단위이고 Selector는 파생 상태를 만들 수 있습니다.Atom은 key라는 고유한 식별자, default라는 초기상태를 가집니다.Selector는 하나 이상의 Atom을 입력 받아 새로운 상

JavaScript XML의 줄임말로, 리액트에서 사용되는 문법 중 하나입니다. HTML과 비슷하게 생겼지만, 실제로는 JavaScript의 확장 문법입니다. JSX를 통해 UI 구조를 더 직관적이고 가독성 높게 표현할 수 있습니다.리액트 컴포넌트를 간결하고 명료아게

Async/Await와 Promise는 모두 자바스크립트에서 비동기 처리를 위한 방법입니다. 사용 방식과 가독성에 차이가 있습니다.비동기란 프로그램이 특정 작업을 완료하는 동안 다른 작업을 동시에 수행할 수 있게 하는 처리 방식을 말합니다.Promise비동기작업의 최종

'==' 는 동등 연산자입니다.두 값이 같은지 비교하기 전에 타입을 자동으로 변환합니다. 따라서 다른 타입의 값을 비교할 때에도 사용할 수 있습니다.'===' 일치 연산자 입니다.타입 변환을 허용하지 않습니다. 값, 타입 모두 정확히 일치하는지 확인합니다. 따라서 값이

DOM은 Document Object Model을 말합니다.실제 DOM웹페이지의 구조를 나타내는 객체 모델입니다.웹페이지의 각 요소(태그, 속성, 텍스트 등)에 대한 정보와 이들의 관계를 표현합니다.실제 DOM을 직접 수정하면 화면에 바로 반영이 됩니다.하지만 실제 D

Redux란 자바스크립트 상태 관리 라이브러리입니다.리액트와 함께 사용되며, 앱 전체의 상태를 한 곳에서 관리할 수 있게 해줍니다.리덕스는 스토어라는 하나의 큰 저장소를 두고 이 곳에서 모든 상태 정보를 관리합니다.Redux를 사용하는 이유첫 번째 일관성 입니다.리덕스

리액트는 실제 DOM 변경 전에 내부적으로 가상 DOM이라는 개념이 사용됩니다.가상 DOM에서 미리 변화를 적용해 본 뒤 실제 DOM과 비교해서 다른 부분만 업데이트해줍니다.그렇기 때문에 직접적으로 DOM을 조작하지 않고 HTML과 비슷한 JSX 문법을 통해 View를

yarn create react-app final-sample --template typescript📁 shared / Router.tsx웹 앱에서 라우팅 로직을 중앙에서 관리하는 역할jsx 문법이 들어가기 때문에 확장자명을 .tsx로 지정해야 한다.📁 App.ts

서버와 유저가 데이터 주고 받으려면 http 요청을 이용한다.유저 : 데이터 정보를 주세요 (http 요청을 날림)서버 : 유저에게 해당 데이터를 보내줌유저와 서버의 양방향 통신폴더 생성server.js파일 성성 후 터미널에 yarn initpackage.json 파일

브라우저는 ts파일을 못읽는다.명령어 입력하면 자동으로 js파일로 변환해준다.?를 붙이면 그 속성은 옵션이다. (넣어도 되고 안넣어도 됨)다양한 타입 지정 ( Union type )타입을 변수로 지정하여 사용 가능 일반 변수명과 차별화 하기 위해 맨 앞은 대문자로 작성

팀원들을 처음 만나는날, 기획하는 날이다.spring boot를 주특기로 가지시는 분들과 만났다.음악을 공유 sns 이 주제로 했을 때 나중에 취업을 생각하면 이런 기능 구현을 필요로하는 회사들이 별로 없을 것 같다.2주 프로젝트로 하기엔 스코프가 너무 크다사용자가 직

📁 index.js📁 App.jsx📁 redux / config / configstore.js📁 redux / modules / todosSlice.js📁 db.jsontrunk함수 구현리듀서 로직 구현 : reducers -> extraReducerstjqj

dispatch할 때 객체가 아닌 함수를 dispatch할 수 있게 해준다.중간에 우리가 하고자 하는 작업을 함수를 통해 넣을 수 있고, 그것이 중간에 실행되는것이다.dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)📁 index.js📁 App

Promise 기반 비동기 통신 라이브러리별도 설치 필요하지 않다.단점미지원 브라우저 존재개발자에게 불친절한 response (jon으로 변환 과정 필요)axios에 비해 부족한 기능사용 예시두 개의 then 필요개발자가 일일히 then() 안에 모든 케이스에 대한 H

📁 App.jsx📁 App.jsx

텍스트 관련 클래스text-{색상}: 텍스트 색상 변경 (예: text-red-500).text-{크기}: 텍스트 크기 변경 (예: text-lg).font-{굵기}: 글꼴 굵기 변경 (예: font-bold).배경 관련 클래스bg-{색상}: 요소의 배경 색상 변경 (

1\. app / create / page.js 폴더, 파일 생성📁app / create / page.js