전체 글

기능 요구사항 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 사용을 좀 ..

나는 vscode를 쓰기 때문에, 확장 프로그램을 설치했다. 위에서 말한대로 npm install -g eslint eslint를 전역적으로 설치한다. eslintrc를 적는다.

오늘은 코드잇 부트캠프에서 배운 fetch,프로미스에 대한 나의 지식을 시험할 수 있었다. 나는 404 응답이면 당연히 리턴되는 프로미스 객체가 rejected상태가 될 줄 알았다. 하지만 아니었다. https://stackoverflow.com/questions/39297345/fetch-resolves-even-if-404 fetch resolves even if 404? Using this code : fetch('notExists') // { if(!res.ok){ if(res.status === 404){ throw new Error(''); } } res.json(); }) //생략 .catch() 따라서 따로 에러처리를 하고 싶다면 위같이 404를 만났을때 에러를 발생시켜야 한다. 위는 챗지..