Emotion이란? Emotion – Introduction (Edit code to see changes) emotion.sh Emotion.js는 CSS-in-JS의 종류 중 하나로 JavaScript 안에서 스타일을 작성할 수 있게 해준다. emotion.js는 주로 프레임워크와 관련없이 사용하는 Framework Agnostic과 React 두 가지 방식으로 사용된다. emotion 설치 # Framework Agnostic $ npm install @emotion/css # React $ npm install @emotion/react import 하기 emotion.js를 사용해야 할 컴포넌트에 먼저 import를 해야한다. /** @jsxImportSource @emotion/react */..
유저명/타이틀 변경, 계정 삭제 기능 추가 수정 버튼 클릭 시 flag State 변경으로 수정모드로 변경한다. const onEditHandler = useCallback(() => { setIsEditing((prev) => !prev); }, []); {isEditing ? ( ) : ( {userName} {userTitle} )} {isEditing ? ( 저장 ) : ( 수정 )} 포스트 변경과 동일한 구조로 유저명과 유저타이틀도 변경된 내용을 POST로 서버로 보낸다. const onEditUserSubmit = useCallback( (e) => { e.preventDefault(); const regexp = /^[가-힣.,?;^_!%\s]+$/g; if (editName) { if (e..
글 CRUD 기능 완성 (수정/삭제) 일단 수정/삭제 기능을 추가하기 위해서 post카드를 클릭했을 때 수정버튼과 삭제버튼이 나오도록 구현했다. post카드를 눌렀을때 높이를 조절하는 것은 ref와 css를 사용해서 적용했다. 처음에는 state를 사용해서 emotion props로 보냈는데, state가 바뀔때마다 post카드가 리렌더링 되는 바람에 useRef를 사용했다. postContainer 자체에 ref를 적용하고 그 안에있는 PostWrap에 onClick이벤트를 줬다. PostWrap이 클릭되면 Container에 클래스'open'을 추가/삭제하는 기능이다. 이 때 like버튼을 클릭할 경우에는 열리지 않도록 클릭한 것이 svg나 path인 경우에는 동작하지 않도록 했다. 추가로 유저가 수..
이번 주말동안 크게 한 것은 로그인 상태관리(서버)를 Redux에서 ReactQuery로 바꿨다는 점 작업하는동안 크게 느꼈던 것 부터 적고가자.. Redux는 클라이언트의 상태관리, React Query는 서버의 상태관리 HTTP 통신 시 요청(requset)과 응답(response)의 데이터를 꼭 확인하면서 작업하자. useQuery의 Promise함수는 꼭 response를 return을 해야 data에 값이 들어온다. const { data, isLoading, error } = useQuery( ['isLoggedIn'], async () => await axios .get('/api/users') .then((res) => { ✅ if (res.data.isAuth === false) retu..
