Under the Sign of Saturn

마크다운 하위 폴더 내부 문서 경로 추가 TIL 라는 이름의 repository에 종종 공부하는 분야별로 폴더를 파서 내용을 업데이트하다가 오늘 하위 폴더에 개별 markdown 문서를 추가할 일이 있었다. 프로젝트 root에 위치한 README.md에 해당 폴더 내부의 md 문서를 링크 걸어주어야 해서 아래처럼 작성해줬다. ## 📖 Self-study Chapters // H1 ### db-modeling // H2 ### python-weeks // H3 ### ts-first-project // H3 - [TypeScript 101](ts-first-project/doc/TypeScript_101.md) (updated 2021-01-11) // [참조 링크의 이름](하위 폴더명 / [하위 폴더명 ..

맨 처음 자바스크립트를 배울 때 개념만 한 번 훑고 지나갔던 TypeScript를 다시 해보고 싶어서 오늘 기초 강의들을 쭉 살펴봤다. Java를 하고 온 다음에 TypeScript를 접하니 아무래도 이해하기가 더 쉬웠다. 예제 중 객체지향 프로그래밍과 클래스를 소개하는 챕터에서 난데없이 ts2564 에러, "Property 'fullName' has no initializer and is not definitely assigned in the constructor"를 만났다. 현재 tsc -v 명령어로 살펴본 현재 Version은 4.1.3이고, 이곳을 참고해보니, 2.7.2에부터 도입된 strict class checking으로 인한 오류라고 나와 있었다. 두 가지 방법으로 해결 가능한데, class..

반응형 레이아웃을 제작할 때, grid-template-columns의 repeat() 함수의 두 속성값 auto-fill과 auto-fit의 차이점. repeat() 함수 만일, 칼럼 12개를 반복한다고 하면, 우리는 명시적으로 repeat() 함수안에 그 값을 적어줄 수 있다. .grid { display: grid; /* define the number of grid columns */ grid-template-columns: repeat(12, 1fr); column-gap: 12px; row-gap: 8px; } 이 가로 단 안에서 칼럼 12개가 미리 지정해준 row-gap, column-gap 값을 유지하며 정렬되어 있다. 브라우저에게 각 row에 컬럼 12개를 정렬하라고 했으므로, 화면 크기..

각 단위를 잘 모르고 px만 주구장창 쓰다가, 생각난 김에 정리할 필요가 있어서, 이런 저런 강의들 모아 보고, 기록으로 남겨봤다. 요약하자면, px은 고정된 값, 비율을 반영하지 못하니 주의가 필요하다. em은 텍스트와 관련이 높은데, 어떤 디자인이 텍스트를 기준으로 삼을 경우 '그 비율을 계산해야 할 필요성이 있을 때 유용'한 단위. rem은 em의 한계를 극복하기 위해 나온 단위로, root인 의 기본 font-size만을 기준으로 계산할 수 있게 도와준다. em(엠)의 어원 - 과거 금속 활자를 찍던 시절, 폰트들의 기준점이 될 하나의 폰트 규격은 알파벳 대문자 M이 맡았다. M이 가장 폭이 넓고, 네모 형태를 띄었으므로, M을 담을 컨테이너는 마찬가지로 다른 알파벳들을 모두 담을 수 있었다. 이..

인터랙티브 웹 기술 관련 비주얼 아티클 강의를 듣고 알게 된 CSS 속성 중 하나인 will-change. 적재적소에 제한적으로 사용했을 때 성능을 올려줄 수 있는 속성이다. 앞으로 일어날 속성 변화를 미리 브라우저에 알려 브라우저가 최적화할 수 있도록 준비시키는 속성이므로, 성능 비용이 클 경우 제한적으로 썼을 때 효과가 크다고 한다. 이미 브라우저는 성능 최적화를 위해 가능한 한 모든 것을 시도 중이므로, 과하게 쓸 경우 오히려 반대 효과가 날 수 있으니 너무 많이 will-change를 쓰지 말 것. 마지막 수단으로 쓰라고 조언이 나와 있다. 21년 1월 확인했을 때, IE 지원이 안 된다고 나와 있다. 참고 developer.mozilla.org/ko/docs/Web/CSS/will-change ..

firebase.firestore() .collection("firstCollection").doc("firstDoc") .collection("secondCollection").add(dataToAdd); // firebase.js // .. export const dbService = firebase.firestore(); export const bookRecordRef = dbService.collection("bookRecord"); 이전 포스트에서 Vue.js 프로젝트에서 firebase를 연결해 간단한 데이터를 저장하는 방법을 다뤘는데, 오늘은 거기에 이어 계층적 구조화를 조금 더 다뤄보려고 한다. 간단한 book tracker web app을 만드는 중인데, 아래 이미지처럼 bookRecor..

vue 프로젝트에서 font-awesome을 쓰기. $ yarn add -D @fortawesome/fontawesome-svg-core $ yarn add -D @fortawesome/free-solid-svg-icons (optional) $ yarn add -D @fortawesome/free-brands-svg-icons (optional) $ yarn add -D @fortawesome/vue-fontawesome optional이 아닌 첫 번째, 네 번째는 필수로 다운받아준다. 나는 소셜 로그인을 위한 버튼을 만들 때 들어갈 github, google icon을 쓰기 위해 세 번째 free-brands-svg-icons를 먼저 받아주었다. 받고자 하는 아이콘이 어떤 카테고리에 있는지는, sol..

이전 프로젝트에서 Vue.js에서 컴포넌트 간의 데이터 변경을 다룰 때 event bus 등으로만 관리했을 때 컴포넌트끼리의 관계성을 파악하기 어려웠다. 사이즈가 큰 앱을 다룰 때는 그래서 Vuex를 많이 쓰는데, 처음 Vuex를 접했을 때 많이 헷갈렸어서, 한 번 정리를 쭉 해봤다. Vuex는 핵심인 state, mutations, actions를 이해하는 게 중요한데, state는 vuex라는 공통 중앙 저장소가 가지는, 모든 컴포넌트가 공유하는 data다. 이 state라는 data는 모든 컴포넌트 간에 공유되는 속성이기 때문에 this.$store.state.sampleState 식으로 접근이 가능하다. 하지만, 컴포넌트끼리 모두 공유가 된다는 속성 때문에, 직접적으로 이렇게 접근해 상태를 바꾸는..

간단한 책 정보와 리뷰를 등록하는 웹앱을 Vue와 Element UI 프레임워크, 그리고 Firebase를 이용해 만들고 있다. 이곳을 참고할 수 있다. 생성하고자 하는 폴더 경로에서 node prompt를 열고 아래 명령어를 입력한다. vue create [vue-project-name] Vue CLI v4.x 부터는 almost-full 옵션이 생긴 모양이다. 이번에 하면서 처음 봤다. 손쉽게 필요한 기능들이 다 있어서, 해당 옵션으로 진행했다. 그리고 element UI 프레임워크를 쓰기 위해 아래 명령어를 써줬다. 문서는 이곳 npm i element-ui -S 그러다가 일 하면서 기본 템플릿으로 썼던 vue-admin-template을 이용하려고 해당 프로젝트는 지우고, 이곳에서 git clon..

기존 git 이력을 삭제하려고 git을 초기화(initialize)한 뒤에 발생한 에러. git remote -v 로 현재 원격 저장소 상태를 확인하고, 반영이 잘 된 것을 확인하고, 아래 명령어를 실행했다. git push -u origin main 그후에 이것저것 시도하면서 아래 두 에러 메세지가 번갈아가면서 출력됐다. fatal: The current branch master has no upstream branch. To push the current branch and set the remote as upstream, use git push --set-upstream origin master error: src refspec main does not match any error: failed t..