분류 전체보기124

• 

  화면크기에 따른 자식순서 바꾸기 반응형으로 화면을 만들고 있는데 화면크기가 767px이하일 때 3번째 있는 자식이 첫 번째로 와야하는 화면을 만들어야 했다. 이걸 css를 통해서 구현을 해보자. React와 styled-component를 사용하였다. 코드 컴포넌트부분 const Header = () => { const navigate = useNavigate(); return ( { navigate('/work'); }} > work VNTRS { navigate('/'); }} > WILLACREATIVE.COM CONTENT INFO ); }; css부분 (order있는 부분만 가져왔다.) .work { order: 1; } .vntrs { order: 2; } .url { order: 3; } .content { order: 4.. 개발/개발일지 2023. 11. 2.

• 

  마우스 커서 div박스로 만들기 cousor옵션을 사용하는 것이 아닌 div박스를 통해서 커서를 만들어보자. 1. x, y축 데이터 가져오기 const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const handleMouseMove = (event: React.MouseEvent) => { setMousePosition({ x: event.clientX, y: event.clientY, }); }; return ( willacreative.com ); }; useState를 사용해서 x축과 y축 데이터를 담아줄 state를 만들어준다. handleMouseMove함수를 만들어 event.clientX와 event.clientY를 이용하여 커서의 위치를 state에 담.. 개발/개발일지 2023. 10. 20.

• 

  엘리먼트가 변경될 때 함수가 여러번 실행되는 버그 마우스를 올리면 +1씩 올라가는 함수인데 엘리먼트에서 엘리먼트로 변경될 때 함수가 3번 실행이 되는 버그가 발생하였다. 원인 const Home = () => { const [leftNum, setLeftNum] = useState(0); const leftPlusNum = () => { setLeftNum(leftNum + 1); }; return ( {leftNum % 4 === 3 ? ( ) : ( )} ); }; export default Home; onMouseEnter는 해당 박스에 커서를 올렸을 때 발동을 한다. leftNum % 4 === 3일 때 문제가 발생한다. 1. 커서를 올릴 때 leftPlusNum 함수 발동하여 leftNum % 4 -> 3이 된다. 2. 엘리먼트로 변경되면서 l.. 개발/버그일지 2023. 10. 19.

• 

  마진 넣으면 부모박스를 넘어버리는 현상 댓글페이지를 만들고있는데 대댓글부분에서 width:100%를 해버리면 부모에서 max-width: 500px를 해둔것을 넘어버리는 현상이 생겼다. 부모의 width는 가뿐히 무시해 버린다. 원인 %는 상대값이기 때문에 부모의 width를 가져온다. 부모의 width는 500px이기때문에 대댓글도 width를 500px를 가지고 margin값도 가지고 있기 때문에 박스를 넘어버린것이다. 해결 대댓글 width: calc(100% - 4.375rem)를 넣어버렸다. 100%는 부모의 width, 4.375rem은 내가 넣은 마진값이다. 그러면 박스에 딱 맞는 width가 완성된다. width: -webkit-fill-available; 이걸 넣어도 해결됐는데 chatGPT는 이건 크롬이나 사파리에서만 적용이.. 개발/CSS 2023. 10. 16.

• 

  페이지 진입, 새로고침시 페이지 render안되는 현상 commentPage에 진입 시, 새로고침시에는 화면이 안 뜨는데 코드를 추가하면 화면이 뜨는 이상한 현상이 있었다. 원인 useEffect(() => { getBoards(Number(mindId)).then((res: BoardsType[]) => { setMindData(res); }); const filterMindData = mindData.filter((data) => { return data.boardId === Number(postId); }); setPostData(filterMindData[0]); // eslint-disable-next-line react-hooks/exhaustive-deps }, [refresh]); 이 코드 전체를 이해할 필요는 없고 api를 통해서 데이터를 가.. 개발/버그일지 2023. 10. 16.

• 

  [커넥팅칩스] 프로젝트 5주차(10.02 ~ 10.08) 지라 사용 저번 주에 팀원들이 하고있는 일을 체크하기 위해서 노션에서 서로 체크리스트를 만들어서 공유를 했었는데 이러한 방법 대신에 지라를 사용하기로 하였다. 처음에는 사용하기 어려웠지만 브랜치와 커밋 그리고 풀리퀘스트도 추적이 가능한 작업관리도구라서 팀원이 일하고 있는지 내가 무엇을 해야하는 알 수 있어서 너무 좋았다. 직장에서 사용한다면 감시당하는 느낌일수도... 리팩토링 저번에 너무 마감에 쫒겨서 코드의 완성도보다는 기능구현에 초점에 맞춰져있었다. 그러다보니 다시 코드를 보니 컴포넌트명에 대한 규칙성도 없고 props도 너무 많아서 다른 사람에게도 보여주기 코드가 되어 리팩토링을 진행하게 되었다. 다른 팀원들과 겹치는 부분이 있고 프론트 팀장님이 내 파트를 리팩토링을 해보고 싶다고 하셔서 먼저 내 .. 프로젝트/커넥팅칩스 2023. 10. 13.

• 

  [커넥팅칩스] 프로젝트 4주차(09.25 ~ 10.01) 4주 차에는 고객사에게 명시된 스프린트기간이 끝나고 추석이 있는 주간이어서 엄청나게 바빴지만 그 뒤로 쭉 쉬게 되었던 한 주였다. 원래는 저번주 금요일까지 제출을 해야했지만 PM분이 화요일까지 일정을 늘려주셔서 작업을 끝 맞출 수 있었다. 내 인생에서 이렇게 쫓기는 기분이 들때가 있었을까.. QA 처음으로 QA를 진행하였는데 생각보다 많은 기능이 제대로 구현이 안돼서 나의 꼼꼼함에 의심이 생겼다. 하나의 기능을 완성해도 다른 부분을 만지면 고장 나서 열받기는 했지만 하나씩 해치워 나간다는 기분이 들어서 은근히 재밌었다. 기획단에 QA시트를 만든 것을 받았을 때 엄청나게 세세하게 작성을 해주어서 기획담당하시는 분이 대단하다고 느꼈고 의지가 되었다. 백엔드와 프론트가 현재 무슨 작업을 하는지 몰라 노션에서 .. 프로젝트/커넥팅칩스 2023. 10. 13.

• 

  박스 넘어가면 말줄임표로 만들 댓글프리뷰 부분을 박스를 넘어가면 줄 바꿈이 되지 않고 ...으로 만들어보자. // 컴포넌트 부분 const CommentPreview = ({ postProps }: { postProps: PostProps }) => { const { profileImage, nickname, content } = postProps.postData.commentList[0]; return ( {nickname} {content} ); }; // CSS부분 const CommentPreviewS = styled.div` display: flex; align-items: center; height: 1.5rem; margin: 0.62rem 1rem 0 1rem; font-size: 0.875rem; img { heigh.. 프로젝트/커넥팅칩스 2023. 10. 11.

• 

  before after 사용해서 줄 긋기 진행하고 있는 프로젝트에서 댓글창 부분 위아래로 회색선을 만들어야했다. 좀 더 깔끔한 코드를 위해서 before와 after를 이용해서 구현해보았다. 기존 코드 // 컴포넌트부분 const CommentOptionsBar = ({ postProps }: { postProps: PostProps }) => { return ( 댓글 {postProps.postData.commentCount} ); }; // styled-component 부분 const CommentOptionsBarS = styled.div` height: 2.5rem; background-color: var(--color-white); display: flex; align-items: center; justify-content: spac.. 개발/개발일지 2023. 10. 11.

• 

  input에서 한글자 입력시 focus 잃는 현상 프로젝트를 진행하다가 다른 팀원분이 리팩토링을 해주셨는데 그 후에 input에 한 글자씩 입력을 해도 focus가 없어지는 현상이 생겼다. (유지보수는 나의 것...) 블로그 를 찾아보니 글자를 입력할 때마다 rerender가 되기 때문에 이러한 현상이 생겼다. 코드를 보자. 문제 코드 const CommentInput = ({ userInfo, postData, setCommentFlip, inputToggleBind, isCommentBind, }: commentInputProps) => { const { state: inputToggle, Setter: setInputToggle } = inputToggleBind; const { state: isComment, Setter: setIsComment.. 개발/버그일지 2023. 10. 10.