소파에서 개발하기

도시님이랑 페이지 단위로 나누어 작업하다보니 메인페이지에서 주로 보이는 것들을 대부분 담당하고 있다. 프리 프로젝트 때와 완전히 반대로 맡아 작업중이다. 오히려 좋아.. 칼럼그리드 작업을 제대로 시작하기도 전에 난관에 부딪혔다. 그동안은 리스트 불러오고 필터링하는 기능이 우선이라 navbar 버튼을 대충 띄워놓고 썼는데, 화면에 예쁘게 정렬하려고 하니 도저히 모바일/데스크탑 2단 구성으로는 불가능해 보였다. 그래서 늘렸다 줄렸다 해 가면서 타블렛 사이즈를 끼워넣었다. 이렇게 하니 카드도 그냥 퍼센트 사이즈로 줄일 수 있어서 오히려 좋아.. 값을 다 변수로 만들어 놔서 다행이었다. 값 하나씩 찾아다니면서 수정했어야 될 뻔 ㅠ GNB NavLink 도시님 덕분에 NavLink를 알게 되었다. 'Link'에도..

계속 콘솔 찍고 API 요청에 맞춰 요청값 들어가는지 확인하고 응답 확인해 가며 만든 거라 따로 길게 적을 건 없지만 오늘 삽질한 게 너무 많아서 간단하게 적기만이라도 하려고 한다. 리스트 필터링 event.target과 event.currentTarget 분명히 카테고리 '버튼'을 클릭했는데 target으로 그 안에 있는 'div'가 들어와서 당황했다. 버블링이 일어나는 요소에서는 target과 currentTarget이 참조하는 게 다르다는 것을 처음 알았다. 내부 target을 집어내고 싶은 경우는 별로 없을 테니 웬만하면 그냥 currentTarget을 쓰는 게 좋을 것 같다. https://velog.io/@sa833591/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%9C%84%EC..

튜토리얼 23만이라는 어마무시한 조회수의 무한스크롤 설명 영상을 찾았다. https://www.youtube.com/watch?v=NZKUirTtxcg 강의를 통해 새로 배운 것 커스텀 훅 제작 (1) 커스텀훅의 초기값 usestate의 초기값으로 항상 고정된 값만 줘 왔는데, 거기에 변수를 넣어서 쓰는 건 처음 해 봤다. 초기값에 변수(categoryQuery, pageNumber)를 넣고 hook 내부에서 그걸 dependency로 설정해 두면, 변수가 변경될 때마다 hook 내부에서도 변화가 일어난다. 반대로 hook 내부에서 리턴하는 값(구조분해할당으로 받아오는 loading, error, cards, hasMore)이 변경되어도 이것을 사용하는 곳에서 리렌더링이 일어난다. 적으면서 따라가보니 저..

callback 함수 부분을 읽다가 promise를 설명하면서 generator 함수를 사용하는 것을 보았다. 써 본 적이 없어 낯설었는데, 스터디원 한 분이 좋은 자료를 찾아주셨다! https://dev.to/lydiahallie/javascript-visualized-generators-and-iterators-e36 💡🎁 JavaScript Visualized: Generators and Iterators ES6 introduced something cool called generator functions 🎉 Whenever I ask people about generator func... dev.to 개념 generator 함수는 ES6에서 소개되었다. 일반 함수가 run-to-completion..

버튼 컴포넌트 만들기 드디어 피그마로 세팅을 픽스하고 작은 컴포넌트 만들기를 시작했다. 가장 많이 쓰이고 기초적인 요소는 아무래도 버튼과 창이어서, 도시님과 각각 나누어 맡았다. 일단 Globalstyle에서 되도록 공통적인 스타일을 미리 정해두고, 각 페이지의 중간 단계 컴포넌트마다 사용하는 특징적인 형태에 맞춰 덮어썼다. 사용처 별 사용 방식을 생각해서 짜다 보니 생각보다 오래 걸렸다. props로 값을 받아 재사용시켜야 하는 경우도 있고, 데이터 배열에서 map 돌려서 텍스트를 넣는 경우도 있고.. 이 단계에서 자연스럽게 페이지 구조와 컴포넌트 구조도 나누게 됐다. * 검색한 것 : 버튼에 이모지 삽입하는 방법. 이모지도 결국 유니코드로 표현되는 것이라 텍스트로 취급하면 되는 거였다. https:/..

배경 프리 프로젝트 때는 '일단 스스로 사용 방법을 익히고 본다'는 심정으로 styled-component를 이렇게 저렇게 만지고 고민해가면서 사용방법을 익혔다. 그런데 아무래도 이걸 사용하는 best practice를 모르다 보니 긴가민가 하면서 헤메는 데 시간이 많이 들었다. 예를 들면 styled component를 각 레벨별로 따로 만들어야 하는지, 아니면 하나의 컴포넌트 안에서 내부 element를 class로 선택해야 하는지 몰라 갈팡질팡했다. 그래서 이번 main project에 들어서면서는 아예 처음부터 best practice를 따라하며 사용법을 배우고, 여기에서 우리에게 필요한 부분만 따 오고 싶었다. 튜토리얼 기준은 이 영상으로 잡았다. https://www.youtube.com/wa..

기술 회고 이슈 노트 : 잘 이해되지 않았던 개발 기술이나 부족했던 기술 Http / Https, 쿠키, 세션, 토큰 등 통신/보안 과정을 이해하고 코드로 구현하는 것 React 상태 변경과 의존성, 컴포넌트 렌더링 순서에 대한 이해 Redux 의 reducer와 store 관리 방식 sementic한 HTML 마크업과 CSS 컨벤션 적용 좋았던 점 백엔드와의 협업을 통해 Http 통신이 코드에서 실제로 표현되는 방식을 알고 사용 가능한 기능을 완성했다. React-redux, redux-persist 등 필요한 기능이 있을 때 스스로 검색해서 공부하고 적용하는 과정을 통해 자신감을 얻었다. Styled component의 활용 방식에 조금 더 익숙해졌고, login, tab, tag 등 자주 쓰이는 U..

배운 것 게시판의 글 작성/수정 부분을 요소로 작업해 두었는데, 이걸 에디터 라이브러리로 교체했다. 에디터 라이브러리가 이렇게 많은 줄도 처음 알았고, WYSIWYG이 특정 라이브러리 이름이 아니라는 것도 처음 알았다. html 파싱 돕는 라이브러리도 너무 많아서 가장 많이 사용되는 걸 검색해서 dompurify로 썼다. 에디터 적용하면서 참고한 튜토리얼 [react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ① 인터페이스 에디터는 글에 적용된 스타일 태그를 포함한 string 덩어리를 주므로, 이걸 db에 저장했다가 페이지를 열 때마다 가져와서 파싱해야 한다. 이 때 파싱한 결과를 div에 주입하면서 innerHtml을 직접 수정하게 되는데(위험하니까 하지 말라고 배운 거..)..

배운 것 글 수정 기능을 구현하던 도중 다음과 같은 오류를 만났다. 구현하려던 것 : 위에 있는 input (textarea) 창에서는 자유롭게 수정을 하고, 밑에 있는 Original Body 부분에서는 기존 글 내용이 보여져야 한다. 만난 오류 : 기존 글 내용을 useEffect 안에서 axios로 받아온 뒤, 해당 내용을 input 의 body 상태로도 넣었다. 그 뒤 다시 body 상태의 내용을 value Original Body의 내용으로 넣었다. const [body, setBody] = useState('') let originalPost = body const getOriginalPost = () => { axios .get(`/v1/${mode}/${id}`) .then((res) =>..

이전 상태 부트캠프 세션을 통해서 하루동안 redux의 개념을 배우고 또 하루 동안 예제를 통해 실습을 했다. 그런데 당시에는 react를 배운 지도 얼마 안 돼서 props의 오르내림에 대한 개념도 오락가락 하는 상태였다. 그 위에서 redux를 배우고 있자니 어디까지가 react의 기능이고 어디까지가 redux의 기능이며 그 기능 뒤에서 어떤 함수가 작동하고 있는지도 파악이 너무 어려웠다..! (울고 싶었음) '내가 지금 당장 이해하기에는 복잡한 기능이다'라는 생각에 한동안 손을 떼고 있었는데, 얼마전에 todolist 만들면서 기능 추가할 때마다 어마어마한 props 이동이 필요한 걸 보고 겁이 났다. 아.. 이대로 프로젝트 만들면 props 수정하다가 토하겠다.. 상태 관리가 필요할 수밖에 없는 ..