배포 링크 : go-together 원본 저장소: Github 마지막 UXUI + 프론트엔드 + 백엔드 + 기업 협업 프로젝트는...!! 바로 시니어층 패키지 그룹 여행 서비스 고투게더 리뉴얼! 이렇게 많은 부분을 협업하는 건 처음이라 걱정이 한바가지였다....ㅠㅠㅠㅠ UXUI 분들께서 피그마로 화면을 만들어주신 후에.... 백엔드 분들께서 api 를 만들어주신 후에..... 프론트엔드에서 웹 페이지를 제대로 만들 수 있기 때문에 약 한 달이라는 기간이 너무 빠듯했다... 🥹 (거의 3주가 넘어서야 피그마가 나왔고... 심지어 안나온 화면도 있어서 프론트엔드에서 만들어야 했다....ㅎㅎㅎㅎ허허허허허ㅓ) 또르륵 ... 그래도 팀원들끼리 열심히 영 차 영 차 영 차 .......... ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ..

배포 링크 : credit-market (현재 서버가 닫혀서 기능 작동X) 원본 저장소: Github 전체 시연 영상: Youtube 이번에 하게 된 프로젝트는 금융 상품 추천 서비스 !!! 🐰🐰⭐️⭐️⭐️⭐️⭐️ 금융 상품에는 카드, 대출 등의 선택지가 있었는데, 우리 팀은 대출 상품으로 정했다. 상품 데이터는 백엔드에서 api 를 이용해 데이터를 저장한 후에 사용하게 되었다. 이번 프로젝트에서도 내가 팀장을 맡게 되어서, 프로젝트 환경 셋팅을 진행했다. 지금까지는 CRA 로 리액트 앱 초기 설정을 했었는데, 이번에는 처음으로 vite 를 이용해 리액트 + 타입스크립트 프로젝트 셋팅을 해보았다. 아래의 항목들을 미리 반영해 두어서 팀원들이 사용하기 편하도록 했다. axios 인스턴스 생성 유틸 함수 생..

배포 링크 : 마켓멍냥 원본 저장소 : GitHub 이번 리액트 쇼핑몰 프로젝트에서 내가 맡은 파트는 관리자 파트 !! 🐶🐶 참고한 사이트인 마켓컬리에서는 관리자 페이지를 직접 볼 수가 없었다. ㅠㅠㅠ 그래서 관리자 화면을 어떻게 구성해야 할 지 찾아보다가 구글에 "admin page" 라고 검색해서 나오는 이미지들을 보고 참고했다. (구글 짱...) 처음에는 관리자 페이지만 만들면 되는 줄 알았는데,,,, 관리자 여부를 확인해서 화면을 다르게 보여주고, 경로도 보호해야 했다. 그래서 처음에 셋팅하는 게 조금 오래 걸렸다. ㅠㅠㅠ 그래도 이렇게 처음부터 관리자 / 사용자 별로 화면을 어떻게 보여줄 지 정하고 권한 확인 부분을 만들어놓고 시작하니 팀원분들이 각자의 파트에 집중할 수 있게 된 것 같아서 다행..

배포 링크 : 마켓멍냥 원본 저장소 : GitHub 두둥 그 동안은 자바스크립트 + 모듈화 + REST API 를 활용한 프로젝트만 해보았었는데, 이번에는 드디어 !!!!!!! 리액트 + 팀 프로젝트에 참여하게 됨 (+ 팀장!!!!) 팀장으로서 내가 어떤 것을 하면 좋을 지..... 생각해 보았는데... 1. 레포지토리/브랜치 생성 2. 프로젝트 초기 셋팅 3. 라이브러리 초기 셋팅 4. 문서화 초기 셋팅 이정도가 필요할 것 같았다. 특히 팀원들이 바로 개발을 시작할 수 있도록 빨리 프로젝트 환경 셋팅을 해놓는 것이 중요했다!!!!! (제출 기한이 정해져 있어서 급했음) 리액트 프로젝트를 팀 단위로 해본 것은 처음이라서 어떤 라이브러리를 써야 할 지 계속 검색해보고 ㅠㅠㅠ 팀원들과도 이야기 해보고.. 혼..

배포 링크 : todo-array 원본 저장소 : 깃허브 이번에 진행한 프로젝트는 간단한 할 일 관리 프로젝트이다! 어떻게 디자인을 하면 좋을 지 구상하다가, 아이패드에서 어플을 실행하는 것 처럼 보여지면 재미있을 것 같았다. 그래서 아이패드, 애플펜슬 이미지를 사용했다! 실제로 내 아이패드는 그저 강의용.....ㅎㅎㅎㅋ 처음에는 자바스크립트로 완성했었는데, 이번에 배운 타입스크립트를 프로젝트에 직접 적용해보고 싶어서 나중에 타입스크립트를 사용해 리팩토링 하게 되었다! 기능 별로 4개의 파일로 나누어 모듈화 하였다. main.ts : 페이지 접속 시 맨 처음 실행되어야 하는 로직들 renderTodo.ts : 각 todo를 렌더링 requests.ts : API 호출 setElements.ts : 엘리먼..

배포 링크 : movielly 원본 저장소 : 깃허브 팝.콘.이.내.린.다. 샤라라라라라라 ~~~~~ 🐱 OMDB API 를 활용하여 영화 검색 사이트를 만들어 보았다! (데이터가 영어로 되어있어서 영어로 검색해야함) 처음에는 팝콘 애니메이션은 없었는데, 고양이 옆에 팝콘이 달랑 있는게 심심해보여서 추가하게 되었다..🍿🍿🍿🍿🍿 또한 처음으로 모듈화를 하여 구현하였다! getMovieData.js : 영화 데이터를 가져옴 initElement.js : 엘리먼트 초기화 시 사용하는 함수들 main.js : 라우팅, 초기화 renderDetail.js : 영화 상세 렌더링 renderMovies.js : 영화 목록 렌더링 renderSearch.js : 검색 영역 렌더링 setElement.js : 엘리먼트 ..