728x90 [꿀팁] 클론코딩 공부방법 출처: 유튜브 채널 지혜키우기 _ '4000번 고쳐야 만드는 웹페이지~'영상 고정댓글 2022. 2. 7. [노드/리액트 기초] #23~25. Proxy Server, Concurrently, CSS Framework **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Proxy Server 유저와 인터넷이 있을 때, 유저가 무언가를 전송하면 proxy server에서 IP나 data를 임의로 바꿀 수도 있고(보안), 캐쉬를 이용해서 어떤 사이트의 static한 image 등을 저장해뒀다가 보려고 할때 굳이 인터넷까지 가지 않고 빠르게 볼 수 있도록 할 수 있고, 특정 사이트에 못 들어가도록 막을 수도 있다. 그 외에도 여러 가지 기능이 있다. Concurrently 서버를 킬 때, 백엔드/프론트엔드 서버를 각각 일일이 켜야 했다. (npm run backend / npm run start) concurrently를 이용하면 둘 다 한 번에 켤 수 있다. packag.. 2022. 2. 6. [노드/리액트 기초] #21~22. 데이터 Flow & Axios, CORS 이슈 & Proxy 설정 **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Data Flow 어떤 유저가 로그인을 하고 싶으면 client에서 사용자의 이름과 비밀번호를 넣고 로그인 버튼을 누른다. 그러면 그 요청이 server로 간다. server에서는 DB에 유저 아이디가 있는지 찾고, 있으면 비밀번호가 그 유저 아이디의 비밀번호와 일치하는지 체크한다. 만약 일치한다면 성공했다는 response를 전송한다. 비밀번호가 틀렸거나 유저 자체가 DB에 없다면 그런 사항에 대해 response를 전송한다. 지금까지는 client(React)부분이 없어서 postman을 사용했었는데, 이제 client부분을 만들었으니 거기서 직접 요청을 보낼 수 있다. 요청을 보낼 때 AXIOS라.. 2022. 2. 6. [노드/리액트 기초] #18~20. CRA 구조, Boilerplate, React Router Dom **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Create React App 구조 webpack 은 src 폴더는 관리해주는데 public 폴더는 관리하지 않는다. 따라서 앱에 이미지 파일을 넣고 싶으면 src 안에 넣어야 webpack이 모아주는 역할을 할 수 있다. CRA to Our Boilerplate HOC component들을 갖는 function이다. Auth라는 HOC가 있다고 해보자. (Auth = 어떤 사람이 자격이 있는지 없는지 체크하는 것) admin component에 관리자만이 들어갈수있고 일반인은 못 들어가면 auth에서 이사람이 관리자인지 아닌지를 체크해서 들어올 수 있게 / 들어오지 못하게 하는 역할을 해준다. 로그인.. 2022. 2. 5. [노드/리액트 기초] #15~17. React JS, Create-React-App, NPM vs NPX **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** 리액트 프레임워크가 아니라 라이브러리이다. (참고: https://canoe726.tistory.com/23) 컴포넌트(element)로 이뤄져서 재사용성이 뛰어나다. 묘듈화한 파일을 여러 곳에서 사용할 수 있다. 리액트는 virtual DOM을 만들어서 관리하기 때문에 훨씬 빠르게 한 부분만을 변경할 수 있다. (참고: https://velog.io/@gwak2837/React-Virtual-DOM-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0) Create-React-App 원래는 Babel, Webpack 등을 설정해줘야 하지만 이제는 create-react-app으로 리액트 .. 2022. 2. 5. [노드/리액트 기초] #13~14. Auth 기능, 로그아웃 기능 만들기 **본 포스팅은 유튜브&인프런 John Ahn님의 노드 리액트 기초 강의를 참고하여 작성하였습니다.** Authentication 우리가 어떤 사이트에 들어가면 그 사이트에 여러 가지 페이지들이 있는데, 어떤 페이지는 로그인된 유저만 이용할 수 있고 다른 페이지는 로그인하지 않아도 누구나 이용할 수 있기도 한다. 글을 작성할 때도 로그인된 유저만 작성가능 할 때도 있고 관리자만 이용할 수 있는 기능도 있다. 이러한 것들을 하나하나 체크하기 위해서 auth기능이 필요하다. client입장에서는 토큰을 쿠키에 넣어주고, server입장에서는 user DB에 넣어준다. 이 두가지 토큰이 일치하는지 계속해서 체크해주면 된다. 클라이언트에 담겨있는 쿠키를 서버에 전달하면 서버에서 그 토큰을 secret strin.. 2022. 2. 5. 이전 1 2 3 4 5 6 7 다음 728x90
