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..

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..

이번주 화,수는 영상강의 및 과제 요구사항을 러프하게 파악하는 시간을 가졌다. 목요일 아침부터 프로젝트를 본격적으로 시작했다고 봐야하는데, 시간은 대략 8시간 정도 활용한듯. 그런데 이때 쓴 시간중 5할이 막힌 부분에서 정처없이 해맸던것 때문이었는데... 결과적으로는 O와 0 때문이었다. 그렇다... O, X를 컨트롤하는 프로젝트에서 O를 0(숫자)으로 입력하고서 "왜 안되지?"를 계속 하고 있었던것;;; 매주 사소한 실수들이 발목을 잡는다. 이런것에 대해서 근본적으로 해결하는 방법이란게 있을까 싶지만서도;;; (내가 문제인거잖아 ㅠ)

이상했다. 아무래도 이상했다. 왜 자꾸 리로드가 되는 것인가. 처음으로 npm start 해서 환경이 편한건 알겠다. 그런데 콘솔을 찍어볼 수가 없잖아!! 도무지 안되잖아!! 결국 온갖 방법들을 동원해봤지만 해결이 안되서 애꿏은 이틀만 버리고 말았다. 그런데... 하아... 그런데.... preventDefault 하나로 끝... 하아... text input 쪽에 엔터키 등을 위해 달았던 함수가 정작 실행될 함수에서는... 하아... 그리고 사실 뭐 어이가 없을 이유도 없는게 submit 속성에 대한 내 지식부족도 한몫 했으니 할말은 없다. 반나절이면 끝날 일에 엄청 시간을 잡아먹었다. 이래서 사람은 실력과 경험을 쌓아야 하는거다 ㅠ 여튼 그래도 마무리!! (음... 다른 Merge requests 봐..

최종 합격 통보를 받았고, 19일 부터 시작이다. 막판에 몰린 사람들을 보고 살짝 허걱하긴 했는데(슬*** 동료 개발자 지원하고 떨어져봤다는 이야기도 들어서) 다행스럽게 안착. 기분이 묘하다. 이렇게 또 하나의 큰 여정이 시작되고 있다. 그리고 큰(?) 불확실성 하나가 사라진만큼 이제 필요한 컨텐츠 생산도 동시에 슬슬 진행하려 한다. 이 카테고리에도 슬슬 하나씩. 기획자로서 개발자로 커리어 확장을 해나가는 과정에 대한 이야기들, 그리고 이 업종(?)에 대한 나만의 생각들을 하나씩 정리해 나가보려함. 여기서 초안을 작성하고 정돈해서 브런치에도 개재해볼까 생각 중이다. BREEZ 프로젝트도 슬슬 가동. 할 일 많네 ㅋ 계획을 잘 짜보자.