Under the Sign of Saturn

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단계의 순차적인 처리 과정을 통해 신규 유저가 입..

문제 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 코드 풀이 replace 메서드를 통해 정규식 패턴을 첫 번째 인자로 넣고, 마스킹하고자 하는 문자를 두 번째 인자로 넣어준다. ?= : lookahead. 전방 탐색을 위한 패턴이다. ?= 이 다음에 오는 문자가 일치하는 영역에서 제외된다. 또한, 전방 탐색은 하위 표현식처럼 소괄호로 감싸준다. .+(?=:) 의 경우 http://www.abc.com https://www.abc.com http://www.abc.co.kr 위..

문제 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 2개의 행렬 arr1과 arr2를 입력받아, 행렬 덧셈의 결과를 반환하는 함수, solution을 완성해주세요. 제한 조건 행렬 arr1, arr2의 행과 열의 길이는 500을 넘지 않습니다 코드 첫 번째, 두 번째 행렬이 각각 매개변수로 들어온다. 각 행렬의 같은 행, 열끼리 더해서 새로운 행렬을 리턴하는 문제이다. 중첩된 for 문을 사용해 문제를 풀었는데, map을 통해 개선한 코드를 봤다. 배열을 다룰 때는 map()을 적극적으로 활용하면 코드가 정말 깔끔해진다. map의 인수로 원소, 그리고 인덱스를 받을 수 있으니, 굳이 일반 for 문을 사용하지 않아도 된다. 문제 2020 카카오 인턴..

문제 프로그래머스 2019 KAKAO BLIND RECRUITMENT 실패율 문제 실패율은 스테이지에 도달했으나 아직 클리어하지 못한 플레이어의 수 / 스테이지에 도달한 플레이어 수로 정의한다. 전체 스테이지의 개수 N, 게임을 이용하는 사용자가 현재 멈춰있는 스테이지의 번호가 담긴 배열 stages가 매개변수로 주어질 때, 실패율이 높은 스테이지부터 내림차순으로 스테이지의 번호가 담겨있는 배열을 return 하도록 solution 함수를 완성하라. 제한 사항 스테이지의 개수 N은 1 이상 500 이하의 자연수이다. stages의 길이는 1 이상 200,000 이하이다. stages에는 1 이상 N + 1 이하의 자연수가 담겨있다. 각 자연수는 사용자가 현재 도전 중인 스테이지의 번호를 나타낸다. 단, ..

문제 상황 SVG 애니메이션 연습을 위해서 TypeScript를 적용 중인 Vue.js에 anime.js를 다운로드 받았다. 아래처럼 달 모양 SVG 그래픽을 이용해 클릭 시 가벼운 애니메이션을 추가하는 과정에서 자꾸 아래 같은 에러가 났다. Property '$anime' does not exist on type 'CombinedVueInstance

문제 단어 s의 가운데 글자를 반환하는 함수, solution을 만들어 보세요. 단어의 길이가 짝수라면 가운데 두글자를 반환하면 됩니다. 입출력의 예 "abcde" -> "c" "qwer" -> "we" 코드 풀이 % 연산자는 나눗셈 연산 후 나머지를 구한다. 2로 나누었을 때 나머지 길이가 0이라면, 주어진 단어의 길이는 짝수이다. 문자열은 읽기 전용 배열처럼 취급되기 때문에, 인덱스를 사용해 특정 위치의 문자를 추출할 수 있다. 이를 위해서 전체 문자열 길이를 2로 나눈 후, Math.floor() 함수를 적용해, 소수점 이하를 버린다. (배열의 인덱스는 항상 정수이다) 삼항 연산자를 써서 문자열 길이가 짝수인 경우에는 구한 인덱스-1 의 위치를 더한 문자열을 출력한다. 문자열을 자르는 대표적인 메소..

문제 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 a234이면 False를 리턴하고 1234라면 True를 리턴하면 됩니다. (s는 길이 1 이상, 길이 8 이하인 문자열입니다.) 코드 풀이 uiyoji-journal.tistory.com/49 [Programmers] JavaScript에서 문자열 다루기 기본 (숫자로만 이루어진 문자열 체크하기) 문제 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 a234이면 False를 리턴하고 1234라면 True를 리턴하면 됩니다. (s는 길이 1 이상, 길 uiyoji-journal.tistory.com 자바..

문제 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 a234이면 False를 리턴하고 1234라면 True를 리턴하면 됩니다. (s는 길이 1 이상, 길이 8 이하인 문자열입니다.) 코드 풀이 우선 주어진 문자열 str의 길이를 확인하는 조건을 만들고, 검사한다. 길이가 4 혹은 6일 때 문자열 str을 split() 메서드를 통해 개별 문자 하나를 원소로 하는 배열을 생성한다. 배열 메서드 중 하나인 every() 메소드는 첫 번째 인자인 조건부 함수의 테스트를 원소가 모두 통과할 시에 true를 반환하는 메소드이다. 또한, 원소 하나가 조건에 충족되지 못했을 때는 바로 함수 실행을 멈추므로, 불필요하게 순회하지 않는 장점이 ..

블로그에 글을 발행하기 전 포스트의 초안을 작성하거나, 강의를 듣는 과정에서 노트 필기를 하거나 할 때는 노션을 자주 사용한다. 쓴 노트가 많아질수록 엄청 무거워지지만 무겁고 느린 반응 속도를 감안하고서라도 노션이 제공하는 장점을 아직 버리진 못하겠다. 특히 다양한 확장자를 지원하는 코드 블럭의 경우, 코드를 작성할 일이 많은 나에게는 가장 큰 장점인데, 티스토리 블로그는 제공하는 확장자가 적어 아쉬움이 많았다. 게다가 예쁘지도 않고, 수정도 어렵다. 많은 블로그에서 이미 Github Gist를 사용해 code snippet을 올리길래 한 번 시도해봤는데, 수십 분 안에 익숙하게 쓸 수 있을 만큼 간단했다. Github 계정이 있다면 별다른 가입 절차 없이 바로 사용 가능하다. gist.github.co..

문제 주어진 문자열 입력값을 숫자로 변환 해 반환한다. 조건 1. 문자열의 길이는 1 이상 5 이하 2. 문자열의 가장 앞에는 부호(+ 또는 -)가 올 수 있다. 3. 문자열은 부호와 숫자로만 이루어져 있다. 4. 문자열은 "0"으로 시작하지 않는다. 코드 풀이 Java의 경우라면, 문자열.contains를 써서 특정 패턴이 문자열 내 있는지 검사하고 boolean 값을 반환하는 함수를 쓸 수 있지만, JavaScript에는 해당 함수가 없다. 대신, indexOf 메서드를 통해 특정 패턴을 검사하고, 해당 패턴이 존재하지 않을 경우 -1를 받는다. indexOf는 첫 번째 인자로 검사하고자 하는 패턴을 입력하고, 두 번째 인자(optional)로는 어느 범위부터 검사할지, 즉 starting point..

{{ todo.title }} todo-list 컨테이너 역할을 하는 태그가 있고, 아래에 todo-list item들이 v-for 를 도는 형태이다. 하나의 todo 아이템은 todo 타이틀 역할을 하는 태그와 버튼부 역할을 하는 태그 둘로 또 나뉘는데, 이때 상위 컴포넌트인 for 문의 에 checkDone()이라는 함수가 걸려 있다. 해당 함수는 클릭 시 상태값을 토글해주어 하위 태그의 클래스를 붙이고 떼어주는 역할을 도와주게 된다. 하지만 버튼 부는 다른 이벤트를 독립적으로 수행해야 하므로, 상위 컴포넌트의 event를 prevent 해주어야 한다. 이때에는 상위 컴포넌트의 이벤트를 fire하지 말아야 할, 독립적으로 실행되어야 하는 함수에 .stop modifier를 붙여 간단하게 손볼 수 있다..

마크다운 하위 폴더 내부 문서 경로 추가 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 ..