Homile

✅ 오늘 한 일 백엔드 API와 연결 메인 공유 물품 리스트 출력 모든 데이터를 불러오는데 성공 한 줄 알았지만 이미지 부분이 403에러가 뜬다 오류 메시지를 찾아보니 aws 이미지를 가져오는 권한이 나에게 존재하지 않다고 한다… 이게 맞는 것인지 백엔드분들께 여쭤보기전에 한번더 여러가지 경우의 수로 해결을 할 수 있도록 도전해봐야겠다. 메인 공유 물품 리스트 필터 출력 카테고리는 잘 나온다 3중 필터로 제목과 대여여부를 판단을 같이해야한다. 검색 필터는 검색된 내용이 제목에 포함되면 해당 게시글이 리스트로 출력돼야 하는데 제목 전체가 맞아야 출력되는 상황이 발생했다. 대여 여부 필터는 어떤 것을 하던 다 나온다. API명세서와 실제 구현된 key값이 달라서 그랬음 페이지네이션 구현 버그: 페이지번호가 ..

✅ 오늘 한 일 등록과 수정의 경우 일단 JSON Server로 진행했다. 후에 formdata로 API에 보내줘야한다고 하니 formdata에 대해서 알아봐야한다. 레저용품 판매점 등록 구현 처음에 toastui 에디터를 사용해서 사용자에게 편의성을 제공하고 싶었으나 수정을 하는 부분에서 에디터에 기본값을 불러오지 못하는 오류가 생겨서 textarea로 변경했다. JS로 사용할 경우 이러한 경우가 종종 발생하는 것 같다. TS로 리팩토링 할 때, 추가해봐야 겠다. 코드를 잘 못 작성해서 카테고리가 고정되는 상황이 발생했지만 코드를 조금 더 세밀하게 봐서 기본값을 지정해주고 변경하는 코드를 작성하지 않았다는 것을 찾아서 해결했다. 작성 후 등록버튼을 누를 경우 작성된 내용이 담긴 상세페이지로 이동하도록 ..

📌 코드스테이츠를 수료하고 첫 주말이다. 주말에도 나른해질 수 없다는 생각과 이전에 6개월간 해왔던 습관때문인지 일어나서 조금 빈둥거리긴 했지만 바로 공부를 시작했다. 개발자로서 취업하고 발전하기 위해서는 끊임없는 노력과 지식이 필요하다는 것을 느끼고 있기 때문이다. 📗 오늘 학습한 내용 프로그래머스 LEVEL.0 4문제 풀이 기술면접, 일반면접 준비 이력서 수정 TypeScript 강의 object 타입 Array 타입 Enum 타입 Any 타입 📘 추가로 공부할 내용 TypeScript 한 번 봤던 내용이더라도 꼼꼼히 보기위해서 정리를 하면서 보니 시간이 꽤 걸리는 것 같다. Next.js Redux Query Vite 📝 중요한 내용 TypeScript 배열, 객체, enum 타입 지정 및 사용

📌 오늘은 이력서의 어휘가 이상한부분을 수정하고 조금 살을 붙여봤다. 내용이 적다는 피드백을 받았기 때문이다. 또한, 사이드 프로젝트에 대한 github readme를 조금 더 수정하고 회사들이 어떠한 스택을 많이쓰는지 찾아보았다. 📗 오늘 학습한 내용 프로그래머스 LEVEL.0 5문제 풀이 기술면접, 일반면접 준비 Github 프로젝트 README 수정 이력서 수정 자기소개부분 수정 TypeScript 강의 타입스크립트의 원시 타입은 소문자로 이루어진다 number 숫자 타입은 number하나이다. 다른 언어에 있는 double과 같은 실수등의 타입은 존재하지 않는다. string 문자열은 ''(작은 따옴표), ""(큰 따옴표), ``(백틱)으로 지정할 수 있다. boolean true, false를 ..

📌 코드스테이츠를 수료하고 맞이하는 첫 날이다. 이제부터 개발자로서 구직에 나서야 한다는게 아직도 믿기지가 않다. 하지만, 나는 할 수 있을 것이다!! 해내고 말겠다!! 그동안 열심히 해왔고 앞으로도 취업을 하더라도 멈추지 않고 좋은 개발자가 되기 위해 학습하고 노력할 것이다..!! 📗 오늘 학습한 내용 프로그래머스 LEVEL.0 10문제 풀이 기술면접, 일반면접 준비 이력서 수정 자기소개부분 수정 TypeScript 강의 강의를 2주전부터 조금씩 듣긴했지만 정리를 하지않아서 처음부터 다시 듣고있다.(플젝하느라.. 정리하다가 콜받는 경우가 많았다..) 타입스크립트 컴파일 (tsc 타입스크립트 파일명) !(느낌표) 요소를 무조건 얻는다. (null을 받아오지 않을 것을 알려줌) as HTML태그Elemen..

✅ 오늘 한 일 반응형 전역 설정 하나의 페이지에서 컴포넌트를 바꿔야 하는 경우에는 react-responsive 라이브러리를 사용하여 컴포넌트를 바꾸는 형식으로 진행할 수 있었지만 단순히 크기만 변동하는 것이라면 미디어 쿼리로 크기만 바꿔주면 되기 때문에 아래와 같은 라이브러리를 찾게 되었다. (react-responsive를 전역적으로 사용하는 방법도 있을 것이다.) styled-media-query를 사용한 반응형 위의 라이브러리를 사용해 보려했다. 하지만, 스타일드 컴포넌트에 전역으로 설정할 수 있어서 사용하지 않았다. Styled-Component를 사용한 반응형 구현 아래와 같은 코드로 Theme.js 파일에 사이즈를 지정했다. 사용시 미디어 쿼리에 프롭으로 내려주어 지정된 크기를 숫자대신 변..

✅ 오늘 한 일 레저 용품 판매점 상세 페이지 구현 레저용품 판매점은 유저가 대여하려는 물품이 공유장터에 없을 경우 판매점을 검색 할 수 있는 페이지이다. 레저용품 판매점은 관리자만 작성 할 수 있도록 했다. 물품 공유 페이지와는 다르게 지도, 주소, 전화번호가 추가된다. 지도는 카카오 맵 API를 사용해서 구현했다. 오류 및 해결 오류:작성된 주소를 가져와서 위도, 경도를 찾는 코드를 작성해 위치를 카카오 맵을 이용해서 출력하는 중 오타를 작성하게 되니 이상한 위치에 마커가 찍히게 됐다. 해결: 다음 주소 API를 사용해 오타를 작성할 수 없도록 했다. 오류: TypeError: Cannot read properties of undefined(reading 'maps') 해결: 카카오 API 사이트 도..

✅ 오늘 한 일 AWS S3 이미지 업로드 테스트 처음으로 팀원분들과 얘기를 나눴던 내용은 프론트에서 직접 S3로 이미지를 업로드 한 후 URL을 받아 서버에 넘겨주는 형식으로 작업하기로 했다. 하지만, 위의 방식은 AWS키 값을 프론트에서 직접 관리하기 때문에 보안상으로 좋지 않고, 사용자 측면에서 속도 저하가 일어난다고 한다. 그래서 파일을 백엔드측으로 전달 → 백엔드에서 S3로 이미지 업로드 → URL로 DB에 저장하는 형식으로 서버에서 처리를 해주시기로 했다. 이미지 업로드 방법은 수강하는 과정에서는 존재하지 않았다. 그렇기때문에 서버에서 되지 않을 경우를 생각하여 프론트에서 처리하는 방법도 계속해서 도전했다. 아래의 블로그를 참고하여 코드를 작성해 보고 왜 코드가 동작하는지 이해하여 팀원들에게 ..

✅ 오늘 한 일 물품 공유 리스트 페이지 구현 카테고리, 제목 검색, 공유 상태 총 3가지의 필터를 각각의 컴포넌트로 나눠서 만들었다. (재사용성) API가 존재하지 않아 3중 필터인 기능에 대한 작업은 진행할 수 없었지만 JSON 서버를 사용하여 간단하게 테스트를 진행했다. 페이지 네이션을 구현할 때 라이브러리를 사용하여 구현하는 것보다는 자신만의 코드로 구현해보는 것이 좋다는 멘토님의 말씀을 토대로 구현해보려 했지만 생각이 잘 정리되지 않았고 코드의 길이가 길어 졌으며, 3중필터 + 페이지네이션까지 한번에 진행이 잘 되지 않았다. 결국 react-js-pagination라는 라이브러를 사용하여 구현했다. 해당 라이브러리는 페이지네이션을 JS로 구현할 때 쉽게 사용할 수 있도록 해주는 라이브러리이다. ..

✅ 오늘 한 일 메인 페이지 캐러샐 구현 캐러셀(이미지 슬라이드 전환)을 구현할 때 라이브러리를 사용할 것인가? 직접구현해 볼 것인가? 이 두가지에 대해서 고민을 했다. 라이브러리를 사용한다면 쉽고 간단하고 부드럽게 동작할 수 있도록 구현할 수 있을 것 같았다. 하지만, 라이브러리를 사용하지 않았을 때, 구현하는 방법도 알고 싶어서 여러가지 검색과 지식을 통해 직접 구현해보았다. 최근 게시물 목록 구현 메인화면 중간에 최근 게시물이 카드 형태로 8개가 나타나야 했다. 해당 게시글 카드형태는 메인화면에서 뿐만아니라 마이페이지, 물품 공유 리스트 페이지 등 사용되는 곳이 많았다. 이것을 재사용할 수 있도록 고민하고 구현해서 직접 테스트를 거쳐서 여러가지 페이지에서도 사용할 수 있도록 컴포넌트를 생성했다. F..