TIL
2023. 3. 30.
TIL #012
오늘 개발한 것
BookStack
- 프로젝트에 Storybook 추가. 컴포넌트를 테스트하는데 필요성을 느낌 참고 페이지 : Storybook 블로그
- .storybook : 스토리북 설정 파일
- stories : 스토리북 예제 파일
- npx sb init --builder webpack5
- Tag 컴포넌트 구현
- Input 컴포넌트 구현
- Signup 템플릿 및 페이지 기능 구현
오늘 배운 것
🪜 Next.js, Typescript에 Storybook 설정하기
💡 Typescript는 version 5 이하로 할 것 (여기서는 4.7.4 적용)
설치 및 설정 과정
- 스토리북 설치
npm install --save-dev sb - 스토리북 초기화
npx sb init --builder webpack5
- public 적용
{ ... "scripts": { ... "storybook": "start-storybook -p 6006 -s ./public", "build-storybook": "build-storybook -s public" }, ... } - 스토리북 main.js 설정
const path = require('path'); module.exports = { // 모든 경로의 stories.@파일을 인식할 수 있도록 해주는 설정 stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'], addons: [ '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', ], framework: '@storybook/react', core: { builder: '@storybook/builder-webpack5', }, // 스토리북 내부 절대 경로 설정 webpackFinal: async (config) => { const alias = { components: path.resolve(__dirname, '../components'), pages: path.resolve(__dirname, '../pages'), public: path.resolve(__dirname, '../public'), hooks: path.resolve(__dirname, '../hooks'), utils: path.resolve(__dirname, '../utils'), apis: path.resolve(__dirname, '../apis'), hocs: path.resolve(__dirname, '../hocs'), core: path.resolve(__dirname, '../core'), context: path.resolve(__dirname, '../context'), }; config.resolve.alias = { ...config.resolve.alias, ...alias, }; return config; }, }; 스토리북 세부 설정
- public 적용
- import { ThemeProvider } from "@emotion/react"; import theme from "../style/theme"; import GlobalStyle from "../style/Global"; import * as NextImage from "next/image"; export const decorators = [ (Story) => ( <ThemeProvider theme={theme}> <GlobalStyle /> <Story /> </ThemeProvider> ), ];
참고 블로그
🪜 Next.js에서 svg 다루기
Next.js에 svg loader 설치
- 더보기
- @svgr/webpack 설치
- $ npm i --dev @svgr/webpack
- next.config.js 설정
- module.exports = { ... // export하는 module에 아래 값 추가 webpack(config) { config.module.rules.push({ test: /\\.svg$/, issuer: /\\.[jt]sx?$/, use: ["@svgr/webpack"], }); return config; }, };
Next.js에서 svg 다루기
- 아래와 같은 svg파일이 있다고 가정
변수로 사용하고 싶은 프로퍼티의 값을 current로 변경 <svg width="20" height="20" viewBox="0 0 5 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M0.117062 9.26722C-0.0390211 9.43486 -0.039021 9.70664 0.117062 9.87428C0.273145 10.0419 0.526206 10.0419 0.682289 9.87428L4.84392 5.4047C5.05203 5.18119 5.05203 4.81881 4.84392 4.5953L0.682288 0.125724C0.526205 -0.0419079 0.273144 -0.0419079 0.117061 0.125724C-0.0390219 0.293357 -0.0390218 0.565143 0.117061 0.732776L4.09028 5L0.117062 9.26722Z" fill="current"/> </svg>- 다음과 같이 컴포넌트 방식으로 svg 사용
- 사용하고 싶은 svg를 default 방식의 컴포넌트로 import
- 기존에 current로 설정해 둔 값의 변수를 props 방식으로 전달
import BackIcon from "../../public/icons/right_arrow.svg"; ... return( <BackIcon fill="black" /> )
참고 문헌
🪜 CSS : calc()
calc()란?
CSS 속성의 값으로 계산식을 지정할 수 있는 문법.
+, -, *, / 4가지 연산이 가능하다.
주의할 점
- +, - 앞 뒤에는 반드시 공백이 있어야 한다.
- *, / 의 피연산자 중 하나는 반드시 number type이 있어야 한다.
- 0으로 나누게 되면 HTML 구문 분석기에서 오류가 발생한다.
- 중첩 사용시 내부 calc()는 단순 괄호로 해석한다.
사용 예시
/* property: calc(expression) */
width: calc(100% - 80px);
참고 문헌
🪜 티스토리 HTML 공부
티스토리 HTML 분석 내용
티스토리 스킨을 만들기 앞서 티스토리의 html을 분석하는 과정을 가졌다.
어떻게 html하나로 모든 페이지의 html을 구성할 수 있는지는 여전히 궁금하다.
아마도 스킨으로 지정된 html스킨을 기준으로 페이지 pathname을 변수로 삼아 각 페이지에 맞는 html만 조건별로 보내주는 것 같다.
자세한 html 분석 내용은 아래 코드를 통해 적어 놓았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<!-- 생략 -->
</head>
<body>
<!-- [s_t3] : 티스토리 구성을 위해 반드시 있어야 하는 태그-->
<s_t3>
<header>Nav 부분. 어느 페이지에서나 있다.</header>
<section>
<s_if_var_promotion-1-image>
프로모션이 있을 때만 렌더링 되는 영역
</s_if_var_promotion-1-image>
<article>
<s_cover_group>
홈커버 치환자 :
https://tistory.github.io/document-tistory-skin/common/cover.html
</s_cover_group>
<s_page_rep>
페이지 치환자 :
https://tistory.github.io/document-tistory-skin/contents/page.html
</s_page_rep>
<s_notice_rep>
공지사항 치환자 :
https://tistory.github.io/document-tistory-skin/contents/notice.html
</s_notice_rep>
<s_list>
리스트 그룹 치환자 (카테고리, 검색, 태그의 글 리스트를 표시):
https://tistory.github.io/document-tistory-skin/list/list.html
</s_list>
<s_article_protected>
보호글 치환자 :
https://tistory.github.io/document-tistory-skin/contents/protected.html
</s_article_protected>
<s_article_rep>
<s_index_article_rep>
인덱스 페이지 글 치환자 :
https://tistory.github.io/document-tistory-skin/contents/post.html
</s_index_article_rep>
<s_permalink_article_rep>
퍼머링크 페이지 글 치환자 :
https://tistory.github.io/document-tistory-skin/contents/post.html
<div class="post-cover">글 헤더 부분</div>
<div class="entry=content">글 본문 부분</div>
<s_tag_label>글 태그 부분</s_tag_label>
<s_article_related>현재 글 관련 글 부분</s_article_related>
<div class="comments">글 댓글 부분</div>
</s_permalink_article_rep>
</s_article_rep>
<s_tag>태그 페이지</s_tag>
<s_guest>방명록 페이지</s_guest>
<s_paging>페이지네이션</s_paging>
</article>
<aside>
사이드바
<div class="sidebar-1">사이드바 좌측</div>
<div class="sidebar-2">사이드바 우측</div>
</aside>
</section>
<footer>바닥글</footer>
</s_t3>
<script>
스크립트들;
</script>
</body>
</html>
오늘 배운 것
시간은 한정적인데 하고 싶은 것은 너무 많다. 개인 프로젝트 (BookStack) Algorithm, 티스토리 스킨 작업 등등... 내가 만약 대학 시절로 다시 갈 수 있다면 컴공으로 전과해서 원없이 하고 싶은 공부를 다 할텐데.
그래도 지금이라도 하고 싶은 것을 찾았음이 감사하다.