개발괭발메모장

그래서 리액트가 뭔데? 라이브러리, 조합형. JSX문법을 씀. 컴포넌트 단위로 잘나눠야함

prpos 로 상위에서 하위로 내려줄수있음. 루트요소에 리턴해주는게 중요하군. 모듈단위로 잘 나눠야한다. Example 같은 컴포넌트 작성의 네이밍 규칙도 있고, 컴포지션(합성)의 개념이라는 것도 있다. 스타일이 중복되고 재사용되는걸 아 이렇게 표현하는구나. 다 비슷비슷하네 묶어주는걸 의미하는군 children 이란 예약어가 있어 와 이걸 이제알았어. props.children ...ㅠㅠ 어쩐지 여기저기서 말도안하고 쓰더라 .. 요즘은 모든 파일에 react import 하진 않는구나. 과거엔 reactCreateElement 같은것도 있었군. JSX 문법은 대안이었구나. 하지만 명시적으로는 import react 다 써주는게 좋군. 컴포넌트 파일 구성은 보자... 그냥 정리하는거네 체계적인 폴더구분이 중요. state. ... 선언적 접근법...  인터렉티브의 기본이라. 모듈로 이벤트 정의 상태변경의 핵심은 이벤트를 어떻게 전달하는냐겠지. on으로 시작하는 이벤트들이 JSX에 내장되어있어. 이게 중요하네. 함수를 컴포넌트에 바인딩하는것. 그럼 이벤트 리스너에 등록 된다. 이걸 헨들러 방식이구나. () 로 해버리면 실행되니 주의.(포인터로 전달됨) 함수 이름의 관례는 뭐시기핸들러(clickHandler) 프로젝트에 따라 알아서 할것. 클릭핸들러가 컴포넌트에 반영된것이 왜 적용이 안된걸까 DOM에? 리액트는 이런식으로 동작하지 않음... 펑션콜을 React에서 평가할 때 실행 순서가 다르구나. 그럼 어캐바꾸는데? ㅇㅇㅇ.. 재평가 되는 방법은 state를 쓰는거구나 그래서 아ㅏ아....... 어쩑지 트리거되지 않았군 그래서 ..useState 라는 훅을 쓰는거구만 그냥 썻더니 아휴... 재호출되도록 하는 좋은 친구ㅏ. 배열과 업데이트 함수가 순서대로 인자에 반환됨.  그래서 title, setTitle 썼던거구나. 뷰랑 다르네 ㅇㅇ.. 스벨트가 좋다. 아무튼 훅으로 관리한다는 개념이 저런거구나.. state를 다시 보네 여기서. ㅇㅋㅇㅋ.재평가됨. 평가는 예약인것이고 바로 바뀌지 않는다. UX에서는 후에 바뀌기때문에 반영되는 개념을 기억해. 재평가 되는 과정은 빠름. 키컨셉임. const로 쓰는 이유는 컴포넌트 인스턴스로 등록하기 때문인거같은디? 변경되지 말라고 하는거 아냐? ㅇㅇ.. 그렇네. 잘못건드릴수있으니 특정 컴포넌트에서만 재평가하라고. 다른곳에 영향받지말라고. 결론은 useState 훅에 상태를 잘 등록해두자. 그리고 초기상태를 추적하는 형태가 있으니, state 추적이 가능한거군. 상태값과 업데이트함수를 기억해! 자. 이건 또 여러가지 로 업데이트 될 수 있구나. 입력값을 위한 폼 모듈에 대해 export default 로 정의한다. (하나밖에없으니까 ㅇㅅㅇ) 폼 만드는건 기본적이고... 잘 분리해서 관리하면 좋다. 사용자 입력은 어찌 관리하나... onChange 같은걸로 하긴 하네. changeHandler 에는 자동으로 event 가 넘어와 편리하긴하구나.state 다중관리도 있는데.... 방법은 뭐 useState 여러번 쓰는거아닌가맞네ㅋㅋㅋ event.target.value 오랫만~  컴포넌트당 여러 상태를 가지는것은 좀 중요한듯... 근데 이 대신 쓰는 방법이 있다. 대안 대안 대안...같은개념으 반복되니 객체로 전달하면 한번에 된다. 아... 1키에 1벨류로 잘 관리하게 하려면 업데이트하지 않은 값은 수동으로 복사하는 구린 방법이 있는데, 아니면 스프레드연산자로 ...값을 잃어버리지 않게 채워주면 되네. *구려
흠...  좋은 방법의 이전 state에 의존하는 state 갱신은? function으로 이전 상태와 다음 상태를 업데이트하면서 얻는 방법이군.... prevState 개념이 이렇게 들어오는구나. 잘못된 스냅샷 상태를 손수 관리하는건 수동적일 수 있으니 함수로 작업하도록 하는게 좋다.

onSubmit에 핸들러 다는것도 있고...근데 이벤트가 쏴 지면 안되니까 .event.preventDefalut()로 만들어서 디폴트 시켜버리는구나. 쏘지말라고 ㅇㅇ.. 양방향바인딩~~~~ useState로 저장한 경우, 값을 초기화 하고 싶은데~ value를 초기화 하면 되겠지. 어... 어~ 무한루프 안빠지는구나... 의외네 ..  자. 부모에서 위로 올리는 방법. 끌올이랬지? 여기도 emit을 쓸까요? 글쎄요... .... . .... .... .. .. 아... 위에서 만들어준다음 아래로 내려서 거기서 리턴한다고? prpos로 핸들러에 담아 내려주고 값받아서 재정의한다. 으흥. 체인을 걸어서 또 위로 올려 app.js 까지 올릴 수 있긴하겠네. 관습은 on어ㅓㅉ구로 정한다. state 끌올~ (State up -lifting 이라 부르기도 함.) 아무튼 컴포넌트간에 직접적인 전달은 없긴함. 그치만 맨날 루트로 끌어오리진 않고 필요한 트리까지만 올리면 된다 'ㅅ' - 아... 사용자 지정으로 prpos 정해서 투방향 바인딩하는게 이 이래서 중요하군.

cra 로 TS 프로젝트 만들고.

rm -rf node_modules

yarn set version berry

yarn install

 yarn --version

> 얀베리 3.2.0

1043  npx sb init --type react -f
...
 1047  npx sb@next automigrate
...

https://github.com/storybookjs/eslint-plugin-storybook#usage 참고 다 적용.

...
 1052  yarn add core-js
 1053  yarn storybook

---

         "@types/react": "^17.0.21",
         "@types/react-dom": "^17.0.9",
-        "autoprefixer": "^10.4.4",
+        "autoprefixer": "9.8.6",
         "babel-loader": "^8.2.2",
-        "babel-plugin-macros": "^3.1.0",
-        "babel-plugin-twin": "^1.0.2",
         "daisyui": "^2.11.0",
         "postcss": "^8.4.12",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "styled-components": "^5.3.1",
-        "tailwindcss": "^2.2.15",
+        "tailwindcss": "^3.0.23",
         "terser-webpack-plugin": "^5.3.1",
         "typescript": "^4.4.3",
         "webpack": "^5.53.0",
         "webpack-cli": "^4.8.0"
     },
     "devDependencies": {
+        "@mdx-js/react": "^1.6.22",
+        "@storybook/addon-actions": "^6.4.19",
+        "@storybook/addon-docs": "^6.4.19",
+        "@storybook/addon-essentials": "^6.4.19",
+        "@storybook/addon-links": "^6.4.19",
+        "@storybook/addon-postcss": "^2.0.0",
+        "@storybook/react": "^6.4.19",
+        "@storybook/testing-library": "^0.0.9",

autoprefixer 버전이 10버전에서 참조 패키지에 문제가 있어 9버전을..

+const tailwindcss = require('tailwindcss');
+
 module.exports = {
-    plugins: {
-        tailwindcss: {},
-        autoprefixer: {},
-    },
+    plugins: [
+        tailwindcss('./tailwind.config.js'),
+        require('autoprefixer'),
+    ]
 };

const path = require('path');
const path = require("path");
const tailwindcss = require("tailwindcss");


...

                {
                    test: /\.s?css$/,
                    loaders: [
                    // Loader for webpack to process CSS with PostCSS
                    {
                        loader: 'postcss-loader',
                        options: {
                            /* 
                                Enable Source Maps
                            */
                            sourceMap: true,
                            /*
                                Set postcss.config.js config path && ctx 
                            */
                            config: {
                                path: './.storybook/',
                            },
                        },
                    }],
                    include: path.resolve(__dirname, '../'),
                }

*끝.

캡쳐 소리 죽이려고

사용자 인터페이스 사운드 효과 재생을 끄면 알람도 안난다. 다시 켜두도록 하자.

후... 처음으로 회고라는걸 해보고, 적어본다. 1년간 많은 일들이 있긴 했는데... 특히나 우울한것이 많았던 것 같다.

1. 친구의 죽음
   연초에 비보가 날아들었다. 2월 3월 계속 우울했던 것 같다.
   아직도 1년이 다 되어가지만 그때를 생각하면 정신이 없다.
   스트레스성으로 불안을 겪고, 모든것에 두려움을 느꼈던 것 같다.
   선택장애와 반대로 빠른선택을 하게 되었고, 무차별적으로 결정하고 과감하게 저지르고 던지는 패턴을 반복했다.
2. 퇴사 전배
   사내에 이런 저런 윗선의 일들이 겹치면서, 집중적으로 성장할 수 없는 부담이 가중되었다.
   업무조차 전혀 생각하지 않은 방향들로 흘러갔고, 데이터 업무가 가중되면서 (1)과 더불어 스트레스가 높아졌다.
   프론트를 그렇게 하고 싶었는데, 잘 안되었던 것 같아 결국 옮기기로 결심했다.
   
   중간에 스타트업도 면접을 봤지만 조건에 충족할 수 있는 조건도 나오지 않았고, 현재 내 위치가 어느정도인지만 확인했다.
   너무 쓴 경험은... 내가 하고싶은 일은 내가 실력이 부족했으며, 별로 싫어 했던 일이 그래도 남들보다 어느정도 할 줄 아는 수준이었다. 문제는 해당 분야는 내 내면으로도 확실하게 재미가 없다 느끼고 있었고, 이쪽으로 경력을 쌓고싶은 마음이 없었다.
   절대로 프론트가 하고 싶다는 마음을 절실히 담아서 어필했고, 그 길을 열어준 현재 조직에 너무 감사하다.
3. 어쩌다 다시 인프라 
   사람 사는 일이 쉽진 않다. 하고싶은것을 하고 살아간다면 얼마나 좋을까. 강단이 있다고 해야할까...
   사람들은 자신이 할 수 있는 일과 할 수 없는 일을 분명하게 표현하며, 결정을 내리는 사람들이 대부분이다.
   나도 그렇게 하고 싶기는 했는데 그럴 처지가 아니었다.
   아니. 그저 잠시 잊고싶었는지도 모른다.
   아무생각없이 일을 잡고 싶었는지도 모른다...
   
   뭐 살다보면 봄날도 오겠지 이런 생각이었나보다. 한달도 안되어 인수인계 해주고 떠나는 사람을 보면서...
   착잡한 마음보다, 이 사람도 나 처럼 가고싶은 길을 가게 되었구나. 하고 인정해주었고
   나 말고는 지금 딱 적절한 포지션이 없었기 때문에
   그렇게 또 다시 일을 했던 것 같다. 잘 하진 못했다. 객관적으로 많이 부족했다.
   나는 내가 늘 부족하다고 느낀다.
   
   
4. 얼레벌레 제로 스터디
   운영하던 스터디는 다들 취업하고 각자 공부의 계기가 된 것 같아서 뿌듯하다. 그래도 줄곳 상담해 주시는분도 있고 가이드 해줄 수 있어 다행이라고 생각한다. 포기하지 않고 취업하신분들도 대단하고...
   가끔 만나긴 하는데, 잘 되어 만나는 것 만큼 좋은 일도 없다.
   덕분에 회 잘 얻어 먹었다.

전반적인 회고

- 멘탈도 바닥으로 치닫고, 정처없이 떠돌기만 한 것 같지만...앞으로 좋은 일들만 있을거라고 생각하자. 내년에는 내가 할 수 있는것이 무엇인지, 사람들에게 더 도움이 될 일은 무엇인지 찾을 수 있을거라고 본다.

많이 부족한건 알고있다. 늘 부족하다 늘 노력하고 있다.

매번 잊어버리지만 지속적으로 반복할 수 밖에 없는 내 자신을 보면서 또 이렇게 한번 메모를 하고... 고생했다.

고생했어.

https://twitter.com/LearnerBR/status/1469041926477594624?s=20