[개인 프로젝트] - 포트폴리오 웹 사이트만들기

Demo : https://www.jin-hyeong.com/ github : https://github.com/7jjin/Portfolio 제작 기간 : 2023.12.17 ~ 2024.01.17 기술 스택 : React, TypeSciprt, Styled-component, Recoil 포트폴리오 사이트 내가 프론트엔드를 처음 시작했을 때 이론을 배우고 가장 먼저 클론 코딩을 한 것이 다른 사람의 '포트폴리오 사이트' 였다. 나만의 사이트가 있는 것이 멋있어 보였고, 나도 언젠가는 나를 소개하는 웹 사이트를 만들어 보겠다고 다짐했었다. 마침 취업을 준비하기 위해 포트폴리오가 필요했고, 옛 생각이 나서 만들기로 결심했다. 내가 프로젝트를 시작하면서 의도 했던 것은 아래와 같다. 나를 나타나되, 너무 투..

• format_list_bulleted 프로젝트
• · 2024. 2. 9.
• textsms

[리팩토링] - JinCha 프로젝트 뜯어 고치기

😧 갑자기? 맞다. 리팩토링은 처음이다. 프로젝트가 끝날 때마다 리팩토링은 꼭 해야지 하고 있다가 이제 와서야 시작했다. 프로젝트 선정은 간단했다. 첫 리팩토링인 점을 고려해 수정할게 많아보이는 프로젝트로 선정했다. 또한 이전에 약속한게 있으니 약속도 지킬겸 겸사겸사 시작했다. 지표에서는 드라마틱한 효과가 있었던 것은 아니었다. 하지만 최적화를 진행하며 겪은 내용들을 까먹지 않기 위해 기록 할 것이다. 리팩토링 할 부분 목표는 성능 최적화다. 이것을 지표로 확인 할 수 있다면 좋겠다고 생각해서 Lighthouse의 성능 지표를 최대한 끌어올리는 것을 목표로 하였다. 내가 가장 바꾸고 싶은 지표는 Performance, Accessible, SEO 총 3가지다. 1. React.lazy() 렌더링을 최적화..

• format_list_bulleted 프로젝트
• · 2024. 1. 28.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 자취방 리뷰 페이지(1)

자취방 리뷰 페이지는 자취생들이 자신들이 살던 자취방에 대한 후기를 쓸 수 있는 페이지다. 우리 프로젝트에서 가장 독특한 기능이고, 시중에도 자취방을 구하는 앱은 있지만 후기를 달 수 있는 서비스는 없어서 만들어 봤다. 앞서 블로그에서도 봤겠지만 프로젝트 기간이 갑자기 늘어나는 바람에 추가로 넣을 기능을 생각하다 넣은거라서 모든 기능을 약1주일만에 만들었다. 그래도 내가 제안한 아이디어를 제작한 거라서 가장 재밌게 만들었던 기억이 있다. 🗺️ 자취방 리뷰 페이지 ⚒️ 내가 한 기능 1. 초기위치는 현위치로 고정 2. 지도 클릭시 클릭한 곳의 주소 추출 3. 리뷰 달고 볼 수 있게 구현 4. 지도가 움직임에 따라 지도에 포함된 리뷰들만 보이게 구현 5. 주소 검색 후 해당 지역으로 이동 6. 현위치 버튼 ..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(2)

🔥 핫딜 페이지(2) 여기서는 제품 상세 페이지와 결제 페이지 장바구니 기능등을 소개 할 예정이다. 모든 모달 뒷 배경은 흐리게 만들어 사용자가 모달 창에 집중할 수 있게 만들었다. 1️⃣제품 상세 모달 제품 상세를 모달로 띄우는데는 어려움이 없었다. 핫딜 페이지에서 상품을 클릭하면 props로 상품의 id값을 넘겨줘서 그 상품에 대한 정보를 axios 호출을 해주면 되었기 때문이다. 또한 UI상으로 제품 상세 모달이 나왔는데 뒷 배경에 스크롤이 있으면 이상하다고 생각하여 스크롤을 막고 없애버렸다. // shoppingDetail 모달 생기면 뒷 배경 스크롤 막는 함수 useEffect(() => { if (isOpenModal === true) { document.body.style.cssText = ..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 핫딜 페이지(1)

🔥 핫딜 페이지 핫딜 페이지에는 제품 상세 모달, 장바구니 모달, 결제 모달까지 한 페이지 안에서 결제까지 할 수 있도록 만들었다. 초반 기획을 했을 때 최소한으로 페이지를 만들자고 해서 대부분을 모달로 만들었다. (그러지 말았어야 했다.) 1️⃣ 수정 전 핫딜 페이지 처음에 기획할 때는 원래 이런 페이지가 아니였다. 이전까지의 프로젝트와 비슷한 느낌의 쇼핑몰을 만들려고 했으나 막상 다 만들고 나니 너무 허전했다. 기능도 이전 프로젝트와 다를게 없었고 차별화 되는 느낌이 없었다. 그리고 기간도 아직 많이 남아 있어서 삭제하고 다시 만들었다. (이전 파일은 배포 과정에서 삭제하는 바람에 없어졌다..) 2️⃣ 수정 후 핫딜 페이지 사용한 라이브러리: react-daum-postcode(우편번호 검색), Sw..

• format_list_bulleted 프로젝트
• · 2023. 12. 12.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - Zustand

이번 프로젝트를 하며 처음 사용해본 상태관리 라이브러리인 zustand에 대해 정리를 해논 블로그다. 앞으로 어떤 방향으로 사용할 지에 대한 내용을 적어놀 것이다. 🤔 Zustand란? zustand는 context API를 간편하게 사용하기 위해 만들어진 상태관리 라이브러리다. 상태관리를 하기위해 Context API, Redux, React Query, Zustand 등이 있지만 Zustand를 사용하는 가장 큰 이유는 코드를 사용하는데 간편하기 때문이다. ✏️ Zustand 사용법 사용법은 Redux를 사용할 때와 비슷하다. store 폴더를 만들고 그 안에 전역 변수를 선언해주면 된다. 하지만 나는 타입스크립트를 같이 사용하고 있기 때문에 타입도 추가로 지정해주면 된다. // store impor..

• format_list_bulleted 프로젝트
• · 2023. 12. 11.
• textsms