Front-end

[JS] 랜덤 숫자 생성법 이해하기 | Math.random()

Math.random()은 0부터 1 사이의 난수를 생성하는 메소드이다. 더 자세히 말하자면 0부터 0.99999... 사이의 수를 생성한다. 따라서 어떤 범위 사이의 랜덤 숫자를 생성하고 싶다면 여기에 적절한 값을 더하거나 곱해서 응용하면 된다. 다음은 상황별 예시이다. 1) 0~7 범위의 랜덤 난수 생성하기 Math.floor(Math.random() * 8); Math.random()으로 0부터 0.999999... 사이의 수가 생성된다. 여기에 8을 곱해서 0부터 7.999999... 사이의 수가 생성된다. Math.floor()로 소수점 이하를 절삭해서 0부터 7이하의 난수를 얻는다. 따라서 0 이상 n 이하의 수를 얻고 싶다면 Math.random()에 n보다 1 큰 수를 곱한 다음, 소수점을..

[Nextjs] Nextjs 시작하기 - (3) css 스타일링 하는 법, Link 스타일링 하는 법

nextjs에서 css 스타일링을 하는 방법은 크게 3가지가 있다. global css 사용 module.css styled jsx global css는 우리가 일반적으로 import로 css 파일을 가져오는 방식이니 넘어가고, nextjs에서 사용하는 module.css와 styled jsx 방식이 뭔지 알아보겠다. css module 방식 일반 css 파일을 import 해오는 방식의 문제점은, css 스타일이 전역적으로 적용된다는 것이다. 그 문제점을 해결해 줄 수 있는게 바로 css module이다. 이 css module은 Nextjs 뿐만 아니라 React에서도 사용할 수 있는 방법이다. css module을 적용해 스타일링을 하고 화면을 개발자도구로 검사했을 때, 내가 작성한 classNam..

[Nextjs] Nextjs 시작하기 - (2) Link 설정하는 법, Navbar 만들기

1. Link 컴포넌트란 React에서의 Link 컴포넌트나 useNavigate처럼 페이지 간의 이동을 CRA 방식으로 부드럽게 전환할 수 있도록 도와주는 태그이다. 'next/link'로부터 import 해온다. React에서는 react-router-dom 패키지를 따로 설치해야 했지만, nextjs는 편리하게도 자체에 이런 패키지를 내장하고 있다. 💡 내부 라우팅을 부드럽게 해주는 용도이기 때문에, 외부 링크로 이동할 때에는 a 태그를 이용하자! Link 설정하는 법 LInk에 이동할 주소, className 등을 작성하면 된다. target="_blank"와 같이 보통 a 링크에 작성하는 속성이 필요하다면 그대로 Link에 넣으면 된다. import Link from 'next/link'; fu..

[Nextjs] Nextjs 시작하기 - (1) 설치, 디렉토리 구조

1. 설치 npx create-next-app 명령어를 입력해 설치를 하면 prompt에 다음과 같은 질문들이 나온다. 대부분의 질문들은 기본값대로 엔터만 치면 된다. ESLint와 Tailwind는 나중에 따로 설치하려면 귀찮으므로 웬만하면 그냥 Yes를 하는 편이다. 그런데 아래 질문들은 Nextjs의 설정에 큰 영향을 주므로 취향에 따라 잘 선택해야 한다. 일단 나는 튜토리얼을 학습하는 입장에서 다음 같은 선택을 했다. Would you like to use `src/` directory? No / Yes Would you like to use App Router? (recommended) No / Yes Would you like to customize the default import alias..

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

[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가 아니라 ..

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

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