[리팩토링] 둥지 프로젝트

리팩토링 하는 이유 지금까지 만든 프로젝트 중 가장 만족스럽지 못한 프로젝트였고, 지금의 나는 더 많은 것을 배웠다. 새로운 기술을 배울 때마다 "이 개념을 저기에 썻으면 더 좋았을 걸" 이라 생각하며 둥지 프로젝트를 떠올랐다. 그때 당시에는 단순한 UI가 보기 싫어서 새로운 것을 도전했다. 하지만 지금와서 생각해보니 아쉬운 부분이 많았다. 쇼핑몰 페이지 성격상 단순한 UI가 많아서 나는 여러 애니메이션을 집어넣어 "특별함"을 추가했다. 하지만 애니메이션을 적용 할 수록 코드는 더 복잡해지고 원하는 동작대로 작동을 안했다. 오히려 더 난잡해지는 느낌이었다. 그래서 UI는 단순하고 깔끔하게 다시 만들고 코드 설계를 다시 짜서 성능이 더 좋아지게 만들어 봤다. 이 외에도 상세 페이지, 장바구니 페이지 등등 ..

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

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

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

좀 늦은 2023 회고록...

최근 블로그를 안쓴지 오랜된 것 같다. 길고 길었던 부트캠프가 끝나고 본격적으로 취준에 들어가면서 뭔가 모를 조바심에 맨날 긴장하면 살았다. 블로그 쓰는 시간이 아까웠고 그 시간에 개발 공부를 하면 더 좋을 것 같아서 소홀 했던 것도 없지 않았다. (사실 시간을 내려면 충분히 있었다.😅) 그래서 자기전 새벽 감성으로 좀 늦은 2023년의 회고록을 써볼까 한다. 졸업작품 도전기 대학교 4학년, 진로에 대해 진지하게 고민할 때 였다. 사실 어느정도 프론트엔드 개발자로 방향을 맞추고 토이 프로젝트와 클론 코딩을 몇번 해봤다. 그래서 졸업작품을 할 때도 프론트엔드를 담당하겠다고 했다. 졸업작품을 시작하기 전에는 무슨 생각인지 모르겠지만 자신이 있었다. 나름 6개월동안 강의도 많이 봤고 여러 문서도 찾아봤기 때문..

• format_list_bulleted 일상
• · 2024. 1. 15.
• 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