Timeline

Blocker : react로 만든 프로젝트를 ts로 변경하고 vercel을 이용해 배포하려고 했습니다 배포 도중 계속 에러가 나서 무슨 일인지 확인해보니, react-scripts@5.0.1 패키지의 종속성인 typescript와 충돌하는 버전이 발견되어 배포가 되지 않았습니다 제 패키지는 react-scripts@5.0.1과 typescript 버전은 5.1.6이었습니다 발생한 에러는 아래와 같았습니다 npm ERR! While resolving: react-scripts@5.0.1 npm ERR! Found: typescript@5.1.6 해결방법 : 당연히 최신버전으로 다운받아야 하는 줄 알았는데 아니었던 것 같습니다 그래서 저는 설치된 typescript를 삭제하고 낮은 버전으로 다운받았습니다 ..

Blocker : 날짜를 입력하는 대신 달력에서 기간을 선택할 수 있도록 datepicker 라이브러리를 사용하게 됐습니다 다만 처음 사용해보는 거라 특히 style 커스텀할 때 어려움이 많았습니다,,, 우선 공식문서를 참고하여 저는 date range 형태로 달력을 만들었습니다 https://reactdatepicker.com/#example-date-range React Datepicker crafted by HackerOne reactdatepicker.com 달력을 입력받는 창과 달력 모양의 스타일을 커스텀해야 했습니다 아래는 datepicker의 기본 스타일입니다 아래는 커스텀 후 제가 적용해야 할 디자인 시안입니다 해결방법 : 똑같은 디자인으로 커스텀하는 예시를 찾기는 어렵기 때문에 다른 분들..

Blocker : 백엔드에 생년월일 데이터를 저장할 때 8자리로 저장해야 하는 상황이었으나, 년/월/일을 따로 입력받아야 해 일을 1자리 입력 시 자동으로 0을 앞에 붙여줘서 백엔드에 데이터를 전송해야 했습니다. 처음에는 사용자가 입력 후 데이터를 전송하기 전에 0을 붙여서 전송하려고 했으나, 사용자가 입력 후 변경한 경우에도 변경된 값에 따라 수정되어야하기 때문에 무조건 input 값을 입력받는 onchange event의 함수에 0을 붙여주는 작업을 진행해야 했습니다. 해결방법 : 먼저, 생년월일 중 일에 해당하는 입력값을 담을 useState를 만들었습니다 그리고 입력된 값이 한자리 수인 경우 0을 붙여서 반환할 수 있는 formatDay 함수를 만들었습니다 최종적으로 사용자가 입력하는 값을 받아오..

Blocker : 프로젝트 진행 중 git pull을 했는데 되던 pull이 갑자기 fatal: not a git repository 에러와 함께 pull이 되지 않는 상황이 발생했습니다. 3번의 프로젝트를 하며 한번도 만나지 않았던 에러라 열심히 구글링해봤습니다 더보기 이 에러는 현재 폴더에 git에 대한 정보를 담은 파일이 없이 때문에 발생합니다 해결방법 : 여러가지 원인 해결 방법이 있었는데 해결방법을 소개해보겠습니다 1. git clone 후 git 명령어 사용했을 때 해당 에러가 발생한 경우라면? $ git init $ git remote add origin (GitHub주소) git 명령어를 실행하려는 디렉터리가 git이 관리하지 않는 디렉터리라는 뜻이기 때문에 git inint 명령어를 실행..

아래와 같은 에러가 발생했다면 이 글을 따라 문제를 해결해보세요 Error! warning: Pulling without specifying how to reconcile divergent branches is discouraged. You can squelch this message by running one of the following commands sometime before your next pull: git config pull.rebase false # merge (the default strategy) git config pull.rebase true # rebase git config pull.ff only # fast-forward only You can replace "git con..

생활코딩의 react-redux (2022년 개정판) 강의를 보면서 작성한 내용입니다 https://www.youtube.com/watch?v=yjuwpf7VH74&t=716s react-redux를 사용하기 위해서는 먼저 두 가지를 다운받아야 합니다 npm i redux npm i react-redux 그리고 강의에 따라 react-redux 중 Provider, useSelector, UseDispatch만 사용하도록 하겠습니다 아래의 코드를 작성해서 확인해보면 굳이 props로 전달하지 않고도 하위 컴포넌트에서 상위컴포넌트에 있는 state를 변경할 수 있습니다 import React, { useState } from "react"; import "./styles.css"; import { crea..

0. 프로젝트 소개 오늘의집을 모티브로 한 커뮤니티&커머스 웹 사이트 프로젝트로 단순히 인테리어 제품을 판매하는 것이 아닌 커뮤니티를 중심으로 기획 개발기간 : 2023.02.24 - 2023.03.10 (약 2주) frontend github : https://github.com/wecode-bootcamp-korea/42-2nd-HomeAlone-frontend GitHub - wecode-bootcamp-korea/42-2nd-HomeAlone-frontend: 이종혁, 이수민, 성은정 이종혁, 이수민, 성은정. Contribute to wecode-bootcamp-korea/42-2nd-HomeAlone-frontend development by creating an account on GitHu..

import { useRef, useState } from "react"; import "./styles.css"; export default function App() { const [image, setImage] = useState(null); const inputRef = useRef(null); const 이미지넣기 = () => { if (!inputRef.current) return; inputRef.current.click(); }; const 이미지변경됐을때_실제스테이트에_넣는함수 = ({ target: { files } }) => { setImage(files[0]); }; const 전송해보자 = () => { const formData = new FormData(); formData...

npm install react-slick --save 을 톻해 react slick library를 설치하여 캐러셀을 구현했습니다 아래 코드를 통해 캐러셀을 구현할 수 있습니다 import React, { Component } from "react"; import Slider from "react-slick"; export default class SimpleSlider extends Component { render() { const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( Single Item 1 2 3 4 5 6 ); } } Resources https://re..

1. KPT란? KPT 관점에서 회고해보았습니다 우선, KPT 관점이란 Keep, Problem, Try의 약자로 회고 내용을 3가지 관점으로 분류하여 회고를 진행하는 것입니다. 2. 나의 회고 확실히 프로젝트를 한번 해본 뒤라 프로젝트를 진행하는 것은 훨씬 수월한 것 같습니다 코딩하는 게 수월하다는 건 절대 아니죠,,,,❌ Keep : - 초기 세팅 때 코드 컨벤션이나 파일(이미지, mock data 등)을 어떻게 관리할지 딱 정해서 통일성 있는 코드를 작성할 수 있었습니다 - config 폴더나 mixin 등이 들어있는 styles 폴더도 처음부터 관리해서 편리했습니다 - 1차 프로젝트 경험을 바탕으로 통신 전부터 백과 프론트가 끊임없이 소통했습니다 -> 이걸 바탕으로 원활한 통신이 이루어지길 기대해..