어쩌다 블로그

01. API Fetching & Context API 데이터 패칭시 Reducer 와 Context를 함께 써보자 데이터 패칭 시 Reducer와 Context를 함께 쓰면 더 좋을 때가 있다. 외부 데이터들 같은 경우는 그 때 그 때 외부 API를 요청하면 되지만, 사이트 전역적으로 쓰일 데이터 ( 예를 들면 유저 데이터) 와 같은 것들은 Context와 함께 연동해서 쓰면 더욱 좋다. Context 코드를 따로 분리하여 Provider, State, dispatch를 가져다 쓸 수 있는 함수와 Reducer함수, state등을 따로 분리한다. UsersContext.js → getUsers, getUser ( data fetching ) → reducer, initial state, loading ..

CSS Module CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름]_[클래스 이름]__[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술 CSS Module을 사용하면 클래스 이름을 지을 때 고유성에 대해 고민하지 안하도 되게 합니다. 기본적으로 css파일을 만들 때 [컴포넌트 이름].module.css 라는 네이밍 컨벤션을 갖습니다. 사용하기 위해선 webpack에서 사용하는 css-loader 가 필요합니다. CRA로 만든 프로젝트에서는 자동으로 세팅이 되어있어서 자유롭게 가져다 쓸 수 있습니다. 사용법 먼저 [컴포넌트 이름].module.css 라는 이름의 css 를 만들어 줍니다. 컴포넌트 상단에 해당 css를 import ..

Context API 란? React 애플리케이션에서 명시적인 부모-자식간의 Props 전달 과정 없이 어떤 트리의 컴포넌트 에서든 이 값을 공유해서 쓸 수 있도록 해주는 API 언제, 왜 쓰는 걸까 값을 Root ⇒ A ⇒ B ⇒ F 이렇게 내려주는 과정이 실제 프로젝트에서는 상당히 많이 필요한 과정. ( 전역적으로 다루는 css테마, 유저 정보, 언어정보 등...) 실제 프로젝트에서는 컴포넌트의 깊이가 굉장히 깊을 수도 있고, 다루게 되는 데이터들도 훨씬 많아질 수도 있어 유지보수성을 고려하여 전역으로 사용할 수 있는 값들을 저장하기 위해 만들어진 API입니다. 원래는 Redux, MobX와 같은 라이브러리를 사용하게 됬었는데 현재는 ContextAPI를 이용하여 글로벌 상태 관리를 쉽게 가능하게 합..

useCallback useCallback 이란? useCallback이란 리렌더링이 될 시에 콜백함수도 불필요하게 다시 만들어지는 상황을 방지하여 성능 최적화를 하기 위해서 생긴 hook입니다. useMemo 와 같이 이전에 만들어진 값을 재사용하기 위해 메모이제이션을 하여 이전에 만들어 놓은 콜백함수를 그대로 재사용합니다. (정확히는 값이 아닌 함수를 재사용한다.) useCallback을 사용하게 될 경우에 함수 재생성을 방지할 수는 있지만 이용하고 있는 state값이나 props값이 있을 경우 그 값이 변경되었을 시에 함수를 재생성하기 위해 의존성 배열 (deps) 내부에 값을 넣어 줘야 합니다. useCallback의 기본적인 형태는 이렇습니다. const memoizedCallback = use..

node.js를 14버전(현재 가장 안정성 있는 버전) 으로 업데이트 한 후 node-sass가 있던 서버를 돌리니 node 14버전이 기존 버전과 맞지 않아서 sass 를 최신 버전으로 업데이트했더니 Node-sass 6.- 버전이 아직 node 14버전과 호환이 안된다고 한다. 깃헙에도 비슷한 이슈가 많았고 노드 버전에 맞는 node-sass 버전을 재설치 했더니 해결되었다. npm install node-sass@4.14.1

List and Key React의 List 렌더링은 어떻게 이루어질까? (map 메서드) React에서의 List의 렌더링은 Javascript의 map 메서드를 이용하여 이루어집니다. map 함수는 배열의 각 요소를 하나씩 일대일 연산을 통해 새로운 배열로 리턴하게 되는 함수인데요. 이를 이용해서 React는 배열값을 순회하며 React Element 리스트로 리턴하게 됩니다. 리스트를 view 로 렌더링 한다는 것은 결국 반복되는 데이터를 프로그래밍적으로 하나씩 가져와 데이터 만큼의 UI를 생성(리턴)하기에 리액트에서 map 함수를 쓰는 것이 의미가 잘 맞는다고 할 수 있겠습니다. Array.prototype.map() - JavaScript | MDN 여러 개의 컴포넌트 렌더링 하기 예시로 리액트..

Props? 자식 컴포넌트가 부모 컴포넌트로 받아오는 값 , 언제, 왜 쓰게 되는 걸까? (데이터의 전달) 자료 출처 : Components and Props - React \ 특정한 상황에서 부모 컴포넌트에서 자식 컴포넌트로 특정한 값을 전달해서 렌더링해야할 시점이 있습니다. 이럴때 우리는 Props 를 사용하게 됩니다. 또한 리액트 애플리케이션내에서는 state값의 변경으로 리렌더링하는 로직을 호출하게 됩니다. 이로인해 전반적인 로직이 돌아가고 애플리케이션이 동작하게 됩니다. state값을 서로 전달할 때에 유용하게 props를 사용하게 됩니다. Props 전달과정 (React의 공식문서를 참고하였습니다.) function Hello(props) { // -----> props = {name : "r..

학원에서 약 한 달 동안의 세미프로젝트를 마치게 되었다. 아쉬웠던 점이 정말 너무너무 많다. 게다가 중간에 손을 다친 게 나의 개발 속도를 더디게 만드는 데 큰 몫을 하였고, 너무 슬펐다. 입원...수술.. 그동안 한 일이 너무 없었다. 그래도 내 손이 살아야 했으니 어쩔 수 없다.. ( 코딩 영영 못 할 뻔 했다. ) 나의 생일에는 진짜 오랜만에 친구들과 생일 파티도 했다 끝나니 너무 행복하더라! 좋게 좋게 끝난 듯 하지만 결과물은 사실 만족스럽지 못했다.. 최선을 다했다는 점은 200% 사실이지만... 아쉬웠던 점 1. CRUD만 하게 된 것 그동안 못 해봤던 새로운 개념을 하고 싶었는데 결국 그런 건 못하고 남들을 돕거나 기본적인 CRUD를 구현하다가 끝이 나버렸다. 2. 잠을 못 잔 건 사실 괜찮..

몇 번이고 프리즈마 코드를 다시 작성하고 뒤집어 엎으면서 겪은 에러들 정리 에러 때문에 도무지 진도가 나가질 않는다..프론트 하나도 못 건드리고 이것들 (포함한 온갖 잡 에러) 잡는데 며칠이 걸렸다...아...정말 난 살면서 백엔드 건드릴 일이 없을 텐데 ...!!🤯 1. 프리즈마 어드민 서버 접속이 안됨 us서버 쓰다 문제 생길 수 있는 건 가봄 ( 잘 모르겠음 ) 서버 날리고 eu서버로 다시 만들어 보니 잘 돌아가고 있다. 2. Query root type must be provided. 이거 때매 또 뒤집어 엎고 혼자 새벽에 난리 난리 였는데 그냥 임시의 가짜 쿼리를 하나 넣어주도록 하자. 이렇게 👇

라우터 구성은 로그인 하지 않았을 때 보이는 로그인 화면 Auth 로그인 했을 떄 보이는 Feed 로 구성되어 있음. 아폴로 클라이언트의 도움을 받아 isLoggedIn 변수를 이용해 바꿔줌 app.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 import React from "react"; import { gql } from "apollo-boost"; import styled, { ThemeProvider } from "styled-components"; import GlobalStyles from "../Styles/..