오늘은 next,js를 사용하면서 부딪혔고, 오랜시간이 걸려서 결국구현했지만
많은 삽질을 하게 되었던 부분에대해서 써보고자 한다.
next.js를 하면서 storybook 라이브러리를 사용할려고할때,발생했던 이슈
회사에서 next.js의 활용은 api서버를 따로 만들지않아도된다는 장점을 이용해
admin 페이지를 만들고있다. admin페이지를통해 유저접속상태나 에러가 발생하면 어떤 에러를
발생시켰는지 기록해두고 체크하는 시트인데 조금더 직관적으로 지금 개발상태를 보기위한
스토리북을 적용했다.
우선 next.js는 pages라는 폴더를 기준으로 tsx파일을 체크하여 렌더링 하게되는데,
이부분에서 아차하면 npm run build를 했을때 삽질 포인트를 가지게된다 .
경험한 바로는 storybook 설정에서 pages에 stories.tsx파일을 넣게되면
그파일도 next.js에서 하나의 컴포넌트로 인식한다는점이다.
그런데 기본예제를 봤을때 export default 로 된 코드들이 기술되어있는데
이 부분이 컴포넌트가 아니기 때문에 여기서부터 오류가 발생하기 시작한다.
코드를 보면
이렇게 기술했는데 스토리북 뷰 에서는 이렇게 나타난다
export default {
title:
componenet:
이부분이 메뉴바, 코드로따지면 폴더구조가 되는것이다.
그리고
여기 args 부분이
밑쪽 하단 부분이되는데 이러부분을 미리 기술 해 두는 부분이 한눈에보이게된다
어떠한 데이터구조가 들어 올 것이다 라는것을
예측할수있기때문에 협업함에 있어 의사소통이 더 원활해 질 수 있는 장점이 생긴다.
그리고 이파일을 읽어올때 경로를 설정할수있는데 .storybook 폴더를 열어보면
어떤 폴더에서 읽어올지 설정 해줄 수 있다
모듈설정은 웹팩이나, tsconfig 파일에서 기술하는것과 비슷한듯하다
여기서 설정을 어떤 폴더구조에서 불러오게할것이냐로 인해
stories.tsx파일을 한곳에서 관리할수있게되는것이다.
여기까지가 기본적으로 동작하는 규칙 부분이다!
다시 돌아와서 삽질한 포인트에 대해 언급하겠다.
경험한 바로는 storybook 설정에서 pages에 stories.tsx파일을 넣게되면
그파일도 next.js에서 하나의 컴포넌트로 인식한다는점이다.
어떤 개발환경인지에 따라 다를수도있다 하지만 next.js에서 경험한바로
pages에 stories.tsx파일을 넣어보니 컴포넌트를 읽을수없다는 에러를 내뱉기때문에 했던방법은
stories 폴더에 넣어두었다.
폴더로 파일을 하나더 감싸게 하면 에러가 생길까?하는 의문이었지만 잘 동작했다.
그렇지만 !! 한번에 잘되지않았다 여기서 설정을 하나더 해주어야하는데
그건 바로 결로 설정이다 @를 붙힌 절대경로에서는 경로를 찾지못했다.
무슨 이유가 있을텐데, 에러를 찾느라 힘을뺴서 다음에 찾기로...
느낀점
하루하루 신입개발자인 나에겐 모든것이 삽질포인트다, 뱉는에러를 해결해도 다른에러를 내뱉기도하고
연관된 엉뚱한 코드와 마주하기도하고, 별에별일이 다 생긴다..
문제를 해결을 하겠다는 일념하나로 마주할수밖에없는것이다.
결국엔 해낸다가 목표가 된다.
오기가 생기기 무조건 할수있다.
실무에 온지 이제 3개월이 지난무렵 현재 나는 수면위에 있지만 언젠가는 깊은 심해로 들어가고싶다라는
생각을했다, 개발3년차라면 6년차느낌이나고싶다.
그럴려면 적어도 3년동안은 워라밸따윈 꿈도꾸지말자!
