분류 전체보기
![[프로그래머스] 주차요금 계산 (2022 KAKAO BLIND RECRUITMENT)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FdcyjIw%2FbtrBhRnHqvW%2FAAAAAAAAAAAAAAAAAAAAAAZH9CFkIZeoMFFX7YTINmRiv83kT0NyX1e6KMLYbFI-%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1764514799%26allow_ip%3D%26allow_referer%3D%26signature%3D8KmqxUsge%252BfKBezj%252FPH2xsdUDqQ%253D)
[프로그래머스] 주차요금 계산 (2022 KAKAO BLIND RECRUITMENT)
주차요금 계산 https://programmers.co.kr/learn/courses/30/lessons/92341?language=javascript 코딩테스트 연습 - 주차 요금 계산 [180, 5000, 10, 600] ["05:34 5961 IN", "06:00 0000 IN", "06:34 0000 OUT", "07:59 5961 OUT", "07:59 0148 IN", "18:59 0000 IN", "19:09 0148 OUT", "22:59 5961 IN", "23:00 5961 OUT"] [14600, 34400, 5000] programmers.co.kr 풀이 function solution(fees, records) { const getTimeByMinute = time => { if(..
Toast UI Editor 이미지 첨부하기
Toast 에디터는 따로 설정해주지 않아도 에디터에 이미지를 첨부할 수 있다. 기본적으로 이미지 파일을 첨부하면 이미지가 base64로 인코딩 되어 삽입되는데, 그 길이가 매우 매우 상당하기 때문에 base64로 인코딩 된 이미지 그대로 DB에 넣어준다면 문제를 초래시킨다. 위처럼 이미지 하나를 첨부한 뒤, getHTML()을 통해 contents를 살펴보면, 엄청난 양의 텍스트가 들어있는것을 볼 수 있다. (너무 길어 콘솔에도 다 찍히지 않는다😳) 그러므로 우리는 이미지 첨부시 로직을 바꿔줄 필요가 있다. addImageBlobHook을 사용하자 이미지 첨부 로직은 hooks 옵션의 addImageBlobHook 를 통해서 커스텀할 수 있다. 잠깐 구조를 살펴보면 export type HookMap =..
React 에디터로 TOAST UI Editor 사용해보기
프로젝트에 쓸 에디터 선정에 많은 고민을 했다. React 사용자들이 주로 사용하는 에디터를 조사해서 몇 가지로 추려내었다. 에디터 선정을 위한 기준은 다음과 같았다. 직관적인 UI 사용자가 개발자가 아니기 때문에 마크다운에 치중하지않은 wysiwyg 에디터가 필요했다. 주 사용언어는 한글이다. 따라서 한글에 맞춤화된 에디터가 필요했으며, 메뉴 설명 또한 한글로 되어있어야 했다. 표 첨부, 사진 첨부 기능이 있어야 했다. react-quill, summernote, Slate 등의 많은 에디터를 살펴봤고, 결론적으로 NHN사에서 제공하는 Toast Editor를 사용하기로 했다. 설치🛠 react에서 사용하기 때문에 리엑트 버전을 설치한다. toast-ui/react-editor npm i @toast-..
클린 코드(Clean code) Day 9
🔖 오늘 읽은 범위 : 10장 클래스 🙂 책에서 기억하고 싶은 내용을 써보세요. 클래스는 작아야 한다. 클래스 이름은 해당 클래스 책임을 기술해야 한다. 간결한 이름이 떠오르지 않는다면 클래스 크기가 너무 커서 그렇다. 클래스 이름이 모호하다면 책임이 너무 많아서이다. → 단일 책임 원칙 (Single Responsibility Principle) 단일 책임 원칙은 클래스나 모듈을 변경할 이유가 하나, 단 하나뿐이어야 한다는 원칙이다. 클래스는 변경하기 쉬워야 한다. 요구사항은 변하기 마련이다. 따라서 코드도 변하기 마련이다. 새 기능을 수정하거나 기존 기능을 변경할 때 건드릴 코드가 최소인 시스템 구조가 바람직하다. 이상적인 시스템이라면 새 기능을 추가할 때 시스템을 확장할 뿐 기존 코드를 변경하지는 ..
클린 코드(Clean code) Day 8
🔖 오늘 읽은 범위 : 9장 단위 테스트 🙂 책에서 기억하고 싶은 내용을 써보세요. 테스트는 유연성, 유지보수성, 재사용성을 제공한다. 테스트 케이스가 없다면 모든 변경이 잠정적인 버그다. ✔️ 깨끗한 테스트를 위한 다섯 가지 규칙 Fast🏃🏼 테스트는 빨리 돌아야 한다. 테스트가 느리면 자주 돌릴 엄두를 못 내고, 자주 돌리지 않으면 초반에 문제를 찾아내 고치지 못한다. Independent🧍🏼♂️ 각 테스트는 서로 의존하면 안 된다. 각 테스트는 독립적으로 실행할 수 있어야 하며 순서에 영향을 받지 말아야 한다. 서로에게 의존하면 결함이 발생한 원인을 찾기 힘들며 때로는 숨겨진다. Repeatable 🔄 어떤 환경에서도 반복 가능해야 한다. 실제 환경, QA환경, 네트워크에 연결되지 않은 환경에서도..
클린 코드(Clean code) Day 7
🔖 오늘 읽은 범위 : 7장 오류처리 🙂 책에서 기억하고 싶은 내용을 써보세요. 일일히 다양한 유형의 오류를 점검하는 방식 보다는 오류 발생시 예외를 던지자. Try-Catch-Finally 문을 사용하자. 먼저 강제로 예외를 일으키는 테스트 케이스를 작성한 후 테스트를 통과하게 코드를 작성하는 방법을 권장한다. 그러면 자연스럽게 try 블록의 트랜잭션 범위부터 구현하게 되므로 범위 내에서 트랜잭션 본질을 유지하기 쉬워진다. null을 반환하는것을 피하자. 사용하려는 외부 API가 null을 반환한다면 *감싸기 메서드를 구현해 예외를 던지거나 특수 사례 객체를 반환하는 방식을 고려한다. *감싸기 메서드 자바에서는 다양한 유형의 에러가 발생한다. 이 모든 유형의 에러를 잡기위해서는 catch문이 늘어나게된..
클린 코드(Clean code) Day 6
🔖오늘 읽은 범위 : 6장 객체와 자료구조 🙂 책에서 기억하고 싶은 내용을 써보세요. 객체는 추상화 뒤로 자료를 숨긴 채 자료를 다루는 함수만 공개한다. 자료 구조는 자료를 그대로 공개하며 별다른 함수는 제공하지 않는다. 어떤 시스템을 구현할때 , 새로운 자료타입을 추가하는 유연성이 필요하면 객체가 더 적합하다. 다른경우로 새로운 동작을 추가하는 유연성이 필요하면 자료구조와 절차적인 코드가 더 적합하다. 🤔 오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요. Javascript를 주언어로 사용하면서 객체와 자료구조를 명확하게 구분하여 사용해야겠다는 생각을 해본적이 없었다. 책의 예시를 통해 객체의 이점과 자료구조의 이점을 이해할 수 있었지만, 정말 일차원적인 이해일뿐 이 지식을 실제로 어떤식으로 적용..
클린 코드(Clean code) Day 5
🔖오늘 읽은 범위 : 5장 코드 형식 🙂 책에서 기억하고 싶은 내용을 써보세요. 코드 형식은 의사소통의 일환이다. 1. 하나의 파일에 200줄 이하, 한 줄에 코드는 120자가 적당하다. 2. 개념은 빈 행으로 분리하자. 생각 사이는 빈 행을 넣어 분리해야 마땅하다. 빈 행은 새로운 개념을 시작한다는 시각적 단서다. 3. 서로 밀접한 개념은 가까이 두자. 변수는 사용하는 위치에 최대한 가까이 선언하기. 한 함수가 다른 함수를 호출한다면 두 함수를 가까이, 가능하다면 호출하는 함수를 먼저 배치 ( 자연스럽게 고차원에서 저차원으로 내려가는 코드 구조가 된다. 하지만 javascript로 코딩 시 보통 함수 표현식을 많이 사용하기 때문에 호출하는 함수를 먼저 배치하는 것이 불가능하지. ) 유사한 개념을 가진 ..
클린 코드(Clean code) Day 4
🔖오늘 읽은 범위 : 4장 주석 🙂 책에서 기억하고 싶은 내용을 써보세요. 우리는 코드로 의도를 표현하지 못해, 그러니까 실패를 만회하기 위해 주석을 사용한다. 함수나 변수로 표현할 수 있다면 주석을 달지 말자. // 작원에게 복지 혜택을 받을 자격이 있는지 검사 if(employee.flags && employee.age > 65) 위의 코드는 충분히 주석 없이도 표현이 가능하다. if(employee.isEligibleForFullBenefits()) 이렇게. 그럼에도 괜찮은 주석 정보를 제공하는 주석 // HH:mm:ss, MM dd, yyyy 형식 Pattern timeMatcher = Pattern.compile( "\\d*:\\d*:\\d*, \\w* \\d*, \\d*"); 의도를 설명하는 ..
클린 코드(Clean code) Day 3
🔖오늘 읽은 범위 : 3장 함수 🙂 책에서 기억하고 싶은 내용을 써보세요. 1. 함수는 작으면 작을수록 좋다. 각 함수가 이야기 하나를 표현하도록 하자. 중첩 구조가 생길 만큼 함수가 커져서는 안 된다. 2. 함수는 한 가지를 해야 한다. 그 한 가지를 잘 해야 한다. 그 한가지만을 해야한다. 어쨌거나 우리가 함수를 만드는 이유는 큰 개념을 다음 추상화 수준에서 여러 단계로 나눠 수행하기 위해서가 아니던가. ❗️함수가 '한 가지만' 하는지 판단하는 법 같은 추상화 수준*을 가진 코드들로 이루어져 있는지 각 코드를 단순히 다른 표현이 아니라 의미 있는 이름으로 나눌 수 있는지 ( 따라서, 객체 상태를 변경하는 것과 객체 정보를 반환하는 로직은 분리되어야 한다. ) 💡추상화 수준*이란 일단 ‘추상화’란 구체..