개발 🐾

2025.02.21 (금) Works 20일 구현 일정 중에 도무지 이해가 안 가 넘겼던 JWT 인증 API 연결.JWT 인증 서버와 통신하는 코드를 작성해야 했다.  JWT 리액트 심화 강의 중에 API 연결에 관한 내용을 알게 되었다.JWT에 대해 이해하려면 '토큰'을 먼저 알아야 한다. 토큰이란? 클라이언트에서 보관하는 암호화 또는 인코딩된 인증 정보서버의 상태를 유지하지 않고도 클라이언트의 인증 상태를 확인 가능세션처럼 서버에서 사용자의 인증 정보를 보관할 필요가 없기 때문에 서버 부담을 줄여주는 인증 수단웹에서 인증 수단으로 사용되는 토큰은 주로 JWT (Json Web Token) 을 이용쉽게 설명하자면 찜질방에서 받는 키라고 생각하면 된다. 이용자는 키를 가지고 계란도 사먹고, 식혜도 사먹고..

2025.02.20 (목) Works 초기 설정을 위해 파일 구조 및 컴포넌트를 나누었다.이번 개인 과제는 요구 조건이 아주 상세하게 나와있어서 꼼꼼히 살펴보고 적용해야 한다.폴더 구조도 안내 사항과 같이 적용해보았다. src/├── components/├── pages/├── api/├── data/├── utils/├── App.jsx├── main.jsx└── index.css더보기더보기components: 재사용 가능한 UI 컴포넌트pages: 각 페이지 컴포넌트 (Home, Login, Signup, Profile, TestPage, TestResultPage 등)api: 서버와 통신하는 로직 (auth.js, testResults.js 등)data: 정적 데이터 (questions.js - M..

👣 FootPrint newsfeed 메인 화면 및 작동 영상  Github 주소: https://github.com/ijooha16/foot-print.git배포 링크 : https://foot-print-six.vercel.app/ 🖥️ 프로젝트 소개'여행'을 주제로 한 뉴스피드입니다.여행 기록에 대한 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간입니다.원하는 게시물을 검색할 수 있고, 자신이 작성한 게시물을 수정하거나 삭제할 수 있습니다.styled-components를 이용하여 스타일링 하였습니다.Context API를 통해 전역생태 관리 방법을 사용했습니다.react-router-dom으로 라우팅 기법을 사용했습니다.BaaS(Backend As a System)- Supabase를 사용..

뉴스 피드란? 내 게시물을 포함한 모든 게시물을 볼 수 있는 공간→ 블로그, 커뮤니티, SNS 모두 될 수 있어요.첫 팀 프로젝트를 시작한 날.오늘 하루는 팀원들과 함께 프로젝트의 방향과 각자의 역할을 정하는 시간을 가졌다. 2025.02.12 (수) Works1. S.A(Starting Assignments) 정하기- 프로젝트 주제- 포함할 내용- 구성- 기능2. 와이어프레임 작성 - 피그마- 페이지 정하기- 페이지 구성하기- 정보 구조 설계도3. 팀 규칙 정하기 - 커밋 컨벤션- git rules4. 나의 역할파악하기   S.A(Starting Assignments)  📍프로젝트 주제첫 팀원들이 모였을 때 모두 여행을 좋아한다는 공통점을 찾았다.그렇게 정해진 우리 팀명은 여행보내조✈️따라서 프로젝트..

떨리는 첫 프로젝트!텅 빈 vscode에서 최종으로 영화페이지를 만들기까지!기초적인 필수 기능과 추가적인 도전 기능이 있다. 우선 필수 기능부터 다 구현하는 것을 목표로🏅1월 8일의 과제  1. 프로젝트 파일 구조 설정1-1. js, html, css 파일 생성과제 진행 전, 담당 튜터님께서 알려주신 방식을 캡쳐해 두었고동일한 방식으로 파일을 따로따로 만들었다. 📌 그 전에는 html에  태그, 태그를 넣어 한 문서로 만들었지만이후 수정 및 유지보수가 어렵다는 단점이 있어, 분리하여 관리하면 훨씬 편하다!   1-2. js, html, css 파일 연결세 파일을 연결하기 위해서는 html 파일에 작성해야 한다.결국 웹 사이트를 거시적으로 나타내는 것은 html 파일이기 때문!📌 body 태그 하단에..

🏅올림픽 메달 개수 트래커 메인 화면 및 작동 영상  ℹ️프로젝트 정보✔️ 기간 : 2025년 1월 21일 ~ 1월 24일✔️기술스택 : React, Vite목표 및 구현한 기능✅ Vite로 리액트 프로젝트를 셋업✅ 나라 이름과 금, 은, 동 메달 수를 입력할 수 있는 폼 작성✅ 폼 제출 버튼을 눌렀을 때 새로운 나라와 메달 수가 추가✅ 제출 후 모든 입력 필드는 빈 값으로 초기화✅ CRUD(Create, Read, Update, Delete) 기능✅ Create: 폼 제출 시 새로운 나라와 해당 메달 수를 리스트에 추가✅ Read: 화면에 국가별 메달 집계를 리스트 형태로 출력✅ Update: 이미 추가된 국가의 메달 수를 수정할 수 있는 기능✅ Delete: 리스트에 표시된 나라 옆에 삭제 버튼을 ..

🎥영화 검색 사이트 만들기 ℹ️프로젝트 정보✔️ 기간 : 2025년 1월 8일 ~ 1월 17일✔️기술스택 : JavaScript, HTML, CSS목표 및 구현한 기능✅ TMDB API에서 인기 영화 데이터를 가져오기✅ TMDB의 API 키를 발급받고, fetch API를 사용하여 데이터를 가져오기✅ HTML과 CSS를 사용해 영화 카드 UI를 만듭니다. 영화 카드에는 영화의 포스터, 제목, 요약, 평점 정보가 포함✅ Flexbox 또는 Grid 레이아웃을 사용해 스타일링을 적용하✅ 검색창을 만들고, 사용자가 입력한 키워드에 맞춰 영화 리스트를 필터링✅ 검색 버튼을 클릭하거나 Enter 키를 입력하면 해당 키워드를 포함한 영화들만 리스트에 나타내기✅ 각 영화 카드를 클릭했을 때, 영화의 상세 정보(예:..