Under the Sign of Saturn

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용 2021/02/16 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #3 master 브랜치로 통합하기/github pages에 재배포하기 이슈 작업물의 Preview 이미지를 클릭하면 확대되는 기능을 구현했는데, 이미지를 닫고 원래 페이지로 돌아오면, 브라우저 상단으로 올라가는 이슈가 있었..

문제 1부터 입력받은 숫자 n 사이에 있는 소수의 개수를 반환하는 함수, solution을 만들어 보세요. 소수는 1과 자기 자신으로만 나누어지는 수를 의미합니다. (1은 소수가 아닙니다.) 제한 조건 n은 2이상 1000000이하의 자연수입니다. 코드 풀이 주어진 숫자가 배열 형태가 아니므로, 첫 번째로 반복문을 등장시켜서 소수를 찾기 위한 숫자 집합을 만들어준다. 1은 자연스럽게 제외가 되니 2부터 시작해 n까지 배열에 넣어준다. 이때 arr[0], arr[1]은 채워지지 않아서 undefined이 될 것이지만, 구하는 것은 소수의 개수이므로 filter 메서드를 통해서 지워나갈 수 있다. 만들어진 배열을 순회하면서 소수가 아닌 수들을 제거해줄 목적으로 0을 넣어준다. i = 2일 때, i번째에 위치..

문제 문자열 s에 나타나는 문자를 큰것부터 작은 순으로 정렬해 새로운 문자열을 리턴하는 함수, solution을 완성해주세요. s는 영문 대소문자로만 구성되어 있으며, 대문자는 소문자보다 작은 것으로 간주합니다. 제한 사항 str은 길이 1 이상인 문자열입니다. 입출력 예 ZbcdefggfedcbZ 코드 풀이 JavaScript의 sort() 메소드는 문자열의 유니코드 코드 포인트를 따른다. 유니코드에서는 대문자가 소문자보다 크므로, 주어진 문자열에 sort() 메소드를 적용하면 abcdef...ABCD... 순으로 정렬될 것이다. 이를 reverse() 메서드를 이용해 뒤집으면 ZYXW... fedcba 순으로 정렬될 것이다. 대문자가 소문자보다 작은 것으로 간주되므로 reverse() 메서드로 끝이 ..

문제 게임 화면은 1 x 1 크기의 칸들로 이루어진 N x N 크기의 정사각 격자 위쪽에는 크레인이 있고 오른쪽에는 바구니가 존재한다. 모든 인형은 1 x 1 크기의 격자 한 칸을 차지한다. 게임 사용자는 크레인을 좌우로 움직여서 멈춘 위치에서 가장 위에 있는 인형을 집어 올리고, 집어 올린 인형은 바구니에 쌓이게 되는 데, 이때 바구니의 가장 아래 칸부터 인형이 순서대로 쌓인다. 제한 사항 board 배열은 2차원 배열로 크기는 5 x 5 이상 30 x 30 이하입니다. board의 각 칸에는 0 이상 100 이하인 정수가 담겨있습니다. 0은 빈 칸을 나타냅니다. 1 ~ 100의 각 숫자는 각기 다른 인형의 모양을 의미하며 같은 숫자는 같은 모양의 인형을 나타냅니다. moves 배열의 크기는 1 이상 ..

2021/02/09 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #1 Figma 프로토타이핑/개발환경 세팅/Grommet UI Library/useState/Responsive Header 만들기 2021/02/13 - [👩‍💻/React.js] - [React.js로 만드는 Tech Blog] #2 react router 네비게이션 라이브러리 활용 Github Pages에 배포된 기존 portfolio를 대체하기 위해서 second 라는 이름의 브랜치를 생성하고, 작업이 어느 정도 끝나서 second 브랜치를 master 브랜치로 아예 덮어쓰기를 진행하기로 했다. git checkout second git merge -s ours master git checkout ..

사이드 프로젝트의 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 { ..