src/store 를 만들어 리덕스 관련 코드파일은 여기에 작성한다. index.js를 만들어 리듀서 함수와 스토어를 만든다. export 까지 끝나면, 리액트 컴포넌트와 연결해주면된다.리액트 저장소에 store를 제공하기위해 리액트의 최상단 index.js 에서 임포

수강하던 코딩온 수업에서 2치 풀스택 프로젝트를 진행하게 되었다.프로젝트 소개와 주제 선정 배경 보다,프론트엔드를 다루면서 겪게된 트러블들, 그리고 그 트러블들을 해결한 트러블 슈팅에 중점을 두는 나만의 기록이다. Keep Problem Try 회고방법론을 통해서 적으

Redux Redux 사용 해보기 npm i redux react-redux @reduxjs/toolkit index.js 수정 configureStore : store 생성 함수. Provider: 리액트 App.js 에 Store 를 손쉽게 연동 할 수 있도록

Redux 는 Javascript 상태관리 라이브러리리액트에 자주사용하지만 Redux는 vanilla 에서도 사용 가능하다.상태관리 라이브러리로 많이 사용컴포넌트 수가 많은 대형 플젝에서는 state를 전해주기위해 props를 엄청나게 써야함마치 콜백지옥같은 props

리액트에서 상태가 변경될때 useState 훅을 사용한다.상태가 변경된다는건.. 값이 바뀔때 (단순하게 생각)&& 와 같이사용해서 토글 스위치 같이 사용 할 수 있다.visible 이 트루일때 h1 태그를 보여주고 visible 이 false 일때 h1 태그가 렌더링

...rest 파라미터 // 나머지 매개변수 파라미터의 개수를 모를때 ...rest로 작성함

Socket.io socket.io 를 알아보고 채팅 서비스를 구현해보았다. 처음엔 양쪽 모두 확인해야해서 많이 어지러웠지만, 익숙해지니 어떤 흐름인지 차츰 보이기 시작했다. socket.io를 응용하기 위해 토이 프로젝트인 채팅방 구현에서 기존에 사용중이던 디

Socket.io ? 을 알기전에 소켓을 먼저 알아보자 소켓 ? 소켓은 네트워트 계층중 7계층 중 물데네전세표응 "응용 계층" 과 4계층 "전송 계층"을 연결해주는 프로그래밍 인터페이스이다... > ## 그럼 또.... OSI 모델은...? > * 아뇨? 7계층은

REST API란, 웹 API 를 요청/응답하기위한 규칙이다..REST API란, 알기전에 API 를 먼저 알아보자,Application Protocol Interface 로 요즘 API 형태가 아주 다양해서 그렇지..,간단하게, 다른 애플리케이션/서비스 와 상호작용을

Model View Controller소프트웨어 설계와 관련된 디자인 패턴 ( 디자인 패턴 :상황에 따라 설계 방법을 정리한 코딩 방법론)패턴들을 구분해 개발한다유지 보수가 용이하다.유연성이 높다확장성이 높다.협업에 용이하다.완벽한 의존성 분리가 어렵다 설계 단계가

데이터 값을 ref을 이용하여 value 값 변화시 , 화면에 출력을 동시에 할 수 있다.하지만, input (화면) 상에서 value 변경시,데이터 값도 자동적으로 바뀌게 하려면 onInput 을 이용하여, value 값의 변동이 있을때마다 함수를 실행시키고, 함수

콜백관리가어려우니 ajax를 사용한다. ajax는 제이쿼리가 필요하다promise기반의 axios를 쓰자 그냥 ( good ).~자매품 fetch도 있어요~promise 함수의성공 리턴값은 resolve (안에다가)실패 리턴값은 reject( 안에다가 )입력된 데이터를

mkdir 폴더명 (폴더 생성)npm init -y ( project.json 기본값 생성) npm install experss ejs /node_modules package-lock.json두줄 적어주면 된다.

1주차 Vue 3.0 > ### Vue 프로젝트: vue CLI 를 설치해야한다 / npm i -g @vue/cli (npx) vue create "프로젝트 폴더" Vue3 Default 선택 > ### Fragment vue2 ➜ vue 3 넘어오면서 Fragme

첫 프로젝트가 끝났다.........는 아니고 마저 수정해야하는게 산더미다..프로젝트 기간보다 애프터서비스기간이 더 길거같은 느낌.잘한 점이.... ➕라이브러리를 통해 반응형 레이아웃을 효율적으로 만들었다 생각한다.coupon이나, 구매하기 이후 등 컨셉에 맞춰 잘 구

스크립트 언어라 어느 환경에서도 도작성능이 빠르고 좋음배우기 쉬움js 쓰는 개발자가 많음npm ? : 노드 패키지를 관리 해주는 툴패키지 관리 : 프로젝트를 위해 다양한 프로젝트를 받고,충돌관련 문제를 json 파일로 관리npm 사용하기 ;npm init : pack

DOM JS를통해 DOM(HTML)을 컨트롤을 알아봄. querySelector('요소 선택자') : 문서에 존재하는 요소를 찾아줌 querySelectorAll(요소 선택자) : 존재하는 해당 요소를 찾아주는 메소드 (모든 요소를 가져와서 배열로 만들어줌) getElementById("ID이름") : ID를 가지는 요소를 불러오는 메소드 > ##...

0308 > ## git > 설명 대표적인 버전관리 시스템 ( 컴퓨터 파일의 변경사항을 추적 ) Git의 특징; * 폴더 단위로 관리가 가능 : 하나의 프로젝트 단위로 관리 * Git에 대한 모든정보는 .git 폴더 안에 있다. * Commit 은 로컬에서만 일어나

flex-direction(주 축을 설정) :row (좌 -> 우) / row-reverse(우 -> 좌) / column (위 -> 아래) / column (아래 -> 위)flex-wrap : (줄 바꿈 여부) :nowrap(묶음없음) / wrap(여러줄 묶음) -