FrontEnd/React

프로그래머스 lv1. 푸드 파이트 대회 풀이

https://school.programmers.co.kr/learn/courses/30/lessons/134240?language=python3 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하..

[React] 컴포넌트 리렌더링(Re-Rendering) 조건

React의 렌더링 최적화를 필수적으로 해야하는 프로젝트를 하다보니 React에서 리렌더링을 하는 조건에 대해 자세히 공부하게 되었다. 렌더링(Rendering)이란? 사용자 화면에 View(내용)를 보여주는 것을 렌더링이라고 한다. React 엘리먼트를 루트 DOM노드에 렌더링 하려면 둘다 ReactDOM.render()로 전달하면 된다. 초기 렌더링이란 어떠한 UI관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 사용자 화면에 뷰를 보여주는 것을 초기 렌더링이라고 한다. 리액트에서는 렌더링을 다루는 render 함수가 있다. 리렌더링(Re-Rendering)이란? 리렌더링은 사용자가 화면에 뷰를 다시 새롭게 보여준다는 의미인데 이것을 업데이트 과정을 거친다. 또는 조화 과정을 거친다 라고 표현한..

[React] button onClick 시 onSubmit 이 실행되는 문제 해결

다음과 같이 회원가입 기능을 개발하던 중 인증코드와 인증코드 확인을 누르면 이 form 을 감싸고 있는 곳에 선언해둔 onSubmit 이 실행되어 비밀번호를 입력하지 않았다고 뜨는 문제가 발생하였다. 인증코드 전송버튼과 인증코드 확인 버튼은 onClick을 통해 이벤트를 발생시키도록 하였고 폼 전체의 전송은 onSubmit을 통해 이벤트가 발생한다. button 에 onClick 발생 시 onSubmit이 발생하는 이유를 Stack overflow 를 통해 찾아봤더니 onsubmit의 제일 밑에 기본이 되는 함수가 onClick 이어서 라고 한다. 이를 해결하기위해 으로 만든 버튼을 으로 변경해주면 된다고 한다. 나는 button을 styled-components를 통해 만들었기 때문에 이부분을 inpu..

[React] 환경변수가 undefined일 때 (process.env undefined)

axios baseURL에 ip주소를 직접 넣는 것이 아니라 .env에 환경변수를 설정해서 넣었다. 그러나! process.env_REACT_SERVER_URL이런 식으로 넣어줬더니 인식을 못하고 콘솔에 찍어봤더니 undefined였다. .env는 최상위 루트에 만들어줬어야 했는데 src 파일 안에 만들어서 undefined가 났었다. 이렇게 src밖으로 옮겨주니 바로 잘 작동하였다!

[React] 오늘의 에러 - Too many re-renders. React limits the number of renders to prevent an infinite loop.

const getGroups = useCallback(async () => { const user_email = localStorage.getItem("email"); await api .get(`/${user_email}/groups`, { headers: { access_token: localStorage.getItem("jwt_accessToken"), }, }) .then((response) => { console.log(response); setGroups([]); setGroups(response.data.groups); groups.forEach((v) => { groupName.push(v["group_name"]); }); setGroupNames([]); setGroupNames(gro..

[React] Warning: Each child in a list should have a unique "key" prop. 에러 원인 및 해결방법

리스트를 map메서드로 보여주던 중 에러 발생 Warning: Each child in a list should have a unique "key" prop. 에러 발생 코드 {chatList.map((value, index) => ( index로 key값을 주는 것을 지양한다고 한다. 항목들이 삽입,삭제 될 경우 독립적인 key값이 아니게 된다..! 2. key={value} -> 이 역시도 리스트들 중 같은 value값이 존재하면 key값은 독립적이지 않다. 결론 순회하고 있는 각 배열 값의 id로 key값을 부여하였다. 이 id값은 데이터베이스에 저장되어 있는 id값이기 때문에 삽입, 삭제가 되어도 독립적인 값이다. {chatList.map((value, index) => (

[React] npm start 시 ERR_CONNECTION_REFUSED (사이트에 연결할 수 없음 localhost에서 연결을 거부했습니다.)

어느날 코드도 설정도 바꾸지 않았는데 npm start 를 하니 이런 에러를 만나게 되었다. 이게 정말 막막했던 이유는 localhost자체가 안되는 것이 아니라 다른 프로젝트는 npm start 했을 때 실행이 잘 되는데 이 프로젝트만 안된다는 것이었다. 현재 react개발을 맡고 있고 java와 spring으로 백엔드 두명이 개발 중이며 통신 확인은 백엔드 팀원 노트북 ip에 내가 접속(같은 와이파이에 없을 경우 포트포워딩)하여 진행하고 있었다. 여태 통신 확인도 잘 되다가 정말 불쑥 이런 에러를 보게 되었다. 끝없는 구글링과 여러 자문을 구해 내가 시도한 방법 1. 인터넷 연결 확인 -> 인터넷 연결 때문 아님 2. node_modules, package-lock.json 삭제 후 캐시 클린 작업 ..

[React] 프로젝트 생성(CRA) 및 설치 (+ typescript 버전)

1. CRA 로 react 프로젝트 생성 npx create-react-app 프로젝트명 1-1. typescript를 사용할 경우 npx create-react-app 프로젝트명 --template typescript 2. styled-components, react-router-dom, swr 설치 styled-components 설치 (javascript) npm i styled-components styled-components 설치 (typescript) -> typescript에서 오류없이 사용하기 위해서는 styled-component의 type들을 가지고 와야한다. npm i styled-components @types/styled-components react-router-dom 설치(j..