개발노트

프론트에서 fetch로 서버에 로그인 요청을 하면 서버에서 jwt토큰을 만들어 header에 심어 응답을 해주는데, 자꾸 프론트에서 "Authorization"으로 응답을 받지 못해 이것저것 다하다가 많은 시간을 날렸다. 서버에서 토큰을 심는 코드 프론트에서 토큰을 추출하는 코드 위처럼 토큰을 받고, console에 찍어보면 자꾸 undefined가 나왔다. 그러다 아래 글을 보았다. https://bogmong.tistory.com/5 Axios Response header의 값이 없는 경우에 대해 어떤 상황의 어디에 영향을 미치는 문제인가요? - WHO AND WHAT React에서 axios 라이브러리를 사용했다. POST의 Response를 받기 위해 다음과 같은 코드를 사용했다. API 서버에서..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. CRA로 리액트 프로그램을 작성하셨다면 직접 HTML 파일을 작성할 일이 없었을 것입니다. JSX라는 문법을 통해서 HTML과 비슷한 형태로 작성을 하고, 그 파일을 리액트가 HTML로 변환시켜 렌더링을 시킨다는 사실을 알고 있습니다. 하지만 우리는 그 타이밍을 잘 알지 못해요. 만약 리액트로 프로그램을 만든 뒤, 그 사이트를 접속해 보면 처음에는 아무것도 없는 빈 화면이 반겨줍니다. 그 후 자바스크립트가 로딩이 완료되면서 우리가 작성한 JSX파일이 보이기 시작합니다. 이번 시간에는 그 타이밍을 알아보도록 하는 시간을 가져보겠습니다. 왜 내가 그걸 알아야 하는데 ? 이 부분을 학습하지 않고 리액트 개발을 하실 경우 총알 없는 ..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. 안녕하세요. 리액트 강좌 다섯 번째 시간입니다. 오늘은 전 시간에 못하고 끝냈던 Props에 대해서 알아보겠습니다. 우선, Props에 대해 설명을 하기 전에 State와 Props에 대해서 정확히 짚고 넘어가겠습니다. State는 현재 컴포넌트 내에서 변경이 가능하다. Props는 현재 컴포넌트 내에서 변경이 불가능하다. (예전 리액트 버전에서는 가능했으나 현재 버전에서는 사용하지 않는 것을 추천) Props와 State 모두 하위 컴포넌트에 상속이 가능하다. 이제 Props에 대해서 알아보도록 하죠. 일단 Props를 만들어 출력해 보도록 하겠습니다. src/index.js 파일을 변경해 주세요. index.js 코드를 보..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. 안녕하세요! 리액트 강좌 네 번째 시간입니다. 오늘은 전 시간에 말씀드렸던 데로 Props 와 State에 대해서 알아보도록 하겠습니다. 하지만 Props와 State의 개념은 제가 리액트를 처음 배울 때 헷갈렸던 개념이어서, 오늘은 State에 대해서만 알아보도록 하겠습니다. Props와 State는 어려운 개념은 아니지만 우리가 리액트를 하면서 항상 사용할 것이고, 중요하기 때문에 2강에 걸쳐서 포스트가 진행됩니다. Props와 State는 리액트에서 데이터를 다룰 때 사용하는 개념입니다. 둘 다 정말 중요한 개념이고, 이제 우리는 3강에서 CRA 폴더 구성까지 배웠으니, 이제 데이터를 직접 조작할 때가 되었습니다. 우선 ..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. 안녕하세요. 리액트 강좌 세 번째 시간입니다. 이번 시간에는 Part 2에서 만들었던 Create-React-App 폴더의 파일들을 분석해 보겠습니다. 먼저 에디터를 통해서 만들었던 CRA 폴더를 열어보세요. 폴더 구조는 다음과 같이 되어 있을 것 입니다. 여기 폴더들 중, 가장 중요한 폴더인 public과 src 폴더에 대해서 알아보겠습니다. 익숙하지 않은 문법에 관해서는 클래스에 관해서 공부하시면 됩니다. 나머지 폴더들이 어떤 역할을 하는지 알고 싶다면 npm과 git에 관해서 공부하시면 됩니다. public: 가상 DOM을 사용하는 리액트는 실제 DOM이 필요합니다. 즉, 가상 DOM이 들어갈 빈 껍데기 html이 필요하..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. 안녕하세요 리액트 강좌 두번째 시간입니다. 이번 시간에는 리액트 프로젝트를 생성하고 크롬 개발자 도구를 설치해 보도록 하겠습니다. 일단, 리액트 자체를 사용하는 것은 굉장히 간단합니다. Jquery를 사용하듯이 CDN 방식으로 불러와서 사용할 수도 있습니다. 그런데, 실제로 저는 이렇게 리액트를 사용하는 분은 만나보지를 못했습니다. 제가 리액트를 배울 때도 이렇게 가르쳐 주는 정보도 없었죠. 리액트 자체만 사용하는것이 아닌, 여러 가지 라이브러리를 동시에 사용하기 때문에 CDN 으로 리액트를 사용하면 리액트를 100% 활용할 수 없습니다. lint의 도움도 받지 못하고 에디터의 도움을 제한적으로만 받을 수 있기 때문입니다. (..

이 글은 Ji Hoon Lee 님의 React 포스팅한 글을 가져온 글입니다. 안녕하세요, 지금부터 리액트 강좌를 시작해보려 합니다. 리액트는 현재 굉장히 핫한 라이브러리 중 하나입니다. 현재 프론트엔드 진영에는 3개의 라이브러리 OR 프레임워크가 경쟁 중인데 바로 React, Angular, Vue 입니다. 깃허브 스타가 이를 보장해주기도 하고, 요새 이 세개 중에 하나 정도는 이름을 들어본 적이 있을 정도로 셋은 프론트엔드계의 끝판왕을 달리고 있습니다 (현재) 이 강좌 에서는 리액트에 대해서 알아볼 것입니다. 리액트는 페이스북이 만든 사용자 UI 구축을 위한 라이브러리 입니다. 오직 사용자의 View 에만 초점을 맞추고 있죠. 그래서 Routing 같은 기술이 리액트 자체에는 들어가 있지 않습니다. ..