fffo

https://ggsno.tistory.com/ ggsno ggsno.tistory.com

요근래 디자인 패턴에 대해 많이 고민을 하고있다. 계기는 다음과 같다. 이해하기 어려운 코드 5월부터 티 플랫폼 사이트 제작에서 프론트를 맡았다. 작은 스타트업이라 프론트가 나 뿐이었다. 그래도 작년에 계셨던 프론트 개발자분이 짜신 코드가 그대로 있어서 다행이라 생각했다. 코드를 보니 다행이 아니었다. 내가 받은 코드는 페이지 단위로 비즈니스 로직과 뷰가 한데 뭉쳐있었다. 그러다보니 페이지 하나에 코드가 몇 백줄이 넘어가고, 컴포넌트 단위로 나뉜 것도 아니라서 각각의 페이지 파일이 몇 백줄이 넘어갔다. 파일의 네이밍도 무슨 파일인지 감이 잘 안잡혔다. 이해하기 쉬운 코드 결국 리팩토링보다 처음부터 다시 만드는 것이 나을 것 같아서 새로운 레포를 팠다. 이해하기 어려운 코드를 받았던 내 심정과 다른 곳에 ..

# 오늘은 컴포넌트 분리만 6시간 넘게 했다. 막상 분리된 컴포넌트는 1개 밖에 없다. 더 나은 구조를 생각하다보니 성과가 나오지 않는다. 앞으로 작업할 때는 시간을 정해두고 해야겠다. 결과물이 적어서 답답한 하루다.

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...