Jinho

README.md 용 이미지. 회고는 추가 예정

image...

1. Redux. 중앙집중형 상태관리 도구이다. component 구조에 따라 props로 일일이 state를 내려주는 일을 피하고 싶다면 필수. (state 업데이트는 또 얼마나 번거롭게요...) 실제 코드로 보자면 App이 지속적으로 store를 바라보는 구조다. 2. state가 변하면 변화를 반영해야하는 component 영역만 re-rendering 된다. 얼마나 편한가! 3. state를 변경하려면 action이 필요하다. component > dispatch > action > reducer > state update > store > App > component 의 순환 구조이다. 4. middleware는 reducer 실행 전 전처리 과정을 수행한다. 대표적인 예는 비동기 처리로 red..

1. 추가로 학습해야했던건 크게 3가지였다. firebase, socket.io, quill(이건 내 선택). 주어진 3일간 이 사이를 무수히 왔다갔다 했어야했고 그러다보니 제대로 구현되는건 없이 끝없는 찍먹의 향연이었다. 2. 결국 시간이 지나면서 하나하나 잡히는 부분이 있었지만 물리적인 시간 부족과 마음의 초조함이 결합되니 이건 뭐 혼돈의 카오스의 향연. 3. 사실 테스트 시작 전 상태는 긴장 보다는 설렘이었다. 뭔가 실전형 결과물을 내놓을 수 있을거라는 기대. 그런데 이건 뭐.... 엄청난 에너지 손실과 더불어 전의상실에 이를 지경. 4. 시험을 치르고난 다음은 짜증과 무기력. 이 데미지가 생각보다 상당해서 이번주 내내 기분이 좋지 않았다. (정확하게는 지난주겠군 ㅋ) 5. 이번주 부터는 팀플. 뭔..

진짜 이놈 때문에 죽다 살아난 기분이다. 거의 온전히 3일을 여기에만 매달렸다. (지금 이걸 하는게 맞나? 응?) 그럼에도 불구하고 난 나중에 프론트엔드 개발자로 나갈거니까 에라 모르겠다~ 이런걸 할 수 없는 입장이다. 배포는 제품이 최종적으로 세상에 선보여지는 화룡점정과 같은 것. 이것을 못하면 결국 완성된 사업구상을 진행할 수 없고 그것은 결국 최악의 망삘. 무조건 해내야 한다. 겨우 이따위 가벼운 배포툴에 지는건 말도 안된다. 여튼 이기긴 이겼는데 뭔가 말끔하진 않다. 네가 못났냐 내가 못났냐 싸움 같은 느낌이랄까;;; 어쨌거나 근본적인 해결책은 아니라 할지라도 긴급한 불 끄는 정도의 솔루션은 이 글에서 얻어갈 수 있을듯. 전제조건 이 배포는 아래와 같은 구성으로 이뤄져 있다. node.js exp..

기존 학습한 내용을 총정리하는 시간이었다. 그리고 그동안 일정에 허덕이며 하지 못했던 작업들을 모두 진행해볼 수 있었던 시간. 그리고 그것을 바탕으로 일종의 간이 SEED 같은 파일이 만들어진것 같다. 사실 프론트용 SEED를 생산해보고도 싶었지만 그러기엔 아직 백엔드와 API 연동작업은 더 충실히 되어야할것 같다. 다음주가 기대되는 이유. typescript도 진행해봐야할거 같은데 아직 거기까지 못간것도 한 몫. 정리된 부분들을 보자면 상태관리는 mobx가 아닌 @redux/toolkit을 메인으로 진행한다. https://www.npmtrends.com/@reduxjs/toolkit-vs-mobx react router는 v6로 안착해서 진행한다. (이번 테스트에서 활용하진 않았지만) 날짜관리는 da..

행동하지 않는 선의 보다 행동하는 위선이 낫다. 난 이 말에 동의한다.

1. styled component css module 방식으로 진행하려고 했다가 불편해서;; 결국 성능 대신 작업 효율화를 선택했다. 당연히도 styled component 방식으로 선택. 그냥 코드짤때 이 방식이 편하다는 것이다. 그런데 여기서 한가지 pain point 가 있었는데 자동완성도 안되고 스타일도 잘 안나오고 무엇보다 color picker 작동이 안되었다는 것. 프로젝트 내내 불편하게 작업하다 작업 끝나고 필요한 최적의 세팅을 찾았다. 단축어 제공. 사실 잘 안쓰게 되지만 익숙해지면 엄청 사용할거 같다. vscode-styled-components-snippets - Visual Studio Marketplace Extension for Visual Studio Code - This e..

이번주 프로젝트를 진행하고 최종 결과물을 배포버전으로 보고 싶었는데 쉽지 않았다. 로컬에서 잘 되는데 왜 배포가 안되지? 본격적으로 문제 탐색 시작. 결국은 package.json 환경변수 구성상의 문제였고, 이는 결국 원천적으로 설치된 node의 버전 문제였다. "scripts": { "start": "react-scripts start", //여기가 문제였었음 (현재 이건 정상적용 버전) "build": "react-scripts build", //여기가 문제였었음 (현재 이건 정상적용 버전) "test": "react-scripts test", "eject": "react-scripts eject" }, 원인은 문제 라인들인데 node 불안정 최신 버전으로 깔아두었기에 npm 설치부터 안정적이지 않..

배포에서 이렇게 시간이 걸릴지 몰랐다. 예전 개발자들이 배포에 애먹었던 기억들을 더듬어보니 그럴만도 하겠다. 편하자고 만든 배포툴이 오히려 발목을 잡는 애물단지가 되지 않으려면 기본적인 것들을 잘 체크해야할 것으로 보인다. 도구에 먹히지 않으려면 도구를 지배해야 한다. 일단 배포 전 빌드를 잘 해둬야 한다. (젠장 이걸 막판에야 구글링해서 발견하다니) CI= npm run build npm install 진행하다가 계정 문제로 막히면 sudo를 붙여주자. Netlify 배포하기 전 install 명령. 그리고 이때 요청하는 비밀번호는 os의 root 계정 비번이다. Netlify 비번치는 삽질을 하지 말자. sudo npm install netlify-cli -g 배포한다고 fork 뜨고 하는 삽질하지 ..

부트캠프 들어가고부터 이곳에 올 시간이 없었는데 이런 기회에 오네 ㅋㅋ 이미지 서버가 잠시 필요해서 들름.

오랜만에 밴드캠프에서 라디오헤드 새 앨범 릴리즈 소식을 전해왔다. 오랜만에 라디오헤드 홈페이지 들어갔다가.

전반적으로 멘붕과 자괴감과 고됨이 함께했던 시간. 그런데 아직까지 재미있는거 보면 좀 신기 ㅎ 후기 1. _.contains(collection, target) 을 수정하면 안된다고해서 _.reduce(collection, iterator, accumulator) 를 수정했다. object도 가능하도록. 원래는 아래 코드였음. if (accumulator === undefined) { for (let i = 2; i < collection.length; i++) { accumulator = iterator(collection[0], collection[1]); accumulator = iterator(accumulator, collection[i]); }; } else { for (let i = 0; i..

최근들어 근현대사를 바라보는 시각들이 다양해지고 있다. 일부 미시적인 관점의 차이 정도로 펼쳐지는가 싶더니 급기야는 큰 맥락상의 기조와 방향성 자체를 나만의 시각으로 펼쳐내는 사람들이 존재한다. 문제될 것은 없다. 100년도 안되는 사이에 엄청난 격동의 시기를 지나온 한반도를 단순 논리로 일관화 하는 것은 당연히 불가능하다. 사상과 이념 뿐 아니라 경제, 사회적 담론 등 물리적인 인간의 수명 빼고 나머지는 너무 빠르게 변했다. 일이차 방정식으로 해결될리 만무하다. 다른 어떤 때와 비교해도 이 시기에 대한 기록은 엄청난 복잡성을 가지고 있을 것이라 예상된다. 팩트도 복잡하고 당연히 이를 바라보는 관점도 덩달아 복합적일 수 밖에 없다. 사상적, 학문적 시각의 다양성은 풍부하면 풍부할수록 좋다. 이 다양성, ..

3주차 바닐라코딩 프렙 회고. input radio radio에서 하나의 값을 선택하게 하려면 아래와 같은 조건을 만족해야 한다. 같은 name 다른 value 프로젝트에서 인풋폼 구성할 때 매번 걸리는 포인트인데 이렇게 구현하는 거였군! html label 매번 중첩해서 활용하는 방법만 알았는데 for 문을 활용법을 확인했다. 좋네~ 단, 유의사항. input 요소에 반드시 id를 함께 세팅할 것. BEM 스타일링 & CSS 좀 애매하고 어렵다. 불편한 느낌도 있고. 그래도 아예 안해보고 치우는것 보다 제대로 해보고 맛을 보자. Battling BEM CSS: 10 Common Problems And How To Avoid Them — Smashing Magazine Whether you’ve just..