kasumil의 코딩 공작소

useCallback, useMemo 둘다 사용방식은 동일합니다. const onInsert = useCallback(() => { const nextList = list.concat(parseInt(number)); setList(nextList); setNumber(“); }, [number, list]) useEffect의 의존성 배열 마냥 [] 대괄호 안에 있는 것이 변화가 있을때 작동하게 만듭니다. 둘다 성능의 최적화에 사용되는 함수인데, useMemo 함수내부의 연산을 주로 최적화 하는데, 사용된다. useCallback은 이벤트 함수를 필요할때만 만들게 만듭니다. 'useCallback의 첫 번째 파라미터에는 생성하고 싶은 함수를 넣고, 두 번째 파라미터에는 배열을 넣으면 됩니다. 이 배열에..

잠깐 서버구축으로 node로 외도한 건 비밀. 다시 돌아왔습니다. 테슬라 클론을 진행 중 입니다. 현재 스크롤이벤트에 발목이 잡혔는데요. {data && data.car.map((el, i)=> { return ( ) }) } 그 이유는 리액트에서 DOM에 직접 접근하기를 권하지 않고 있습니다. useRef란 것을 사용해야하는데, 해당 것을 사용하기가 어렵다는 것이죠. 자료가 별로 없습니다. 기껏해야 해당 위치로 버튼과 연동하는 방식? 하지만 직접 접근이 가능하니 그것으로 접근해도 됩니다. document.addEventListener('scroll', function() { var currentScrollValue = document.documentElement.scrollTop; console.log..

테슬라 클론을 진행중이다. svg의 색상반전을 하고 싶으면 filter : invert(1); 먹이면 된다. 하지만, svg에서 호출에서 막혀버렸다. 무슨 오류인지 svg라서 해당 이미지가 불러와지지 않는다. img를 불러내서 색상반전을 먹이면 되는데, 왜 안되는건가 싶어서 찾아보니 svg는 컴포넌트로 바꾸어서 호출해야한다고 한다. 이거 편리해지라고 만든거 같은데, 어째 더 불편하다;;; 그리고 로그인 버튼은 왜 문제가 생긴건가? 해결했다. 백그라운드 이미지로 설정했을때, 이상한 테두리가 생기는데 img태그로 사용시에는 그냥 테두리 없이 잘나온다. 이유는 모르겠다...?????!!! 오른쪽 테슬라 계정 부분은 position에 이상한 -40이 있길래 뭐지 싶어서 찾다보니 css부분에 margin-bott..

- 오늘 학습한 내용. navigation, push 의 차이점. navigation은 특정 페이지로만 이동하고, 뒤로가기(스택)이 쌓이지 않는다. push는 특정페이지로 이동하는 것은 동일하나, 뒤로가기로 페이지가 쌓인다. - 오늘의 코드 내용. navigation.push('Home')} /> navigation.navigate('Main')} /> - 소감 사용하는 방식이 요구될때마다 해당 기능에 맞춰서 사용되어야한다. 하지만, 보통은 뒤로가기를 쓰기위해서 push만 주로 사용될 것 같은데, navigation은 언제 사용되는 것일까? * 답변 * push는 스택을 쌓으므로 뒤로가기를 하면 되지만, navigation은 이미 해당 컴포넌트가 있으면 바로 그 자리로 돌아간다.(즉, 홈버튼 같이 누르면..

- 오늘 해야할 일 테슬라 클론 진행 - 오늘 수정사항 - 오늘 진행사항 백엔드에서 크롤링 작업 시도. - 오늘의 코드 실패. 위코드를 졸업하고 근 1주일만에 글을 쓰는 것 같다. 그런데, 개인적으로 공부를 하고 있는데 공부의 내용보다 클론을 진행하면서 내용을 구성하는 게 나을 것 같다고 생각하여 클론을 진행했으나 백엔드 데이터가 없어 해당 사이트를 구현하는데 있어 막혀버렸다. 그래서 그냥 내가 크롤링해서 가져오자라는 생각에 파이썬 학습 중. 파이썬의 기초는 알고 있는데, 장고와 같은 중급 기술은 잘 모르겠다. 아무튼 내가 원하는 바는 그냥 크롤링이 되느냐 여부. 인터넷 보면서 여차저차 진행해서 크롤링을 시도했으나 실패. 아마도 requests로 요청하는 것을 서버측에서 막은거 같은데, 인터넷 블로그를 ..

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

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

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

오늘의 수정사항. - ip주소를 모아둔 config.js에서 행으로 구분을 위해서 뛰어달라고 요청 받음. (내가보기엔 가독성이 더 떨어지는 것 같다만;;; 뭐 요청에 따라 수정함.) - 코드 리팩토링을 통해서 1100줄이 넘던 코드를 600줄(하드코딩 자료를 목업자료인 json으로 넘겨서)로 줄였고, 컬러만 빼고 중복되던 styled 컴포넌트를 컬러만 따로 먹이게 진행함. - 동일한 스타일을 먹이던 것을 props를 통해서 따로 특정색상을 먹일 수 있도록하여, 코드의 중복을 줄였음. - 기존 프로젝트에서는 Route에서 nav와 footer를 기본으로 두고, 이를 해당 페이지만 교체하였는데, 해당 페이지에서 같이 호출하는 걸로 해달라하여 그렇게 수정하였음. - 코드 삭제하기전에 코드가 남아있는 코드 68..

- 오늘의 과제 * 실제 data.json 받아서 연결해보기 * filternav 호출해서 연결하기 오늘의 실습. 해당 컴포넌트에서 Productlist를 호출하려고 하는데, 렌더 오류가 나왔다. import React, { Component } from "react"; import Nav from "../../Components/Nav/Nav"; import Productfilternav from "../../Components/Productfilternav"; import Mapcomponent from "./Component/Mapcomponent"; import Footer from "../../Components/Footer/Footer"; import "./Maplist.scss"; class..