As i wish

지난번에 babelrc, tsconfig.json(jsconfig.json), webpack을 가지고 React 프로젝트에서 상대경로로 import 하던것을 절대경로로 import 할 수 있도록 변경하였습니다. Root 로 import 하기 (절대 경로) [React] root로 import 하기 (절대경로로 import) React 프로젝트를 진행하다 보면 component를 나누고 각 component 를 import 하여 사용하게 된다. component 뿐만 아니라 각각의 library 들도 커스텀하게 사용되는 경우가 많은데 이를 사용하기 위해 보통 impor.. eomtttttt-develop.tistory.com 그런데 그런데, 그런데 저의 다른 프로젝트 (CRA 로 생성) 에서 위와 같이 적..

React 프로젝트를 진행하다 보면 component를 나누고 각 component 를 import 하여 사용하게 된다. component 뿐만 아니라 각각의 library 들도 커스텀하게 사용되는 경우가 많은데 이를 사용하기 위해 보통 import {} from 'path' 이런식으로 사용하게 된다. 실제 사용 예 ./components/containers/shop/DownloadCatalog.jsx import React, { useState } from 'react'; import Catalogs from '../../components/shop/Catalogs'; import dummyItems from '../../data/catalogs'; const DownloadCatalog = () =>..

안녕하세요. 엄티입니다. 지난 포스팅에서는 eslint, prettier를 사용하여 기본적인 JS 문법과 협업 시 코딩 스타일을 맞추는 법에 대하여 포스팅해보았습니다. 이번에는 요즘 대세(?) 대세가 된지는 많이 지났지만 JS의 부족함 점을 여과 없이 채워주고 있는 TypeScript를 적용하는 법에 대하여 포스팅해보겠습니다. CRA (Create-react-app)에 eslint, prettier 적용하기 [React] CRA (Create-react-app) 에 eslint, prettier 적용하기 안녕하세요. 엄티입니다. 자바스크립트는 매우 동적인 언어이기 때문에 개발하기는 쉽지만, 딱히 없는 포맷 때문에 여러 명이서 협업하다 보면 코드 스타일이 안 맞기도 하죠. 이러한 문제들 때문에 eslint..

안녕하세요. 엄티입니다. 자바스크립트는 매우 동적인 언어이기 때문에 개발하기는 쉽지만, 딱히 없는 포맷 때문에 여러 명이서 협업하다 보면 코드 스타일이 안 맞기도 하죠. 이러한 문제들 때문에 eslint를 적용 하여 자바스크립트 문법을 잡아주기도 하고 prettier를 적용 하여 일관된 코딩 형태(세미콜론, 간격, 따옴표 등)를 유지시켜 줍니다. 물론 eslint 를 사용하여 코딩 형태를 잡아주기도 하지만 분리하여 eslint를 자바스크립트 문법에 관여하고 prettier는 서로 간의 코딩 스타일을 맞추는데 중점을 두기도 합니다. 먼저 저는 VSCode를 주로 사용하기 때문에 포스팅도 그에 관하여하겠습니다. 먼저 각각 eslint, prettier 익스텐션을 깔아줍니다. eslint 먼저 eslint부터..

안녕하세요. 엄티입니다. 오늘은 리액트 프로젝트에서 firebase 기능 중 Real time database 에 접근하여 data 를 가져오는 방법을 포스팅 해보겠습니다. Real time database 란 firebase 에서 제공하는 데이터 베이스로 따로 서버 없이 url 만으로도 디비에 CRUD 기능을 사용 할 수 있게 해주는 아주 엄청난 도구 입니다. 물론 요청에 따라 과금이 되긴 하지만 서버 구축 없이 클라이언트 프로젝트만으로도 간단한 토이프로젝트를 진행하기엔 아주 좋습니다. (과금도 어느정도 규모 이상이여야 됩니다.) 1. 사용하기 전에 먼저 firebase console 로 이동합니다. 만약 프로젝트가 없다면 '프로젝트를 추가' 하셔야 합니다. 2. test(이름은 마음대로 지어도 됨) ..

styled-component를 쓰면서 가장 큰 장점은 스타일링이 템플릿 리터럴(Template Literal)을 사용하기 때문에 $ (props.isMenu ? '30px' : '')}; background-color: ${(props) => (props.isMenu ? '#8080804d' : 'transparent')}; `; const Number = styled.div` min-width: 20%; margin: auto 0; padding-left: 1%; `; const Content = styled.div` min-width: 40%; margin: auto 0; padding-left: 1%; `; const InputContainer = styled.div` min-width: 38%;..

안녕하세요 이번 포스팅에서는 직접 콘솔을 이용하여 서버에 접속해보고 코드까지 받아서 배포해보도록 하겠습니다. 일단 기존 포스팅을 참고하시면 하나 둘 씩 따라오실 수 있을거라고 생각합니다. React + Next + Express + Node js -> aws ec2 를 이용한 배포 - 1 React + Next + Express + Node js -> aws ec2 를 이용한 배포 - 1 안녕하세요. 오늘은 Next.js 를 사용하고 Express.js 를 이용하여 커스텀하게 웹 서버를 만든 뒤 이를 aws 에 배포하는 과정을 포스팅해보겠습니다. 정확히 말하면 저의 삽질기 입니다... 일단 next를 사용해서 프.. eomtttttt-develop.tistory.com React + Next + Expr..

전에 포스팅에서는 기존에 next.js 에서 커스텀한 웹서버를 구성 (express js) 하여 로컬환경에서 새롭게 돌려보는 방법에 대하여 포스팅 했었습니다. 이번에는 실제 aws 에 들어가 ec2를 하나 생성하고 그 코드를 올려보는 방식을 포스팅해보겠습니다. React + Next + Express + Node js -> aws ec2 를 이용한 배포 - 1 React + Next + Express + Node js -> aws ec2 를 이용한 배포 - 1 안녕하세요. 오늘은 Next.js 를 사용하고 Express.js 를 이용하여 커스텀하게 웹 서버를 만든 뒤 이를 aws 에 배포하는 과정을 포스팅해보겠습니다. 정확히 말하면 저의 삽질기 입니다... 일단 next를 사용해서 프.. eomttttt..

안녕하세요. 오늘은 Next.js 를 사용하고 Express.js 를 이용하여 커스텀하게 웹 서버를 만든 뒤 이를 aws 에 배포하는 과정을 포스팅해보겠습니다. 정확히 말하면 저의 삽질기 입니다... 일단 next를 사용해서 프로젝트를 생성하고 커스텀한 웹서버를 만들기 위해 express.js 를 설치해 줍니다. 그러고 나선 server.js 를 루트 폴더에 만들어줍니다. server.js const express = require('express'); const next = require('next'); const path = require('path'); const dev = process.env.NODE_ENV !== 'production'; const prod = process.env.NODE_E..

React 로 개발을 하다보면 Layout 을 만들고 이런식으로 써야하는 경우가 있습니다. 그렇게 되면 Layout 컴포넌트에서는 children 이라는 props 를 받게 되는데 이는 이 되죠. 이때에 에게 props를 넘겨주는 방법을 알아보겠습니다. 먼저 App.js import React from 'react'; import logo from './logo.svg'; import './App.css'; import ParentComp from './childProps/ParentComp'; import ChildComp from './childProps/ChildComp'; function App() { return ( ); } export default App; ParentComp.jsx impo..