Under the Sign of Saturn

사이드 프로젝트의 deployment와 관련해서 헤매느라 이런 저런 실험을 하느라 커밋 이력이 정리되지 않아서 한 번에 싹 정리할 필요가 생겼다. rm -rf .git git init git add . git commit -m "git history is removed" git remote add origin myRemoteGitRepoAddress git push -u --force origin master 삭제하고자 하는 git 이력이 있는 내 저장소로 cd 한 후, rm -rf 로 git 파일을 지워준다. 새롭게 git을 초기화해주고, 현재 파일 스테이징을 위해 git add 명령어를 실행한다. push 전 커밋 메세지를 작성해주고, 새로 git remote 주소 연결을 위해 origin으로 추가해..

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 테크 블로그 기획 기존에 GIthub Pages로 배포한 github.io 블로그를 가지고 있긴 했지만, 급할 때 템플릿 가지고 와서 고쳐 쓴 게 다라 레이아웃에 제약이 커 아예 새로 제작하기로 했다. 제작하며 여 uiyoji-journal.tistory.com 랜딩 페이지로만 꾸몄다면 네비게이션은 더 손 ..

이슈 작업한 프로젝트를 github pages로 deploy하려고 npm install --save gh-pages을 실행시키고 나서 npm audit을 해보니, 몇 가지 패키지들이 사라져서 다시 npm install을 하고 나자 위 에러가 발생했다. 해결 github.com/FortAwesome/angular-fontawesome/issues/125 Argument of type 'IconPack' is not assignable to parameter of type 'IconDefinitionOrPack' · Issue #125 · FortAwesome/angular-f Describe the problem Trying to import fab icons to angular project, but c..

테크 블로그 기획 기존에 GIthub Pages로 배포한 github.io 블로그를 가지고 있긴 했지만, 급할 때 템플릿 가지고 와서 고쳐 쓴 게 다라 레이아웃에 제약이 커 아예 새로 제작하기로 했다. 제작하며 여태 안 써봤지만, 써봐야 할 것 같은 기술들을 몽땅 체험해보는 것이 목표. 새로운 테크 블로그에는 포트폴리오와 Reusme 그리고 Blog 기능까지 넣을 거라 디자인은 최대한 심플하게 하기로 했다. 계속 두고 두고 쓰게 될 웹 사이트이니 계획과 프로토타이핑에도 신경을 썼고, 어떤 기능을 최소한으로 갖출지, 어떤 부분은 앞으로 추가해서 써도 괜찮을지 등을 꼼꼼히 생각하며 디자인했다. Figma Prototyping 어쨌거나 Resume 역할을 하게 될 블로그이니 모바일로 볼 일이 더 많겠다 싶어 ..

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #3 chart.js로 todo data 시각화하기 (1) - Line Chart 2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #2 카테고리가 있는 Todo List 만들기 2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링 Pie chart는 이전 포스팅에서 다뤘던 Line chart에 비해 엄청 엄청 쉬운 편에 속해 크게 고민하지 않고 import 해준 뒤 바로 썼다. import { Vue } from "vue-property-decorator"; import { ..

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #2 카테고리가 있는 Todo List 만들기 2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링 todolist 예제의 마지막 단계는 chart.js 연습을 위해서 Pie chart와 line chart 두 개를 보여주는 Daily Report로 꾸몄다. Line chart의 경우 localStorage에 저장되는 todo 객체의 createdAt Date 객체와 완료가 될 때 생성되는 completedAt Date 객체를 기반으로 알맞은 날짜에 해당하는 todo 객체의 length에 따라 두 개의 L..

2021/02/08 - [👩‍💻/Vue.js] - [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링 [Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일 맨 처음 Vue를 접했을 때 공식 문서를 보며 만들었던 To do list 예제가 있었다. 잊고 지내다가 몇 주 전에 이 예제 위에 TypeScript나 CSS framework인 Tailwinds 등을 공부해보고 싶어서 이것저것 생각이 날 uiyoji-journal.tistory.com 위처럼 단순하게 to do 리스트를 추가하고, 편집하고, 완료하는 기능에서, 아래의 카테고리 편집 기능을 넣었다. 카테고..

맨 처음 Vue를 접했을 때 공식 문서를 보며 만들었던 To do list 예제가 있었다. 잊고 지내다가 몇 주 전에 이 예제 위에 TypeScript나 CSS framework인 Tailwinds 등을 공부해보고 싶어서 이것저것 생각이 날 때마다 실험하며 몇 개의 기능을 붙여나갔다. 그러다 Home 화면이 비어서 뭘 할지 고민하다가 JavaScript로 Date 객체를 많이 안 다뤄봐서 이 기회에 라이브러리 대신 직접 컴포넌트를 구현하면 좋을 것 같았다. 일단 달력처럼 이전 날짜로 돌아가기, 작년이나 내년 등으로 이동할 수 있도록 했다. 오늘 날짜로 되돌아오는 버튼과 올해의 특정 월로 이동할 수 있는 기능도 넣었다. 달력에 오늘 날짜를 표시해주는 마크가 붙고, to do list와 연계된 달력이니 해당..

위처럼 텍스트의 path를 따서 애니메이션 효과를 주는 예제를 만들어봤다. 프로토타이핑 툴로 잘 사용하고 있는 figma로 기본이 되는 SVG를 만들고, 간단한 자바스크립트와 CSS로 애니메이션을 만들었다. SVG 태그 생성 figma로 아무 draft나 열어서 캔버스를 만든 다음, T 아이콘을 눌러 텍스트를 생성한다. figma에서 한글은 받침을 타이핑할 때 문제가 있어서, 한국어 텍스트로 SVG 소스를 준비해야 한다면, 포토샵 등 다른 도구를 사용하는 것이 낫다. 이렇게 아무 텍스트 박스가 생성되고, 현재는 Path를 따지 않았으므로 파란색 테투리가 텍스트 박스 전체에 걸쳐 있는 것을 볼 수 있다. 여기서 우클릭 -> outline stroke를 눌러주고, 이 상태에서 오른쪽의 Design 패널의 S..

문제 신규 아이디 추천 문제. 카카오에 입사한 신입 개발자 네오는 카카오계정개발팀에 배치되어, 카카오 서비스에 가입하는 유저들의 아이디를 생성하는 업무를 담당하게 되었습니다. 네오에게 주어진 첫 업무는 새로 가입하는 유저들이 카카오 아이디 규칙에 맞지 않는 아이디를 입력했을 때, 입력된 아이디와 유사하면서 규칙에 맞는 아이디를 추천해주는 프로그램을 개발하는 것입니다. 다음은 카카오 아이디의 규칙입니다. 아이디의 길이는 3자 이상 15자 이하여야 합니다. 아이디는 알파벳 소문자, 숫자, 빼기(-), 밑줄(_), 마침표(.) 문자만 사용할 수 있습니다. 단, 마침표(.)는 처음과 끝에 사용할 수 없으며 또한 연속으로 사용할 수 없습니다. 네오는 다음과 같이 7단계의 순차적인 처리 과정을 통해 신규 유저가 입..