전체 글

[React] Router

Router 설치 yarn add react-router-dom 세팅 라우터는 아래와 같이 src > index.js에 App을 BrowserRouter 로 감싸서 App 에서 Route 에 따라서 컴포넌트를 렌더링 해줄 수 있게 한다. import React from "react"; import ReactDOM from "react-dom/client"; import "./index.css"; import App from "./App"; import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root")); root.render( ); BrowserRouter: 주소..

[React-Query] useMutation 사용하기

useMutation import { useMutation } from "react-query"; const { data, isLoading, mutate } = useMutation(mutationFn, options); useMutation hook은 인자로 2가지를 받는다. useQuery 처럼 key 값은 따로 없다. mutationFn: mutate를 위한 패치함수 (필수) options: 옵션 (선택) mutationFn 함수로 POST, PUT, DELETE 및 각 요청에 필요한 인자들이 포함된다. 또한, options로 설정하는 값들, 그리고 반환되는 프로퍼티들은 아래와 같은 값들이 있다. (공식문서 참고) options onMutate mutation 전에 실행되는 함수로, 미리 렌더링 ..

[React] 함수형 컴포넌트에서 데이터 전달

1. 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 props 를 이용하여 자식 컴포넌트에게 데이터를 전달한다. import React from 'react'; import ChildrenComponent from './ChildrenComponent'; function ParentComponent(){ return( ) } export default ParentComponent; import React from 'react'; function ChildrenComponent(props){ return( 전달 받은 값:{props.value} ) } export default ChildrenComponent; 2. 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 자식 컴포넌트는 props를 이용하여 부모 ..

[Javscript] 배열에서 임의의 요소 가져오기

Math.random 임의의 인덱스를 가져와서, 배열에서 랜덤한 인덱스에 해당하는 요소를 가져올 수 있다. const array = ['A', 'B', 'C', 'D', 'E']; const randomValues = array[Math.floor(Math.random() * array.length)]; Math.random() 은 0~1 사이의 숫자를 반환한다. (0 0.5 - Math.random()) const [randomValue] = randomArray; ES6의 구조분해할당을 사용하여 뒤섞인 배열의 첫번째 요소를 얻는다. 라이브러리 Lodash JavScript에서 array, collection, date 등 데이터를 쉽게 다룰 수 있게 해주는 라이브러리이다. fetch('https://..

Redux와 Recoil 개념 정리

Redux, Recoil은 React 상태관리 라이브러리이다. Redux: Flux 아키텍쳐(패턴) 기반 Recoil: Atomic 모델 기반 장단점 Recoil 😊장점: React의 useState 훅과 비슷하게 동작하며 직관적이면서 간단한 구조. 코드의 양이 적다. 🥲단점: Redux처럼 안정적인 Devtool이 아직 없다. snapshot 이라는 개념이 존재하지만, 직관적으로 볼 수 있는 것은 아니고 콘솔을 이용하는 형태로 볼 수 있다. ✅ 디버깅의 측면에서 봤을 때 리덕스가 더 유리하다. Recoilize라는 Devtool이 있는데 작은 버그들이 있다고 한다. 실제로 recoil을 이용해 개발하시는 분들은 console을 더 선호하신다고 한다. Redux 😊장점: 상태값의 변경 사항을 Redux ..

[React] 이미지 위치에 따른 오류 해결 You can either move it inside src/, or add a symlink to it from project's node_moules/.

jsx 파일에서 이미지를 import 하기 위해 경로를 지정했는데 다음과 같은 오류가 발생했다. Module not found: Error: You attempted to import ../../../public/assets/icons/ArrwTop.svg which falls outside of the project src/ directory. Relative imports outsde of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_moules/. 원인 CRA에서 컴파일은 src 내부에서만 일어나는데, 이때 js에서 import된 이미지와 같이 엮여있는 파일들은..

[TS] TypeScript가 SVG 파일을 import 하지 못해서 에러가 발생할 때

TypeScript에서 svg 파일을 import 해오고자 할 때 svg에 대한 타입을 찾을 수 없으면 위와 같은 에러가 발생한다. 별도의 d.ts 파일을 만들어서 svg 파일에 대한 타입을 지정해주면 에러가 사라진다. 해결방안 // custom.d.ts declare module '*.svg' { const content: React.FunctionComponent; export default content; } 이후 tsconfig.json 파일에서 아래와 같이 webpack 설정을 추가해준다. (어떤 파일들에 어떤 로더를 적용할지) "include": ["src/components", "src/custom.d.ts"] 출처/참고 https://tesseractjh.tistory.com/227 htt..

Delete `␍` prettier/prettier 해결 방법

Prettier와 ESLint를 프로젝트에 적용 후 아래와 같은 에러가 떴다. 해결방법 프로젝트 폴더 내 .esLint 파일을 아래와 같이 수정하면 된다. 저장 후 재실행하면 정상동작됨을 확인할 수 있다. { "extends": ["react-app", "prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": ["error", { "endOfLine": "auto" }] } } 출처/참고 https://velog.io/@realsong/VS-Delete-prettierprettier-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95

Google Cloud Platform(GCP)를 이용해 Google App Engine 배포하기

미니 프로젝트에서 Google App Engine으로 배포를 하였는데 이 과정에 대해서 정리해두려고 작성해보았다. 처음 다뤄보는 것인데 이 GCP App Engine 방법은 AWS의 Elastic Beanstalk과 동일하다고 한다. 진행하면서 Google Cloud App Engine 문서도 같이 참고하면서 보면 좋을 것 같다. App Engine 문서 | Google Cloud Google 인프라에서 웹 애플리케이션을 빌드하고 호스팅할 수 있습니다. cloud.google.com 프로젝트 생성 먼저 Google Cloud Platform 으로 들어가서 프로젝트를 하나 생성해준다. 프로젝트를 생성한 후 해당 프로젝트를 선택하고 왼쪽 메뉴에서 App Engine을 선택한다. 만약에 보이지 않는다면 메뉴 ..

GitHub Action으로 Google App Engine 배포 자동화하기

미니 프로젝트를 다루다가 Google App Engine으로 배포하고, GitHub Action으로 CI/CD 를 구현하고 싶어서 GitHub Action에 대해서 알아보게 되었다. 근데 참고하는 글들이 예전 버전으로 되어있어서 업데이트한 버전으로 다시 알아두려고 정리해보았다.🤔 Google App Engine에 배포하는 과정도 애먹었었는데 이 과정은 다음 글에서 다시 정리해두어야 할 것 같다. 이번 글에서는 Google App Engine에는 배포되었다는 전제로 GitHub Action workflow 에 대해서만 다룰 예정이다. GitHub Actions? GitHub에서 제공하는 workflow 자동화 툴로 빌드, 테스트, 배포 등의 CI/CD를 해줄 수 있도록 도와주는 기능이다. GitHub Ac..

flex: 1 속성

setSearchVisible(visibleTo)}> 컨테이너 안에 크게 로고와, 메뉴버튼 두 가지의 요소가 들어있다. 이 때 이 두 가지를 아래 사진과 같이 양쪽 끝에 정렬하고 싶은데 잘 되지 않았었다. 이 때 로고에 flex-start 를 준 상태에서 flex: 1 을 주고 난 후 양쪽 정렬이 되었다. const Container = styled.nav` position: fixed; top: 0; left: 0; left: 0; right: 0; /* background-color: ${COLORS.WHITE}; */ z-index: 1; height: 80px; display: flex; flex-direction: row; align-items: center; padding-left: 24px;..

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named i..

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 에러 해결 방법 원인 해당 컴포넌트의 import 를 다시 하거나 연결되어 있는 컴포넌트들 중에 대소문자가 달라서 발생했을 수 있다. components의 이름이 잘못되었거나, import path가 잘못 입력되었을 때 발생할 수 있다. 페이지에..