스타일코드 컨벤션 스타일 코드에서 컨벤션이 존재한다는 사실 일반 CSS나 SCSS를 작성 할 때에는 CSS Sort 익스텐션을 사용해서 쉽게 정렬했지만 지금 이 프로젝트는 emotion을 사용해 css-in-js형식으로 작성하고있다. 그래서 기본적인 스타일코드의 문법이 이런식이다. export const Loading = styled.div` display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; width: 100%; height: 30vh; `; 막상 스타일링하고 작성할 때에는 머리에 생각나는대로 편한대로 작성하곤 한다. 하지만 이 프로젝트도 당연히 컨벤션을 적용해야지. 스타일 컨벤션 ..
유저명/타이틀 변경, 계정 삭제 기능 추가 수정 버튼 클릭 시 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..
LIKE 버튼 구현 UI는 아래와 같이 스타일을 적용했다. Like 버튼의 데이터는 글, 날짜, 작성자와 동일하게 가져왔다. Like 버튼은 데이터만 가져오면 끝나는게 아니다. 누를 때 마다 데이터가 업데이트 되어야 하고, 이미 눌렀다면 다시 뺀 값이 업데이트 되어야한다. api는 게시물 번호와, 유저명을 받아 해당 게시물을 찾아서 like배열에 유저명을 넣는 식으로 작성했다. like배열에 이미 유저명이 있으면 배열에서 유저명을 제거해서 다시 돌려준다. /** * @path {PATCH} http://localhost:8000/api/posts/like * @description 좋아요 수 변경 * @returns {post} */ router.patch('/posts/like', async (req,..
