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

json 파일에서 ty: fl 부분을찾아 K 배열을 변경한다.R,G,B 이며 , 0-255범위가 아닌, 0-1의 범위를 갖고있다 ( 0.74 , 0.23,1 등)lottie-colorify 패키지 설치패키지 설치lottie-colorify 임포트하기 임포트 위치는 Lo

react-lottie 패키지는 react 18을 지원을 안한다.그래서 구글링후 lottie-react 받아 설치하니, 인터랙션이 작동을 안한다.그래서 찾고찾아 찾은 lottie-web 패키지.이건 <Lottie> 컴포넌트를 바로지원하지않아 본인이 직접만들어야함.

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

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

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

고래 등에 올라탄 무수한 컨테이너들.. 이미지를 실행한 상태 ! 격리된 공간에서 이미지를 실행시켜 프로그램을 동작시키는 기술임.한 애플리케이션 / 한 서버의 여러개의 컨테이너를 가져도 상관X 오히려좋음.기존의 이미지 (readonly레이어가 모인)에다가 read/wri

도커의 방식도커의 방식;여기서 이미지는 이미지파일이 아님, 컨테이너의 실행을 하기위한 최소한의 파일들 설정값들이다.이 이미지 때문에 더이상 각 PC 에서 개발환경을 맞춘다고 npm i,환경변수 노가다를 하지 않아도 된다.git 방식과 유사하게 로컬(호스트) 에서 doc

DOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKERDOCKER

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이나, 구매하기 이후 등 컨셉에 맞춰 잘 구