개발 블로깅
-
[2019.08.10] 오늘의 TIL - CRA eject란?개발 블로깅/오늘의 TIL 2019. 8. 10. 21:10
CRA(Create React App)을 생성하면, 기본 스크립트 명령어가 4개가 존재한다. # CRA 기본 스크립트 명령어 4가지 // package.json "scripts": { "start": "cross-env NODE_PATH=src react-scripts start", "build": "cross-env NODE_PATH=src react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } 그 중, 마지막 eject라는 명령어에 대해서 알아보자. # eject란? eject는 해당 프로젝트에 걸려서 숨겨져 있는 모든 설정을 밖으로 추출해주는 명령어다. $ yarn eject or ..
-
[2019.08.04] PWA(Progressive Web App)이란?개발 블로깅/기타 개념 2019. 8. 4. 16:25
PWA(Progressive Web App)이란, 네이티브 앱과 웹의 장점을 합친 프론트엔드 개발 환경이다. # 웹의 특징(장,단점) 앱 설치과정 없이 URL 접속으로, 서비스 진입장벽이 낮다. 실시간 컨텐츠 업데이트 환경을 갖추고 있다. ----------------------------------------- 실행 구동이 앱보다 퍼포먼스가 떨어진다. 푸쉬알림과 같은 백그라운드 동작을 할 수 없다. 오프라인 구동이 불가능하다. # 앱의 특징(장,단점) 실행구동이 원활하다. 백그라운드 동작이 가능하다. 오프라인 구동이 가능하다. ------------------------------------------ 처음 앱 설치과정이 있어, 진입장벽이 크다. 컨텐츠 최신화 환경이 웹보다 떨어진다. # PWA 특징 ..
-
[2019.07.18] Styled-components 사용법(매우쉬움)개발 블로깅/기타 개념 2019. 7. 19. 00:23
엄청나게 간편해진 CSS 적용법! (이젠 내 인생에 확장자 .css파일을 건들 일은 없을 것 같다..ㅎ 아마도..) $npm i -S styled-components 그리고 직접 Component를 만들되, 거기에 style을 입힌다. import styled from 'styled-components'; const TempSpace = styled.div` background-color: white; margin: 0 0 10px 0; ` 스타일 작업을 위 코드와 같이 입힌 컴포넌트를 생성하여 사용하면 된다 # style에 props 넘기는법 (이부분이 매우 중요!) 해당 컴포넌트에 props를 내려서 style를 변경시킬 수 있다. 예를들어, TempSpace라는 컴포넌트에 check라는 props값..
-
[2019.07.14] 오늘의 TIL - webpack.config.js의 build 설정 시 주의사항개발 블로깅/오늘의 TIL 2019. 7. 15. 00:18
현재 진행 중인 프로젝트에 TypeScript React Redux를 신나게 쓰고는 있고.., 컴포넌트 라이브러리를 어떤 것을 쓸까 고민을 많이 해보았다. 4주 프로젝트 때 사용했던 ant Design이 정말 괜찮긴 했었다. 설명과 예시코드가 사용하기 쉽게 잘 되어있고, 무엇보다 디자인이 엄청 깔끔하고 사용성에 대해 직관적이다. 그래도 한번 써 본 라이브러리여서, 이번에는 다른 것을 써 볼까 고민을 많이 했었다. Material-UI, BootStrap, React Tool Box 등.. 리액트 관련 CSS 라이브러리가 엄청 많아 전부 사용해 보고 싶다.. 그러나 이번 프로젝트의 기술 핵심은 TypeScript + React + Redux! 괜히 다른 것에 시간 투자하지 않고 해당 스택에 집중하기로 했다..
-
[2019.07.13] React에 TypeScript를 적용하면 constructor를 쓰지 않는다?개발 블로깅/TypeScript 2019. 7. 13. 19:34
클래스형 컴포넌트 안에서 state를 사용할 때, 일반적으로 아래와 같은 코드로 구현한다. # React 클래스 컴포넌트에서 일반적인 state 선언 방식 class component extends React.Component { constructor(props){ super(props); this.state = { name: '', age: 0 } } render()( hello Typescript ) } 여기서 타입스크립트를 적용시키면 변경되는 부분이 몇 군데 있다. # React에 TypeScript를 적용시킬 시, 일반적인 클래스 컴포넌트 사용 방식 interface State{ name:string; age:number; } class component extends React.Component..
-
[2019.07.11] React + TypeScript에 TSLint 적용시키기개발 블로깅/TypeScript 2019. 7. 11. 12:22
# React + Typescript + Webpack 환경 세팅하기 [2019.07.11] React + TypeScript + Webpack 환경 설정 React의 보일러 플레이트 CRA를 사용한 것이 아닌, 직접 웹펙 세팅에 TypeScript를 적용한 환경설정을 해보자. # 프로젝트 디렉토리 생성 $ mkdir React_TypeScript $ cd React_TypeScript 프로젝트로 사용할 디.. helloinyong.tistory.com 이번에는 TSLint를 적용시켜, Typescript의 코드 스타일을 맞춰보도록 하자. # VSCode TSlint Plugin 설치 vscode plugin에 들어가 TSLint를 설치한다. # TSlint 설치 TSlint 모듈을 설치한다. $ npm..
-
[2019.07.11] React + TypeScript + Webpack 환경 설정개발 블로깅/React 개념 2019. 7. 11. 09:48
React의 보일러 플레이트 CRA를 사용한 것이 아닌, 직접 웹팩 세팅에 TypeScript를 적용한 환경설정을 해보자. # 프로젝트 디렉토리 생성 $ mkdir React_TypeScript $ cd React_TypeScript 프로젝트로 사용할 디렉토리를 생성하고 해당 디렉토리로 이동한다. # packge.json 생성 $ npm init -y 해당 프로젝트의 디렉토리에 사용할 packge.json을 생성한다. # webpack 세팅 $ npm i -D webpack webpack-cli 프로젝트에 사용할 webpack을 개발용 패키지로 설치한다. $ touch webpack.config.js 이후에 webpack 실행에 관한 설정을 하는 webpack.config.js 파일을 root 경로에 생..
-
[2019.07.04] Gatsby - develop은 되지만, build 시 failed 날 때 해결 법개발 블로깅/기타 개념 2019. 7. 5. 00:02
3~4일 간 Gatsby를 이용하여 포트폴리오를 제작하였다. (죽는 줄...) 개발하는 동안 개츠비에 기본 스크립트 명령어로 되어있는 'npm run dev'로 작업물을 돌리면서 확인했다. 개발하는 중에는 문제가 없었는데, 오늘 배포를 시도하려고 build를 돌리니 아래와 같은 에러 메시지가 출력되었다. 'Error: original.line and original.column are not numbers -- you probably meant to omit the original mapping entirely and only map the generated position. If so, pass null for the original mapping instead of an ob ject with emp..