선초코

프로젝트 했던 내용을 복습했다. - 초기 세팅부터 배포까지 혼자 해보려 시도 - 다른 사람들이 짠 코드를 이해하는 시간을 가졌다. 오늘 만난 오류들 button안에 button을 넣어놔서 생긴 오류 - 상위 컴포넌트를 div로 바꿔서 해결 style을 적용할 때 리액트에서 쓰는 속성값이 아닌 자바스크립트 속성값을 넣어서 생긴 오류 -콘솔창에서 알려주는 리액트 전용 태그로 바꿔줘서 해결 나의 yarn.lock과 다른 사람의 yarn.lock이 깃헙에 커밋하면서 섞여서 난 오류 - 초기 세팅부터 다시 하면서 내 컴퓨터 전용 yarn.lock과 package.json 생성 - 다음부터는 커밋할 때 이 파일들은 gitignore에 넣어주어 다른 사람들 것과 섞이지 않게 해야 한다. .env 파일에 지정한 환경변..

KPT 회고 작성(A반 8조) (12월 22일 ~12월 18일) 1.한 일 정서연: 커밋 컨벤션 정하기 / 프로젝트 초기 세팅 + yarn server 단축어 추가 / 게시글 등록 / 게시글 삭제 / 게시글 List 메인 페이지에 불러오기 / detail page에 게시글 하나씩 불러오기 / Header 수정 / 메인 페이지 검색 창, boardList CSS / 게시 글 유효성 검사/toasty 이용한 alert 창 홍다경: 사진 업로드 기능 / 상세 페이지 프레임 수정 기능 / 게시물 update 기능 / 레이아웃 수정 / 파이어베이스 프로젝트 연결 / 메인 페이지 캐러셀 기능 / 발표 자료 / 게시물 비밀번호 기능 / 프로젝트 로고 디자인 / 데이터 저장 시 현재 시간 저장되도록 설정 윤지영: 메인..

npm install react-slick npm install slick-carousel npm install --save react-toastify yarn add react-toastify https://www.codingfactory.net/13421 npm install react-icons --save // npm yarn add react-icons // yarn npm i react-toastify REACT_APP_API https://glitch.com/~pie-teal-witch

WIL 쓰는 법 핵심은 2개 - 알게 된 점 총정리 - 목표 TIL 의 회고: 이번주 알게 된 점 총정리 다음주 목표 세우기 이번 주 목표 달성여부 배운 것 axios를 활용한 CRUD module에서 Thunk와 Slice hook configStore에서 configStore axios url에 조건 넣기 sort(), reverse() new Date(), toLoCaleString() 다음 주 목표 css가 약한데 시간을 빨리 공부해서 맡은 부분 구현 잘하기 TIL 특강 때 배웠던 방식으로 TIL 쓰기 다른 사람이 쓴 코드도 원리 이해하기

프로젝트 기능 구현하는 과정 삭제, 수정 토글 버튼 만들기 리액트에서 어떤 식을 하는 것이 좋을까 하면서 검색하다가 활용하기 좋은 삼항연산자를 이용한 코드를 찾았다. https://stackoverflow.com/questions/64572972/using-refs-to-style-a-div-element Using Refs To Style A Div Element Good day, I'm new to react JS and I want to get a div element using refs and style it. It gives an error(can't read the property style of undefined). import React, { useState, useRef } from 'r..

새로고침 했을 때 게시물 조회가 안되는 문제 useEffect에 댓글 조회만 넣어놓고, 게시물 조회를 넣지 않아서 생긴 문제, 렌더링 했을 매번 불러와져야하는 내용 잊지말고 넣어주기 렌더링 할 때마다 댓글 조회하는 내용만 들어가있었다. useEffect(() => { dispatch(__getComments()); }, [dispatch]); 게시물을 조회하는 내용을 추가하고 나서 문제 해결! useEffect(() => { dispatch(__getBoards()); dispatch(__getComments()); }, [dispatch]); useState를 쓸 때 중괄호를 써주면 제대로 작동하지 않는다. 헷갈리지 말고 항상 대괄호를 써주자. 중괄호는 X! const {state, setState} ..

문제 해결 한 것 액션 크리에이터도 하나의 함수이기 때문에 소괄호를 붙이지 않으면 호출이 안된다. useEffect(() => { dispatch(__getBoards); //thunk로 만들어준 액션 크리에이터에 괄호를 붙이지 않았다 }, [dispatch]); 아래처럼 소괄호를 붙이니까 해결이 되었다. useEffect(() => { dispatch(__getBoards()); }, [dispatch]);​ 알게된 것 git에서 브랜치 이름 지을 때 / (슬래시)를 두 개 쓰면 오류가 난다 ex) feature/comment/create 그래서 - 하이픈으로 연결을 해줘야한다. 이건 엄청 많이 써도 상관이 없다. ex) feature/comment-create vscode 기능 중 알게된 것 아래 표..

리액트 심화 정리 https://seonchoco.tistory.com/110 React 심화 강의 Redux Toolkit yarn add react-redux @reduxjs/toolkit DevTool redux dev tools 라는 기능이 있다. 디버깅 할 때 좋다. 구글 웹 스토어에서 다운 받는 기능이다. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknkli seonchoco.tistory.com TIL 제대로 쓰는 법 특강 정리 https://seonchoco.tistory.com/112 TIL 제대로 쓰는 법 TIL 쓰는 이유 채용은 앎의 증명이다 성장, 성실함, 흡수력을 보여줘야 한다. TIL은 그런 것을 잘..

react-query (by 선형) 프론트 엔드 6개월 마다 트렌드 바껴서 라이브러리 유행도 바뀐다. 전역 상태 관리 라이브러리 redux -middleware redux - saga redux - obervable redux - thunk recoil mobx jotai 일단 redux 하나만 잘 배워두면 다른 종류도 어느 정도 쉽게 배울 수 있다. 서버상태 라이브러리 react-query swr rtk-query 사용하는 이유는 리덕스 미들웨어를 쓰다보면 불편한 점들이 있었다. 그런 불편함 보완하려고 react-query 도입 전 코드는 어떻게 짰을까? (redux-saga를 이용했다) react-query를 쓴 코드는 어떨까? useQuery data를 GET 하기 위한 기능

선형’s react 심화 Created: December 19, 2022 9:37 AM Redux Toolkit yarn add react-redux @reduxjs/toolkit DevTool redux dev tools 라는 기능이 있다. 디버깅 할 때 좋다. 구글 웹 스토어에서 다운 받는 기능이다. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko 우리가 toolKit 다운 받을 때 이미 devTools도 다운받았다 = toolKit 안 깔면 devTools 설정 따로 해줘야한다. thunk immer JSON 서버 프론트 엔드 만들 때 임시로 서버 역할을 하는 것 mock 데이..