반응형

코딩/위코드 코딩학습 51

[위코드] TIL(Today I am Learned) -(40)(리덕스 학습!)

오늘 해야할 일 백엔드와 데이터 연결해서 해당 자료값들 붙여보기. 백엔드 측에서 데이터를 주지 않는다...(서버내 수정하느라 꺼진 듯) 세션으로 올라오는 값들을 죄다 가져오기해야하는데, 일단 붙여보고나... 오늘 수정사항 없음. 일단 버그는 다 수정해서 오늘 진행사항 재택근무로 인한 할일 없음.(이미 프론트측에서 확인할 것들은 죄다 끝나서...) 리덕스 학습함. 오늘의 코드 없음. 오늘 리덕스대한 학습을 시작하려고 한다. 기존에 리덕스를 적용한다는 글이 있었는데, 해당 글에서는 결국 적용하지 못했다. 그 이유가 리덕스를 새로 배워 적용하는데 있어 오랜 시간이 걸려 State값을 결국 세션스토리지로 올려 이 자료값들을 해당 세션에서 컨트롤하는 것으로 해결. 아무튼 시간도 많이 남는데, 그런고로 Redux를..

[위코드] TIL(Today I am Learned) -39(세션 스토리지 사용법)

// 백엔드 버튼 눌렀을시에 보내주는 기능 const SubmitQuery= () =>{ useEffect(() => { const comp = JSON.parse(sessionStorage.getItem("check")) const endDate = JSON.parse(sessionStorage.getItem("endDate")) const startDate = JSON.parse(sessionStorage.getItem("startDate")) fetch('',{ method: "POST", headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ comp, endDate, startDate, check }) }) .then(r..

[위코드] TIL(Today I am Learned) -38(react-scripts 오류)

자택근무로 인해서 노트북으로 작업하다가 노트북 사양의 부족함을 느껴서 기존 작업의 내용을 고사양 데스크탑에서 진행하기로 결심! 기존 자료를 옮기기 위해 github에 노트북에서 진행하던 작업내용(기능구현을 완료한 상태)를 push하고 merge한 상태에서 데스크탑에서 git pull 하고 merge한 상태에서 npm실행! npm install 실행 했더니 뜬금없이 "react-scripts 은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램 또는 배치 파일이 아닙니다." 라는 오류가 출력! 찾아봤더니 원인은 node_modules에 새로운 라이브러리는 추가되었는데, 업데이트가 안되어 그런 것으로 나오더라. npm update 실행 후 npm install 실행 했는데도 안됨... npm install..

[위코드] TIL(Today I am Learned) -37(마우스 이벤트 해결)

아까전에 TIL을 다 쓰고 잠자러가기전에 조금만 더 만져보기로 했는데, 이게 왠걸 바로 해결. 바로 해당값에 직접 접근하려고 했던 것이 문제였다. 달력창을 호출하면서 아무 생각없이 조물딱 거리다가 불현듯 생각이 났는데, 처음에는 달력을 호출해서 나가도 안꺼지는건가 했는데, 마우스를 달력 선택범위 밖으로 꺼내보니 잘 작동하더라. 즉, 마우스 이벤트는 정상적으로 작동되고 있었고, 단지 날짜를 클릭했을 경우 꺼지지 않는 게 문제였다는 것을 인식하였다. 이를 해결하기 위해서 datepicker 안에서는 직접 접근이 어렵기때문에 이를 해결하기 위해서 useEffect를 만져보았다. 이전에 작성한 내용에서 해당 날짜의 변화값을 인지하는 useEffect에서 해당 내용을 추가하였다. //날짜 형식변환기, 마우스 이벤..

[위코드] TIL(Today I am Learned) -36(다운로드 기능 구현(?)-1)

- 오늘해야할 일. 없음. 쉬는날인데 뭘해야하니? 라고 생각했지만, 놀것도 없어서 코딩을 붙잡고 있다. 낮잠도 잤고 말이다 ㅎㅎ 오늘의 노동은 useEffect에서 다운로드 기능을 구현해보았다. 그냥 인터넷에서 찾아보니 a태그로 구현해보라길래 그대로 가져와봤다. 그로인한 문제점. 아직 구현해보지 않았기에 잘 작동할 것인가? 라는 의문. sessionStorage의 저장되어 있는 값들을 가져오는 것을 선언했는데, console창에서 사용되었지만, 선언되기전에 사용되었다는 경고문이 뜨더라.. 이를 어찌해야 해결할 수 있는지 여부와 다운로드 기능이 과연 잘 작동할 것인가? 라는 의문이 생김. const SubmitQuery= () =>{ useEffect(() => { const comp = sessionSt..

[위코드] TIL(Today I am Learned) -35(날짜 포맷 변환)

- 오늘의 할일. 달력 인풋창의 마우스이벤트 발생시 다른 곳을 가도 안꺼지는 오류 수정 달력 반환값을 표현방식을 변환하여 출력하기 보내기 버튼 구현시에 해당 state값을 죄다 보내주기. - 오늘한 일 달력 반환값을 표현방식을 변환하여 출력하기(회원가입, step1 페이지 진행) - 진행예정 및 진행중 달력 input창 이벤트는 input을 만들었더니 클릭했을시에 같이 호출되는 상황이라 클릭해서 호출 되는 부분을 컨트롤하려고 찾는 중. 보내기 버튼은 처음에는 부모로 state값을 보내서 컨트롤하려고 했는데, 너무 힘들기만 하고 잘 불러오지지도 않아서 그냥 sessionstorage로 보내버림. 보내기 버튼 클릭시 다운로드와 해당 자료들을 모두 보내는 작업 진행중. 나의 오늘의 코드! 왜 useEffect..

[위코드] TIL(Today I am Learned) -34(state값 전달하기)

- 오늘의 할일. Crsp라고 Daily stock을 보여주는 페이지가 있는데, 각 하위 컴포넌트에서 해당 값을 끌어와 마지막 step4에 해당 state 값들을 넘겨서 해당 컴포넌트에서 버튼을 누르면 작동하게 하는 것을 구현하고 다운로드를 구현해야하는데, 매우 어렵다... 이것만 구현해도 오늘 하루는 충분히 일했다고 생각된다. 그만큼 어렵다. 그리고 여기에 + submit query를 눌렀을 경우 해당 파일을 다운로드 시켜야하고, 이메일도 있을 경우 해당 이메일로 발송되게 설정해야함. 난이도가 너무 급 상승해서 힘들긴한데, 이걸 해결하면 또 한번 성장할 것으로 생각해서 여러모로 구글링 중. state값을 여러개를 한번에 넘겨줄 수는 없는건가????

[위코드] TIL(Today I am Learned) -33(위코드데이)(휴일)

- 오늘의 할일. 1. 김민준의 리액트를 다루는 기술 완독하기 2. submit 버튼을 눌렀을때 다른 컴포넌트에서 state값으로 저장된 것들 뽑아와서 백엔드에 보내주고, 그 파일을 다운로드 시키는 기능 완성할 것. - 리액트를 다루는 기술을 읽고 있는 이유는 오늘은 위코드데이라고 중간 보고하는 날이라 협업중인 상황과 개인공부하는 날이라고 보면 된다. 지난주는 anser 기능 구현을 위해서 하루를 오로지 사용했지만, 오늘은 기능구현보다 내 개발 능력을 성장시키기위해 쓰는 날이다. 리액트를 쓰고 있지만, 알게모르게 왜 이렇게 작성하는가(?) 하는 의문을 갖고 있었는데, 그런 내용을 해소할 수 있게 해당 책에 많은 내용이 있더라 ㅎㅎㅎ 여태껏 부족했던 개념인 것들에 대해서 지금은 빈틈을 채우고 있다. 2번째..

[위코드] TIL(Today I am Learned) -32(기업협업)(Redux 시작!)

* 아직 리덕스는 학습을 시작한 상태라 적용하지 않았음. - 오늘의 할일. 1. 어제 구현하지 못한 input check 박스 선택에 따라서 필요한 컴포넌트 호출하는 기능 구현. 2. email 주소와 쿼리네임을 선정하여 해당 input 창에 기입하면 해당 값을 입력시키기. 3. 제출하기 버튼클릭시 해당 이메일과 다운로드 기능 구현 - 진행 완료사항. 1. input true : faslse값에 따라 해당 컴포넌트 호출하는 기능으로 구현. 2. email, input 창 기입에 따른 해당값 state값으로 저장구현. - 진행중 사항 - 1. submint 버튼 클릭시 이메일로 발송과 해당 파일을 다운로드 요청하는 기능 구현 중 2. 각자의 컴포넌트마다 해당 state 값이 저장되므로 Redux를 공부하여..

[위코드] TIL(Today I am Learned) -31(기업협업)(DatePicker 완성)

- 오늘의 할일. 코드 리팩토링. 기능 구현 상담 후 수정할 것 있는지 확인 후 merge할 것. -코드 리뷰 3일간 날 괴롭히던 datepicker의 기능을 대부분 구현했다. 기존에 하드 코딩으로 2019를 표시했던 것을 이제 자동으로 시간이 지나도 알아서 작동되게 구현하였고, WRDS처럼 2007년 페이지를 기준으로 했던 것처럼, 내가 만든 부분도 13년으로 설정해서 현재는 2007년 내년에는 2008년 내후년은 2009년으로 자동으로 바뀌게 만들었다. 원래 J쿼리로 만들어진 것이라 구현이 매우 빡셌다. 자료도 대부분 J쿼리 전용이라... 이에 참고한 자료가 HackerOne에서 만든 React-datepicker 자료 https://reactdatepicker.com/ React Datepicker..

728x90