프레임워크
-
[React] typescript + webpack 에서 tsconfig.json - paths 속성 사용하기 (별칭 경로)프레임워크/React(NextJs) 2022. 9. 10. 18:44
React를 webpack으로 직접 빌드하는 프로젝트와 typescript로 만든 경우 tsconfig.json에서 paths를 사용하기 위해서는 webpack에서 제공하는 플러그인 설정이 필요합니다. 경로를 잘못 설정하면 아래와 같은 에러가 발생하고, Cannot find module '@pages/Main' or its corresponding type declarations. 플러그인을 설치하지 않으면, devServer모드나 build시 아래와 같은 에러가 발생합니다. Module not found: Error: Can't resolve '@pages/Main' in 'C:/git/...' 설정 방법 프로젝트 구조 /src // ... /pages // ... App.tsx index.tsx ts..
-
[React] react-hook-form(feat. typescript)으로 Input 컴포넌트 만들어보기프레임워크/React(NextJs) 2022. 9. 6. 21:41
이 글은 프로젝트의 파일 구조와 디자인패턴을 고민하면서 시도했던 방법을 작성해두기 위한 글입니다. 해당 코드는 현재 사용하는 방식일 수도, 아닐 수도 있습니다. 이런식으로 코드를 짜봤구나. 정도의 예시로 봐주시면 감사하겠습니다. 사용한 라이브러리 : react-hook-form ./src/components/forms/Form.tsx import * as React from 'react'; interface onSubmitProps { onSubmit: React.FormEventHandler; children: React.ReactNode; } const Form = ({ onSubmit, children }: onSubmitProps) => { return {children}; }; export de..
-
[React] webpack 설정 (실시간 개발 모드 관련)프레임워크/React(NextJs) 2022. 9. 3. 23:47
react를 webpack 설정해서 코드를 작성하고 build를 해서 확인하는 것까지는 좋았으나, 수정이 있을 때마다 빌드하고, 확인하는 것이 번거롭던 와중에.. next.js에서 develop 모드 실행시 실시간으로 반영되던 것이 생각나 방법을 찾아보았고, webpack에서 설정할 수 있다는 사실을 알게되어, 시행착오 끝에 설정 완료한 내용을 기록 및 공유! 프로젝트 구조와 그에 따른 webpack 설정 3개의 npm 모듈을 설치 $ npm i --save-dev clean-webpack-plugin html-webpack-plugin $ npm i webpack-dev-server .env 설정과 관련된 글은 아래 포스팅을 확인해주세요. [React] .env (환경변수파일) - 'create-rea..
-
[React] .env (환경변수파일) - 'create-react-app'과 'webpack 빌드' 프로젝트에서의 각 설정 및 사용 방법프레임워크/React(NextJs) 2022. 9. 3. 19:33
목표 서버API URL을 환경변수 파일(.env)에 등록하고, React 프로젝트내 어디에서든 process.env.(변수이름)으로 사용할 수 있도록 한다. 1. create-react-app을 설치한 프로젝트 .env 을 만들고 아래와 같이 작성해준다. REACT_APP_SERVER_API_URL="http://localhost:4001" create-react-app으로 만든 프로젝트에서는 환경변수를 사용할 때 앞에 REACT_APP_ 이라고 꼭 붙여주어야 사용할 수 있다. 사용해줄 때에도 똑같이 REACT_APP_을 붙여서 쓰면 된다. console.log(process.env.REACT_APP_SERVER_API_URL); // output => http://localhost:4001 2. web..
-
[React] React + typeScript + webpack 설정으로 프로젝트 만들기프레임워크/React(NextJs) 2022. 6. 9. 21:22
먼저 새로운 프로젝트를 생성할 폴더를 만들고 필요한 모듈들을 설치해줍니다 // 프로젝트 초기화 $ npm init -y // 웹팩 설치 $ npm install --save-dev webpack webpack-cli $ npm install --save react react-dom $ npm install --save-dev @types/react @types/react-dom $ npm install --save-dev typescript ts-loader source-map-loader 프로젝트 루트 경로에 세가지 파일을 만들어야 합니다. 1. 타입스크립트 설정 파일 : tsconfig.json { "compilerOptions": { "outDir": "./dist/", "sourceMap": tr..
-
[Recoil] Next.js + Recoil + typescript 적용하기프레임워크/React(NextJs) 2022. 5. 29. 22:13
Next.js를 typescript로 설치해줍니다 $ npx create-next-app@latest --typescript recoil 모듈 설치 $ npm install recoil pages/_app.tsx 파일에서 RecoilRoot를 불러와 Component를 감싸줍니다 import type { AppProps } from 'next/app'; import { RecoilRoot } from 'recoil'; import '../views/styles/globals.css'; const MyApp = ({ Component, pageProps }: AppProps) => { return ( ); }; export default MyApp; recoil 상태 관리 파일 생성해서 아래 내용을 입력합..
-
[NodeJs] 채팅 서버 만들어서 실행하기프레임워크/NodeJs 2022. 5. 29. 00:56
채팅 서버를 간단하게 오픈할 수 있도록 만들어보겠습니다. Socket.io를 사용하였고, 공식 홈페이지에 나와있는 대로 구현해보려고 합니다. https://socket.io/get-started/chat NodeJS 설치 후 npm 프로젝트 생성을 합니다 $ npm init 맨 처음 npm init 명령어를 실행하면 package.json 파일이 생성됩니다 { "name": "chat-socket", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } ES6 문법을 사용..
-
[React] react-select 라이브러리와 onChange event 함수프레임워크/React(NextJs) 2021. 6. 22. 19:47
오늘의 삽질과 허접한 해결방법 .... 많은 조언 부탁드립니다. (_ _) 이 예제는 react 에 redux-saga가 사용된 예제임을 알립니다!!! 저는 Nodejs로 서버만 다뤄보다가 React 공부를 한 시간이 30시간도 안된 초초초초핵초보이기 때문에 수정방법은.... 일단 실행이 되게 만들었습니다. (ㅎ;ㅎ) 혹시 저와 같은 어려움을 겪고 계신 분들께 도움이 되었으면 좋겠고, 저도 더 배워서 좋은 코드를 만들고 싶어서 올리게 되었습니다. 많은 조언 부탁드립니다. + 저도 더 공부하면서 원인을 알게되면 수정해서 올리도록 하겠습니다 ! '리액트를 다루는 기술'에서 로그인, 회원가입 부분을 구현하기(p.732~p.786)를 따라하고 공부하던중 Form 중에 select input 태그를 다뤄보고 싶어..