본문 바로가기

Sparta x 이노베이션 캠프/팀 프로젝트

(16)
CGV 클론코딩 Trouble shooting Front-End Github # Troble-shooting 1 ) Cannot read properties of undefined 리액트에서 가장 자주 보는 오류 메시지이다. 이 오류는 값이 정의되지 않아 읽을 수 없을 때 발생한다. includes 로 배열을 돌리기 전에 값이 불러와지지 않아 오류 발생. Uncaught TypeError: Cannot read properties of undefined (reading 'classList') 해결) {seats.A.map((item,index) => selectSeat(item)} reserveseat = {Reserved?.a&&Reserved?.a.includes(item)} selected = {selectedSeat === (item)}/>)..
7주차 : React로 CGV클론코딩. 카카오 소셜로그인 프론트엔드 CGV 클론 코딩에 로그인을 네이버 소셜로그인으로만 하려고 했는데 기능 담당자가 내가 아니어서 카카오 소셜 로그인에 도전하게 되었다. 전체적인 흐름도 내가 이해한 바로는 1. 카카오 로그인을 요청하면 Redirect URI를 통해 파라미터에 인가코드를 받는다 2. 파라미터에 온 인가코드를 저장하여 백엔드 서버로 보내준다. 3. 백엔드 서버에서 카카오에 POST로 인가코드를 보내면 Response로 토큰을 받아서 프론트엔드에 전달하게되고, 4. 클라이언트가 로그인을 하면 성공. 셋팅 한 대로 로컬 스토리지에 토큰이 저장되면 된다. 과정 1. Kakao developers에서 카카오 소셜로그인을 선택하고 내 애플리케이션을 등록한다. 2.REST API키를 받고 Redirect URI에 카카오로부터 인가코드를..
6주차: React 미니프로젝트 "오늘도 무사히" 시연영상 # 오늘도 무사히 고된 일상을 버티고 오늘 하루도 무사히 넘겨보자는 취지의 공유 일기장입니다. 비대면에 익숙한 사회가 되어버린 오늘 날, 서로가 일상을 공유하며 혼자가 아님을 일깨워주고자 공유일기장 이라는 아이디어를 내게 되었습니다. 유저들은 서로의 일상을 사진과 함께 공유하고, 댓글도 달고, ‘좋아요’로 반응해주며 공감과 위로를 공유할 수 있는 서비스 입니다. # GitHub FrontEnd Github GitHub - nonjee888/fe_6week_miniproject: 미니프로젝트 - 공유일기장 미니프로젝트 - 공유일기장. Contribute to nonjee888/fe_6week_miniproject development by creating an account on GitHub. g..
4주차 : React로 Redux를 활용한 My To Do List 만들기. map is not a function Goal: My Todo List 만들기 React 입문 주차 개인 과제를 react-router-dom, styled-components, redux를 사용해서 My Todo List를 다시 만들어봅니다. features : 구현해야 할 기능 Create Todo Read Todos, Todo Update Todo Delete Todo Requirement : 과제에 요구되는 사항 공통 todos 데이터는 리덕스를 사용해서 전역으로 상태를 관리합니다. todos 모듈은 **Ducks 패턴**으로 구현합니다. 컴포넌트 구조는 자유롭게 구현하되, 본인이 그렇게 나눈 이유에 대해서 README에 작성합니다. 메인 페이지 디자인과 화면 구성은 자유롭게 구현합니다. Todo의 상태에 “완료” 그룹과 “진행중" ..
4주차 : React로 Redux를 이용한 Todolist 만들기 Requirement : 실습에 요구되는 사항 useState가 아닌 redux를 이용해서 구현해봅시다. 컴포넌트는 자유롭게 나누되, 그렇게 나눈 사유에 대하여 README에 작성하세요. 모듈관련 요소들은 todos.js 파일을 생성하고, 해당 파일안에 모두 작성하세요. 디자인은 자유이며, CSS를 styled-components 를 이용해서 구현하세요. input에 아무것도 입력하지 않았을 때는 추가하기 버튼을 눌러도 Todo가 추가되지 않게 하세요. 컴포넌트의 구조 App.js > Home.js > Layout.js > Header, Body //Header.js import React, { useState } from "react"; import { useSelector , useDispatch }..
3주차: React로 My To Do List 만들기- onChange, onSubmit, props, state, methods 개념 정리 React 입문 주차 개인 과제 구현해야 할 기능 UI 구현 Todo 추가 Todo 삭제 Todo 완료 상태 변경하기 (완료 진행중) 과제 요구 사항 디자인은 취향대로, 화면 구성은 동일하게 1. 제목, 내용 입력후 [추가하기] 버튼 클릭시 working에 새로운 Todo가 추가되고 제목 input과 내용 input은 다시 빈 값으로 바뀌도록 2. Todo의 isDone 상태가 true이면 상태 버튼의 라벨을 취소, isDone이 false면 라벨을 완료로 조건부 렌더링. 3. Todo의 상태가 working이면 위쪽에 위치, done이면 아래쪽에 위치하게. 4. Layout의 최대 넓이는 1200px, 최소 넓이는 800px 으로 제한, 전체 화면의 가운데로 정렬. 5. 폴더 구조, 컴포넌트 구성도 나..
1주차 : [About me] 로그인&회원가입 페이지, 이미지 드래그&드롭 파일 업로드 구현(feat. Phython) 프로젝트 : 오늘 한 것 1. 메인 화면에 회원가입 버튼 만들고 회원가입 페이지로 넘어가도록 설정 2. 로그인, 회원가입 페이지 app.py 팀원의 app.py에 병합해서 로그인과 회원가입 가능하도록 기능 구현 3. 이미지 드래그 & 드롭 파일 업로드 만들기 참조) https://www.youtube.com/watch?v=Wtrin7C4b7w&t=219s 소스코드) https://codepen.io/dcode-software/pen/xxwpLQo Simple Drag and Drop File Upload Tutorial - HTML, CSS & JavaScript From my YouTube video tutorial: https://youtu.be/Wtrin7C4b7w In today's video I..
1주차 : [About me] 미니프로젝트 포트폴리오 업로드 웹사이트 만들기 팀원 : 최진원 김태균 강민택 김소연 1주차 - 아이디어 카페 / 음악 공유 사이트 캠핑장 정보 리뷰 반려견 일기 포트폴리오 올리는 웹사이트 참고를 많이 했습니다 https://cdg-portfolio.com 최덕경 포트폴리오 :: CDG's Portfolio 프론트 엔드 개발자 최덕경의 포트폴리오입니다. cdg-portfolio.com 주제 : 포트폴리오 올리는 웹사이트 프로젝트 명 : About me 개발자의 성장기를 시각화 하여 담아내는 포트폴리오 웹 사이트. 거쳐온 프로젝트들을 통해 발전해 나가는 우리의 모습을 한 눈에 볼 수 있습니다. 와이어프레임 1. 개발해야 하는 기능들 로그인 페이지 1) 회원가입 버튼 누르면 회원가입 페이지로 이동 2) 아이디, 비밀번호 바르게 입력시 로그인 3) 아이디,..

반응형