전체 글

프로그래머스 Lv.0 | 자릿수 더하기

문제 문제 링크 - https://school.programmers.co.kr/learn/courses/30/lessons/120906 풀이 1 자릿수를 문자열로 생각하는 방법 function solution(n) { return n.toString().split('').reduce((acc, curr) => acc + Number(curr), 0); } 풀이 2 수학적으로 자릿수에 해당하는 숫자 구하는 방법 function solution(n) { let sum = 0; let num = n; while(num > 0) {// ---3) sum += num % 10;// --- 1) num = Math.floor(num / 10);// --- 2) } return sum; } 1) 10으로 나눈 나머지..

[React] ckEditor5 사용법 및 미리보기 기능 구현

구현 결과 설치 npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic react를 위한 ckeditor 패키지를 설치하고, 여러 버전 중 classic Editor를 구현할 것이므로 classic을 설치 ckeditor 화면에 띄우기 css로 에디터 크기를 지정해주지 않으면 화면에 넙대대하게 나온다. ckeditor.css css 설정 /* ----------------------------------- */ /* CKEditor 크기 조정 */ /* ----------------------------------- */ /* 텍스트입력태그 */ .ck.ck-editor__editable:not(.ck-editor__n..

프로그래머스 Lv.0 | 캐릭터의 좌표

문제 주소 - https://school.programmers.co.kr/learn/courses/30/lessons/120861 📝사고의 흐름 방향키가 들어있는 배열을 돌며 switch case로 무슨 키인지 검사하고, 좌표값을 ++ 혹은 -- 해주자. [0, 0]에서 시작하므로 [0, 0] 배열을 선언하고, 이 배열의 값을 증감하자. 그런데 무한정 이동할 수는 없다. max x값과 max y값을 구한다. 음수방향으로 가는 경우도 있으므로 max x 혹은 max y에 마이너스를 붙인 값도 잊으면 안된다. 만약 max x와 max y, 그리고 음수방향을 넘으면 더이상 값이 증가하지 않도록 해야 한다. switch case에서 방향키를 검사할 때 현재 좌표가 최대값에 다다르지 않았는지 검사하고, 최대값이 ..

[storybook] storybook 컴포넌트 설계 및 문서화하는 법 (+ Emotion, Typescript)

Storybook 폴더 구조 스토리북을 설치하면 stories 폴더가 새로 생겨있을 것이다. 이 sotries 폴더 하위에에 문서화할 컴포넌트 명을 넣어 다음과 같이 stories 파일을 새로 생성한다. [컴포넌트명].stories.ts파일 '이미 components 폴더에 만들어놓은 컴포넌트 중 문서화를 해줄 컴포넌트를 stories 파일에서 import해온다 -> 그에 대해 서술하는 내용을 코드로 적는다'가 바로 스토리 작성이다. 컴포넌트 설계하기 Storybook을 실행하면 들어있는 예제 중 Button 컴포넌트를 뜯어보며 재사용하기 좋은 컴포넌트, 그리고 Storybook으로 문서화하기 좋은 컴포넌트는 어떻게 설계하면 되는지 알아보자. 1. 해당 컴포넌트의 특성 파악하기 이 버튼이란 녀석은 버튼 ..

Typescript + Emotion + Storybook 설치 및 환경설정

react typescript 프로젝트 생성 및 emotion 설치 npx create-react-app [만들 프로젝트 경로] --template typescript npm install @emotion/react React가 v17 이후에 emotion을 사용하려면 다음과 같은 pragma를 앞에 입력해줘야 한다. /** @jsxImportSource @emotion/react */ import { css } from "@emotion/react"; npm install @emotion/react 이건 css prop 방식이고 만약 styled 방식도 사용하고 싶다면 npm install @emotion/styled 도 설치하기 emotion pragma 제거 방법 React 자체의 jsx가 아니라 ..

[Storybook] 스토리북 설치하기 +) node 버전 업그레이드 에러 해결법

Storybook 설치하기 npx storybook@latest init 별 문제가 없다면 중간중간 계속 진행할 건지 물어볼 때마다 y 입력하면 끝난다. 설치는 이것으로 끝이다. 실행하면 localhost:6006로 브라우저를 띄워준다. npm run storybook Node 버전 업 에러 - 'To run storybook you need to have node 16 or higher' 가장 최신 버전의 storybook을 설치하려고 했더니 다음과 같이 node 버전 업그레이드를 하라고 한다. node.js 사이트 가서 새로 다운받으면 되긴 하는데 오래 걸릴 것 같아서 새로 설치하기보다 버전업을 알아봤다. 나는 윈도우를 사용하고 있기 때문에 nvm라는 node 버전업을 도와주는 프로그램을 github..

[React] 윈도우 리사이징 예제로 알아보는 throttle

throttle (쓰로틀링)이란? 연속된 이벤트가 들어오게 되면 과부하가 걸리거나 쓸데없는 API 호출을 하는 등의 일이 생긴다. 그걸 방지하고자 적용하는게 일정한 시간간격에만 이벤트를 감지하고 그 외의 시간에는 무시하는 게 쓰로틀링 기법이다. (인식) -----3초간 무시----- (인식) -----3초간 무시------ (인식) 대표적으로 윈도우 리사이징, 스크롤 이벤트에 쓰로틀링이 많이 사용된다. 예를 들어 Intersection Observer로 구현되기도 하지만 throttle로 구현할 수도 있는 무한 스크롤이 있다. '연속된 이벤트가 들어오는데 특정 함수를 3초 간격으로만 호출하기' 이런 상황에 쓰로틀링을 적용할 수 있다. throttle 구현하기 이미 콜백함수가 실행된지 delay초가 지나지..

[Typescript] React에서 type, interface는 어디에 정의하는게 좋을까?

이 글의 디자인 패턴 부분은 TypeScript | Organizing and Storing Types and Interfaces (by Andres Reales)를 참고하여 작성하였습니다. 기본적으로는 컴포넌트 내부에 정의하되, 컴포넌트 간 의존성을 경계하기 만약 type이나 interface가 특정 컴포넌트에서만 필요한 것이라면 그냥 그 컴포넌트 내부에 정의하면 된다. 보통 이런 local적인 데이터에는 props가 있다. // StudentList 컴포넌트 interface Student { id: number; name: string; age: number; } interface StudentListProps { classNum: number; students: Student[]; } functi..