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

문제 행렬의 덧셈은 행과 열의 크기가 같은 두 행렬의 같은 행, 같은 열의 값을 서로 더한 결과가 됩니다. 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 이하의 자연수가 담겨있다. 각 자연수는 사용자가 현재 도전 중인 스테이지의 번호를 나타낸다. 단, ..

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

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

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