Loading...

[React, NextJS] Module parse failed: Unexpected character '' (1:0) 에러 수정 및 Next에서 이미지 import 되도록 설정

Posted by 해랑쓰 블로그 (Haerang's blog)

오늘 기능 좀 만들어볼까 했더니 Module parse failed: Unexpected character '' (1:0) 에러가 떠서 몇 시간 동안 헤맸다. 기본적으로 nextjs의 최근 버전에서 import/export로 이미지를 불러오는 것을 지원하지 않는 것 같고 next-image라는 것을 따로 설치하여 설정을 해준다. 이에 따라 next-image 밑 next.config.js 설정을 해줘도 위의 에러는 사라지지 않았다. stackoverflow에서는 webpack 얘기가 등장하는데 다른 사람들은 안해줘도 되던데 나는 해줘야되나? 싶어서 다른 해결방법을 찾아봤는데 결론은.. 결국 webpack.config.js에서 file-loader 설정을 해줘야된다. (이 에러가 난 사람이라면 필수) 왜 ..

[React, Nextjs] nextjs 에 emotion 설치 (react cra 동일)

Posted by 해랑쓰 블로그 (Haerang's blog)

설치 설치 yarn add @emotion/react @emotion/styled yarn add --dev @emotion/babel-plugin .babelrc 파일 생성 및 내용 추가 { "presets": [ [ "next/babel", { "preset-react": { "runtime": "automatic", "importSource": "@emotion/react" } } ] ], "plugins": ["@emotion/babel-plugin"] } 글로벌 스타일 적용 및 스타일 적용 예제 style.js 파일 생성 (이름은 상관없음) import { css, Global, keyframes } from '@emotion/react' import styled from '@emotion/st..

[React, Nextjs] Next typescript 인텔리센스 안보이는 문제 해결

Posted by 해랑쓰 블로그 (Haerang's blog)

타입스크립트가 잘 작동하나 보려고 일부러 타입 에러를 일으켜봤는데 작동하지가 않아서 검색해서 여러 설정도 건드려보고 지인한테 물어봤는데 vscode extension 문제일수도 있다고 했다. extension을 이것저것 삭제해봤지만 되지 않아서 vscode를 지웠다 깔았는데 그냥 지우면 설정은 그대로 남아 관련 폴더를 모두 지워줘야 한다. [정리] ① c\사용자(혹은 user, 나는 user/내 사용자 이름이였다.)\Administrator(혹은 사용자 이름)\.vscode 폴더 삭제 ② c\사용자(혹은 user)\Administrator(혹은 사용자 이름)\AppData\Roaming\code 폴더 삭제 ③ 제어판 – 프로그램 추가/제거 – visual studio code 삭제 ④ vs code 재설..

2021. 2. 19. 16:20

[React, NextJS] tsconfig.json 절대경로 설정과 폴더구조 고찰

Posted by 해랑쓰 블로그 (Haerang's blog)

1. NEXTJS에 타입스크립트 설정방법 ** new 여러 글과 영상을 보고 next에 typescirpt를 적용하는 것을 따라했는데 이상하게 tsc로 ts파일을 변환하는 것은 되는데 next의 컴포넌트 타입체크를 안하는 문제가 있었다. vscode 에디터 save 속성과 관련되어 있는 문제 같은데 수정이 힘들어서 그냥 새로 폴더를 다시 생성했고 더 간단한 방법을 찾았다. 1. 루트 프로젝트에 touch tsconfig.json 파일 생성 (빈페이지로) touch tsconfig.json 2. yarn add --dev typescript @types/react @types/node 설치 3. npm run dev 혹은 yarn dev 실행 이렇게만 하면 알아서 typescirpt 설정을 해준다 bb 완..

[Next.js 설정] Next에 Typescript 도입하기

Posted by 해랑쓰 블로그 (Haerang's blog)

1. yarn create next-app 프로젝트이름 => next 프로젝트 생성 2. 아래 글을 참고해서 typescript 관련 파일 설정한다. 아래 글에 나온 것 외에 아래 명령어로 두 개를 추가로 설치해줘야 동작한다. '@zeit/next-typescript' 의 경우 타입스크립트가 이제 내장되어 필요없다는 문구가 터미널에 나오길래 없앴는데 babelrc등을 설정하려면 결국 설치해줘야했다. 추가로 webpack을 설정할 경우에도 필요한 것 같다. 나는 아래 글을 보고 .prettier.js (탭 띄어쓰기, ''로 따옴표 통일, ',' 자동 붙여주기 기능 제공) 등도 같이 설정해줬다. yarn add --dev @zeit/next-typescript @babel/core tlog.tammolo.c..

[React] hooks 만든 동기, 사용하는 이유 요약

Posted by 해랑쓰 블로그 (Haerang's blog)

이 글은 React 공식 홈페이지 ko.reactjs.org/docs/hooks-intro.html#ts-hard-to-reuse-stateful-logic-between-components Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 을 읽고 요약하며 생각한 사담을 넣은 글입니다. 동기 기존 리액트는 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다 React는 컴포넌트 재사용 가능한 행동을 붙이는 별다른 방법을 제공하지 않는다. 따라서 render Props나 고차 컴포넌트 같은 패턴이 재사용성을 위해서 사용되어 왔다. 하지만 이런 패턴은 컴포넌트를 재구성해야하고 (render props의 경..

[Redux] Redux 개념과 3가지 규칙

Posted by 해랑쓰 블로그 (Haerang's blog)

가장 많이 사용하는 리액트 상태관리 라이브러리이다 컴포넌트 상태 업데이트 로직을 별도의 파일로 분리하여 효율적으로 관리할 수 있다 Redux 구성요소 1) 액션 상태에 변화가 필요할 경우 액션이 발생한다. 객체 형태로 전달하며 type필드는 반드시 필요하다 밑의 payload라고 써진 부분은 원하는 데이터 아무거나 넣어줘도 되고 필드명도 원하는대로 지정해서 쓰면 된다. {type:'INCREASE', payload} {type:'INCREASE', data:2} 2) 액션생성함수 액션 객체를 만들어주는 함수이다 function increateNumber(data){ // 액션 객체를 만들어서 반환해주는 액션 생성 함수 return{ type:'INCREASE', data }; } 변화를 일으킬 때마다 액..

2020. 11. 4. 23:59

[ReactJS] Presentational 컴포넌트 vs Container 컴포넌트

Posted by 해랑쓰 블로그 (Haerang's blog)

출처 (이 글은 아래 글을 공부하며 요약 정리한 글입니다 + 주석) redux.vlpt.us/1-2-presentational-and-container-components.html 리액트 창시자 Dan Abramov가 고안한 패턴이다 medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0 다만 2019년도에 추가한 글로는 불필요한 곳에서 사용할 만큼 꼭 지켜야되는 것은 아니라고 설명하고 있다 이 구조에 대한 글을 쓴게 후회될 정도라고..(트위터글 참고 twitter.com/dan_abramov/status/802569801906475008) 프레젠테이셔널 컴포넌트 View 만을 담당하는 컴포넌트이다 (UI를 작성한다) 이 컴포넌트 안에서는 프레젠테..

2020. 10. 30. 19:54

[React] 파일 절대 경로 설정 (jsconfig.json)

Posted by 해랑쓰 블로그 (Haerang's blog)

가끔씩 파일 경로를 import 하다보면 길어서 불편할 때가 있다 import Test from '../../../Test'; 그래서 나는 항상 절대 경로를 설정해준다 javascript이므로 jsconfig.json 파일을 만들어서 해주면 된다 기본 CRA 프로젝트를 생성하면 src 파일이 있는데 이 파일에 대부분의 소스코드를 넣으니 여기를 기준으로 하면 된다 jsconfig.json (package.json과 같은 위치에 만들어준다) { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 이렇게 하면 src 키워드 없이 절대 경로로 import 하면 된다 components 밑의 Temp컴포넌트를 App.js로 import 해보겠다 imp..

[React] 배열 데이터 처리(생성,렌더링, 수정,제거)

Posted by 해랑쓰 블로그 (Haerang's blog)

* velopert.com/3636 velopert.com/3638공부하며 필요한 부분 메모한 글입니다 배열에 데이터를 추가할 때 push메소드를 쓰듯이 this.state.array.push('value'); 로 하면 안된다. 리액트에서는 내부 값을 직접적으로 수정하면 안된다 (불변성 유지) push,splice,unshift,pop은 기존 배열 자체를 수정하므로 쓰지 않는 것을 권장한다(state를 건든다면) 대신 새 배열을 만들어내는 함수인 concat, slice, map, filter와 같은 함수를 사용할 수 있다. 불변성 유지를 하는 이유는 리액트에서 모든 것들이 필요한 상황에 리렌더링 되도록 할 수 있고 성능도 최적화할 수 있기 때문이다. const array = [1,2,3,4]; cons..

티스토리툴바