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

이번 프로젝트에서 타입스크립트를 사용하며 겪은 배운점과 고쳐야 될 점을 나열한 블로그다. 앞으로 어떻게 사용할 지에 대한 간단한 정리 형식으로 써놓았다. 1. 타입스크립트 사용 한 곳. 1-1. API 호출시 타입 선언 1-2. 부모에서 자식 컴포넌트로 Props 전달시 타입 선언 1-3. useState, useRef 등 ReactHook 사용시 타입 선언 1-1. API 호출시 타입 선언 ✂️ 수정 전 // API 타입 선언 const [resentProductList, setResentProductList] = useState([]); // API 호출 useEffect(() => { const getResentProduct = async () => { try { const res = await a..

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

[포스코x코딩온] 웹개발자 풀스택 과정 4차 팀프로젝트 - 회고록(1)

배포 링크 : https://doongg.site/ 깃 허브 : https://github.com/orgs/DoongG/repositories 🐣 DoongG(둥지) 드디어 부트캠프의 마지막 프로젝트가 시작되었다. 기간이 긴 만큼 기획과 개발까지 차근차근 시작했다. 팀원은 자유였으며 나는 원래 친한 5명의 크루들과 함께 프로젝트를 시작했다. 총 5명이었으며 프론트 3명 백엔드 2명으로 이루었다. 주제를 정해야 했다. 팀원 모두의 흥미를 이끌 수 있는 주제를 생각해봤다. 우리 팀원들 과반 수 이상이 혼자 산 경험이 있었다. 그래서 자취생들을 위한 플랫폼을 만들기로 했다. 플랫폼에 어떤 것을 넣을 까 생각을 해봤는데 자취생들은 일반적으로 돈이 부족하기 때문에 '핫딜 상품'만 모아둔 쇼핑 페이지, 자취생들끼리..

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

[포스코x코딩온] 웹개발자 풀스택 과정 3차 개인프로젝트 - 회고록

배포링크 : https://www.mymovieapp.store 깃허브 : https://github.com/7jjin/My-Movie 🔥JinCha 리액트를 배운지 2주가 지나고 1주일 간의 짧은 개인 프로젝트 시간을 가졌다. 리액트를 처음 배웠고, 소규모 프로젝트인 만큼 어떤 새로운 아이디어를 도출해 개발하는 것 보단 클론 코딩을 통해 지금 까지 배운 리액트를 적용해보자는 마인드가 강했다. 여러 사이트가 있었지만 최근 취미를 두고 있는 영화와 관련된 사이트를 찾아봤다. 그 중 왓챠가 디자인이 맘에 들었고, 전체 적인 틀은 그대로 따라 하되, 내가 원하는 기능을 몇개 넣어봤다. ⚒️ 추가한 기능 (리액트X) 기능1 : 일별(주간) 박스오피스 정보 가져오기 + 포스터 처음 영화 사이트를 만드려고 할 때 ..

• format_list_bulleted 프로젝트
• · 2023. 10. 23.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 2차 팀프로젝트 - 회고록(feat. 최우수상)

배포 링크 : https://port-0-syos-2rrqq2blmiwyaxo.sel5.cloudtype.app/ 깃 허브: https://github.com/7jjin/SYOS 🔥SYOS( Share Your Own Space) 2차 프로젝트가 시작하고 주제를 정하는데 오랜 시간이 걸리지 않았다. 이것저것 말해보다가 요즘 "데스크 셋업" 을 꾸미는 사람들이 많길래 주제를 이쪽으로 정했다. SYOS는 나만의 데스크 셋업 공간과 정보를 공유하고 데스크 셋업을 추천받을 수 있는 웹사이트입니다. 아이디어가 참신하고 이전에 없던 내용이라 기대가 컷다. 처음으로 백엔드랑 연결해서 프로젝트를 하는 것이라 기대 반 걱정 반이였다. 초반에 컨트롤러를 어떻게 나누고 DB에는 어떻게 저장를 할까 고민을 하면서 시간을 보냈..

• format_list_bulleted 프로젝트
• · 2023. 10. 7.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 회고록(feat. 최우수상)

이번 회고록은 내가 팀 적으로 성장한 점과 아쉬웠던 점에 대해 써볼려고 한다. 내가 혼자 기능 구현 하며 성장한 것과 아쉬웠던 점은 아래 블로그를 참고 하면 좋을 것 같다.😊 2023.07.27 - [포스코x코딩온] - [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1) [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(1) 1️⃣ 프로젝트 소개 우리팀은 '국내 주류'와 관련된 정보를 소개해주는 서비스를 계획했다. 크게 주요 페이지는 4개로 나눴고 부가 서비스 페이지는 5개로 만들었다. 주요 페이지 - 메인페이지, jin99.tistory.com 2023.07.29 - [포스코x코딩온] - [포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(2..

• format_list_bulleted 프로젝트
• · 2023. 7. 30.
• textsms

[포스코x코딩온] 웹개발자 풀스택 과정 1차 팀프로젝트 - 프론트엔드(2)

1️⃣ 두번째 페이지 메인페이지를 만들고 또 다른 페이지를 각각 맡아서 제작하기로 했다. 나는 그중에서 페스티벌 페이지를 담당했고 디자인을 먼저 고려했다. 지역을 선택할 수 있는 필터를 만들고 그 아래에는 슬라이드를 사용해서 현재 진행중인 페스티벌을 보여줄 계획했다. 특히 이번 슬라이드는 스와이퍼를 사용해서 만들었다. 처음써보는 라이브러리라서 커스텀이 어디까지가능하고 사용 방법이 어떤지 몰랐기 때문에 기대됬다. 2️⃣ 스와이퍼 사용 방법 스와이퍼를 불러오는 방법은 2가지가 있다. https://swiperjs.com/get-started Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slide..

• format_list_bulleted 프로젝트
• · 2023. 7. 29.
• textsms