Jay

nodemon을 실행하려고 하는데 아래와 같이 error 그래서 여기 velog를 참고하였다. 먼저 아래와 같이 명령어 입력 (-dev를 붙이면, development mode이고 local에서만 사용하겠다는 의미) npm install nodemon --save-dev 그리고 package.json부분에 dev를 추가해준다. 작업하고 있는 파일이 server.js이니까 server.js를 추가해준다. "dev" : "nodemon server.js", npm run dev 명령어로 서버를 실행 하지만 localhost:8080 들어가보니 에러가 뜬다. 머가 문제인지 모르겠다. 해결해야 하는데 30분째 에러찾는중.. https://codingapple.com/course/react-basic/ React..

아래 명령어로 SASS를 설치한 후에 yarn add node-sass SASS 문법인 변수사용을 해주었는데 아래와 같이 아래가 떴다. (Detail.scss) $메인칼라 : #ff0000; .red { color : $메인칼라; } 무슨 에러냐? SASS 버전이 6.0이었는데 react에서 사용하는 라이브러리 중에 sass-loader와 버전이 맞지않아(추측) 버전 호환 문제로 오류가 발생했다. node-sass 최신버전을 삭제한 후에 이전 버전을 설치! $ npm uninstall node-sass $ npm install node-sass@5.0.0' $ yarn remove node-sass $ yarn add node-sass@5.0.0 하지만 다시 에러가 났는데... 일단 놔뒀다가 나중에 해결..

자 프로젝트 실행하기 위해서 cra 명령어를 입력한다. shop라는 하위폴더가 생성이 되고 App.js에서 HTML들은 지우고 div 하나만 남겨두고 시작한다. npx create-react-app shop import logo from "./logo.svg"; import "./App.css"; import { Button } from "bootstrap"; function App() { return ( ); } export default App; 그리고 이번에는 메뉴디자인을 편리하게 해주는 bootstrap를 이용한다. 리액트에 맞게 바꾼 Bootstrap를 설치한다. npm install react-bootstrap bootstrap@5.1.3 yarn으로도 빠르게 설치가능 yarn add reac..

프로젝트 에러를 잡을 때 엄격하게 하기 위해서 eslint를 이용해서 프로젝트를 점검해보자. 아래 명령어를 설치해주고 npm i -D babel-eslint eslint-config-airbnb eslint-plugin-import npm i -D eslint-plugin-react-hooks .eslintrc 파일도 아래와 같이 parser babel-eslint를 추가하여 babel이 코드를 해석해서 최신문법도 에러를 발생시키지 않게 하자. extends 부분도 airbnb(airbnb사가 강한규제로 유명함)로 설정하여 스타일을 강한 규제에 놓이도록 하자. { "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 2020, "sourceType":..

saga의 단점은 코드줄이 매우 길어진다는 것이다. logIn만 해도 그렇다. action 하나당 3개씩 세트이기 때문에 add comment follow like unlike unfollow 이런 것들이 action 3개씩 나온다. 그래서 이제 saga를 한번 나눠보자.. function logInAPI(data) { return axios.post("/api/login", data); } function* logIn(action) { try { // const result = yield call(logInAPI, action.data); yield delay(1000); yield put({ type: "LOG_IN_SUCCESS", }); } catch (err) { yield put({ type:..

아래코드 yield take의 단점은 일회용이라는 것이다. 그래서 한번 LOG_IN_REQUEST 하면 로그인 실행되고 LOG_OUT_REQUEST 하면 로그아웃 실행되고 한다. 그런데 take를 써서 한번밖에 받지 않으니까 한 번 로그인 했다가 한번 로그아웃하면 그 다음 로그인 할 때는 이벤트 리스너가 사라져 버리게 된다. // sagas 폴더안에 index.js function* watchLogin() { yield take("LOG_IN_REQUEST", logIn); } function* watchLogout() { yield take("LOG_OUT_REQUEST", logOut); } function* watchAddPost() { yield take("ADD_POST_REQUEST", add..

all fork call put 요런 것들에 대해서 알아보자. 얘네들을 saga의 이펙트라고 부른다. 그래서 보통 rootSaga() 하나 만들어 놓고 거기에 비동기 액션들을 하나씩 넣어준다. thunk처럼 async action creator라고 표현하기엔 좀 그렇고 한번 비교를 해보자. // sagas폴더에 index.js import { all, fork, call, put } from "redux-saga/effects"; export default function* rootSaga() { yield all([ fork(watchLogin), ]); } rootSaga()안에 all은 배열을 받는데 배열을 받으면 그 배열안에 들어있는 것들을 한방에 다 실행을 해준다. 그러면 아래 watchLogi..

이전에 진행했던 thunk를 지우고 saga를 설치해주자. npm rm redux-thunk npm i redux-saga 그리고 createMiddleware를 import 해서 변수에 넣고 아래와 같이 넣어준다. // reducers 폴더안에 configureStore.js파일 코드 일부분 import createSagaMiddleware from "redux-saga"; const configureStore = () => { const sagaMiddleware = createSagaMiddleware(); const middlewares = [sagaMiddleware, loggerMiddleware]; sagamiddleware는 살짝 기능이 조금 더 있다. 아래 코드를 보자. rootsaga는..

NodeBird 클론코딩을 진행하였는데 antd을 이용해서 sns 화면을 만들어주고 Redux도 연동하여서 더미데이터와 게시글 댓글 이미지도 구현하고 해시태그 링크도 만들어 주었다. (정리는 차후에 하자...) 이제는 Redux-saga를 연동해주면서 프로젝트를 진행해줄 것인데, redux-thunk 부터 이해를 하자.(redux-thunk말고 redux-saga는 나중에 알아보자.) redux-thunk는 redux의 middleware로써 (여기1와 여기2를 보고 참고하자.) redux-thunk는 redux가 비동기 dispatch할 수 있도록 도와주는 역할을 한다. thunk는 프로그래밍 용어이다. 지연된 함수를 뜻한다. thunk 공식문서인 여기를 한 번 보자. 아래 코드를 보자. increme..

여기서 정규표현식을 갖고 놀아보자. 일단 정규표현식은 다양한 경우를 고려해야 한다. 아래와 같이 해시태그 사이에 띄워쓰기가 있을 수도 있고 띄워쓰기가 없을 수도 있다. 어떤 사용자는 #을 연달아 적고 아래와 같이 쓸 수도 있다. 사용자들이 각양각색의 방법으로 글을 쓸 수가 있기 때문에 내가 원하는 의도와 일치하는지 체크를 해보는게 좋다. 일단 뒤에 g가 붙냐 안붙냐가 강건인데 g가 붙으면 여러개이고 g가 안붙으면 하나만 뜻한다. 해시태그를 여러개 찾아야하는 나의 입장에서 g를 붙여준다. #을 하면 문자 그대로 #을 뜻한다. #들이 모두 선택이 되고 g를 빼보면 첫번째 #만 선택된다. 그리고 . 하나를 붙이면 모든 글자 중에서 한글자가 선택되고 ... 세개를 붙이면 3글자가 선택된다. 길이가 항상 3개로 ..