728x90 전체 글95 11.21.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-2 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 리덕스를 사용할 땐 단 한개의 스토어만 만들어서 사용해야 한다 리덕스는 스토어에 original state를 갖고, 각 컴포넌트가 해당 state를 참조한다. 만약 state를 참조를 분리시켜야 할 경우, 여러개의 스토어를 사용하는 것은 가능 하지만 비권장 된다. 이유가 궁금하여 공식 문서를 찾아보니, 나와 비슷한 궁금증을 가진 사람이 많았는지 따로 FAQ로 질문 답변이 되어 있었다. 본래 Flux 패턴에선 리액트 앱을 구현 할 때 하나의 스토어만 가지도록 의도되어 있다. 이를 통해 Redux 개발자도구를 활용하면 특히 대규모 서비스일수록 디버깅이 쉬워지는 장점이 있다. 만약 스토어가 여러개이면, 여러개의 스토어가 동시에 업데이트 되는 것이 아닌 내부 동작구조에 따라 순차.. 2022. 11. 21. 11.18.22{코딩일기} 라인 X Yahoo! Japan 'Tech-Verse 2022' 콘퍼런스 둘째날 후기 둘째날 세션 간략 후기 라인은 매번 콘텐츠 변경을 위해 View,로그인, 권한관리를 수정하는 번거로운 작업을 덜어내고자 Headless CMS를 적용하게 되어 프론트엔드 개발자가 서버 없이 사이트를 운영할 수 있는 방법을 도입해 프로젝트 출시 기간을 현저히 단축시킨 케이스를 소개했다. 뿐만아니라 Headless CMS도입해 트랜잭션을 4400% 개선한 점에서 몹시 놀라웠다. Webhook에 대해서 새롭게 알게 되었다. 보통 우리가 흔히 사용하는 API는 클라이언트가 서버에 요청을 전송하고 응답받는 구조라면, Webhook은 특정 이벤트가 발생했을 때 서버에서 클라이언트를 호출하는 역방향 방식이다. Webhook은 특정 이벤트가 발생하면 custom 콜백으로 변환해주는데, 이때 사용하는 콜백 URL은 서버.. 2022. 11. 18. 11.17.22{코딩일기} 라인 X Yahoo! Japan 'Tech-Verse 2022' 콘퍼런스 첫째날 후기 2022 라인과 야후 Japan이 공동 테크 컨퍼런스를 개최했다. 오늘은 대망의 첫째날에 참여했던 세션에 관한 간략한 후기를 작성하고자 한다. 첫째날엔 주로 블록체인 위주로 강의를 들었다. 그중 라인 블록체인 스마트계약 API에 관한 세션에 참가했다. 온체인(On-Chain)이란 블록체인에서 발생하는 모든 거래 내역을 블록체인 위(On)에 기록하는 방식을 뜻한다. 오프체인(Off-Chain)이란 블록체인 이외의 외부(Off)에 거래 내역을 기록하는 방식을 의미한다. 라인 블록체인 디벨로퍼에서 이번에 온체인 비즈니스 로직을 지원하는 스마트 컨트랙 API를 공개했다.튜토리얼 형식으로 구현하는 방법을 직접 시연해주었는데 한번도 블록체인 컨트랙 구현을 접해보지 못한개발자 입장에서 몹시 따라해보고 싶고 흥미로웠다.. 2022. 11. 17. 11.16.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-1 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 리덕스엔 useReducer와 동일한 개념이 적용되어 있다 대표적으로 액션객체라는 것이 있다. 액션객체란 상태에 어떤 변화가 필요할 때 하나의 객체로 표현한 것이며 형식은 아래와 같다. 액션 객체는 type필드를 필수적으로 가지고 있어야 하고, 그 외에는 커스터마이징 하면 된다. { type: "ADD_PROFILE", data: { id: 0, name: "bluevulpe" } } 액션함수는 파라미터를 받아와서 위 액션객체 형태를 리턴하는 함수를 의미한다. 액션함수의 용도는 컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함이기 때문에 함수 앞에 export 키워드를 붙인다. 2. Redux 리듀서는 useReducer를 사용할 때와 동일한 형태를 갖추고 있다 리듀서는 두가.. 2022. 11. 16. 11.15.22{코딩일기}벨로퍼트와 함께하는 모던리액트 6-0 챕터리뷰 [ 새롭게 알게된 것 ] 1.현존하는 리액트 상태관리 라이브러리중 가장인기 있는 것은 Redux이다 프로젝트 또는 서비스 규모에 따라 Redux를 사용하는 것이 좋을 수 도 혹은 필요치 않을 수 도 있다. 특히 Context API와 useReducer Hook을 사용하는 개발 방식은 Redux의 Reducer와 액션 개념과 매우 유사하다. 2.단순 글로벌 상태관리만을 위해선 Redux는 그리 필요치 않다 오히려 Context API만 사용해도 충분했다. 실재로 작은 규모의 프로젝트를 진행했을 때에도 처음엔 Context API만 사용해도 충분했었다. 하지만 점차 기능이 추가되고 상태관리 로직이 복잡해지자 매번 Context를 새로 만들어야 하는 번거로움이 있었고, 이는 Redux를 고려해볼만한 상황까지.. 2022. 11. 15. 11.15.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-5 챕터리뷰 [ 새롭게 알게된 것 ] 1. with Router의 치명적인 단점은 라우트가 변경되었을때 페이지를 자동 리렌더링 되지 않음 이로인해 직접 Hoc를 커스텀해서 리렌더링 되도록 설정해야 되는 불편함이 있었음. 하지만 서드파티 라이브러리인 react router Hook이 등장하면서 이런 불편함이 사라짐. 그중 하나가 yarn을 사용해 use-react-router라는 npm 패키지를 설치해 라우터 hook을 사용하는 방법이 있음. 하지만 v6부터는 아래 Hook 사용을 권장함 useHistory useLocation useParams useRouteMatch 참조: https://charles-stover.medium.com/how-to-convert-withrouter-to-a-react-hook-19b.. 2022. 11. 15. 11.13.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-4 챕터리뷰 [ 새롭게 알게된 것 ] 1.useNavigate는 react-router-dom v5의 history객체 기능을 대체함 뒤로가기, 특정경로 이동, 이탈 방지 기능구현시 컴포넌트 내부 메소드에서 라우트를 직접 접근해 구현 가능함 2. react-router-dom v6에선 withRouter Hoc 지원 안됨 대신 useNavigation, useSearch, useParam을 활용해 라우트 컴포넌트가 아닌곳에도 활용가능함 3.Hoc(High order component)와 커스텀 Hook의 차이 Hoc은 React 구성적 특성에 나오는 패턴임 export default MyComponent(addedComponent); 하지만 중복되는 로직을 줄일 수 있는 장점이 있는 패턴이 있지만 암시적인 데이터를 .. 2022. 11. 13. 11.12.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-3 챕터리뷰 [ 새롭게 알게된 것 ] 1. 서브라우트란 컴포넌트 안에 Route 컴포넌트를 렌더링 가능함 버전5의 경우 '/profiles'만 해도 nested routing이 가능했음 하지만 버전6의 경우 에스터리스크를 사용해 nested routinge을 구현해야함. 공식문서엔 splats 이라고 표기되어 있음 2. 서브라우팅을 통해 children 컴포넌트를 동시에 띄울 수 있는 장점이 있음 서브라우팅을 안사용 하는 경우 서브라우팅을 사용하는 경우 children 컴포넌트까지 동시에 라우팅 가능함 3. 라우터도 그냥 컴포넌트 중 하나임 처음엔 서드파티 라이브러리 유틸인줄 알았음. 꺽쇠로 되어 있고, 내부적으로 route 파라미터(ex. /profiles/:username) 를 넘겨주는것임 4. 특정 라우트 내에.. 2022. 11. 13. 11.11.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-2 챕터리뷰(2) [ 새롭게 알게된 것 ] 1. react-router는 서드파티 라이브러리임을 알게됨 페이스북 공식 라우팅 라이브러리는 존재하지 않음. React Router라는 서드파티 라이브러리 공식문서는 존재함. 이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해줌 서버 사이드 렌더링도 도와줌. 추가적으로 react-native에서도 해당 라이브러리 사용 가능함 2. SPA는 렌더링시 서버 자원 사용을 최소화하고 불필요한 트래픽 낭비를 줄임 이건 뷰 렌더링을 유저의 브라우저가 담당하고 어플리케이션을 브라우저에 로드한 후 필요한 데이터만 제공하기 때문임 단 리액트 자체에는 SPA를 위한 라우팅 기능이 자체 내장되어 있진 않음. 그래서 직접 브라우저의 API를 사용하고 상태를 설정해 다른 뷰를 보여주어.. 2022. 11. 11. 11.08.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-2 챕터리뷰(1) [ 새롭게 알게된 것 ] 1. 파라미터와 쿼리의 차이를 알게됨 페이지 주소를 정의할 때, 단순 www.bluevulpe/main 이렇게 고정적인 값이 아닌, 유동적인 값을 전달해야 할때가 있음. 이때 값이 파라미터와 쿼리로 두종류로 나뉘어짐. 파라미터는 특정 id나 이름을 가지고 조회할 때 사용함. 이와달리 쿼리는 어떤 키워드를 검색 또는 요청할때 필요한 옵션을 전달하는 용도임. 파라미터 : http://www.bluevulpe/profile/bluevulpe 쿼리: http://www.bluevulpe/profile/about?details=true 2. 리액트 라우터 구현이 안됨.. match 객체 안에 현재의 주소가 Route 컴포넌트에서 정한 규칙과 일치하는지에 대한 정보가 안들어와 있었음. 확인.. 2022. 11. 8. 11.07.22{코딩일기}벨로퍼트와 함께하는 모던리액트 5-1 챕터리뷰 [ 새롭게 알게 된 것 ] 1. react-router-dom은 별도의 버전 없이 의존성을 추가하면 6버전으로 추가됨 벨로퍼트 책자에는 버전 5로 설명되어 있어서 라우터 구현이 처음엔 안되었음 리액트 라우터 돔 버전에 따른 차이를 알게됨 2. 메인페이지와 라우터가 겹칠땐 exact라는 props를 할당해주면 됨 props 값은 true 초기화해주면됨. 이러면 경로가 완벽히 똑같을때만 보여주게 되므로 규칙이 불명확했던 이슈를 해결 할 수 있게됨 const App = () => { return ( ); } 3. 클릭하면 다른 주소로 이동시키는 컴포넌트 Link 사용법을 알게됨 쌩 JS로 라우터를 사용하려면 a태그를 그냥 사용하면 안됨. a태그는 페이지를 이동시키면서 모든 컴포넌트를 리렌더링 시키기 때문에 불.. 2022. 11. 7. 11.06.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-마무리 챕터리뷰 [ 새롭게 알게된 것 ] 1. 리액트 16.3버전부터 Context API가 좋아지면서 글로벌 상태관리 더욱 용이 해졌음을 알게됨 리덕스 라이브러리의 창시자인 Dan Abramov는 Redux가 필요없을 지도 모른다캤음. 하지만 Context API보단 Redux나 MobX를 사용한다고 함 이유는 NPM에 따르면 Redux를 사용하는 프젝비중이 Mobx보다 9배이상 높기 때문이고, Redux에서 제공하는 미들웨어같은 강력한 기능은 Context API로 대채불가능함 만약, 미들웨어가 필요없고 단순 글로벌 상태관리만 해야 한다면 Context API 사용추천 2. 리덕스의 장점은 체겨적인 글로벌 상태관리 및 redux-saga와 redux-observable 미들웨어기능임 Context API로는 절대 불.. 2022. 11. 6. 11.04.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-5 챕터리뷰 [ 새롭게 알게 된 것 ] 1. 현재 로그인된 사용자의 정보,설정등의 데이터들은 Hook대신 ContextAPI를 사용하면 좋음 기존에 Users의 User 컴포넌트에서 가각 API를 호출해 동일한 데이터를 가져왔음. 1,2개 컴포넌트가 아닌 수십, 수백개의 컴포넌트에서 동일한 데이터를 API로 가져와야할때 유용함. 기존엔 API를 호출할때 동일한 데이터임에도 불구하고 각 컴포넌트마다 커스텀 Hook을 또 만들어 호출해서 불편했음. 이런 불편함을 개선해준게 바로 ContextAPI임. 만약 리액트 버전16이 없었다면 이런 일도 불가능했을 거임. 동일한 Hook을 컴포넌트에 각각 또 생성할 필요없이 ContextAPI를 사용해 데이터를 갖고 오는 좋은 패턴이 바로 ContextAPI임 확실히 Context.. 2022. 11. 4. 11.04.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-4 챕터리뷰 [ 새롭게 알게 된 것 ] 1. react-async 라이브러리는 현재 지원되지 않음을 확인하게됨 우선 공식문서에 리액트 버전 18부터 16까진 찾아봤지만 관련 언급은 없었음 오픈소스 레포에 들어가서 이슈를 확인했을때 24페이지에 달해서 5페이지까지만 찾아보았는데 관련 이슈 키워드가 없었음 근데 감사하게도 귀한 분께서 리액트 18버전부턴 지원이 안된다고 나옴을 확인하셨고, index.js에서 를 제거하면 된다고 알려주셔서 해보니 그대로 됨. 추후 React.StrictMode가 무엇인지 다시 체크해봐야 될것 같음 2022. 11. 4. 11.02.22{코딩일기}벨로퍼트와 함께하는 모던리액트 4-3 챕터리뷰 [ 새롭게 알게된 것 ] 1. Data를 요청할때마다 리듀서를 작성하는 것은 번거로운 일임을 알게됨 useReducer를 사용하면 무수한 setState 사용을 줄일 수 있고 확장성 높은 코드를 사용할 수 있는것 사실이지만 Data를 요청할때마다 useRedcuer를 작성해야하는 건 상당히 번거로움. 그래서 아예 따로 파일을 새로 하나 만들고 커스텀 Hook을 만들어 요청 상태 관리 로직을 쉽게 재사용하는 방법을 추천함 리턴값은 state와 fetchData를 반환해 나중에 데이터를 쉽게 리로딩 해줄 수 있는 장점이 있음. 이때 커스텀 Hook 첫번째 파라미터는 API요청을 시작하는 함수이고, 두번째 파라미터는 useEffect의 deps로 설정함 2. 필요한 시점에 API를 요청하고 싶으면 skip이라.. 2022. 11. 2. 이전 1 2 3 4 5 ··· 7 다음 728x90
