공부 및 일상기록

항해를 시작한지는 10주, 실전프로젝트를 시작한지는 벌써 3주가 지났다. 오늘은 내가 실전프로젝트동안 어떤 기능을 구현했는지 글로 작성해보려고 한다. 방법은 내가 구현한 페이지와 거기에 들어가있는 기술적인 부분을 작성하려고 한다. 1. 테마페이지 이 페이지는 방탈출 테마를 모아놓은 페이지이다. 모든 테마를 볼 수 있으며 카테고리별로 필터링 하여 볼 수도 있다. 기능적인 부분 무한스크롤 : 수많은 테마가 있는만큼 무한스크롤을 통해 페이징처리된 테마를 끊김없이 확인 할 수 있다. 하지만 이 기능은 사용자 UX적으로 불편하다고 평가되어 페이지네이션으로 바꿀 예정이다. 필터링 : 지역, 장르, 예약가능인원, 평점, 난이도 별로 필터링을 할 수 있다. 각 필터주제를 전역상태로 관리하여 다른 페이지에 들어가도 유지..

9주차간 내가 막혔던 부분은 useInfinitequery이다. 무한스크롤을 구현하기위해 Tanstack-query의 기능을 사용했다. 공식문서에서 제공하는 정보로는 페이징 처리된 데이터에 page라는 항목이 명시되어서 쉽게 다음페이지를 알수있도록 하였다. 하지만 우리조의 데이터는 그냥 딱 데이터들을 나눠놨을뿐, 나에게 페이지에 관한 정보가 없는 상태였다. 그래서 공식문서 및 여러 깃허브 예제를 보고 유추해낸것이 있다. const { data, fetchNextPage, hasNextPage, isLoading, isFetching, isError, error, } = useInfiniteQuery( ["getThemeList", genre, location, score, difficulty, peopl..

오늘은 아침부터 밤 늦게인 지금까지 공부를 하지 않았다. 몸과 마음이 조금 지쳐있어서 오늘 하루는 쉬었다 실전프로젝트를 한주 진행하면서 가장 큰 문제는 서버가 아직 미완성이면서 디자인이 확정되지 않은 시점에서 해야하는 작업에 대한 고민이였다. 그 해답으로 우리는 일단 각자 페이지를 나눠서 디자인과 상관없이 들어가는 기능에 대한 부분을 구현하기 시작했다. 나는 방탈출카페의 테마 페이지와 상세테마 페이지를 맡았는데 여기서 주요기능은 필터링, 댓글, 좋아요, 지도 API 구현 정도이다. 일단 필터링 기능은 어제 끝내두었고, 내일 부터 댓글기능과 좋아요 기능을 구현해둔 후 api를 작성하고 서버가 완료되면 해볼 예정이다. 말은 정말 쉬워보이지만 사실 내가 해낼 수 있는지 아직도 의문이다.. 또한 피드백을 받은 ..

어느덧 7주차 클론코딩 또한 마무리가 되었다. 우리조는 카카오톡을 클론코딩 하였다. 먼저 계획했던 기능은 회원가입/로그인, 친구추가, 친구와 1:1 대화, 친구 프로필 조회, 내 프로필 조회 및 수정 이였다. 다른 부분은 모두 CRUD와 다름 없었고 1:1 대화 기능은 WebSocket 기능을 사용해야만 했다. 또한 클론코딩 답게 와이어프레임은 실제 PC 카톡과 똑같이 잡았고 마크업 또한 신경써서 최대한 똑같이 만들었다. (기능이 없는 부분까지도 마크업해두고 실제로 작동은 하지 않는다.) 나는 사실 웹소켓 부분에 신경을 제일 많이 썼다. 결론을 말하자면 실패했다. 백엔드팀에서 STOMP를 이용하여 서버를 만들어 주었고, 프론트에서 get요청을 보내 서버에 연결까지 되었고 웹 소켓이 열린것까지 확인 하였다..

지난 한 주간 간단한 CRUD를 이용한 게시판 형식의 미니프로젝트를 진행하며 느낀 점을 말하려 한다. 첫 협업 프론트엔드와 백엔드가 서로 처음으로 협업을 진행한 한 주였다. 프론트엔드의 경우 달리기반 1명, 걷기반 1명이 한팀이 되기 때문에 달리기반 꼬리표를 달고 있지만 실력이 좋지 않은 나는 시작 전 부담부터 가지게 되었다. 사실 CRUD가 자신이 없는 것은 아니고, 과연 실제 서버와 통신을 해낼 수 있을까 하는 의문인 것이다. 같이 협업하는 백엔드 팀도 팀이지만, 나와 함께 팀이 된 걷기반 조원에게 더 큰 부담감을 느꼈다. 분명히 내가 더 잘 이끌어줘야 하는 명분이 있기 때문이다.. 아쉬운 점 협업을 하며 아쉬운점은 어쩌면 첫 협업이기 때문에 당연히 발생할 수 있는 문제였다. 바로 서버가 완성되기 전..

이 문제는 간단한 게시판을 만들면서 발생하였다. 사건의 순서는 다음과 같다. 우리는 Header에 Home버튼을 이미지파일로 만들고 파일 경로는 Public에 img폴더를 하나 만들어서 이미지 파일을 넣어두었었다. 그리고 경로는 아래처럼 잘 입력 되었다. 경로가 틀린것은 아닌게 다른 페이지에서는 잘 작동 하다가 Dynamic routing 주소로 입력되면 이미지 경로를 못찾는 문제가 발생 하였다. 예를들어 게시글마다 상세페이지가 존재하는데 우리는 /detail/1 혹은 /detail/2 이런식으로 디테일 뒤에 게시글 아이디가 붙도록 경로를 만들어 두었다. 저런 :id 값이 없는 페이지에서는 이미지가 잘 불러와졌지만, :id 처럼 다이나믹 라우팅이 사용된 페이지는 이미지가 불러와 지지 않았다. 해결방법 기..

axios란? 공식문서에 따른 정보는 다음과 같다. axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 이다. 일종의 자바스크립트에 내장되어 있는 fetch API와 유사한 기능이지만 차이점이 존재한다. axios vs fetch axios fetch 요청 객체에 url이 있다. 요청 객체에 url이 없다. 써드파티 라이브러리로 설치가 필요 현대 브라우저에 빌트인이라 설치 필요 없음 XSRF 보호를 해준다. 별도 보호 없음 data 속성을 사용 body 속성을 사용 data는 object를 포함한다 body는 문자열화 되어있다 status가 200이고 statusText가 ‘OK’이면 성공이다 응답객체가 ok 속성을 포함하면 성공이다 자동으로 JS..

화면에 구성되는 데이터 중, 서버에 저장되지 않는 것들은 어디에 저장될까? 클라이언트 사이드 메모리 위에 저장되는 것이 일반적이다. 사소한 내용들까지 실시간으로 서버에 저장하려 한다면 불편함과 과도한 서버비용을 지불해야 하기 때문이다. 리액트에서 메모리 위에 저장하는 값 중에서 대표적으로 Props와 State가 있다. State는 상태라고 부르고 상태 관리란 State를 관리하는 것을 말한다. React Hook을 사용하는 함수형 컴포넌트의 생명주기는 다음 그림과 같다. 초기 컴포넌트가 생성될때를 Mounting 이라고 하고, 생성 후 그리고 소멸전 props나 state가 업데이트 되는 때를 Updating이라고 한다. 1. 컴포넌트 마운팅 리턴값을 렌더링 하고 렌더링한 상태를 가상돔에 그린다. 가상..