김철용 기록소

추가 중고마켓 페이지는 로그인하지 않으면 접근하지 못하게 되어있습니다.경고창 출력 후 로그인 페이지로 자동 이동합니다.  찜 횟수가 가장 많은 세 상품을 인기있는 상품으로 보여줍니다.무한 스크롤을 사용해서 상품 정보를 보여줍니다.판매 중인 상품과 판매완료 상품을 따로 볼 수 있습니다.상품 이미지가 없는 경우 임시 이미지를 보여줍니다.  작성자가 아니라면 게시글을 수정하거나 삭제할 수 없습니다.상품 이미지는 캐러셀을 통해 보여줍니다.판매자가 거래하고 싶은 장소를 카카오맵을 통해 보여줍니다.찜 버튼은 토글형식으로 되어 있습니다.댓글의 작성자가 아니라면 댓글을 수정하거나 삭제할 수 없습니다.  작성자라면 게시글 생성일 오른쪽에 있는 ui로 게시글을 수정, 삭제할 수 있습니다.   본인이 작성한 댓글은 수정, ..

기존의 코드에서 react-hook-form 라이브러리와 커스텀 훅을 사용해서 리팩토링을 진행했습니다. 코드 길이를 줄일 수 있게 되면서 기존의 container, presenter로 구분되어 있던 파일들도 하나로 통합했습니다. 추가 커스텀 훅들을 정리해놓은 hooks 파일이 추가되었습니다. 수정 모든 파일을 수정했으나, 수정 내용을 모두 기록하기에는 그 내용이 너무 많아서 대표적으로 게시판 작성 컴포넌트의 수정 전과 후만 기록하도록 하겠습니다. 다른 컴포넌트들의 수정 내용은 게시판 작성 컴포넌트의 수정 과정과 거의 동일합니다. 기존의 인풋 폼에서 onChange함수를 통해 state와 연결해주던 코드를 useForm 훅을 사용해 리팩토링했습니다. state들을 길게 나열할 필요가 없어지고, onChan..

추가 로그인 페이지와 회원가입 페이지 이메일을 작성하지 않거나, 이메일 잘못입력할 경우 경고 메시지가 나타납니다. 비밀번호를 작성하지 않으면 경고 메시지가 나타납니다. 비밀번호 확인과 비밀번호가 일치하지 않으면 경고 메시지가 나타납니다. 닉네임은 작성하지 않을 경우 기본으로 'ㅇㅇ'이 됩니다. 회원가입이 완료되면 로그인 페이지로 돌아갑니다. 이메일을 작성하지 않으면 경고 메시지가 나타납니다. 비밀번호를 작성하지 않으면 경고 메시지가 나타납니다. 로그인이 완료되면 메인 페이지로 돌아갑니다. 로그인이 된 상태라면 헤더에 로그인 버튼은 사라지고, 프로필 이미지가 생깁니다. 프로필 이미지를 클릭하면 프로필 정보를 볼 수 있는 간이 메뉴가 나타납니다. 로그아웃 버튼을 클릭하면 로컬 스토리지에 저장된 accessT..

수정 디자인 전반을 변경했습니다. 헤더와 네비게이션을 합쳤습니다. 메뉴에서 필요없던 자기소개 게시판, 랜덤고양이 페이지를 삭제했습니다. 마이페이지는 이후 로그인 기능을 추가하고 프로필 이미지를 클릭했을 때 이동하도록 변경할 계획입니다. 네비게이션의 메뉴를 클릭했을 때 어느 메뉴에 접속해있는지 구분할 수 있도록 폰트 효과를 주었습니다. 회원가입 버튼을 삭제했습니다. 대신 회원가입 페이지가 따로 추가될 예정입니다. 캐러셀을 삭제했습니다. 광고나 이벤트 페이지가 없는 제 사이트에서 굳이 필요없다고 생각했습니다. 자유게시판 게시글에서 위치 정보와 [목록으로, 수정하기, 삭제하기] 버튼을 삭제했습니다. 위치 정보는 중고마켓 게시글에 추가할 계획입니다. 수정하기 삭제하기 버튼은 게시글 작성 날짜 옆 작은 버튼으로 ..

지금까지 만든 페이지는 기능적으로 필요없는 페이지나 컴포넌트들이 존재했습니다. 디자인 또한 코드캠프에서 제공해주는 피그마 사이트를 기준으로 제작했습니다. 포트폴리오로서 사용하려면 실제 웹 페이지처럼 필요없는 페이지나 컴포넌트를 줄이고, 디자인도 특색있게 바꿔야한다고 생각합니다. 따라서 제 손으로 직접 디자인을 만들어서 포트폴리오를 수정할 계획입니다. 아래 이미지들은 디자인 참고용 이미지입니다. 웹 디자이너가 아니기 때문에 포토샵으로 간단하게 작업했습니다. 실제 웹에서 구현할 때는 조금씩 달라질 수 있습니다. 디자인은 중고마켓 사이트 '당근'을 패러디했습니다. 이외에 번개장터나 네이버 사이트 등을 참고했습니다. 이후부터 포트폴리오의 이름은 딸기마켓으로 수정합니다. 공지사항에서 등록, 수정, 상세 페이지는 ..

검색하고 싶은 키워드를 입력하면 등록된 게시물들의 제목에서 키워드가 포함된 게시물을 찾아줍니다. 검색된 제목에 키워드가 강조되어 나타납니다. 키워드 검색 기능 추가를 위해 searchWord state와 isSearchWord state를 추가했습니다. onChangeSearchWordInput 함수로 input 태그로 들어온 키워드를 searchWord state에 저장합니다. onClickSearchButton을 클릭하면 키워드가 포함된 게시물들을 fetch합니다. 키워드 검색인 경우 isSearchWord state 값을 true로 변경합니다. isSearchWord state가 true일 때만 키워드를 강조합니다. 검색 버튼을 누르기 전에 키워드가 강조되는 일이 없도록 했습니다. 기간을 입력하면 ..

이미지 여러개를 업로드할 수 있습니다. 업로드한 이미지는 버튼 왼쪽에서부터 미리보기로 보여집니다. jpeg, png 확장자만 업로드할 수 있습니다. 5MB 크기 이하의 이미지만 업로드 가능합니다. 업로드 버튼은 input 태그를 활용하되, 브라우저 기본 디자인을 숨기고 이미지를 사용해서 버튼처럼 보이도록 했습니다. 위 과정에서 useRef를 사용했습니다. 이미지를 클릭하면 input 태그가 클릭됩니다. 파일 검증 함수를 따로 만들어서 사용했습니다. 파일 용량이 5MB가 넘어가거나 지정한 확장자를 사용하지 않으면 false를 리턴합니다. 이 리턴값은 onChangeImage 함수에서 사용됩니다. (02/19 내용 추가) 업로드한 이미지를 다시 클릭하면 업로드할 이미지를 수정할 수 있습니다. 게시물 등록 페..

자기소개 게시판은 백엔드 서버를 따로 사용하지 않고, 구글에서 제공하는 파이어 베이스를 사용했습니다. 네비게이션에 자기소개게시판 메뉴를 추가했습니다. 메뉴를 클릭하면 자기소개게시판으로 이동합니다. 페이지네이션이 구현되어 있습니다. 페이지네이션은 만들어둔 컴포넌트가 있지만 파이어베이스를 사용하는 탓에 재사용이 힘들어 antdesign의 컴포넌트를 사용했습니다. 기존에 사용하던 백엔드 api는 게시글을 받아올 때 10개씩 받아오기 때문에 페이지를 변경할 때 마다 새로운 데이터를 받아와야 했습니다. 파이어베이스의 경우 getDocs를 사용하면 모든 문서를 가져오기 때문에 5개의 게시글씩 쪼개서 보여주기 위해 currentPage state값을 사용했습니다. 받아온 문서 배열을 5개씩 끊어서 컴포넌트를 생성합니..

6일은 아버지 생신이라 작년 12월 홋카이도에서 사온 스프카레를 만들어 드리기로 했다. 피자가 드시고 싶다길래 피자와 함께 먹었다. 스프카레는 예쁘게 만들려고 노력했는데 결과가 잘 나와서 기분이 좋았다. 먹어보니 좀 짠 것 같았는데 그럭저럭 맛있었다. 6년 동안 쓰던 그래픽 카드가 드디어 맛이 가려고 해서 없는 돈 쪼개서 새로운 그래픽 카드를 샀다. 돈이 없는건 돈이 없는거고 새로 산건 새로 산거니 이왕 컴퓨터 꺼내는거 청소하고 서멀구리스도 다시 발라줬다. 테스트도 해보고 싶었는데 시간이 12시라 따로 컴퓨터를 켜보지는 않았다. 12시에는 대한민국 대 요르단 아시안컵 축구 경기가 있어서 평소에는 따로 챙겨보지는 않는데 이 날은 뭔가 보고싶었는지 누나랑 같이 거실에서 봤다. 왜 평소에 안보다가 하필 이 날..