fffo

1. SCSS(SASS)란? css의 전처리기. css를 보다 효율적으로 작성할 수 있게 문법이 개선된 방법으로, 작성 후 css로의 변환이 필요함 1.1. css로 변환 nodejs의 sass패키지 이용 npm install -g sass sass [target] [source] 예시 : sass -w style.css scss/style.scss -w 옵션을 통해 소스파일의 변화를 감지해서 실시간 변환 가능 gulp 등의 taskrunner를 통해 자동화 가능 2. 문법 기본적인 문법은 css와 동일하고 추가적인 문법 존재 2.1. nesting 부모자식 관계에 따라 nesting이 가능 nest 안에서 &로 nesting하고 있는 셀렉터를 치환 가능 &로 치환되는 셀렉터는 문자만 치환되기 때문에 뒤..

연습 기능개발 https://programmers.co.kr/learn/courses/30/lessons/42586?language=javascript function solution(progresses, speeds) { const result = []; let day = 1; progresses.forEach((progress, i) => { if (100 ({priority, index})); let count = 0; while (count toPrint.priority < doc.priority)) documents.push(toPrint); el..

접근 sort 프로토타입 메서드 활용 표준 빌트인 객체인 Array의 프로토타입 메서드 sort의 사용법을 정확히 숙지 Array를 프로토타입상속 받은 객체만 사용할 수 있음에 유의 EcmaScript 2019 이후부터 sort되지 않는 요소를 그대로 두는 sort stability를 보장해줌 연습 [Lv. 1] k번째 수 코딩테스트 연습 - K번째수 [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3] programmers.co.kr function solution(array, commands) { return commands.map(([i, j, k]) => array.slice(i - 1, j) .sort((a, b) => a - b)..

접근 hash map 해시맵 만들 때 value에 또 다른 해시맵이 들어갈 때 빈 객체 초기화 과정이 필요 순회할 때는 표준 빌트인 객체인 Object 객체의 정적 메서드 keys, values, entries를 적절히 활용 연습 [Lv. 1] 완주하지 못한 선수 코딩테스트 연습 - 완주하지 못한 선수 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수 programmers.co.kr function solution(participant, completion) { const completeCountList = participant.reduce((list, name..

새로고침에도 task가 유지되게 백엔드는 크게 신경 쓰지 않고 task가 유지되게 진행하려고 한다. 가장 간단한 방법이 웹 스토리지에 task의 리스트를 저장하는 방법인 것 같았다. task를 초기에 생성할 때와 변경될 때마다 스토리지를 새로 저장하는 방법으로 구현했다. 이러면 하나가 변경될 때마다 리스트 전체를 새로 덮어 씌워야 하는 한계가 있을 것이다. 지금 생각난 건데 리스트 전체를 하나의 키로 저장했을 때 이런 문제가 발생한거고 @하나의 task당 하나의 키를 사용한다면 이 문제를 해결 할 수 있을 것 같다. 내일 시도해봐야겠다. @task가 변경되는 곳곳에 로컬스토리지에 리스트를 갱신하는 코드를 넣으니 코드가 매우 산만해졌다. 좀 더 단순한 구조를 고민해봐야겠다. // taskControler...

task의 id 생성 task라는 자료를 어떻게 구조화할 지 고민했다. task에서 필요한 자료는 내용과 id였다. id 생성은 task들을 담는 list에 list에 들어간 task들의 개수를 따로 저장해서 개수를 id로 삼았다. @task가 삭제되었을 때 따로 처리를 하지 않고 id 값이 계속 증가하기만 하는 로직이라 한계가 명확하다. 시간 날 때 고쳐야겠다. // 무족권 증가시켜 벌이기 function getId(taskList) { return (taskList.taskCount++); } task list와 taskDOM task들의 정보를 담는 list는 처음엔 array로 만들었다. 그런데 어차피 task 접근은 id값으로 하기 때문에 각각의 id 값을 key로 하는 object로 만들었다...

오랜만의 자바스크립트라서 몸 풀기 느낌으로 목표를 정했다. 넉넉잡아 3시간을 잡았고 시작했다. task 추가 버튼을 눌렀을 때 새로운 task가 뜨도록 만드는 게 목표였다. 최대한 함수를 분리하고 가독성 좋은 코드를 만드는 것에 노력했다. 에러 상황 Uncaught SyntaxError: Cannot use import statement outside a module 원인 함수를 분리할 때 require 대신 import를 사용해서 나는 에러였다. 아무런 설정을 하지 않았을 때 기본적으로 사용되는 모듈은 require을 사용하는 commonjs 방식이다. 해결 html 내의 script태그의 속성으로 type = “module”으로 줘서 해결할 수 있었다. 이 때 주의해야할 점은 type = “modul..

Google Calendar Advanced 내가 좋아하는 앱인 구글 캘린더를 클론코딩 해보고 싶어서 만든다. 클론코딩 후에는 내가 원하는 기능을 이것 저것 추가할 계획이다. 그 중 하나가 간트차트를 캘린더에 연동하는 것이다. 궁극적 목표는 위와 같고, 일단 작은 목표는 2월까지 구글 캘린더 앱 안에있는 tasks 앱을 구현하는 것이다. todo list 느낌의 앱이라 간단할 것이다. 마감을 정하는 개인 프로젝트 혼자 프로젝트를 하다 보니 한 없이 늘어지는 경우가 많다. 그리고 42서울을 하면서 느낀 건데 나는 메타인지 능력이 매우 떨어지는 것 같다. 오늘 끝내야 할 목표를 터무니없이 많게 잡거나 아니면 목표 없이 그냥 되는 대로 하다 보니 효율이 떨어지는 것 같다. 그래서 간트 차트를 이용해 내가 어느..