Daily Log

Registration / Authentication Registration. CLIENT: 사용자에게 회원가입 시 필요한 데이터를 입력받고, 서버로 전달합니다 SERVER: 1. 전달받은 아이디(또는 이메일) 이 데이터베이스에 존재하는지 체크합니다 2-1. 이미 존재하는 아이디(또는 이메일)이라면, duplicate 에러 발생 2-2. 존재하지 않는다면 다음 단계로 패스 3. 비밀번호를 hash 알고리즘을 활용해 암호화 합니다 4. 암호화 된 비밀번호와 함께 데이터베이스에 새로운 사용자를 저장하고, 잘 저장되었다고 클라이언트에 알려줍니다Login, Authentication 로그인을 하는 목적은, 사용자가 권한이 있는지 없는지를 체크하기 위한 목적이 큽니다. 따라서, 권한을 체크하기 위해 JWT이나 세..

axios intercepter then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. - 토큰을 체크한다던지 함 인터셉터 | Axios 러닝 가이드 인터셉터 then이나catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다. axios.interceptors.request.use( function (config) { return config; }, function (error) { return Promise.reject(error); }); axios.interceptors.response.us xn--xy1bk56a.run

} else if (error.request) { console.log('Error', error.request); // 여기서 문제 alert('error request'); error.request에서 오류가 발생하는 문제가 생겼다. axios 라이브러리 오류처리 방법은 아래와 같다. axios.get('/user/12345') .catch(function (error) { if (error.response) { // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다. console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if..

Props Deconstructing video_item.jsx 한 줄안에 담긴 것을 꾸며볼 것이다. props를 받아올떄 아래처럼 받아올 수도 있지만. const VideoItem = props => ( {props.video.sinppet.thumbnails.mediu.url} //길어짐. 앞의 props를 생략하고 싶다면? ); 상위 컴포넌트에서 props를 전달할 때 video로 전달했으면 그 이름을 그대로 써서 const VideoItem = ({video}) => ( ); 로 써도 되고 혹은 다른이름으로 쓰고싶다면. 아래처럼사용해서 videoItem.snippet.thubnail 이런식으로 사용이 가능하다 const VideoItem = ({video: vidoItem}) => ( ); 만약에..

https://velopert.com/3533 리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (ii) | VELOPERT.LOG 이 포스트는 이어지는 튜토리얼 입니다. 1편 을 먼저 읽고 오시길 바랍니다. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케 velopert.com 내용 이해 후 정리 예정

useEffect 용도: - 처음으로 Component를 Rendering한 이후에 어떤것을 하는 것. - 어떤 화면을 보여줄 때 단순히 UI만 보여주는 것이 아니라 원하는 데이터를 넣어서 보여줘야 한다! - 그리고 이러한 데이터는 데이터베이스에 있는 경우가 많다. - 그런 작업은 렌더링 이후에 작업이 가능하다. - 그래서 데이터베이스에서 데이터를 불러오는 그런 일을 useEffect를 사용해서 컴포넌트가 렌더링된 이후에 사용한다. 컴포넌트가 마운트가 되었거나 업데이트 될 때마다 호출된다. 텅텅비어진 배열을 두번째 인자로 전달한다면, 마운트가 되었을 때만 호출이 된다. 선택적으로 원하는 변수를 배열로 전달하면 걔네가 바뀔 때만 호출됨 아무것도 넣지 않으면 업데이트 될 때마다 호출이 되는 것이다! useS..

토/ 개인공부: 프론트엔드 YoutubeAPI, Postman 등 Youtube Clone Project Redux/Saga 개념공부 개인프젝: 코코아기 - 메인화면 빼보기 & Research 일/ 회사업무: - 신분증 인증 API 요구사항 맞추기 - axios 리팩토링 완료 YoutubeAPI / REST API 사용 예시 - snippet: 한 가지 정보의 단위. - 개발툴에서 네트워크 툴에 와서 shift+누른 상태에서 리프레시하면 캐시무시하고 강제로 다시 받아옴. - 아래 처럼 크롬개발툴의 Network탭에서 API통신한 내용을 보여줌 - 어떤식으로 정보를 업뎃하고 삭제하고 등을 할 때는 REST API Postman - REST API 통신할 때 유용함 - REST API를 사용하는 클라이언트를..

REST API에서 자주 사용하는 것 get 정보를 읽어올때 post 사용자 만들 때 put 이미 존재하는 사용자를 업뎃할 때 delete 사용자 삭제할 댸 GraphQL을 이용하지 않으면 REST API를 많이 이용하고 있음. YoutubrAPIs 에서 문서를 보며 API 사용법이 가능하고, 오른쪽에서 테스트도 가능. 결과값은 JSON 형태로 반환되는데 cURL HTTP

git으로 배포 - yarn create react-app my-app 명령어를 사용하면 git이 이미 초기화 되어있음 - git remote add origin ~~ 를 통해 깃허브에서 만든 repository 원격 저장소와 내 로컬에 있는 폴더를 연결 - 그리고 추가된 파일이 있다면 git add * 하고 -> git commit -m "작업내용작성" - git push 를 하면됨 => 자동으로 깃과 연결이 되어서 깃허브에 로컬에서 작성한 코드가 올라감. => 문제가 생기면 open ~/.gitconfig를 열고 user 정보가 정확한지 확인할 필요가있음. 나의 깃허브 아이디가 잘 입력되어 있는지. settings에 가고, github page를 master페이지로 저장. => 이때 나온 주소가 내가..

RSI 함수로는 React.createRef(); ref로 사용할 수 있음 react의 메모가 있음. 메모라는 함수 안에 function 컴포넌트를 전달해주면. PureComponent처럼 작동한다. reactHook에서 state를 쓴다는 것은 useAPI를 쓰면 된다. 변수를 선언하면서 두가지로 선언해야한다. => useState const [count, setCount] = useState(0); 변수 선언할 때 위로 실제의 스테이트 값과. 함수를 업데이트할 수 있는 setCount를 호출함. useState -> 클래스는 한번만들어지면 딱한번만 만들어지는데. 렌더함수만 반복해서 호출됨 -> 한 번 만들어진 멤버변수는 한번만 할당됨. 근데 function 함수는! 클래스가 아니라 함수라서. 컴포넌트..