좌충우돌 개발자의 길

1. 리액트에서 성능 개선을 해보자 성능 개선 / 최적화를 위한 기능으로 다양한 훅을 제공하고 있다. 그중에서 useMemo / useCallback / React.memo 3가지에 대해서 공부하고 정리하겠다. 2. useMemo memo : memorization 의 약자로 기존에 수행한 연산의 결과값을 어딘가에 저장해 두고 동일하게 입력이 들어오면 재활용하는 프로그래밍 기법이다. 2-1. useMemo의 장점 : 무거운 동작 과정을 가볍게 바꿔준다. 함수형 컴포넌트의 동작 과정 : 렌더링 -> Componenet 함수 호출 -> 모든 내부 변수 초기화 useMemo 사용 후 동작 과정 : 렌더링 -> Component 함수 호출 -> Memorize 된 함수를 재사용 내부변수 초기화를 위한 함수를 호..

hook hook 불면 기능이 넘치는 커다란 리액트 훅~ 1. hook은 리액트에서 제공하는 내장 hook과 내가 직접 만든 custom hook으로 나뉜다 - 리액트에서 제공해주는 내장 hook : useState, useEffect, useParams,.... 등등 - custom hook : use___ 이렇게 작성! (여태 나는 반대로 알고 있었다 머쓱~) 2. hook 사용 시, 꼭 지켜야 할 규칙들 - 최상위에서만 hook 호출하자 (반복문, 조건문, 중첩된 함수 내에서 실행 금지!) - React 함수 컴포넌트 내에서만 hook 호출하자 3. 내장 hook - 기본 hook 1) useState 2) useEffect => 이 두 hook은 다른 글에서 자세히 다루었으므로 생략! 3) use..

문제점 - 이전 글에서 말했듯이 또다른 복병이 생겨났다. 바로 초기화면에서 댓글이 아예 보이지 않는 것이다. 원인을 파악했더니 useState에 초기값을 아무것도 설정하지 않아서 발생한 것이었다. 내가 생각한 해결방안 - 그래서 이전에 댓글 불러오는 컴포넌트를 따로 만들었었는데 그 컴포넌트를 재활용해서 초기 댓글 불러오기 위한 용도로 사용했다. const commentsInit = useAxios(`/api/comment/${userId}`); //이렇게 먼저 db에 저장된 초기 댓글을 가져와 commentInit에 담고 const [comments, setComments] = useState(commentsInit); //그 commentInit을 초기값으로 설정하자고 생각했다. 문제점 발생 - 하지만..

- 구현 목표 : 댓글을 쓰면 새로고침없이 댓글창이 바로 나올 수 있도록 바꾸는 기능 구현하기 (카톡처럼!) - 내가 생각한 방법 : useEffect를 써서 comment가 새로 들어올 때마다 업데이트할수 있도록 짜자 import { useEffect, useState } from "react"; import axios from 'axios'; export default function useAxios(url) { const [data, setData] = useState([]); useEffect(() => { axios.get(url) .then(res => { return res.data.body; }) .then(data => { setData(data); }) .catch(error => { ..

문제상황 ... 위의 코드로 user 데이터를 withDraw함수에 전달하려 했다. 하지만 드롭박스를 여는 버튼을 누를 때 withDrawl함수도 같이 실행되는 기이한 현상이 벌어졌다.. 회원탈퇴 버튼을 눌러야 withDrawl함수가 나와야하는데 말이다... 그래서 파라미터를 전달하는 방식에 문제가 있는 것으로 판단하여 구글링을 해봤다. 해결방안 에러가 났던 이유 : onClick에 함수 자체를 전달해야하는데 나는 withDawl(user)로 결과값을 전달한 것이었다!!! 해결 코드 : 다음과 같은 방식으로 전달하면 된다 withdrawal(user)}> React onClick함수로 파라미터를 전달하는 방법 Hiring Assessment에서 리액트로 이미지를 클릭했을 때 해당 이미지가 변경되는 페이지..

문제상황 CORS 에러가 발생했다 어찌저찌 해결해오지만 git pull을 하면 다시 CORS 에러가 뜨고 무한 반복의 지옥에 빠져버렸다. 다시 구글링을 열심히 한 끝에 그 이유를 알게 됐다. 해결방안 서버와 클라이언트 주소가 일치하지 않아 발생한 에러였다. 그래서 단순하게 아 클라이언트 주소를 서버 주소와 같은 localhost:8080으로 변경해야겠다~ 이랬지만 이것은 무식한 해결방안이라는 걸 반증하듯이 같은 주소로 서버를 돌릴 수는 없다는 에러가 나타났다. 다시 구글링을 하여 약간의 속임수를 집어 넣는 proxy 방법을 찾았다. package.json에 proxy로 서버의 주소를 설정하고 url 을 /api/login 이런 방식으로 적어 놓으면 되는 것! 에러가 말끔히 해결됐다 참고자료 https:/..

문제점 난생처음 Axios와 JWT를 사용해서 로그인 기능을 구현하면서 근 일주일 넘게 난항을 겪은 에러가 있었다 바로 로그인 버튼을 누르면 accessToken과 refreshToken이 저절로 application-storage-cookies값에 저장이 되어야하는데 안되고 있는 상황이었다. 해결방법 1. api 서버와 클라이언트 서버의 주소가 같지 않으면 쿠키를 주고받을 수 없다 - 아래와 같이 해당 주소만 허락해주도록 설정 (Access-Control-Allow-Origin: "*"와 같이 모든 주소 가능하게 해주면 보안이 위험해짐) // backend(api) 서버 app.use(cors({ credentials: true, origin: "http://localhost:3000" })); // ..

1. build 란? 코드와 어플리케이션이 사용하는 이미지, css 파일 등의 파일을 모두 모아 패키징 하는 과정 난독화 + 줄바꿈, 공백 제거 2. build 실행 방법 npm run build build 생성 npm install -g serve stack file들을 serving 해주는 역할 serve -s build build 폴더를 기반으로 웹어플리케이션을 실행 3. 추가 : 배포 배포란? 빌드를 통해 생성된 정적인 파일들을 배포하려는 서버에 올리는 과정

react router를 사용하여 routing을 할 수 있게 해주는 기능 history를 이용해서 경로를 탐색할 수 있게 해주는 컴포넌트 history : 웹에는 history 기능이라고 이전에 들어갔었던 웹페이지를 기억해두는 기능이 있음 실제로 route 컴포넌트를 구성할 수 있게 해주는 기능 여러개의 route 컴포넌트를 children으로 갖음 path: 경로 element: 경로가 일치할 경우 해당 컴포넌트로 렌더링 : index경로에 /로 접속할때 MainPage 가 보임 페이지간 이동 이동할 path를 넣어주면 됨

부모에서 자식으로 데이터를 전달하는 경우는 많지만 자식에서 부모로 데이터를 전달하는 경우는 처음이었다! 이럴 땐 바로 state를 이용한다! 부모 컴포넌트에 useState를 만들어 놓고 자식 컴포넌트에서 setState로 데이터를 부모에게 전송시키면 된다! - 참고자료 https://webaura.tistory.com/entry/Reactjs-%EB%B6%80%EB%AA%A8%EC%97%90%EC%84%9C-%EC%9E%90%EC%8B%9D-%EC%9E%90%EC%8B%9D%EC%97%90%EC%84%9C-%EB%B6%80%EB%AA%A8-%EA%B0%92-%EC%A0%84%EB%8B%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95-props-function [React.js] ..