Storybook 에서 Webpack 설정??

리액트 네이티브 2/E
#1

참 어렵습니다… 이제 자바스크립트 리액트를 시작하는 사람(기어다니는 사람)이 이제 걸을려고 하는데 뛰라고 하는 꼴. 웹팩 설정이라네요… 허거… ㅜㅜ

  1. 새로운 리액트(아직 네이티브는 아님)로 웹개발하는데, 스토리북에서 Wix-STYLE-REACT가 있네요. 이 UI를 그대로 가져오면 아직 UI 디자이너가 없는 저희 입장에서는 겁나게 빨리 프로토타입을 만들 수 있을 것 같은데요…
    그냥 처음 버튼 하나라도 가져와 볼려고 하니 Yoshi 라는 wix의 툴을 쓰던지 아니면 웹팩 설정을 바꾸랍니다…
    그런데 웹팩설정 webpack.config.js 파일을 찾아보려니, 노드모듈에서만 자그마치 10개가 넘게 나왔어요… 허거…

https://wix-wix-style-react.surge.sh/?selectedKind=Introduction&selectedStory=Usage%20Without%20Yoshi&full=0&addons=0&stories=1&panelRight=0

입니다만,
이많은 파일, 어디서 어느 파일을 어떻게 수정하라는 이야기일까요? ㅜㅜ

#2

해결은 했습니다만… 웹팩의 'w’도 모르던 사람이 config를 하려고 하니…쩝…
(wix도 좀 제대로 가르쳐주지…)
엄청 고새이었ㅅ브니다… ㅜㅜ

좋아요 2
#3

@parksijoong 고생하셨습니다 :clap:t2:

#4

웹 사이트 만들 때 and.design 만 써봤지 wix의 컴포넌트를 써보진 않았는데 알려주신 링크를 훑어보니 wix 컴포넌트다 알차보이네요. 공유감사합니다. :pray:

어떤 것이 문제였고 어떻게 해결했는지도 공유해주시면 감사하겠습니다. :slight_smile:

#5

ant design 좋네요~~ 이것도 적극 검토해야겠습니다. 너무 할게 많군요… 내일 학습도 제대로 안되어 있는데…숙제는 꿈도 못 꾸고 있고요… ㅜㅜ

win-style-react 를 쓰려니 웹팩설정을 바꿔야 한다네요… 자기들이 만든 자기들이 만든 yoshi를 쓰던지…(yoshi 따라해도 안되고…)

그런데 webpack.config.js를 못찾겠더군요… 파인더에 주욱 나열된 webpack.config.js는 각 모듈 내의 config 일 뿐.
구글링해보니 니미… CRA는 webpack이 내장되어 있다네요… /native-script/ 아래에 있다고… 그래서 겨우 찾아서 수정했더니 수정이 반영이 안되네요?? 분명 수정했는데, 실행하고 나니 다시 원래대로 돌아와 있는 듯?
그래서 또 구글링… react-native eject 가 있군요. 그러니까 CRA는 웹팩 설정이 숨겨져 있고 필요하면 npm run eject를 하라고… ㅜㅜ Eject 했지만 뭔가 제대로 못 찾았어요… 웹팩 어려워요… (괴로워)
따라서 CRA 이외의 방식, 전통적인 방식을 찾아서 시도했어요. 구글링하면 전부 CRA 아니면 오래된 방식…
최신으로 찾으니, https://www.valentinog.com/blog/react-webpack-babel/
겨우 따라서 했어요.

근데, wix의 깃허브 설명대로 하면 또 안되요… ㅜㅜ
scss의 loader가 로딩이 안된다는… 문제가…? ㅜㅜ

include: [
  path.join(__dirname, 'node_modules/wix-animations'),
  path.join(__dirname, 'node_modules/wix-style-react'),
  path.join(__dirname, 'node_modules/bootstrap-sass') // only if you use Grid component
],

저게 안 먹더라고요… 쩝… 그래서 저거 지우고… SASS, CSS 로더 찾아서 설치하고…
겨우겨우 실행했습니다. 24시간 걸린 듯. 윈도우95 95번 깔았는데, 노드도 그정도 까는 것 같아요…

일단 이정도입니다. 마지막으로 첨언하면,
Wix의 Datepicker를 써보고 싶었는데, 안에 we()라는 정체모를 함수가 있어서 이것까지 찾아보다가 지쳤습니다. 일단 다른 것 만이라도 충분히 쓸 수 있을 것 같고, 현 개발팀이 node, react 에 익숙해 지면 개발자 아닌 저보다는 뭔가 낫겠지요…
저거 끝내고 나니 더는 꼴보기가 싫어서 Nextjs 및 gatsbyjs tutorial 한번 따라 해보고… 뻗었습니다.

오늘은 하루종일 php의 preg_match 랑 htmlspecialchars_decode() 와 같은 역할을 하는 javascript function 을 찾는 것을 구글링… 테스트 하기 위해서 mac에 apache server & php 설정하는 데 2시간 보내고… function 구현에 2시간 소비… 풀스택 개발자는 수퍼맨이어야 겠군요… ㅜㅜ

내일이 수업인데, 숙제도 안하고 내일 것 보는둥 마는 둥 했어요… 개발자도구는 그것 만으로도 엄청나게 중요해서 많은 집중과 노력이 필요한 장일텐데… 에너지가 이렇게 소진되어서야… 흑흑… ㅜ
내일은 병원과 수영 끝나고 점심부터 다시 한번 수업 준비해 볼께요… 숙제는 기대하지 마시고… ㅜㅜ

또 PS.
제목이 storybook에서 webpack 설정이라고 되어있는데, 이건 내용과는 관계가 없어졌네요.
Storybook npm 설치 안해도 컴포넌트는 쓸 수 있으니… 쥔장님이 말씀하신 ant design이나 stencil 같은 것도 살살 뒤져봐야겠네요…
스토리북, 언젠가는 제대로 해 볼겁니다!!! (내가 아니라 개발팀에서 ㅋ)

좋아요 1
#6

항상 첫 걸음은 수많은 고생이 따르는 것 같아요. :slight_smile: 매일 삽질 중입니다. 삽질이 곧 실력향상이니 마음이라도 즐겁게 해봐요.