전체 글

이미지 이슈 Using `` could result in slower LCP and higher bandwidth. Consider using `` from `next/image` to automatically optimize images. 외부 url에서 받아오는 이미지의 경우는 next/Image를 통해 이미지를 최적화하는 것을 고려하라고 한다. 반면에 외부에서 받아오는 이미지가 아닌 서버 자체, 즉 프로젝트 assets에 있는 이미지의 경우는 Image를 적어주지 않으면 보이지가 않았다. 서버 내에 존재하는 이미지는 Image 컴포넌트를 이용해야 이미지가 제대로 뜨지만 next.config.js 설정을 별도로 해주지 않았기에 link[imageSource] 부분 때문에 Image 컴포넌트를 이용할 ..

회고 작성 이유 위같이 메세지가 왔다 그래서 한 번 정리해보고자 한다 나는 무엇을 잘했는가? 파트2 팀원 중에 열정이 좋고 이해력도 좋으신 분이 있었다. 하지만 아무래도 그 분은 코딩을 시작한지 얼마 안 되었다 보니 도움이 필요하였고 도움을 요청 받았을때 잘 알려드리고 싶었다. 내가 설명을 잘하려고 노력했기도 했지만 그분의 이해력이 좋으셨다. 그분이 헷갈려하시는 걸 도움을 드리면 이해하시고 좋아하는 모습을 볼때 정말 뿌듯했다. 덕분에 설명하는 능력도 조금은 나아진 것 같고, 이런 일을 했다는 거 자체가 팀에 도움이 되었다고 생각한다. 나는 어떤 문제를 겪었는지, 어떻게 해결했는지 나는 늘 마감이 아쉽다. 구현해야 하는 기능이 있으면 이를 빨리 만들고 싶은 나머지 코드 품질이 너무 안 좋아졌고, 그 이후에..

기능 요구사항 IntersectionObserver란 것을 처음 알게 되었다. 무한 스크롤을 구현할 때 스크롤 이벤트 보다는 성능상의 이점이 있기 때문에 무한 스크롤을 구현할 때 많이들 쓰는 기술인 것 같다. 위 페이지를 스크롤 할 때 링크 추가하기 부분이 보이지 않을때 이를 최하단에 고정시키라는 요구 사항이었다. 또 위처럼 footer가 보인다면 이를 보이게 하면 안되었다. 처음 작성한 코드 useEffect(() => { const observer = new IntersectionObserver( (entries, observer) => { entries.forEach((entry) => { if (entry.target.id === "mainEntry") { if (!entry.isIntersect..

지금까지의 나는 아무 생각없이 코딩을 해왔다. 이제껏 나는 아무 생각없이 코딩을 해왔다. 복잡하게 코딩하는 걸 싫어해서 최대한 내가 보기에 직관적으로 코딩을 한 다음에 리팩토링은 정말 개나 줘버렸다. 하지만 이러한 습관 탓에 요즘에 성장하는 느낌이 들지 않았던 것 같다. 오늘 코드잇 파트3 멘토링 시간에 다른 분들은 자신들이 코드를 짤 때 겪었던 경험을 말하지만 나는 "최대한 단순하게 코드를 짜고 리팩토링도 하지 않아 이를 고쳐야 한다" 라는 말 뿐이었다. 사실 이전까지는 강의 듣기에만 집중하여 뭔가를 만들어 본 경험이 정말 전무하다 그래서 코드를 많이 짜보지 않았다.. 솔직히! (그래서 이런 고민을 하는게 당연하다고 생각한다) 앞으로는 *많이* 만들고 다른 좋은 코드를 *많이* 참고하자 이제는 단순 구..

사건의 발단 위의 롤링페이퍼에 있는 저 메시지들을 삭제를 해야 했다. 휴지통 버튼을 누르면 서버에 delete 리퀘스트가 보내지고 그 이후에는 롤링페이퍼 페이지로 리다이렉트를 시킨다. 위가 바로 롤링페이퍼 페이지이다. 하지만 삭제를 하고 이 페이지로 리다이렉트를 시키니 삭제된 데이터가 반영되지 않고 그대로 남아있는 것이다. 아마도 react-router의 navigate로 리다이렉트시 url은 다르지만 같은 paper 컴포넌트를 렌더링해서 (중복된 데이터가 많아 어쩔 수 없었음) useEffect가 동작을 안하는 것 같다. 왜 이렇게 생각했냐면 다른 팀원이 post페이지에서 롤링페이퍼를 작성을 하고 롤링페이퍼 페이지에 리다이렉트 될때는 useEffect가 실행되었다. 간단하지만 별로인 방법 1 메세지 삭..

위는 스프린트 1기 팀원들의 프로젝트를 보다가 발견한 코드인데 우리 팀이 진행중인 방식보다 더 맘에 들었다. 스타일드 컴포넌트는 앞에 S를 붙여주는 게 좋았다 컴포넌트랑 스타일드 컴포넌트가 구분이 안되었는데 이것을 활용하면 너무 좋을 것이다. 아니 왜 이걸 생각을 못했을까... 그리고 스타일드 컴포넌트에 prop을 넘겨줄때 $를 붙이는 것도 까먹어서 콘솔창에 에러를 봐야 했다.... 이런 부분도 신경쓰면 좋을 것이다. 이제 1주일 동안 리팩토링을 진행하니 이 부분을 팀원들에게 말해줘야 겠다. 리팩토링할 부분은 아래와 같다. 1. 컴포넌트 별로 파일 형식이 너무 통일이 안되어 있다. -> 예시) 어떤 컴포넌트는 index.js가 있고 어떤 컴포넌트는 없다. 컴포넌트간 이름 중복이 있는데 폴더 구조가 이들의..

프로젝트 진행중에 popOver를 만들었는데 absolute를 주었음에도 불구하고 popOver가 나타날때 레이아웃이 깨지는 문제가 있었다. 개발자도구로 스타일을 보아도 아무런 변화가 없는데 왜 레이아웃이 밀려나는 걸까? 이 문제는 검색하기에는 어떤 키워드로 해야할지 애매하기 때문에 내가 이것저것 만져보며 해결했다 Relative 된 요소: Contents의 직계자식으로 Popover를 넣었더니 해결됐다!

왜 이런 글을 적나요? 개발 동아리 운영진으로 참여하게 됐는데 위의 투두메이트를 클론을 해야 했다. 내가 이걸 어느정도 클론하면서 어려웠던 점을 적고자 한다. 이런게 어려웠음 이미 만들어진 제공받은 API를 활용하여 이 앱을 만들어야 했는데 전역 상태관리 라이브러리를 도입할 수 밖에 없었고(todos데이터 때문), 백엔드에서 제공해주는 기능이 좀 제한적이었다 (특정 목표의 해당하는 투두리스트 얻어올 방법이 없었음). 근데 그렇다고 백엔드 한테 이 기능을 만들어 달라고 하는 것도 별로인게 나중에 목표가 100개 정도 된다면 100개의 리퀘스트를 보내게 된다.. 그래서 최대한 받아온 todoList를 UI의 필요대로 바꾸었다. recoil의 selector를 적극 활용했다. react-query 사용을 좀 ..