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] 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의 경..

[React Project] 개인 기부 플랫폼 서비스 (whowants)

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

배포 주소: whowants.ga/ gitHub 주소: github.com/ozirapsu-web-server/whowants-web.git ozirapsu-web-server/whowants-web react js web project for whowants. Contribute to ozirapsu-web-server/whowants-web development by creating an account on GitHub. github.com 기술 스택: ReactJs, Redux, styled-components, gitHub Actions, S3 모바일 ,태블릿, 웹의 반응형 디자인을 지원합니다. 사이드 프로젝트로 기획, 디자인, 서버 파트와 같이 개발하고 있는 개인 기부 플랫폼 서비스입니다 웹은 ..

기존 React 프로젝트에 typescript 도입하기

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

새로 만드는 react 프로젝트를 타입스크립트 기반으로 만들거라면 npx create-react-app my-app --template typescript 를 치면 되고 기존의 javascript 기반 react 프로젝트에 타입스크립트를 적용할 거라면 yarn add typescript @types/node @types/react @types/react-dom @types/jest 이렇게 라이브러리들을 깔아주세요 @types가 앞에 붙으면 타입스크립트가 지원되는 라이브러리 입니다. 아마 새로 프로젝트를 생성하는 경우는 큰 문제가 없는데 저는 기존의 프로젝트에 적용했더니 바로 사용이 안되더라구요 1. 일단 jsconfig.js 파일이 있다면 지워주세요 2. yarn install (혹은 npm instal..

[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..

2020. 10. 20. 05:02

[React] react (props와 state) (누구든지 하는 리액트 4편 공부정리)

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

* velopert.com/3629 글을 공부하며 이것저것 해보며 정리한 글입니다 props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값 (직접 수정 불가, 부모한테 받은 함수props로 업데이트가능) state는 컴포넌트 내부에서 선언하며 값을 변경할 수 있다. 모든 것을 함수형으로 공부 중임 함수형 컴포넌트와 클래스형 컴포넌트의 주요 차이점은 state와 lifeCycle이 빠져있다는 것이다. 초기 마운트가 좀 더 빠르고 메모리 자원을 덜 사용한다는 장점이 있다. (*그보다는 나는 좀 더 짧고 간략히 작성할 수 있어서 좋다. 앞으로 리액트 개발이 함수형으로 된다는 것도 중요한 점이라고 생각한다) Name 컴포넌트를 만들어서 name props를 만들어서 전달해준다. ({name}) 이런 식으로 des..

티스토리툴바