리덕스란? 자바스크립트 상태 관리 라이브러리 상태 관리 도구 상태란? 리액트에서 상태(State)는 컴포넌트 안에서 관리되는 것 상태 관리 도구가 필요한 이유? 리액트에서 자식 컴포넌트들 간의 다이렉트한 데이터 전달은 불가능하다. 따라서, 자식 컴포넌트들 간에 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받는다. (props) 그렇지만 자식이 많아지면 상위 컴포넌트에서 props를 계속 내려 받아야 하는 불편함이 생긴다. (Props Drilling) 상태 관리 도구를 사용한다면 전역 상태를 저장하는 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있게 되어 이러한 문제를 해결할 수 있다. 리덕스 구성 요소 Store - 상태가 관리되는 공간 (Store는 앱 안에서 한 개이다..

이번 포스팅은 Slack 클론코딩 3주차 메뉴와 모달 만들기, 그리고 4주차 DM 보내기를 수강하고 정리하고 싶은 것들을 몇 가지 적어보았다. 4주차가 실습 위주라 정리할게 많지 않았어서.. 그냥 한번에 쓰기로... 1. npm 모듈 설치 시 @types/gravatar 이런식으로 typescript 버전도 깔아야하는지 유무 시행착오 없이 미리 아는법 : https://www.npmjs.com/ npm | Home Bring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript de..

1. 완성 후 반복되는 코드 -> 커스텀 훅 기본으로 제공되는 훅을 합쳐서 만들 수 있다 2. 제네릭 타입 타입을 변수로 만들어서 매개변수 자리에 값이 들어갔을 때 리턴값의 타입도 같은 타입으로 자동으로 정해짐 3. - return 타입에 대해서 변수를 따로 만들어 가독성을 향상시킬 수 있다 - any 대신 ChangeEvent, e.target.value 대신 e.target.value as unknown as T 를 넣어줌 4. axios 요청 보내기, CORS, proxy - Console 탭뿐 아니라 Network 탭도 같이 보면서 개발하기를 추천 프론트에서 보낸 요청을 상세히 확인할 수 있다 - OPTIONS : 프론트(3090)와 백(3095)의 포트번호가 달라서 CORS에 대해 요청을 한 번..

리액트+타입스크립트 공부를 위해 스터디를 시작했다! Slack 서비스를 클론코딩하는 강좌를 들으며 익혀볼 예정 (Slack도 리액트를 이용해 개발되었다고 한다) 첫 주차는 섹션0. 프론트엔드 초기 세팅부터 시작하는데, 본격적인 파트는 아니어도 알아두면 좋을 것 같은 부분들이 있어 정리 겸 적어보려고 한다. 1. tsx 파일을 typescript가 변환을 해주고, 그거를 webpack이 받아서 babel로 처리해서 js파일로 만듦. 브라우저는 항상 html, css, javascript를 인식하기에 그로부터 프론트엔드 개발이 시작된다는 것을 기억하자 babel이 html파일 만들어주는거 아님, index.html이 리액트로 개발할 때(SPA)에도 매우 중요. 성능 개선, 검색 엔진 최적화할 때에도 영향이 ..

미리보기 React-Slick 설치하기 npm i react-slick yarn add react-slick npm i slick-carousel yarn add slick-carousel 위와 같이 필요한 라이브러리를 설치해준다. import Slider from "react-slick"; import 'slick-carousel/slick/slick.css'; import 'slick-carousel/slick/slick-theme.css'; 라이브러리를 다 설치했다면 위와 같이 import 해준다. css를 수정하고 싶다면 두번째와 세번째 줄도 빼먹지 않고 import 해준다. React-Slick 사용하기 react slick의 기본 코드는 다음과 같다. import React, { Compone..

Slick을 사용하여 환경이슈 컴포넌트 완성을 하고, 뒤이어 구현할 산 추천 컴포넌트는 비슷하니까 스타일이랑 내용물만 살짝 바꿔주면 금방 하겠다 싶었는데, 이미지 넣어주고 산 추천 관련한 더미데이터 추가해서 내용물 넣어주니까 이상하게 슬라이더 안에 이미지만 보이고 텍스트가 하나도 안보였었다. 개발자 도구 켜서 요소들을 확인해보니 텍스트들이 모두 이미지 밑으로 들어갔다는 사실을 알게 되었고, 생각해보니 이미지 넣고 텍스트 넣고 할게 아니라 이미지 위에 텍스트를 넣어야했음을 깨달았다. 그래서 그냥 아예 div 안에 이미지를 넣지 말고, div 배경을 이미지로 깔고 그 안에 텍스트를 넣어서 글씨가 배경 이미지 위에 오도록 하였다. 먼저, 배경으로 쓸 이미지 데이터를 map을 사용하여 props로 받아올 것이기..