post-thumbnail

자바스크립트 최신 문법 살펴보기 (ES7-ES13)

Ecma 2015(ES6) 이후 자바스크립트 기능들을 소개합니다.

2022년 2월 21일
·
0개의 댓글
·
post-thumbnail

웹 성능 최적화 강의 Part.2 요약 2

프론트엔드 개발자를 위한, 실전 웹 성능 최적화 Part.2 (인프런)인프런 동영상 강의 내용을 요약 정리하면서 추가적으로 참고한 내용을 덧붙였습니다.

2022년 2월 7일
·
0개의 댓글
·
post-thumbnail

웹 성능 최적화 강의 Part.2 요약 1

프론트엔드 개발자를 위한, 실전 웹 성능 최적화 Part.2 (인프런) 인프런 동영상 강의 내용을 요약 정리하면서 추가적으로 참고한 내용을 덧붙였습니다.

2022년 2월 7일
·
0개의 댓글
·
post-thumbnail

웹 성능 최적화 강의 Part.1 요약

프론트엔드 개발자를 위한, 실전 웹 성능 최적화 Part. 1 내용 요약 (인프런)인프런 동영상 강의 내용을 요약 정리하면서 추가적으로 공부한 내용을 덧붙였습니다.

2022년 2월 4일
·
0개의 댓글
·
post-thumbnail

Vue 프로젝트를 단일 HTML 파일로 빌드하기

Vue3를 이용하여 작성하였는데, vue.config 사용방식은 동일하여 Vue2에도 적용이 가능합니다.vue-router 이전버전에서는 router mode를 hash로 변경해야 합니다.어쩌다가 가벼운(?) 어드민을 만들었는데, 하나의 HTML 파일로 번들링을 하게되

2020년 12월 16일
·
0개의 댓글
·
post-thumbnail

Webpack 코드 스플리팅 사용 안하는 방법 (splitChunks)

아래 내용은 Vue.config.js에 웹팩 설정을 적용한 내용이지만,단순히 웹팩 기능을 사용하지 않는 코드라서 다른 환경에도 적용이 가능할 것 같습니다.또는

2020년 12월 12일
·
0개의 댓글
·
post-thumbnail

Nuxt.js 프로젝트에서 Sentry 이슈 디버깅

Sentry 이슈를 쉽게 디버깅하기 위해서는 소스맵을 사용해야 합니다.소스맵에 대한 설명은 subicura님의 크롬 개발자 도구를 이용한 자바스크립트 디버깅 글에 자세히 설명되어 있습니다.프로젝트 빌드시 소스맵을 생성 환경을 구성하면, 산출된 .js파일에 소스맵파일과

2020년 9월 24일
·
0개의 댓글
·
post-thumbnail

Vue.js 3 Composition API

Vue.js 3 진행상황 암스테르담 Vue.js 컨퍼런스에서 1Q 말에 출시할 예정이고, 2Q 말에 최종 버전을 발표할 예정이라고 발표했습니다. 중요한 변경 사항 Composition API Portals Fragments v-model API Suspense Typ

2020년 3월 24일
·
0개의 댓글
·
post-thumbnail

gRPC-web 삽질기

Javascript 기반으로 브라우저에서 gRPC를 사용하려고 하였지만, 적용하지 못한 내용에 대한 기록입니다.gRPC에 대해서 간략히 설명하고 gRPC 라이브러리를 이용하여 node.js 기반의 Application을 만드는 과정,그리고 브라우저와 back-end 사

2020년 3월 11일
·
4개의 댓글
·
post-thumbnail

Stylelint 설정하기

VSCode에서 Stylelint를 설정하는 방법을 설명합니다.

2020년 3월 2일
·
0개의 댓글
·
post-thumbnail

ESLint 와 Prettier 적용

VSCode에서 prettier와 eslint 같이 사용하는 경우, 충돌이 발생하는 부분이 있습니다.VSCode에서 파일 저장시 자동포맷팅(formatOnSave) 기능을 활성화 하면,Prettier와 ESLint 모두 코드 포맷을 수정하기 때문에, 상충되는 설정을

2020년 3월 2일
·
0개의 댓글
·
post-thumbnail

ESLint 와 Prettier 적용

이 문서에서 사용하는 Prettier 버전은 1.19.1 입니다. (2020.03.02)Prettier는 코드를 읽어들여서 사용자 옵션에 따라 코드를 다시 포맷팅하는 코드 포맷터 입니다.코드 스타일에 초점을 맞추고 있기 때문에, 코드 품질을 위해 사용하는 ESLint와

2020년 3월 2일
·
0개의 댓글
·
post-thumbnail

ESLint 와 TSLint

⚠️ TSLint is deprecated.2019년에 TSLint 팀은 더이상 TSLint를 지원하지 않기로 결정했습니다. 그 이유는 ESLint가 존재하기 때문에 동일한 의도의 목적으로 프로젝트간에 많은 중복코드가 있었기 때문입니다. TSLint 팀은 ESLint의

2020년 3월 1일
·
0개의 댓글
·
post-thumbnail

ESLint 설정 살펴보기

ESLint 설정을 위한 config에 대해서 살펴봅니다. ESLint Configuration은 eslintrc.* 파일 또는 package.json의eslintConfig 필드에 작성할 수 있습니다. ESLint의 핵심 구성 정보는 세가지 영역으로 나누어져 구성

2020년 3월 1일
·
0개의 댓글
·
post-thumbnail

ESLint 소개

React와 Vue를 사용하면서 cli를 통해 프로젝트를 생성하면 자동으로 eslint 설정이 만들어지는데, 늘 궁금했지만 귀찮아서 모르는척 지나친 날이 많았습니다. 코로나 때문에 강제 재택근무를 하게되어 남는시간에 eslint에 대해서 조금(?) 파헤쳐볼 생각으로 이

2020년 3월 1일
·
0개의 댓글
·
post-thumbnail

React S2 - 리액트 프로젝트 시작하기

스터디 모임에서 사용한 자료입니다.실전 리액트 프로그래밍 - 1장 리액트 프로젝트 시작하기리액트란 무엇인가함수형 프로그래밍오늘날의 자바스크립트 (2017년)바벨, 웹팩은 필요에 따라 학습하고 create-react-app을 사용하는 것을 추천.npx란create-rea

2020년 2월 10일
·
0개의 댓글
·

[TIL] AWS 웹 사이트 호스팅 요약

1) 도메인 생성 (Route53) - 구매한 도메인에 대한 레코드 세트 생성 (AWS에서 도메인 구매시 자동생성됨) 2) S3 버킷 생성 및 정적 웹사이트 파일 업로드 - 웹 호스팅 설정 3) CloudFront Distribution 생성 - 도메인에 대한 인증서 생성 (AWS Certificate Manager) 4) Route53에서 Clou...

2020년 2월 6일
·
0개의 댓글
·

[TIL] X.509

X.509 x.509는 PKI에서 사용하는 표준 인증서 형식이다. PKI에서 사용하는 공개키, 개인키 같은 비대칭키를 X.509 인증서로 관리한다. X.509 인증서는 외부 CA 기관에서 승인과정을 통해 발행된다. 현재 확장기능이 포함된 v3가 발표되었으며, IETF에 의해 인터넷 표준 인증서 형식으로 사용되고 있다. X.509 v3 인증서 형식...

2020년 2월 2일
·
0개의 댓글
·
post-thumbnail

Vue 번들 크기 줄이기

Vue 번들 크기 줄이기 번들링 도구를 사용하여 자바스크립트를 번들링하는 경우, 모든 내용이 하나로 합쳐진 큰 파일이 생성되게 됩니다. 브라우저에서 하나의 큰 파일을 로딩하는 경우에는 많은 초기 로딩 시간이 소요될 수 있습니다. 아래에서는 자바스크립트 번들 크기를 줄이는 방법 몇 가지를 간략히 설명합니다. 이 글은 Vue + Webpack4 기준으로 작...

2019년 10월 7일
·
0개의 댓글
·

Vue 렌더링 성능 개선하기

Vue 성능 개선하기 함수형 컴포넌트(Functional Component) 사용하기 함수형 컴포넌트는 Dumb(멍청한, 바보같은) 컴포넌트 또는 Stateless (상태 없는) 컴포넌트로 불리며,data와 lifecycle을 가지지 않은 컴포넌트를 지칭합니다. 기

2019년 9월 2일
·
2개의 댓글
·