분류 전체보기

작업 내용 리뷰 작성한 리뷰 / 알림 등의 업데이트 날짜포맷 변환 대부분의 개발 언어가 그렇지만 기본으로 표시되는 날짜 포맷이 우리나라나 동양권의 날짜 표시 방법과는 차이가 있다. 자바스크립트의 많은 라이브러리들과 날짜 관련 UI 프레임워크들도 마찬가지로 날짜 포맷 표현에서 우리의 년.월.일 표현 방식과는 다른 방식으로 기본적인 날짜 표현을 한다. 우리의 프로젝트에서 response로 받은 데이터를 보면 날짜 포맷을 아래와 같이 넘겨주는 것을 확인 할 수 있다. createDate : ""2022-02-27T09:47:05.256725" 하지만 UI에 이대로 표현된다면 사용자가 보기 불편할 뿐만 아니라 ms까지 표시되어 불필요한 정보를 보여준다는 생각이 들어, 이 날짜포맷을 변환해 보기로 하였다. 👍시도..

👉 부모에서 자식으로 함수 전달 & 자식에서 부모로 데이터 전달 이번에 인프런에서 유튜브 클론코딩을 수강하다가 부모->자식->자식의 함수 및 데이터 전달하는 부분이 있어, 추후에 참고용으로 또 보기 위해 포스팅합니다. 예시 코드를 간단히 설명하자면, 아래 코드에서 VideoDetailPage.js는 영상의 상세페이지를 보여주는 컴포넌트이고, 는 해당 동영상이 표시되는 영역, 는 동영상 아래의 댓글 영역입니다. // VideoDetailPage.js (부모 컴포넌트) import React, { useState } from "react"; import Axios from "axios"; import Comment from "./Sections/Comment"; export default function V..

React에서 Redux toolkit을 활용하는 방법을 정리하고자 합니다. redux-toolkit 설치된 프로젝트를 생성하는 방법 Redux + Plain JS template npx create-react-app my-app --template redux Redux + TypeScript template npx create-react-app my-app --template redux-typescript App.js 에 Provider를 import하고 최상단 컴포넌트에 store를 저장해줍니다. // App.js import { Provider } from "react-redux"; import Counter from "./components/Counter"; import store from "./..

React에서 배열의 렌더링 배열 원소를 하나하나 렌더링 해야하기 때문에 재사용되는 코드가 있을 수 있습니다. 이 재사용하는 코드를 동적인 데이터 처리를 위해 대부분은 자바스크립트의 내장함수 `map()`을 사용하여 렌더링합니다. map함수를 사용할 때는 key라는 props를 설정해야하는데 이 key값은 배열의 각 원소들이 가지고 있는 고유값으로 설정해주어야합니다. 이 key를 이용하여 배열이 업데이트 될 때 효율적으로 렌더링 할 수 있습니다. 만약 각 요소에 key를 설정해주지 않으면 아래와 같은 오류 메세지가 표시됩니다. Each child in a list should have a unique "key" prop. React elements는 유일해야하는 특징을 가지고 있기 때문입니다. 만약 배열..

이번 주 작업 내용 리뷰 구글 oauth연동 저번 주말에 우리 팀 모두 모여 firebase와 구글 oauth 연동하는 것을 마무리 지었다. 처음에는 package.json에 proxy로 백엔드 주소를 넣어 사용했었는데 이상하게도 계속 localhost3000으로 가게되서 창엽님이 프록시미들웨어를 사용하셔서 완료하셨다. 프론트, 백엔드 구분할 것 없이 모두가 애먹던 부분이라 로그인, 회원가입이 모두 정상적으로 처리된 것을 확인했을 때 모두 매우 감격했다. 마이페이지 현재는 나는 마이페이지 쪽 작업을, 창엽님은 검색페이지쪽 작업을 도맡아 하고 있는 중이다. 마이페이지쪽 작업을 하면서 정말 고려할게 많다는 것을 느꼈다. 지금은 백엔드 api 개발이 완료되지 않아 아직 연동하지 못한 상태인데 json-serv..

이번 주 작업 내용 이슈작성 멘토님들께서 작성해 주신 마일스톤을 기준으로 이번주 작업할 내용은 아래와 같다. CRA 및 라우팅 셋업 json-server 셋업 및 mock 데이터 만들기 firebase 인증 토큰 및 구글 로그인 UI 리스트페이지 본문 그 외에도 앞으로의 일정 간 개발해야할 내용을 페이지별/기능별/컴포넌트별로 쪼개어 이슈를 작성해 주었다. Projects 작성하기 front와 back을 나눠 각각 repositories를 생성하고 각각 projects를 작성한다. 각각의 이슈별로 작업할 브랜치명과 누가 담당할 것인지를 구분하였다. 개발 시작하기 가장 내가 걱정하던 부분인데.. CRA / 라우팅 셋업 / json-server 및 mock데이터는 창엽님이 다 해주셨기 때문에 나는 header..

오늘 수업에서 다룬 내용 오늘 수업에서는 지난 목요일에 과제로 내주신 DB 및 API 명세서를 보고 피드백해 주시는 시간을 가졌다. 1. PATCH vs PUT 참고 : https://programmer93.tistory.com/39 HTTP Method 중에 PUT과 PATCH는 리소스의 업데이트를 의미한다. 리소스를 업데이트 한다는 점에서는 같은 역할을 하는 메소드처럼 보이지만 두개의 요청에는 약간의 차이가 있다. PUT : 리소스의 모든 것을 업데이트 한다. PATCH : 리소스의 일부를 업데이트 한다. 예를 들어, 아래와 같은 회원이라는 리소스가 있을 때 회원 (member) 1 이름 (name) 홍길동 나이 (age) 18 성별 (gender) M ✅ PUT PUT으로 요청을 보내면 PUT /m..

1주차 목요일(1/20)에는 기능명세서와 페이지 기획서를 작성하는 과제가 있었다. 기능명세서와 페이지 기획서는 이전에도 내가 작업해본적이 있기 때문에 그리 어렵게 느껴지지 않았다. 무엇보다 팀원들이 피드백도 빠르시고, 매우 협조적이어서 순탄했던 것 같다. 기능명세서는 notion을 이용해서 작성했는데, 6주 안에(실질적 개발기간은 4주) 이걸 다 만들 수 있을까? 싶을 정도로 다양한 기능들에 대한 아이디어가 나왔었다. 멘토님의 피드백을 받고 1,2차로 나눠서 개발하기로 하고 1차 개발 분량을 다시 산정했다. 페이지 기획서(UI 기획서)는 와이어프레임과 비슷한 형태여서 쉬웠다. 과연 이 기획서를 보고 디자이너님이 어떻게 해주실지 궁금해졌다.. 기능명세서와 페이지 기획서 모두 멘토님이 아주 잘했다고 칭찬해 ..