전체 글
-
[React] 같은 계층의 중첩 라우터끼리 페이지 이동Web/Front-End 2021. 3. 11. 17:47
App.jsx 에 Arouter와 Brouter를 정의한 후 Arouter에 A_AComponent와 A_BComponent 를 정의한다. Brouter에는 B_AComponent와 B_BComponent를 정의해준다. 이렇게하면 A_A => A_B 또는 B_A => B_B 로 useHistory나 Link태그를 통해 자유로운 이동이 가능해지는데 만약 A_A => B_A 로 이동은 가능할까? 기본적으로 url path는 변하지만 사용자가 직접 새로고침을 하지 않으면 렌더링이 되지않는 문제가 있다. 이유는 중첩 라우팅의 구조로 인해 A/A_A 에서 URL을 던지면 A/ 에서 찾게되는데 A/에는 B_로 시작하는 라우트가 없기때문에 렌더링이 되지 않는다. 그럼 어떤 방법이 있을까? 나는 페이지 이동을 성공 시..
-
[React ]추천 검색어 구현Web/Front-End 2021. 3. 11. 17:33
위와 같은 추천 검색어 기능을 라이브러리 없이 리액트만으로 구현을 해보고 싶었다. 항상 무슨 코드를 짤때 배우는 입장이라 라이브러리를 최대한 배제하고 순수코드만으로 짜고싶어 리액트로 짜보기로했다. 검색어들은 json파일로 더미데이터를 생성해놨고, 해당 리스트들을 axios 호출을 통해 불러온다. axios.all([DeviceData.getLastDeviceList(), DeviceData.getLiveDeviceList()]) .then(axios.spread((lastRes, liveRes) => { for (let i = 0; i < lastRes.data.device.length; i++) { if (lastRes.data.device[i].name.includes(searchValue)) { s..
-
[ES6 ]Axios 모듈화Web/Front-End 2021. 3. 11. 17:19
리액트 관련 문서로 정의하려했는데, 생각해보니 리액트 문법이 단하나도 들어가지않아 ES6를 말머리에 달았다. import axios from 'axios' const instance = axios.create({ baseURL: process.env.PUBLIC_URL, timeout: 1000 }) 해당 방식으로 파일을 새로 만들어준다. 나는 CommonAxios.jsx 로 작성하였다. 공통적으로 요청전이나 요청 에러 처리를 해야 할게 있다면 instance.interceptors.request.use( function (config) { // 요청 바로 직전 // axios 설정값에 대해 작성합니다. return config }, function (error) { // 요청 에러 처리를 작성합니다. ..
-
[React] Modal 모듈화및 PortalWeb/Front-End 2021. 3. 11. 16:40
사이트를 개발 하다보니 팝업및 모달창을 뜨게 해야할 일이 꽤 여러곳에 있었다. 해당 모달들은 유니크한 폼을 가진 것도 있지만 대부분 버튼 하나 두개로 이루어진 베이직한 모달들이였는데 이런 모달들을 사용할때 매번 새로운 모달을 생성하기보단 특정 값들만 넘겨주어 기본 폼에서 벗어나지않게 공통 모듈로 빼보려고 했다. 공통 모듈로 빼보려고 하니 모달 자체는 언제 어디서나 떠야 하는 성질을 가지고있기에 Portal도 사용하도록 했다. 먼저 public/index.html에 모달이 뜰 영역을 정의해준다. 나는 해당 모달 영역을 이용할 ModalPortal.js 파일을 생성하였다. const ModalPortal = ({ children }) => { const el = document.getElementById('..
-
[React] react-activation 과 주기적 Api 호출Web/Front-End 2021. 3. 11. 16:14
컴포넌트가 변해도 데이터를 유지해야 할 상황이 생겼다. vue에서는 내부적으로 KeepAlive가 존재했는데 react는 존재하지않아 react-activation 이라는 라이브러리를 받아 사용하기로 하였다. import KeepAlive from 'react-activation' const DeviceListComponent = (props) => { if (state === 'live') { return } else if (state === 'last') { return } } 위와같이 사용하여 AComponent와 BComponent 안에 데이터들은 유지시킬수 있게되었다. KeepAlive를 사용하게 되면 해당 클래스들로 내부 컴포넌트가 감싸지게 되는데, 빈 영역이라 하지만 퍼블리싱 받은 파일에서 ..
-
[React] Custom Hook 으로 전역 State 관리Web/Front-End 2021. 3. 11. 15:29
뭔가의 리스트에서 클릭 한 아이템의 정보를 다른 컴포넌트에 뿌려주고 싶었다. 기존의 방식은 단순하지만 아주 무식하게 짰었는데 (뿌려줄 컴포넌트) (컴포넌트)props.setState-> (컴포넌트)props.setState-> (컴포넌트)props.setState(item 선택 컴포넌트) 이와 같이 아주 무식하게 props로 하나하나 넘겨줬다. React를 쓰다보면 여러 컴포넌트에서 한 데이터를 공유하고싶은 상황이 아주 많이 존재하는데 문득 저렇게 구현을 하고 오늘 코드를 혼자 리뷰해보니 리액트답게 짠 코드지만 너무 마음에 들지 않았다. 그렇다고 useContext를 사용하기는 싫었고, 훅을 새로 만들어 setter함수를 구현해 store 기능을 하는 훅을 만들어 보기로 했다. import { useSt..
-
Case Naming Convention (케이스 네이밍 컨벤션)etc . 2020. 1. 8. 23:57
Case Naming Convention 케이스 네이밍 컨벤션으로 공식적인 한글단어는 없는 것 같다. 나는 적당히 식별자 이름 표기법 정도로 부르기로 했다. 코딩 입문을 땠다면 변수명앞은 소문자로 한다던지 띄어쓰기는 '_' 이걸로 처리 한다던지 변수 이름을 정해줄때 어떠한 규칙이 있다는걸 어렴풋이 알고는 있었을거다. 본 글에서는 그 "어떠한 규칙"이 무엇인지 열심히 설명을 해주도록 할 것이다. 사실은 그러한 규칙이 단연 식별자 이름에만 적용된것은 아니다. 언어별로 그런 규칙들이 은연중에 정해져있고, 그것을 권장하고 있다. (하지만 파이썬 같이 들여쓰기 자체가 문법인 언어에서는 또 강제하고 있기도 하다.) 예를 들어 코딩 스타일중 들여쓰기를 쓰냐, 스페이스 바를 쓰냐 이런 점도 개개인마다 갈리는데 '스칼라..
-
[Greedy] 그리디 알고리즘알고리즘/이론 2020. 1. 3. 00:33
그리디 알고리즘을 설명하기전에 우리는 동적 계획법을 숙지할 필요가 있습니다. 먼저 동적 계획법이란 A라는 연산을 여러번 반복을 해야하는 문제가 있다면 A의 답을 미리 계산해놓고 후에 A 연산이 또 다시 등장할때 미리 계산해놨던 A의 답을 다시 쓰는 것을 말합니다. 너무 설명이 난해하죠? 간단한 예시를 들어보겠습니다. ''' 아래는 흔히들 알고계시는 피보나치 수열입니다. F0 = 0F1 = 1F2 = 1F3 = 2F4 = 3F5 = 5F6 = 8... 뜬금없이 피보나치 수열이 왜 등장할까요? 우리가 동적 계획법을 사용하지않고 피보나치 수열을 구하는 함수를 작성한다고 생각해봅시다. F0 = 0 , F1 = 1 로 초기화를 시키고F(int n) 이라는 함수를 선언하고 F(int n){ if (n == 0 ||..