도영스 공간

🧸 이번 5주차 WIL 키워드 ! ☑️ Axios 🧸 axios는 HTTP 비동기 통신 라이브러리이다. (Axios docs) 🧸 특징 브라우저에서 XMLHttpRequests 만들기 node.js에서 http 요청 만들기 Promise API 지원 요청 및 응답 가로채기 요청 및 응답 데이터 변환 취소 요청 JSON 데이터에 대한 자동 변환 XSRF 로부터 보호하기 위한 클라이언트 측 지원 설치 Using npm: $ npm install axios Using bower: $ bower install axios Using yarn: $ yarn add axios Using jsDelivr CDN: Using unpkg CDN: axios 자세한 사용법 음 사용법을 봐도 잘 모르겠다. 실제로 내가 써보고..

📔 오늘 할 일 📔 1. 레이아웃 완성 2. 로그인 회원가입 리덕스 모듈 만들기 🤔 해결한 문제 🤔 딱히..레이아웃을 잡는데에는 문제를 겪은게 없다.. 아마도 데이터를 주고 받으면서 에러가 뜨지 않을까 ㅎㅎ 😊 주절주저리 😊 드디어 레이아웃을 완성했다. 하하ㅠㅠ 힘들었다...컴포넌트는 그냥 내 마음대로 쪼개버렸당~! 이제 로그인 회원가입은 백엔드 분들한테 데이터 받는 것만 하면 끝날 듯 하다!!! 오예에.. 댓글 작성,,삭제 수정이 문제일거같지만. 잘 할 수 있겠지!? ㅠㅠ너무 오래 공부하니까 머리가 아파왔다.. 무릎도 아프구... 📚부족한 부분📚 axios쓰는 방법.. 아예감이 안온다.. 어떻게 데이터가 들어오는지 모르겠지만..!!!! 받아보면 알 수 있을것도 같다. ㅎㅎ ✅ 월요일 할 일 ✅ 1. 백..

📔 오늘 할 일 📔 1. 와이어프레임 만들기 2. API 설계 📖 오늘 배운 개념 📖 🤩 요청을 보낼 땐? 미리 약속한 주소로 (url) 어떤 요청을 보낸다. (type) 필요하다면 서버가 일하기 위해 필요한 자료와 (data) 누가 요청했는 지 알려주면 된다. 🤩 Axios axios는 HTTP 비동기 통신 라이브러리이다. (Axios docs) yarn add axios export const authApi = { // e.g) 회원 가입 signup: someData => instance.post("api/user", { someData: someData, someOtherData: someOtherData }), // e.g) 유저 프로필 변경 editUserProfile: (someData) =..

📔 오늘 할 일 📔 1. 다시 복습 (게시글 가져오는 부분이랑 나머지들 ...) 2. 모던 자바스크립트 읽고 포스팅하기 3. 알고리즘 문제 풀기 4. code책 읽기 📖 오늘 배운 개념 📖 강의는 파이어베이스 8버전으로 알려주지만, 난 파이어베이스 9버전으로 해보겠다!! 우선 업로드 컴포넌트를 만들어준다. 🧸 Upload.js 더보기 import React from "react"; const Upload = (props) => { const selectFile =(e)=>{ console.log(e, "나는 e") console.log(e.target, "나는 e.target") console.log(e.target.files, "나는 e.target.files") } return ( ) } export..

📔 오늘 할 일 📔 1. 강의 다듣기 2. 알고리즘 문제 풀기 3. 다시 처음부터 복습하기 4. 모던 자바스크립트 책 읽기 5. 과제 배포 📖 오늘 배운 개념 📖 SEO(Search Engin Optimization: 검색엔진최적화) 네이버나 구글같은 검색 엔진에 뭔가를 검색했을 때, 내가 만든 사이트가 검색 결과에 더 잘 보이게 하기 위한 과정 👉 검색을 하면, 검색 엔진이 내 사이트 내용물(메타 태그, html 내용 ...)을 한 번 훑어가고(크롤링), 내용물에 특정한 인덱스 같은 걸 만듦. 그리고 이 인덱스 같은걸 검색 결과에 보여줌. 검색 엔진 최적화는 검색 엔진이 내 사이트를 크롤링할 때 정보를 더 잘 가져갈 수 있도록 도와주는 과정 React에서 검색엔진 최적화를 하려면? meta-data 넣..

1. 4주차 강의 다 듣기 난이도 급상승으로 .. 강의내용을 그대로 따라해도 막 오류나고 그런다.ㅠㅠ 흑흑 무한 스크롤 만들 준비 post.js 덕스구조에 아래 내용을 추가해준다. //액션타입 const LOADING ="LOADING"; //액션 생성 const setPost =createAction(SET_POST,(post_list, paging)=>({post_list,paging})); const loading =createAction(LOADING,(is_loading)=>({is_loading})); //초기값 const initialState ={ list: [], paging: {start: null, next: null, size: 3}, is_loading: false, }; //리듀..

1. 3주차 4주차 강의듣기 어우 어제 드라마보다 늦게잤더니 9시에 일어나서 지각이당. 😞 지각 하고 싶지 않았는데.. 몸이 말을 듣지 않네 ㅠㅠ export const emailCheck =(email) =>{ let _reg= /^[0-9a-zA-Z]([-_.0-9a-zA-Z])*@[0-9a-zA-Z]([-_.0-9a-zA-z])*.([a-zA-Z])*/; //이메일 정규식 표현 return _reg.test(email); }; 👉 이메일 정규식 표현 일단 포스트 목록은 뷰에 전부 다 그려놨다.ㅠㅠ 컴포넌트 쪼개기 넘 어려워ㅠㅠ 일단 강의 듣는데에 바빠서 정리를 못했는데ㅠㅠ... 갑자기 난이도가 너무 어려워졌다. 포기하고싶은마음이 굴뚝같지만, 포기하지 않을거다 ㅠ.ㅠ 할 수 있다는 마음으로...해야지..

이번 4주차 WIL 키워드 ! 👉라이프사이클(클래스형 vs 함수형) 👉 react hooks 1. 라이프사이클(클래스형 vs 함수형) 리액트는 클래스형과 함수형으로 컴포넌트를 생성할 수 있는데, 주로 함수형 컴포넌트가 많이 사용된다. 이제 클래스형은 사용하지 않는다고 리액트에서 공식 발표를 했다고 한다. 함수형 컴포넌트의 가장 큰 장점으로는 간단하게 함축적인 프로그래밍이 가능하다는 것 클래스형 라이프사이클 render() 메소드와 Component 상속 필수 state, props 사용이 불편하고, 많은 메모리 사용한다는 단점이 있다. 함수형 라이프사이클 간편한 컴포넌트 선언 및 프로그래밍 가능 React Hook을 사용 state와 생명주기(Life Cycle) 메소드를 별도로 구현해야 함 => use..