프로젝트

[2023.02.13] 엘리스 IoT트랙 1기를 수강하며 두번째 프로젝트를 시작하게 되었습니다! 이번에는 블로그를 작성하여 저의 프로젝트 과정을 기록해보려고 합니다 :) 📙 프로젝트 소개 저희 팀은 중고 책을 사고 팔 수 있는 서비스를 제작할 예정입니다. 엘리스에서

저희 팀은 먼저 figma를 이용해 구현할 웹페이지와 flow chart를 구성하였습니다. figma를 먼저 구성함으로써 팀원들 모두 각 페이지별 구현해야 할 기능 및 페이지 이동에 관해 정확히 이해하고자 했습니다. 또 백엔드에서 역시 각 페이지별로 어떤 db가 필요할

[2023.02.15] 오늘은 상세 페이지 개발을 시작했습니다! 배웠던 내용임에도 불구하고 직접 구현하려고 하니 생각보다 어려웠고, 에러도 발생했습니다 ㅠㅠ 오늘은 개발하면서 겪은 에러와 느낀점에 대해 작성해보겠습니다! 📌 1. params 받아오기 > 에러 내용:

[2023.02.16 - 2023.02.17] 16일에 처음으로 대면으로 만나서 회의를 했습니다! 코치님께서 폴더 구조를 통일한 후 다른 팀원들이 받아와서 사용해야 merge할 때 에러가 많이 나지 않을 거라고 조언해 주셔서 폴더 구조를 정하고 통일했습니다. 또, 이번

[2023.02.20] 오늘은 작업한 내용을 develop 브랜치에 merge했습니다. merge conflict가 많이 발생했고, 해결이 어려워서 하루를 merge하는 데에 다 보냈습니다 ㅠㅠ 따라서 이번에는 제가 git에 merge한 방법을 정리해보려고 합니다!

[2023.02.21] 오늘은 react에서의 table에러에 대해 작성해보겠습니다! 📌 1. react에서의 table에러 문제 상황 책의 id값을 받아 상세 정보를 보여주기 위해 react-router-dom에서 match를 이용해 id를 받아오려고 했지만 에

[ 담당 페이지 ] - 주문 관련 페이지 (회원/ 비회원 주문, 완료) - 관리자 페이지 ( 유저관리, 주문관리 ) - 마이 페이지 ( 회원 정보 조회/수정, 비밀번호 수정, 주문내역 조회/수정 ) - 도서 상세 페이지

Next.js는 React 프레임워크Tailwind CSS는 CSS 프레임워크npx create-next-app@latestnpx create-next-app@latest --typescriptnpx create-next-app@latest --typescript --

Next.js의 layout.tsx에서 폰트 설정하는 이유 및 방법

Home.tsx 구현 코드 및 상세 내용

- 아이콘 사용 방법& React 컴포넌트로 가져오는 이유 - 아이콘 파일 만들기 적용

트러블슈팅_ 링크카드 hover 동작 안되는 이슈 해결과정

Skills.tsx 코드 구현 및 의미

Project 데이터를 준비하는 파일들 작성하기. 파일 분리하여 데이터 보관하는 이유.

ProjectCard.tsx 코드 구현 및 의미

ProjectModal.tsx 구현 및 상세 설명, 웹 접근성, 이벤트 버블링 방지

ProjectSection.tsx구현 및 상세 설명

page.tsx 코드 구현 및 의미, 클릭 후 모달 렌더링 과정

Experience.tsx 코드 구현 및 의미

Certification 구현 및 상세 설명

Award.tsx 구현 및 상세 내용

스크롤 시 배경 색상을 변경하기

canvas api 사용 도중 발생한 에러를 해결하는 과정

Canvas api로 별자리 배경을 만드는 과정

글래스모피즘을 적용한 이유와 적용이 안된 문제 해결과정

Vercel로 배포하기 ( 에러 해결 )