React 썸네일형 리스트형 [Next.js] 기존 React 프로젝트 Next.js로 바꾸기 - 3 (TS, Styled-Component, SVG) ✏ TypeScript 적용하기 Next.js를 프로젝트를 시작할 때 TS를 적용한다. npm i next react react-dom npm i -D typescript @types/react @types/node 타입스크립트는 빌드 과정에서 자바스크립트로 변환되기 때문에 실제 배포될 결과물에는 포함되지 않는다. 따라서 -D 또는 --save-dev를 붙여 devDependencies에 추가하여 빌드 시에 모듈이 추가되지 않도록 한다. @types/로 시작하는 라이브러리는, 라이브러리의 타입을 나타낸다. 타입이 내장되어 있는 모듈도 있지만, 그렇지 않은 경우에는 추가적으로 설치해주어야 한다. ✏ TypeScript 사용하기 예제에서 만드는 투두리스트로 TS를 사용하는 방법을 알아본다. d.ts는 타입스.. 더보기 [React] Context API, 전역 상태 관리하기, 두 개 이상의 Context 사용하기 유저의 정보나 헤더 등 전체 페이지에서 상탯값을 사용해야하는 요소들을 관리하기 위해 ContextAPI를 사용해보았다. 먼저 폴더구조는 다음과 같다. 1. createContext 먼저 context를 만든다. Header.context.js에 헤더의 context를 만듦 import { createContext } from "react"; // 관리할 state 정의 const HeaderContext = createContext({ view: false }); export default HeaderContext; 2. Provider state를 모아두는 provider를 만든다. state와 setState 동작을 정의한다. createContext를 받아와서 Provider로 return한다. p.. 더보기 [Webpack] robots.txt 추가 검색엔진에게 보여줄 robots.txt를 만들어 주자. 일단 나는 프론트에서, 백에서 둘 다 적용해 봤는데.. 네이버 서치어드바이저에서 인식하는데 시간이 좀 걸리는 바람에 어떤 방법이 먹힌지는 잘 모르겠다.; 1. React 프로젝트 Root에 robots.txt 파일 추가 프로젝트의 루트에 robots.txt를 생성한 후 내용을 입력하여 저장한다. User-agent: * Allow: / 나는 일단 모두 허용할 것이기 때문에 위와 같이 작성해 주었다. 어떤 검색엔진이 와도 허용할 것이라는 의미 2. robotstxt-webpack-plugin 설치 robotstxt-webpack-plugin A webpack plugin to output a robots.txt file www.npmjs.com npm.. 더보기 [React] Webpack 환경 설정에서 (.env) 환경 변수 사용하기 예전에 CRA로 만들어 개발했던 프로젝트에서는 환경변수를 따로 설정해주지 않아도 .env 파일을 만들어서 REACT_APP_* 변수를 사용하면 사용할 수 있었던 것 같다! 하지만 Webpack에서는 내가 환경변수를 사용하겠다는 것을 webpack.config.js에 알려줘야 한다. npm install dotenv 먼저 .env 설정을 위해 dotenv 라이브러리를 설치해준다. `.env` SERVER_URL="http://127.0.0.1:3000" 루트 폴더 내에 .env 파일을 만들고, 사용할 변수를 입력해준다. `webpack.config.js` const webpack = require('webpack'); const dotenv = require('dotenv'); dotenv.config().. 더보기 [TypeScript] REST API로 받아온 데이터 일부만 Props로 넘겨주기 API로 받아온 데이터가 뭉탱이라 컴포넌트별로 분리해서 Props를 보내주고 싶었다. 근데 타입스크립트 문법을 아직 잘 몰라서 계속 에러 발생..,, Type 'PlayInfo | undefined' is not assignable to type 'PlayInfo'. Type 'undefined' is not assignable to type 'PlayInfo'.ts(2322) PlayList.tsx(22, 3): The expected type comes from property 'info' which is declared here on type 'IntrinsicAttributes & IProps' Type '{ props: PlayInfo | undefined; }' is not assignable.. 더보기 [bug] event not working in React, Webpack Webpack으로 설정을 바꾸고, webpack dev에서 돌려보는데 잘 되던 코드의 클릭 이벤트가 동작이 되지 않았다. 다른 이벤트들도 마찬가지로. 에러가 아니어서 에러 코드도 없고, 아무리 찾아도 유사 사례가 없어서 한참을 삽질함.. React - onClick not working in any components I'm pretty new to React and I'm having some issues with my project. I feel like I'm going insane, the simplest things are not working as I'd expect them to. Having re-read my code what feels like stackoverflow.com 그러던 중.. 더보기 Delete `␍` prettier/prettier 에러 해결 방법 (VS Code) Delete `␍` prettier/prettier CR을 지워라. CR이 뭐야? CR : Carriage Return (\r) LF : Line Feed (\n) 개행 문자와 관련된 에러이다. 윈도우에서는 CRLF, 유닉스/맥에서는 LF를 사용한다. 문제가 생긴 파일의 CRLF에서 CR을 삭제한 -> LF 로 바꿔주면 된다. 하지만 이 방법은 파일마다 적용해줘야해서 번거롭다. .eslintrc.js 에서 설정을 추가해준다. rules: { "prettier/prettier": [ "error", { endOfLine: 'auto', } ], }, 그럼 이제 프로젝트가 잘 실행됨 ㅎ_ㅎ 더보기 [React] Emotion 태그, 브라우저에서 보기 쉽게 Label Format 설정해주기 emotion 으로 css와 styled를 적용하면 크롬 웹에서 다음과 같이 알수없는 이름들이 뜬다 ! 이를 보기 편하게 labelFormat 해줄 수 있는 babel 설정이 있다. GitHub - emotion-js/emotion: 👩🎤 CSS-in-JS library designed for high performance style composition 👩🎤 CSS-in-JS library designed for high performance style composition - GitHub - emotion-js/emotion: 👩🎤 CSS-in-JS library designed for high performance style composition github.com .babelrc { "pre.. 더보기 이전 1 2 다음
