본문 바로가기

IT/Frontend16

환경변수설정 서버리스 환경에서 개발을 하면 여러 환경에서 실행이 되는데 중요한 정보들을 소스에서 분리 시켜서 관리 한다그럴때 사용하는 정보가 환경변수 (process.env) 이다 환경변수를 시스템 환경별로 관리하는 방법을 알아본다로컬PCdirenv : 폴더별로 환경변수를 설정하는 라이브러리cross-env : CLI 에서 환경변수를 설정하고 스크립트를 실행개발환경file 과 AWS ssm 으로 관리한다 : 환경변수를 file 에서 찾고 없으면 ssm 으로 찾는다file : config/dev.env.jsonssm : AWS Secrets Manager# serverless.yml custom: ssm: ${ssm:/aws/sampleApplication/${opt:stage, self:provider.stage}/.. 2022. 9. 20.

테스트도구 테스트 프레임워크mocha : https://mochajs.org/ jest : https://jestjs.io/ (facebook 에서 만든 테스트 프레임워크로 React 와 많이 사용)mocha구조describe( describe( it( ) it( ) ) describe( it( ) it( ) ) )Hookbefore() : 전체 테스트 전 => 테스트 전에 기본 세팅을 설정하는 용도 beforeEach() : 각 단위테스트 직전 afterEach() : 각 단위테스트 직후 after() : 전체 테스트 후 => before 에서 설정한 것들을 반환하는 용도assertion 라이브러리chai : 많이 사용하는 assertion library https://www.chaijs.com/Should : .. 2022. 9. 20.

Regex 정규식 표현방법 정리 정규식은 프로그래밍을 하다보면 반드시 접할 수 밖에 없다Regular Expression정규 표현식 또는 정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어이다.기본표현표현식설명^The Start문자열이 The Start 로 시작합니다The End$문자열이 The End 로 끝납니다startstart 가 들어있는 모든 문자열을 매칭합니다문자수량표현식설명ab*c0개 이상의 b 를 포함한 문자 ac, abc, abbc, abbbc 등ab+c1개 이상의 b 를 포함한 문자 abc, abbc, abbbc 등ab?c0개 또는 1개의 b 를 포함한 문자 ac, abcab{2}c2개의 b 를 포함한 문자 abbcab{2,}c2개 이상의 b 를 포함한 문자 abbc, abbbc, abbbbc .. 2022. 8. 26.

ESLint 규칙 규칙들여쓰기시 2칸 공백사용 을 사용합니다.eslint: indentfunction hello (name) { console.log('hi', name)}이스케이프를 피하기 위해 문자열에 작은 따옴표 를 사용합니다.eslint: quotesconsole.log('hello there')$("")사용하지 않는 변수를 정의하지 마세요.eslint: no-unused-varsfunction myFunction () { var result = something() // ✗ 피하세요}예약어 뒤에는 공백을 추가합니다.eslint: keyword-spacingif (condition) { ... } // ✓ 좋아요if(condition) { ... } // ✗ 피하세요함수 선언 괄호 앞에 공백을 추가합니다.eslin.. 2022. 8. 25.

Vue.js 개발환경 INTRO Vue.js 개발환경을 구성해보자 설치방법 Step 1. Node.js 설치 Step 2. Npm 을 통한 Vue-Cli 설치 Step 3. 크롬브라우저용 Vue.js devtools Extentions 설치 Step 4. Visual Studio Code 에 vetur Extentions 설치 Step 1. Node.js 설치 Node.js 사이트 에서 Node.js 설치합니다. (2020년3월 기준 LTS 12버전을 설치) Step 2. Npm 을 통한 Vue-Cli 설치 Node.js 를 설치하면 기본적으로 NPM (Node Package Manager) 가 설치되어 있습니다 Npm 을 이용해서 vue-cli 를 Global 로 설치합니다 npm install -g @vue/cli vue.. 2020. 3. 9.

예제로 배우는 Vue.js 프론트 3대장 중에 vuejs 에 대한 아주아주 기초적인 내용의 책입니다 너무 큰 기대는 하지 마시고 그냥 vuejs 에 대한 기본적인 것들을 이해 하는 정도의 지식을 얻을 수 있습니다. HTML, CSS, Javascript 에 대한 사전 지식이 있어야지 볼 수 있는 책이고 다 본 다음에는 vuejs 를 이용해서 간단한 서비스들을 만드는 개인 프로젝트를 해야 할 것 같습니다 저는 Vuejs 로 프론트 만들고 Serveless Framework 으로 백앤드 만들어서 일단 AWS 를 활용한 사용자 관리를 만들어 보려고 합니다 만드는 과정은 블로그에 공유합니다 2020. 3. 5.

프론트엔드 개발자를 위한 크롬 Extensions 과 Online Tools 크롬 Extensions CSSViewer : A simple CSS property viewer React Developer Tools : Adds React debugging tools to the Chrome Developer Tools Augury : Extends the Developer Tools, adding tools for debugging and profiling Angular applications Vue.js devtools : for debugging Vue.js applications JSON Viewer : The most beautiful and customizable JSON/JSONP highlighter that your eyes have ever seen Library.. 2020. 2. 25.

Our Next Web Framework is Vue 현재 대한민국 쇼핑앱 TOP 20 에 들어가는 온라인 사이트를 운영/개발 하지만 2013년 기획하고 오픈된거라 Web Framework 을 사용하고 있지 않다 더 높은 성장을 위해서 Web Framework 을 도입하고자 한다 현상 사용 Framework 시장은 죽어가고 있고 Open Sourece Framework 로 전환된지 오래됨 시장의 IT 리더들이 기술을 공개하고 Framework 기술 발전을 위한 R&D 리소스로 전세계 개발자들을 끌어들임 Web Framework 는 Angluar, React, Vue 3가지가 TOP 3 초기의 러닝커브가 적은 Vue 는 그나마 한국시장에 최근(2018년 정도)에 퍼지고 있는 추세 Vue 기술선정 이유 선정이유는 그나마 대한민국 IT 인력시장에서 구할 수 있고.. 2020. 2. 13.

AWS Lambda 를 이용한 Nuxt.js 프로젝트 구현 Vue.js 를 서버사이드랜더링 하기 위한 Nuxt.js 프레임워크를 AWS Lambda 에 배포하기 위한 방법 아직 Vue 에 대한 지식 부족으로 링크만 남겨둡니다 https://ko.nuxtjs.org/guide/ nuxtjs.org Nuxt.js official website ko.nuxtjs.org 나중에 공부할 리스트 https://velog.io/@ashnamuh/Serverless%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-Nuxt-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-AWS-lambda%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-m8jwvwwshc Serverless를 이용해서 Nux.. 2019. 12. 3.

갤럭시 S 시리즈 출시일 시리즈명 출시일 OS 갤럭시S 2010년 6월 2.2 프로요 S2 2011년 4월 2.3 진저브레드 S3 2012년 6월 4.0 아이스크림 샌드위치 S4 2013년 4월 4.3 젤리빈 S5 2014년 4월 4.4 키캣 S6 2015년 4월 5.0 롤리팝 S7 2016년 3월 6.0 마시멜로 S8 2017년 4월 7.0 누가 S9 2018년 3월 8.0 오레오 S10 2019년 3월 9.0 파이 대한민국 대표 핸드폰의 출시일과 OS 버전은 알고 있어야 합니다 그래도 모바일 환경의 역사 이니깐 2019. 10. 29.

Frontend 웹개발 연습환경 관련사이트 CODEPEN : 온라인 코딩 사이트 Emmet Documentation : HTML, CSS 작성 툴킷 문법 HTML Cheatsheet : HTML 문법 요약 파일 codepen 사이트에서 코딩을 하면 바로 결과를 볼 수 있습니다 codepen 사이트에 emmet 적용이 되어 있어서 html 작성시에 반복적인 코딩을 줄 일 수 있습니다 NOTE : emmet 문법 입력 후에 TAB 키를 누르면 html 로 변환됩니다 html 에 아예 모르신다면 html cheatsheet 를 출력해서 참고하시면 편합니다 2019. 8. 16.

Javascript 환경변수 처리하기 process.env (dotenv) 문제상황 람다로 환경변수를 설정하고 사용하는데 로컬에서는 환경변수가 없기 때문에 소스에서 환경변수 없을 경우 처리해주는 구문을 추가해서 사용 하지만 보안을 강화하기 위해서 환경변수를 소스에서 제외하려고 합니다 if(!process.env.PUSH_TABLE) process.env.PUSH_TABLE = 'DynamoDB-Name'; if(!process.env.AWS_DEPLOY_REGION) process.env.AWS_DEPLOY_REGION = 'ap-northeast-2'; 해결방법 dotenv 를 이용해서 환경변수를 .env 파일로 빼고 .env 파일을 .gitignore 에서 제외시켜준다 사용방법 로컬에서만 사용할 것이니 save-dev 로 dotenv 설치 npm install --save-.. 2019. 8. 5.

이미지 라이브러리 sharp sharp 쓰세요 완전좋아요 이미지 라이브러리를 찾는다면 sharp 를 반드시 사용하시기 바랍니다 ImageMagick 대비해서 4~5배 빠릅니다 npm trends 트랜드를 비교해봐도 압도적으로 많이 찾고 있습니다 https://www.npmtrends.com/gm-vs-imagemagick-vs-sharp gm vs imagemagick vs sharp | npm trends Compare npm package download statistics over time: gm vs imagemagick vs sharp www.npmtrends.com sharp 깃허브에서 사용법 확인할 수 있습니다. 굉장히 쉬워요 https://github.com/lovell/sharp lovell/sharp High pe.. 2019. 8. 4.

java vs javascript 차이 NOTE : java 와 javascript 는 이름만 비슷하고 완전히 다른 프로그래밍 언어 이다 유머란이 올라오는 자바와 자바스크립트는 햄과 햄스터의 차이와 같다 (카와 카페트) 이름만 비슷하고 완전 다른거 java javascript OOP 프로그래밍 언어 OOP 스크립팅 언어 jvm 에서 실행 브라우저에서 실행 실행전에 컴파일 실행시에 컴파일 (Just in Time) Static type Dynamic type 자바스크립트가 나올 당시에 자바가 유명해서 비슷하게 작명을 한 것으로 알고 있다 2019. 8. 4.

var let const javascript 사용하면서 var, let , const 의 차이를 정리하고 구분해서 사용하려고 합니다 var let const 1. 범위 global , function block block 2. 값변경 가능 가능 불가능 3. 재선언 가능 불가능 불가능 4. 초기값 undefined undefined 불가능 변하지 않는 값은 const 로 선언하고 부득이한 경우가 아니면 var 대신에 let 을 사용하자 1. 범위비교 function scope() { for (i=0; i < 1; i++) { var j = 10; let k = 20; const l = 30; } console.log(`var j = ${j}`); // var j = 10 console.log(`let k = ${k}`); // k.. 2019. 8. 4.

Javascript 날짜에 타임존 적용 현상 Javascript 로 코딩해서 서버리스로 배포를 하다보니 시간이 UTC 기준으로 나옵니다 원인 개발용/운영용으로 사용하는 컴퓨터의 OS 시간대역이 서울 표준시로 맞춰져 있으나 서버리스 서비스는 default 시간대가 UTC 기준으로 되어 있습니다 해결방법 Moment-timezone 라이브러리를 사용해서 Asia/Seoul 타임존으로 설정합니다 설치방법 Step 1. Package Manager 로 설치합니다 NOTE : moment-timezone 설치하면 moment 도 같이 설치 됩니다 bower install moment-timezone --save # bower npm install moment-timezone --save # npm yarn add moment-timezone # Yar.. 2019. 8. 2.

이전 1 다음

티스토리툴바