저의 개인적인 기준의 이야기, 틀린 내용이 무조건 존재할 수 있습니다. (댓글을 통하여 알려주세요)

레이아웃

레이아웃은 현재 grid, flex 두 종류로 보통 구현한다. 이전에는 float을 활용하여 많이 짜긴했지만 큰틀은 이 두가지 종류를 통해 구현하는 것이 빠르고 유지보수가 쉽다.

그렇다면 무엇을 사용할까? 차이점이 무엇일까? 라고 생각이 들 것이다. 간단히 설명하면 flex는 width만 고려한 레이아웃이고, grid는 화면의 width, height을 고려한 레이아웃이다.

:book: Quick Start Typescript 을 읽고, 간단히 몰랐던 부분이나 중요하다고 생각되는 부분을 작성했습니다.

Typescript 학습하는 목적으로 이해도가 높지 못해, 작성시 참고한 링크를 작성했습니다.

📝p39. package.json

프론트엔드에서 가장 먼저 살펴보는 파일

목적

이번 프로젝트에서 체감 성능은 느리지 않지만, Audit - Performance 가 좋지 않았다.

체감상으로 작업 기준을 맞추기는 힘드므로, Performance의 수치 중 하나가 일정 이상일까지는 성능 최적화를 하기로 결심했다.

쿠팡에서는 TTI가 2초를 넘기지 않게 노력한다고 한다. 그래서 나도 TTI 2초 미만으로 떨어질 때까지 최적화를 해보기로 결심했다.

진행사항

node_modules 제거 후, 재설치

고려사항

목적

Keycloak을 사용한 Client 관점의 로그인 구현 개발 일지

개인 학습 용도로, 틀린 요소가 있을 수 있음 참고 링크

백엔드 설치

그래도 백엔드가 없으면, Client에서 되는지 안되는지 모르므로 간단하게 도커를 이용해 환경설정을 해준다.

1

docker pull jboss/keycloak

기능 설명

Typora - Winodow 버전에 신기능이 업데이트됬다. 이전부터 Mac은 있던 기능인데 Window만 없었다.
이미지를 삽입시, 자동으로 웹 서버에 올려주고 링크를 연결해주는 기능이다.

Typora에서 사용 영상(GIF)

설정법

1. Typora 메뉴 서식 - 이미지 - 전역 이미지 설정 으로 들어가기

아래 Image Upload Setting 부분이 새로 추가된 기능 메뉴이다.

현재는 이미 셋팅된 상태이지만, 하기 전에는 Install 버튼을 따로 눌러 설치를 해야한다.

이 문서는 “타입스크립트, AWS 서버리스로 들어올리다” 책을 기반으로 작성되었습니다.

개요

vuex는 vue 애플리케이션 상태관리 패턴 라이브러리이다.

부모 <> 자식 간 컴포넌트 통신(props, emit)으로, 모든 것을 처리하기에는 힘들기 때문에 만들어졌다.

VS Code에서 서버 내 파일 작업하기

요약

1. VSCODE에서 플러그인 Remote Vscode 설치
2. 연결할 서버에 서버용 모듈 설치
3. ssh 커맨더 명령어 입력 후 연결
4. rmate 명령어 사용

Vue Router

Install

CDN 또는 npm install을 통해 설치

CDN

1
2

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

NPM

1

npm install vue-router

구조

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

📦vue-pwa-tree
 ┣ 📂docker # Ngnix 환경에서 돌려질 도커 이미지 환경설정
 ┣ 📂public # '/' 경로
 ┃ ┣ 📂img
 ┃ ┃ ┗ 📂icons # PWA Icon 폴더
 ┃ ┣ 📜index.html # 시작 파일
 ┣ 📂src # 작업 폴더
 ┃ ┣ 📂assets # 리소스
 ┃ ┣ 📂components # 공용 컴포넌트
 ┃ ┣ 📂router # 라우터
 ┃ ┣ 📂store # 상태관리
 ┃ ┣ 📂views # 페이지
 ┃ ┣ 📜App.vue # 시작 파일
 ┃ ┣ 📜main.ts # 메인
 ┃ ┣ 📜registerServiceWorker.ts # 서비스워커
 ┃ ┣ 📜shims-tsx.d.ts # ?
 ┃ ┗ 📜shims-vue.d.ts # ?
 ┣ 📂tests # 테스트 코드
 ┃ ┣ 📂e2e # e2e
 ┃ ┗ 📂unit # 유닛 테스트
 ┣ 📜.dockerignore
 ┣ 📜.gitignore
 ┣ 📜babel.config.js
 ┣ 📜cypress.json
 ┣ 📜devspace.yaml
 ┣ 📜Dockerfile
 ┣ 📜Jenkinsfile
 ┣ 📜package-lock.json
 ┣ 📜package.json
 ┣ 📜README.md
 ┗ 📜tsconfig.json # 이건 좀 봐두자

흐름

책 읽고 도움될만한 것 정리

타입스크립트 Bash 명령어

1
2
3
4
5
6
7
8

# 설치
npm i -g typescript
# 컴파일
tsc helloworld.ts
# ts 컴파일 없이, 바로 실행 패키지 설치(ts-node)
npm i -g ts-node
# ts-node 실행
ts-node helloworld.ts