profile
better than yesterday
post-thumbnail

mongoDB 에 이미지 업로드하기

프론트에서 이미지를 서버에 저장한다음, 그 경로를 데이터베이스에 저장하고, 프론트가 데이터베이스에서 서버에 저장된 이미지의 주소를 받아와서 이미지 태그의 주소에 넣어주는 방법을 알아보자.참고: https://www.positronx.io/react-file-u

2022년 4월 16일
·
0개의 댓글
post-thumbnail

비동기 Promise, async & await

동기적으로 코드를 실행시키는 JS 에서 만약 데이터를 받아오는데 10초가 걸리는 코드가 있다면, 이후의 코드들을 작업이 끝날 때까지 기다려야 할 것이다.만약 이 코드 뒤에 웹페이지의 UI를 표시하는 코드가 있다면 위 작업이 끝날때까지 데이터가 들어오지 않아 빈페이지만

2022년 4월 6일
·
0개의 댓글
post-thumbnail

중괄호 사용에 따른 return 유무의 차이

return 하기 위한 값 앞에 return 을 붙여줘야 한다.return 문이 필요없이 자동으로 return 된다.

2022년 4월 4일
·
0개의 댓글
post-thumbnail

props 를 받아올 때 주의 사항, ({props}) 와 (props) 의 차이

todos 배열을 props 로 넘겨준 경우,하위 컴포넌트가 그냥 (todos) 로 받으면 객체 한겹 쌓여서 받아진다따라서 todos 배열을 바로 받기 위해서는 객체 안의 배열을 나타내는 ({todos}) 로 받아야 한다. (값 추가했음)

2022년 3월 31일
·
0개의 댓글
post-thumbnail

Array.map is not a function 에러

배열이 빈 배열일 경우 나타난다. 빈 배열의 boolean 값이 false 인줄 알았는데 알고보니 true 였다. 이럴땐 Array.length 를 사용하자.

2022년 3월 31일
·
0개의 댓글
post-thumbnail

reducer 모듈을 합친(combine) 경우의 state 값 접근

한단계 더 들어가야 한다.console.log(state)인 경우, reducer 라는 모듈에 접근하려면 추가로 한단계 더 들어가야 한다.console.log(state.reducer)

2022년 3월 31일
·
0개의 댓글

react redux 에서 switch 문 사용할때 주의사항

reducer 함수를 정의할때 action.type 을 분별하기 위해 switch 문을 사용하는 경우가 있다.이 경우 초기의 상태, 즉 아무런 action 을 취하지 않았을 때의 return 값을 정해줘야 하는데객체안에 또 현재의 state 객체를 감싸면 안된다. r

2022년 3월 31일
·
0개의 댓글

useHistory -> useNavigate 업그레이드

변경 전 변경 후

2022년 3월 26일
·
0개의 댓글

input 에 [Object Object] error

예시

2022년 3월 8일
·
0개의 댓글

A component is changing a controlled input of type text to be uncontrolled 에러

A component is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice

2022년 3월 6일
·
0개의 댓글

JS 알고리즘 입출력, 메서드, 에러

fs : File System 모듈 readFileSync : 파일을 읽고 난 후에 실행(동기 처리) stdin : 표준 입력 파일('dev/stdin' 은 stdin 의 경로, 시스템에 따라 변경될 수 있음 toString() : 읽어서 가져온 반환값은 Buffer

2021년 12월 21일
·
0개의 댓글

NextJS

https://velog.io/@skypedanny/NextJS-%EA%B7%B8%EA%B2%8C-%EB%AD%94%EB%8D%B0

2021년 11월 30일
·
0개의 댓글

서버사이드 렌더링 vs 클라이언트 사이드 렌더링

https://joshua1988.github.io/vue-camp/nuxt/ssr.html#%E1%84%8F%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%A5%E1%86%AB%E1

2021년 11월 30일
·
0개의 댓글
post-thumbnail

컴포넌트를 함수로 호출 vs JSX 엘리먼트로 호출

컴포넌트를 함수로 부르는 것은 예상치 못한 버그와 Hooks 사용에 있어서 문제가 될 수 있기 때문에 JSX 엘리먼트를 사용하도록 한다.before)after)stackoverflow 에 질문을 올렸는데 답변이 빠르게 달려서 놀랐다. 앞으로도 적극 활용해보도록 해야겠다

2021년 11월 29일
·
0개의 댓글

pakage 다운 그레이드 방법

다운 그레이드 방법npm 사용 시yarn 사용 시

2021년 11월 23일
·
0개의 댓글

ReferenceError: TextEncoder is not defined

이 부분을아래와 같이 변경해주면 된다.참조: stackoverflow

2021년 11월 22일
·
0개의 댓글
post-thumbnail

Concurrently 를 이용한 동시 실행

나의 경우에는,프론트 서버를 킬때는 client 디렉토리에서 npm run start 를 실행해야 하고백 서버를 킬때는 / 루트 디렉토리에서 npm run backend 를 실행해야 한다.이 두 명령어를 동시에 사용하기 위해서는 concurrently 라이브러리를 사용

2021년 11월 13일
·
0개의 댓글

proxy 설정 방법

브라우저에서 출처가 다른, 즉 host 나 port 가 다른 백엔드 서버로 API 요청 시 호출할 때 발생할 수 있는 CORS 관련 오류를 방지하기 위해 proxy 를 설정해준다. 해당 proxy 설정을 통해 로컬 환경에서는 처리할 수 있지만, 추후 정적인 소스를 서버

2021년 11월 13일
·
0개의 댓글

Invalid Host Header

리액트가 설치된 모듈 디렉터리에서 위 위치의 파일을 연 다음이 부분을 아래와 같이 바꿔주면 된다.

2021년 11월 13일
·
0개의 댓글

회원가입 / 로그인&아웃 / 권한 확인 기능 구현

서버를 만들고 db와 연결 후 client 에서 request를 받아 회원 가입, 로그인, 권한 확인 을 하는 기능을 구현해보았다.클라이언트는 따로 다루도록 하고 먼저 request를 받아 처리하는 백엔드 부분만을 다루도록 한다. /api/users/register 에

2021년 11월 11일
·
0개의 댓글