공부하는 김쨔뿌

토요일은 멘토링날.. 프론트가 들은 피드백 1. 클라이언트의 위치를 가져오는데에 시간이 꽤 걸림 => 로딩 스피너 만들어주기 2. 활발한 소통을 해야한다. 디자이너와의 의견충돌이 있다면 해결될때까지 회의를 하고, 특히 서로 양보할 수 없는 부분에 대해 이야기를 하는 편이 좋다. 그래서 오늘은 클라이언트의 위치 가져올때 간단한 로딩 스피너를 만들었다. useState로 불리언값을 저장하는 is_loading을 만들어주고 {is_loading? : null} 을 넣어준다. 값을 가져오는 기능을 실행하는 버튼을 눌렀을때, 버튼을 누른다 -> is_loading을 true로 바꿔준다 -> 값을 가져온다 -> is_loading 을 false로 바꿔준다. 이 형식으로 작업하면 되..는데! 이상하게 버튼을 누르면 ..

메인 지도페이지 스타일 작업을 끝내고.. 드디어 서버연결! cors 에러가떠서 보았더니 1차적으로 프론트단에서 proxy가 카카오맵을 쓰면서 변경한걸로 되어있어서 localhost:3000으로 변경해주고 2차적으로 백엔드단에서 처리하시니.. 드디어 서버연결! 이제 기능작업을 할 시간이다. 회원가입부분은 예외처리말고 서버연결 확인을 위해 데이터가 넘어가는것과 response가 넘어오는것까지 확인하고 로그인 부분도 회원가입한 계정을 입력했을때 토큰이 잘 넘어오는지 확인했다. 다른 페이지들은 아직 제대로 확인하기 전! 내일부터 할 것은 회의때 노트 한페이지를 채워서..필기했으니..차근차근 작업하면 된다. 20000.

제목 쓸때마다 이전게 몇번이었는지 까먹어서 그냥 바꾸기.. 저저번주부터 TIL을 쓸 정신이 없어서 WIL만 적고 넘겼었다. 오늘부터라도..! 오늘은 실전프로젝트에서 main 의 기본 뷰 스타일을 잡고 별자리 페이지에서 마우스 hover, active 이벤트까지 잡아놓았다. 그리고 백엔드분들이나 디자이너분들이 빨리 확인할 수 있도록 내 개인 s3를 팠다. http://startprojecttest.s3-website.ap-northeast-2.amazonaws.com/ React App startprojecttest.s3-website.ap-northeast-2.amazonaws.com 사실 내가 맡은 부분은 거의.. 데이터 받아온걸 뿌리는게 대부분인지라, 서버쪽 연결이 끝나면 빨리 끝낼듯.. 내일 할것 ..

오늘의 공부 충격적이다. .map으로 리스트를 돌렸을때..return에 button 태그를 준 뒤 onClick으로 클릭이벤트를 넣었을 때, .map에서 뽑아낸 오브젝트 내용물을 onClick={} < 이 중괄호 안에서도 사용이 가능하다는..것을... 오늘 알았다. ㅋㅋㅋㅋㅋㅋㅋㅋ 하.. 우리 팀은 jwt토큰을 서버에서 만지고 클라이언트에서는 못만지게 해놓았었는데 이게 https를 설정 안해서 생기는 문제인지 원래 그런건진 몰라도 서버에서 jwt토큰을 클라이언트에게 줄 수 없다고..! 그래서 노드분이 알아오신것 : jwt를 리액트에서 axios로 get요청을 보내 얻은 뒤 리액트에서 그걸 setCookie로 감싸서 넣는다! 혹은 https를 설정해보는..것..!! 내일 시도 예정. 오늘의 작업 로그인/회..

오늘의 공부 axios 기본 사용 방법 // lib/axios.js import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:4000/', headers: { 'content-type': 'application/json;charset=UTF-8', accept: 'application/json', }, }); export const apis = { getTest: () => instance.get('/posts'), addTest: (list) => instance.post('/posts',list), }; import React from 'react'; import { apis } from './lib/ax..

오늘의 공부 배열에서 하나 삭제할때 .splice(삭제할 요소의 index, 1) 여기에서 1은 index에서부터 몇번째까지 삭제할지의 설정이며 index값에 맞는 요소는 1번째로 계산된다. 오늘의 작업 리액트 캘린더 개선 - 상세 창에서 일정 하나 삭제시 하위 일정들이 사라지는 문제 해결 - 일정 추가창에서 일시/내용 중 하나라도 입력값이 없을경우 alert 창이 뜨고 dispatch 되지 않음! - 완료된 일정만 보기/진행중인 일정만 보기 버튼 눌러서 토글 const list = useSelector(state => state.schedule.list); let onlyIngList = list.filter((event)=>event.done ===false); let onlyDoneList = li..

어..? 마지막 TIL이 2일이었다구..?? ㅋㅋ ;; 앞선 공백동안.. 리액트 심화 강의를 4주차까지 듣고 7일-8일 이틀간 거의 밤 새서 캘린더 만들기 과제를 했다. 강의가 양이 너무 많아 오늘은 끝내야지! 를 며칠동안 연속으로 외치며 늦게 잤더니.. 기운이 없다. 오늘의 공부 fullcalendar 라이브러리를 이용하는 아주 기본적인 방법을 알았다. 리덕스, 미듈웨어, 파이어스토어 사용법에 대해 다시 한번 복습했다. (몇번이나 했지만 여전히 이해도가 부족하다는 느김을 받는다.) 오늘의 작업 리액트 프로젝트에서 fullcalendar라이브러리를 이용해 캘린더를 만들었다. 제출은 했지만 미흡한 부분 투성이라 오늘이 지나도 이것저것 개선해볼 예정. 디자인 구성.. https://www.figma.com/..

어제+오늘의 공부 어제 자다가 밤에 깨서 공부하다가 새벽을 보내버려서 TIL을 못썼기에..합치기. 리액트 심화반 강의 2-13 까지 개념정리 https://jjyabbu.tistory.com/37 스파르타 코딩클럽 React 리액트 심화반 2주차 정리 -Promise, OAuth2.0, JWT, 웹 저장소 자바스크립트는 싱글쓰레드로 동작하는 언어 > 일꾼이 하나라 작업을 하나씩 수행함. 단, 실행환경의 도움을 받기에 비동기적인 동시실행이 가능함. 비동기 작업시 > 콜스텍에 setTimeout 같은게 jjyabbu.tistory.com 미들웨어에 대한건 기초반때 배웠지만 전부 까먹었기에.. 따로 검색해서 찾아보았다. 미들웨어가 없을때는 모듈에서 액션을 명령하면 바로 리듀서가 행동을 옮겼지만 미들웨어는 액션..

오늘의 공부 자바스크립트 https://jjyabbu.tistory.com/34 스파르타 코딩클럽 React 리액트 심화반 1주차 정리 - Javascript 이 글에서 사용하는 모든 A, B, C..a,b,c...는 원하는 값을 넣어서 사용할 수 있다. 정해진 것이 아님. Javascript 변수/상수 변수 (let) : 변하는 값 = 재할당이 가능한 값 상수 (const) : 변하지 않는 값 = 재 jjyabbu.tistory.com React.Fargment = 리액트 컴포넌트에서 return 할때 별도의 태그를 생성하지 않고 다른 태그들을 하나로 묶어줄때 사용한다. 컴포넌트 폴더 분리 shared = 전체적으로 공유하는 컴포넌트 pages = App.js 에 Route 할 컴포넌트 모음, 중간다리..

오늘의 공부 styled-component 로 keyframe animation 구현하는 법 Firebase의 이용방법 Firebase를 통해 리액트 웹사이트를 배포하는 법 정리 링크 https://jjyabbu.tistory.com/32 스파르타 코딩클럽 React 리액트 기초반 4주차 정리 - Keyframes, Firebase 설정부터 연동, 컬랙션 가져 Keyframes animation에서 사용하는 속성 중 하나, css 에서 사용하며 styled-component를 통해 js파일에서도 사용 가능하다. CSS 에서의 사용예시 더보기 @keyframes 키프레임이름 { 0%{초기 형태} 50%{변화 중간.. jjyabbu.tistory.com 오늘의 작업 [과제] 기능 추가, 수정 및 디자인 개선..