본문 바로가기

전체 글

[Storybook][React] Storybook 기초 적용해보기 간단 설명 초기 세팅 Story 작성하기 Addons 마무리 1. 간단 설명 Storybook은 개발 모드에서 실행된다 비즈니스 로직과 Context로부터 UI 컴포넌트를 독립적으로 분리하여 만들 수 있도록 도와준다 React 이외의 React Native, Vue, Angular 그리고 Svelte에 대한 문서도 있다고 하니 참고하자 하위 컴포넌트 → 페이지 로 개발하는 컴포넌트 기반 개발(Component-Driven Development) (CDD) 방법론에 따라 UI를 만드는 것이 기본이다 2. 초기 세팅 // Add Storybook 및 Jest 테스트 환경 npx -p @storybook/cli sb init // story북 실행했을 때 컴포넌트 테이블 만들기 위해 설치 yarn add --.. 더보기
[백준 2075번][Javascript][NodeJS] N번째 큰 수 2075번: N번째 큰 수 2075번: N번째 큰 수 첫째 줄에 N(1 ≤ N ≤ 1,500)이 주어진다. 다음 N개의 줄에는 각 줄마다 N개의 수가 주어진다. 표에 적힌 수는 -10억보다 크거나 같고, 10억보다 작거나 같은 정수이다. www.acmicpc.net 문제 N×N의 표에 수 N2개 채워져 있다. 채워진 수에는 한 가지 특징이 있는데, 모든 수는 자신의 한 칸 위에 있는 수보다 크다는 것이다. N=5일 때의 예를 보자. 12 7 9 15 5 13 8 11 19 6 21 10 26 31 16 48 14 28 35 25 52 20 32 41 49 이러한 표가 주어졌을 때, N번째 큰 수를 찾는 프로그램을 작성하시오. 표에 채워진 수는 모두 다르다. 입력 첫째 줄에 N(1 ≤ N ≤ 1,500)이.. 더보기
[NextJS][Typescript] @emotion 세팅하기 (설치부터 Theme까지) introduction install styled-components 문법 Global styled SSR Theming Tooling / Packages 1. introduction yarn add @emotion/styled @emotion/react css prop 지원 SSR에서 따로 설정을 필요로 하지 않는다 Theme 사용 가능 ESLint plugin 설정이 되어 있다 @emotion/styled 는 styled.div 스타일을 사용할 수 있게 한다 2. install yarn add --dev @emotion/babel-plugin optimizes styles by compressing and hoisting 하여 더 좋은 개발자 경험을 선사한다 // .babelrc { "env": { .. 더보기
[Typescript] Enum, Union & intersection Type Enum 사용하는 이유 숫자형 문자형 사용 안 하는 이유 Union & Intersection Type Literal Type의 Union Type Intersection Type 주의할 점 1. Enum 1-0) 사용하는 이유 그림과 같이, property의 값을 한정 짓기 위해 열거형 Enum을 사용한다 이름 있는 상수들, 혹은 연관된 아이템을 묶어서 표현할 수 있다 1-1) 숫자형 초기 값을 주면 초기 값부터 차례로 1씩 증가하는 auto-incrementing; 자동 증가 기능 enum Direction { Zero = 1, One, Two, Three } // Zero - 1 // One - 2 // Two - 3 // Three - 4 // 초기화 안 하면 0부터 시작 enum의 key로 va.. 더보기
[Web3] Web2와 Web3, 그리고 블록체인 Web2 와 Web3 란? Web2는 HTML 문서의 정보 전달이 주로 이루어지는 Web1에서 더 나아가게 된다 인터넷이 저렴해지고 보편화되면서, World Wide Web을 사이트로 만들어 기반을 만들고 페이스북, 유투브, 트위터 등과 같은 소셜 미디어 사이트가 시작되었다 인터넷 케이블 또한 발전하여 인터넷 속도가 빨라지고 다양한 컨텐츠들이 보편화되며 진화가 진행되고 있다 (참고하면 좋을 글: https://velog.io/@teo/frontend) Web3는 인공지능과 같은 지능형 컴퓨터 응용 프로그램을 기반으로 한다 다양한 탈중앙화 프로토콜의 대중화가 시작되는 것이 가장 큰 특징이 될 것이다 안전한 데이터 기반 인터페이스가 대두되어 만들어 갈 것이고, 블록체인, 메타 유니버스 및 시멘틱 웹을 사용하.. 더보기