개발 블로깅/기타 개념
-
[2019.08.12] CRA(Create-React-App) 사용 시, npx를 써야하는 이유!개발 블로깅/기타 개념 2019. 8. 12. 21:17
# npx란? npx는 자바스크립트 패키지 관리 모듈인 npm의 5.2.0버전부터 새로 추가된 도구이다. 따라서 npm 버전이 5.2.0 이상이면 바로 사용할 수 있다. # npx를 이용한 CRA 설치 리액트를 처음 시작할때, 또는 리액트 환경을 쉽게 구축하여 프로젝트를 진행하고자 할때 사용되는 것. $ create-react-app HelloReact 그러나 위 명령어를 사용하기 위해서, 먼저 crate-react-app 패키지를 npm으로 글로벌 설치를 해 주어야 한다. $ npm i -g create-react-app $ create-react-app HelloReact 그러면 CRA 패키지가 PC에 글로벌하게 설치되어 쉽게 사용할 수 있다. 실제로도 이러한 방식은 일반적으로 많이 쓴다. 그러나 이..
-
[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.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..
-
[2019.06.25] AWS ACM(Certificate Manager)이란?개발 블로깅/기타 개념 2019. 6. 25. 21:23
4주 프로젝트 작업 중, 페이스북 계정으로 로그인하는 기능을 구현 중 제일 큰 문제가 하나 있었다. OAuth2.0을 통해 facebook 계정의 데이터를 가져오려면, 우리 서비스를 facebook development에 안전한 사이트로 적용을 시켜야 하는데, 적용을 시키기 위해서는 해당 사이트의 서버 도메인이 'https' 인증 처리된 사이트 이여야만 했다...-0- 그래서 의도치 않게 API서버에 https 인증 처리 작업을 하게 되었고..저 당시에는 안그래도 바빠서 좌절이였는데, 지금은 다 끝나고나니, https 인증 작업을 하면서 Cloud Platform에 대한 개념을 정말 많이 배우고, 특히나 AWS랑 더욱 친해진 것 같아서 지금은 대만족!!ㅋㅋㅋㅋ https는 사용하려는 서비스와 SSL 인증..
-
[2019.06.25] AWS CloudWatch - AWS 서비스를 모니터링 해보자개발 블로깅/기타 개념 2019. 6. 25. 11:02
4주 프로젝트를 하면서 AWS랑 많이 친해진 것 같다. AWS에서 했던 것들을 차례대로 정리해보려고 한다. 이번에 Lambda를 쓰면서, 서버리스 프레임워크에서 오프라인으로 돌릴 때는 에러가 안나는데, 배포 후 클라우드에 올리기만 하면 에러가 나는 현상이 있었다. 뭔가 콘솔로그 같은거로 내부 확인을 해보고 싶은데, 클라우드에 올라간 함수다 보니....CloudWatch를 알기 전에는 콘솔을 확인하고 자시고...어쩌할 도리가 없었다.... 그런데 Lambda를 포함한, AWS 서비스의 상세 로그를 모니터링 할 수 있는 서비스가 있으니, 그게 바로 CloudWatch이다. AWS 홈페이지에 접속하여 검색창에 'cloudwatch'를 치면 해당 서비스가 나온다. cloudWatch로 들어가면, 내가 쓰고있는 ..
-
[2019.05.12] 컨테이너 방식 독립환경 - Docker 개념개발 블로깅/기타 개념 2019. 5. 12. 21:50
개발을 하다 보면 하나의 환경에 여러 가지 기술을 쓰게 되는 경우가 많다. mysql을 돌리며 node를 돌리는 것과 같이... 그러나 이렇게 하나의 환경에 실행시키는 것보다, 환경을 서로 분리시켜서 따로따로 돌릴 수 있다면 어떨까? 서로 돌아가는 환경의 의존성이 사라지고, 개발환경 구성을 더욱 최적화 시킬 수 있을 것이다. Docker는 이러한 독립적인 환경으로 돌릴 수 있는 기술을 제공해준다. 하나하나의 환경을 컨테이너처럼 독립적인 환경으로 만들어서 사용할 수 있다. # 컨테이너 Docker에서는 각 각의 가상 환경을 컨테이너라고 부른다. 어떻게 보면 VMware나 VirtualBox와 같이 가상 OS를 생성하여 독립적인 개발환경을 만드는 것과 같다고 볼 수도 있다. 컨테이너와 가상OS의 차이 우선 ..
-
[2019.05.10] JWT-Token 방식의 정보 인증 [사용법]개발 블로깅/기타 개념 2019. 5. 10. 22:24
사용자가 로그인 후, 유저 정보를 cookie,Session 방식이 아닌 token 방식으로 안전하게 관리하는 방법이 있다. # token 방식의 특징 사용자 정보를 일일히 서버의 세션에 저장하지 않고, 사용자의 로컬에 저장. 사용자가 요청을 보낼 때마다 유저 정보 확인을 일일히 하지 않아도 됨. 웹 표준 기반 기술로써, 여러 환경에서 지원 이러한 토큰 방식을 사용하기 위해서는 JWT(Json Web Token) 기술을 사용한다. # JWT 모듈 설치법 npm i -D jsonwebtoken 모듈을 설치한다. # token 생성법 토큰을 생성하는 방법은 아래와 같다. const jwt = require('jsonwebtoken'); var userInfo = {id: 1, username: 'inyong..