개발하는 너구리

문제점 오늘 리액트 동적라우팅에 대해 공부하면서 path에 상대경로를 설정할 수 있다는 사실을 알았다. 상대경로란 현재 url을 기준으로 하위요소로 적용되는 경로라는 뜻이다 그동안은 라우터의 path를 절대경로로만 사용했었기에 모든 에 full URL을 적어주었는데, 상대경로라는걸 알았으니 길고긴 URL주소를 줄이고 싶은 생각이 들어서 방법을 찾아보았다 시도한것 Nested Router router.js 파일에서 안에 children 를 넣어주고, 내부 children의 경로는 상대경로로 적으면 full URL주소를 적는 효과와 같다는 것을 알았다. 그리고 해당 컴포넌트에 접근해 을 렌더해주면 chilren 컴포넌트로 접근 가능한 라우팅이 렌더해줄수있다. 또 다른 방법은, router.js파일에서 경로 ..

문제점 코인( ex)비트코인) 들에 대한 데이터를 제공해주는 api를 이용해서 각 코인별로 데이터를 보여주는 프로젝트를 진행하고있다. 이번 프로젝트의 스타일링은 styled-components만을 사용해 진행하고있는데, 각각의 요소들의 스타일링을 진행함에 있어 태그가 기본적으로 가지고 있는 수치들때문에 중복적용되는 속성들이 눈에 보일 정도로 많았다 태그들이 기본적으로 가지고 있는 스타일링 수치들을 초기화하는 방법이 있지 않을까? 라는 질문에 방법을 찾았다 시도한점 import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` html, body, div, span, applet, object, ifr..

문제점 JS에서 Date()는 객체라는걸 까맣게 잊고있었다 주로 Date객체를 생성해 그 중 날짜를 표현하는 값만 불러와 String으로 변환해 사용해오던게 습관이 되었던지라, Date()는 객체라는걸 잊고있었다. 문제상황은 폼작성 컴포넌트에서 만든 Date객체의 날짜표시 string값을 다른 컴포넌트의 의 value값으로 전달해주니 날짜가 렌더되지않았다. 시도해본것 Date객체를 만든 폼작성 컴포넌트에서 Date객체 자체를 console.log찍어본것.. 콘솔한번 찍어보고 콘솔창을 확인해본후 머리를 탁 쳤다. Date는 객체였다 객체자체를 다른 컴포넌트의 의 value값으로 전달해주니 내가 원하는대로 날짜가 정확히 렌더되었다 알게된점 Date()는 객체다! 주로 string으로 렌더된다고 객체라는걸 잊..

문제점 오늘은 간단하지만 앞으로 중요할지도 모르는것을 알게되었다 그동안 state관리를 위해 리덕스를 사용하지않았기에, 리덕스를 사용해서 프로젝트를 해본적이 없었다 최근 리덕스에 대한 개념을 익히고, 실제로 프로젝트에 접목시켜보고자 리덕스툴킷을 사용해서 중앙 state관리 체계를 구축했다 유저의 정보를 담는 auth / 게시글에 대한 정보를 담는 board 총 2개의 리듀서를 막상 만들어 놓고 이걸 사용하려하니 응? 하는 생각이 들었다.. 요 며칠 리덕스에 대해 배우며 익히는 과정에서 리듀서를 1개만 사용했기때문이다 리듀서가 여러개인데 이걸 어떻게 사용하지? 기초적인 질문이겠지만 리덕스에 대해 익힌지 얼마안되서 이것을 몰랐다.. 시도한점 역시나 구글링을 진행해보았다. 여러개의 리듀서를 사용하려면 아래와 ..

문제점 지난 25일에 겪었던 useEffect 내 api get 무한루프요청... 유저 인증 확인을 하기위해 백엔드 서버에 get요청을 해야했고, reponse를 받아 해당 유저가 유효한지의 여부를 알수있는데 이 api요청을 어떻게 줘야하는지가 고민이었다 모든 컴포넌트에서 행동하는 유저의 유효성을 검사하기위해 트리 상 상단에 위치한 app.js에서 유저 유효성 검사 로직을 useEffect내 작성했다. 역시나.. 무한 get요청 루프가 돌았다... 저번에는 setTimeout()으로 억지로 get요청 횟수를 줄였을뿐이라 그 방법으로는 도저히 안되겠다 싶었다. 지금 내가 정말로 필요했던건! 데이터가 유효한지 주기적으로 불러올것 , 데이터에 변경점이 있는 경우에만 리렌더링을 유발할것 , 데이터를 다시 호출할..

문제점 state 변경에 따라 동기적으로 화면에 렌더해줘야하는 상황 useEffect 안에 axios get요청 함수를 넣고, 디펜던시에 해당 데이터변수를 넣어 계속 추적하도록 작성했다. 물론 작동은 잘되었는데, 브라우저 개발자도구의 콘솔창은 불이 나고있었다.. 무한 get요청 루프....무한루프 state 변경을 감시하기위해 디펜던시에 state변수를 넣어야했는데, 이걸 넣기만하면 무한루프가 돌았다 useEffect 내부에 들어있는 useState 모디파이어 함수가 state를 변경하고 state가 변경되니 그걸 useEffect가 감지하고 다시 함수가 실행되고, 이렇게 계속 무한루프가 도는 현상이었다 시도한점 현재로선 내가 찾은 방법은 setTimeout()과 useEffect의 클린업함수에 clea..

문제점 어떤 컴포넌트에서 다른 컴포넌트 내부에 있는 HTML엘리먼트에 직접 접근해야하는 방법이 필요했다. Form컴포넌트 내부에 재사용을 위해 따로 만들어논 Input컴포넌트가 들어가 있고, Form컴포넌트에서 Input컴포넌트 내부 의 value값을 가져와야하는 문제.. 이런 상황을 그동안 겪어본적이 없었는지 너무나 당연스럽게 Form컴포넌트에서 useRef훅을 사용해 Input컴포넌트에 useRef좌표를 ref프로퍼티로 넘겨줬다. 그 다음 Input컴포넌트에서 props.ref를 받아쓰려고하니,,,, 'ref' is not a prop 시도해본것 리액트에서 ref prop은 HTML 엘리먼트에 직접 접근하기 위해 사용된다는 정의.. 즉 input HTML 엘리먼트의 prop으로서 ref를 바로 줘야한..

문제점 email과 password의 input값을 받고, input value의 유효성 검사까지 동시에 할수있는 로그인 모달창을 만들어 보았다. 내가 생각한 유효성 검사는 email에는 '@'가 들어가야한다 , password는 최소 7글자 이상이어야 한다는 2가지의 요구사항이다. useEffect() 훅을 사용해 email input의 value와 password input의 value를 디펜던시에 넣어 변화를 감시하게 했고, 훅 내부에 유효성 검사를 진행하는 함수를 작성해넣었다. 그리고 내부에 언제 유효성검사가 진행되는지 확인하기 위해 콘솔로그를 찍어보았다 근데..input에 한글자 한글자 넣을때마다 매번 유효성 검사를 진행한다는 것을 콘솔을 통해 확인했다. 이건 내가 원했던 바가 아니었다. 그렇게..