Today I Learned

• React
• NVM

Today Review

• nvm을 통해 노드 버전관리를 하려고 했다. 왜냐하면 내 프로젝트 외 다른 프로젝트를 봐야할 때가 종종 있는데 이때 node-sass 같은 경우 node의 버전을 다운그레이드 해야한다는 문구를 보았기 때문이다.

• 터미널을 zsh 에서 bash로 바꾸는 작업을 먼저 했다. zsh에서 bash로 터미널 변경하는 방법

• 후에도 계속 nvm은 설치되었지만 command not found 라는 에러 문구가 떴다. source ~/.nvm/nvm.sh 이 명령어로 해결할 수 있었다.

• node-sass 때문에 node를 다운그레이드 하려고 시도한것이지만 허무하게도 node-sass는 npm install이 아닌 yarn install로 하니 잘되었다. 무슨일이지? 그래도 nvm setting 하나 얻어간다..ㅎ

Today I Learned

• React
• Typescript
• eslint/prettier

Today Review

• 타입스크립트 + 리액트에 eslint + prettier를 적용했다. 적용하자마자 뽜 .. 에러가 터져나와서 적용하는데까지도 시간이 많이 걸렸는데 에러 하나씩 잡느라 힘들었다.

• 일단 타입스크립트 + 리액트 + eslint + prettier 세팅 과정에서 yarn run prettier 로 자동화는 .prettierrc 뒤에 확장다 .json을 지우면서 해결할 수 있었다. 설치에 도움이 많이 됐던 글 링크

• cra는 이미 airbnb 세팅이 되어있어서 yarn add eslint-config-airbnb 만 해주면 된다. 이걸 안하고 npx install-peerdeps --dev eslint-config-airbnb 를 하면서 시간이 참 많이도 갔다.

• 그 외에도 vscode에서 자동화 옵션들을 적용해주고 자바스크립트 별도 json파일에서 옵션을 설정해주었다. 아래와 같은 옵션이라고 할 수 있겠다.

  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true,
  "eslint.alwaysShowStatus": true,
  "prettier.disableLanguages": ["js"],
  "files.autoSave": "onFocusChange",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.useTabs": false,
  "eslint.workingDirectories": [
    { "directory": "./client", "changeProcessCWD": true }
  ],
  "eslint.format.enable": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact"
  ],
  "prettier.requireConfig": true

  • 그 다음으로 정말 타입스크립트에서 난 오류들을 잡아주었다. 불필요하게 잡아주는 옵션들에 대해서 하나씩 찾아보며 오류 처리를 무시할 수 있도록 해주었다. 예를들면 리액트 선언했을 뿐인데 뜨는 에러같은것들.. "no-use-before-define": "off", 로 처리 그 밖에 등등의 처리를 해주었다.

• 오늘 오류를 하도 많이 봐서 오류에 면역력이 생길것만 같다.. 오류,, 무섭지 않다 ⭐️

Today I Learned

• React
  • node.js + m1 에러 해결기

Today Review

• Javascript 코드리뷰가 마무리 된 뒤 다시 react 로 돌아오는 과정이다. 이전엔 잘되던 yarn start 와 npm start 뭐가 문제인지 잘되지않았다.

• https://stackoverflow.com/questions/66042288/nodejs-with-macos-fatal-error-in-line-0-gatsby-develop

• 해결방법은 node를 15.9.0 이상의 버전으로 업데이트 하는것이다.

• homebrew를 통해서 업데이트해도 되고 sudo를 통해서 업데이트 해도 된다. 내 문제는 homebrew를 통한 업데이트는 안되고 sudo를 통한 업데이트는 된다는 것이었다. 그와중에 업데이트 된 sudo node는 'installing'으로 표기되지만 'active'는 여전시 15.4로 표기되어있는것.. 정말 갑갑했다. homebrew를 통해서 upgrade 하려고하면 로스타를 설치해야하고 ..

• 문제 해결 와중 애플이 원망스러워져갈무렵..

• homebrew node를 지우기로 결심했다 brew uninstall node 역시나 한번에 되지 않았지만 친절하게 알려준 명령어로 다시 시도하니 homebrew node가 삭제되었다.

• 그리고 다시 node-module을 설치하고 실행하니 되었다. 휴.. 시작한번 하기 어렵다 ^^;;

Today I Learned

• Javascript
  • spread

🚩Where they are..

• in private gitHub

Today Review

수업내용

• url endpoint 는 상수로 관리해주는 것이 좋음

QnA Q_ 검색이 완료된 후 this.target.value = '' 처리, 하지만 다음 input 에 텍스트를 입력하면 이전에 입력했던 단어의 마지막 글자가 나와서 수동으로 지워주어야함. 어떤 키워드로 구글링을 해보면 좋을지 난해.

A_ 영어와 달리 한글의 경우 글자를 타이핑할 때 CompositionEvent(compositionstart, compositionupdate, compositionend)를 타는데, event listener의 callback 내부에서 onSearch를 한 뒤 값을 초기화시켜도 한글의 경우 compositionend가 되지 않았기 때문에, 마지막 글자가 남아있는 것. 현재 상태에서 재빠르게 스페이스바나 방향키를 누른 뒤, input에 값을 입력하면 남아있는 글자가 없는 것을 알 수 있음.

한글이 compositionend가 되려면 뒤에 whitespace(space, enter) 혹은 우측 방향키 같은 키들이 필요. 두 가지 방법이 있을 수 있음. (표준이 있거나 다른 좋은 방법이 있을 수도 있음)

1. onSearch 이후 강제로 blur > 초기화 > focus
2. compositionstart와 compositionend에 flag를 두는 방법 키워드는 IME, CompositionEvent 정도로 찾아봤고, 아래 참고 링크
   • https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent
   • https://stackoverflow.com/questions/51226598/what-is-javascripts-compositionevent-please-give-examples
   • https://ntalbs.github.io/2015/editor-ime/

Review1

• 문제
  • array의 includes가 기존 배열에 영향을 주지 않으므로 spread를 사용하지 않아도 됨
  • array의 concat 자체가 새로운 배열을 만들기 때문에 spread로 배열을 복사하지 않아 됨
  • keyword가 이미 존재한다면 배열을 spread로 복사하지 않아도 됨
• 해결
  • [...this.state.searchHistories] -> this.state.searchHistories

Review2

• 문제
  • 굳이 변수에 const searchHistories = [...this.state.searchHistories] 넣을 필요 없음
  • this.setState({ searchResults, searchHistories })
• 해결
  • const searchHistories = [...this.state.searchHistories] 삭제
  • this.setState({ searchResults, searchHistories }) -> this.setState({ ...this.state, searchResults })

Review3

• 문제
  • filter 는 새로운 배열을 생성하기 때문에 스프레드 기법이 필요 없음
• 해결
  • const nextHistories = [...this.state.searchHistories].filter((target) => target !== this.state.searchHistories[itemIndex]) -> const nextHistories = this.state.searchHistories.filter((target) => target !== this.state.searchHistories[itemIndex])

Review4

• 문제
  • this.state 가 빈배열일 경우 체크
• 해결
  • Array.isArray(this.state) && this.state.length !== 0 빈배열 체크하는 조건 if문에 추가

Review5

• 문제
  • onSearch를 한 뒤 값을 초기화시켜도 한글의 경우 compositionend가 되지 않았기 때문에, 마지막 글자가 남아있는 현상 개선
• 해결

  this.target.blur()
  this.target.value = ''
  this.target.focus()

Today I Learned

• Javascript
  • debounce

🚩Where they are..

• in private gitHub

Today Review

• 움짤 검색기
  • 키워드를 검색하면 키워드의 api를 불러와 검색된 단어의 움짤을 보여준다.
  • 검색한 단어들은 히스토리 내역에 쌓이게 되고 히스토리 내역에 있는 아이템을 검색하면 다시 이동할 수 있다.
    
    

추가기능 및 개선사항

• 중복 키워드는 히스토리에 쌓이지 않게함/ if(){}의 {} 블록 스코프 때문에 고민을 많이했다. 검색어가 패치되는 부분과 히스토리 내역이 쌓이는 부분이 함께 있었는데 if문 조건은 히스토리 내역이 쌓이는 부분만 적용하고 싶었기 때문. 그러면 if문 안의 변수 접근이 되지 않기 때문에 애를 먹었지만 결국 함수화해서 return 해서 사용했다.
• 히스토리 아이템 삭제 기능을 구현/ filter() 을 사용해서 imutable 하게 구현
• 버그 개선/ input의 이벤트를 keyup 으로 받아서 키워드를 api fetch 해주고 있었는데 영어일 경우 문제는 없지만 한글일 경우에는 문제가 생긴다. 다음 키워드를 쉽게 받기 위해서 e.target.value='' 처리를 해놓았는데 이 이후에도 한글 버퍼링 때문에 이전 단어의 마지막 글자가 남아있는것 .. 결국 이벤트를 submit 으로 바꿔서 해결했다. 이 경우 debounce() 가 필요없긴 할것 같다. 엔터키로 키워드를 보내주기 때문..!

Today I Learned

• Javascript
  • mutable, immutable array
  • event delegate

🚩Where they are..

• in private gitHub

Today Review

• 기능구현은 완료해두었는데 코드리뷰를 받고 미쳐 신경쓰지 못한부분을 캐치하게 되었다. mutable array 와 immutable array 부분이다. 기존에 모두 삭제하는 기능을 splice() 함수를 사용해서 만들어두었는데 이 함수는 mutable 함수다. 그리하여 이 부분을 setState([]) 빈배열만으로 결과값을 가져오게 되었다.

• 위와 같은 맥락으로 item별로 삭제하는 기능 또한 splice() 함수를 사용해서 구현했었다. 이를 filter()을 사용해서 새로운 배열을 만들어내어 immutable한 구조로 수정했다.

• 제일 난감했던 부분은 제일 쉬울것 같은 toggle 기능이었다. array 안에 isCompleted를 어떻게 새로운 배열로 클릭한 객체만 수정해서 배열로 넘길수 있을까.. 고민을 했다. 결과적으로 map()에 조건문을 사용해서 immutable한 배열을 만들어냈다.

• event delegate 개념에 대해서 보다 정확하게 이해할수있었다.

• 잘하는 사람들의 코드를 보면 닮고싶다 ㅎㅎ 비록 그 사람은 .. 아.. 망코드네 라고 생각하더라도 어떻게 생각하는지 코드에 습관이 묻어있기 때문에 나 또한 그런 프로들의 습관을 하나씩 닮아가고싶다.

Today I Learned

• Javascript
  • LocalStorage

🚩Where they are..

• in private gitHub

Today Review

export const getItem = (key, defaultValue) => {
  try {
    const storedItem = window.localStorage.getItem(key)
    return storedItem ? JSON.parse(storedItem) : defaultValue
  } catch (e) {
    console.log(e.message)
    return defaultValue
  }
}

export const setItem = (key, value) => {
  try {
    window.localStorage.setItem(key, JSON.stringify(value))
  } catch (e) {
    console.log(e.message)
  }
}

• 혼자 무언가 만들때 아쉬웠던 점은 구현되게 만들었을때 사실상 서버가 없어서 기능을 온전하게 하는 페이지를 만들지 못했다는 것이다. 예전에 친구들과 여행 계획을 세웠을 때 계획차 재미차 웹을 만들었는데 비용관리 프로그램을 만들다가 localStorage를 쓰려고 했던 기억이 있다. 그리고 이렇게 본격적으로 사용해본 경험은 이번이 처음..!!

• key 값을 사용할 수 있었는지 이번 과제를 진행하며 처음 알게되었다. 앞으로 나의 토이 프로젝트에 유용하게 써먹어보아야겠다.

• 'custom event'를 만들어보았다. 연습차 과제에 사용하라고 하셨던것 같은데 아직 그 목적과 쓰임에 부합하는 느낌이 딱 오지는 않는다.

• 스코프에 대해서 공부했다. map(()=>()) 과 map(()=>{})의 차이를 정확히 알기위해서였다. 후자는 블록스코프를 생성하며 전자는 값을 바로 반환단다.

Today I Learned

• Javascript

🚩Where they are..

• in private gitHub

Today Review

• 초반에 아래 코드가 이해가 되지 않아 사용하지 않았고 TodoList.setState(nextState)를 사용했다. 이렇게 사용한 후에야 아래 코드가 이해가 되어 다시 수정해두었다.

  setState = (nextState) => {
    this.state = nextState
    setItem(TODOLIST_KEY, nextState)
    this.components.forEach((component) => {
      component.setState && component.setState(nextState)
    })
  }

• TodoList.js에서 toggleTodoItem과 removeTodoItem을 구현할때 클릭 아이템이 클릭의 개수에 따라 같은 오브젝트가 1개 -> 2개 -> 4개 -> 8개로 늘어나는 오류가 있었다. 알고보니 setState() 안에 setState()를 사용하여 생겨난 결과였습니다. 수정후 정상작동했다.
• TodoInput.js에서 <input type='text' />에 엔터키와 클릭 이벤트를 동시에 적용시키기위해 <form></form>태그를 생성하여 addEventListener('submit', () => {})을 사용했다. 이 과정에서 실수로 remove all 버튼도 form 태그 안으로 넣어버려 배열을 모두 지워도 remove all 클릭시 submit이벤트가 동작하여 아래 코드가 동작되어 삭제버튼 하나가 보이게 되었다. 마크업 구조를 바로잡고 css로 스타일을 수정했다.

  e.preventDefault()
  let inputValue = this.$addItemInput.value
  this.addTodoItem(inputValue)
  this.$addItemInput.value = ''

Today I Learned

• Javascript

🚩Where they are..

• in private gitHub

Today Review

• 실무의 구조에 대해서 익히는 기회였다.
• 파일을 분리하고 파라미터로 셀렉터를 전달하여 각 컴포넌트에서 받도록 해주었다.
• 과제를 진행하면서 setState() 함수를 설정해준 이유를 더 공감하게되었다.
• App에서 각 컴포넌트를 관리하도록 하고 또 그 컴포넌트 안에서 setState(), render()를 구조화시켜 과제를 진행했다.
• Javascript의 비동기 동작 방식에 대한 공부가 진행되었다.

Today I Learned

• Next.js
• Redux

🚩Where they are..

• React SNS in gitHub

Today Review

• redux 내용 계속 진행중
• next Redux wrapper
• front > store 폴더 생성 > configureStore.js 파일 생성
• npm i redux
• npm i next-redux-wrapper --legacy-peer-deps
• store > app.js 설정 (redux 처럼 provider를 감싸주진 않는다)
• front > reducers 폴더 생성 > index.js 파일 생성

  intialState
  action
  reducer

• npm i react-redux
• react-redux 의 useSelector (부모) 참고_ AppLayout.js
• react-redux 의 useDispatch (자식 - 하위컴포넌트) 참고_ * * UserProfile.js
• npm install redux-devtools-extension
• store > configureStore.js

Today I Learned

• Next
• antd

🚩Where they are..

• react-sns in gitHub

Today Review

• next-redux-wrapper를 설치해서 리덕스할 준비중
• 설치가 제대로 되지 않을땐 --legacy-peer-deps 뒤에 붙이기

Today I Learned

• Javascript

🚩Where they are..

• ToDo List in my private gitHub repo

Today Review

Review1

• 문제 : head 태그에서 부르게 되면 main.js가 불리고 로드되는 동안 렌더링이 블로킹
• 해결방법
  1. script의 위치변경
  2. script 태그에 async 속성 추가
• 해결 : script에 async 속성 추가
• 참고문헌 async와 defer의 차이

Review2

• 문제 : EOL이 없으면 문서가 끝나지 않은것으로 간주
• 모든 파일에 EOL( End of Line ) 추가
• 해결방법
  • 비어있는 한줄 생성
• 해결 : enter

Review3

• 문제 : 반복문 map은 immutable array를 만들때 사용함
• 해결방법
  • forEach를 사용
  • some을 사용
• 해결 : map() -> some()
• 참고문헌 some mdn
  • some()은 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트

Review4

• 문제 : 렌더링, 리렌더링 될때마다 DOM Search가 되는 현상
• 해결방법
  • 변수 querySelector('#app'), createElement('div')를 render() 밖으로 이동
• 해결 : 변수들을 constructor{} 안으로 이동

Review5

• 문제 : innerHTML을 여러번 사용해서 실행시 reflow(리렌더링)이 일어나는 현상
• 해결방법
  • innerHTML은 한번만 사용
    1. 변수를 만들어서 변수에 넣어준 후에 innerHTML() 사용
    2. map() 함수에 .join() 사용
• 해결 : 제목과 컨텐츠 변수를 선언해서 마지막에 innerHTML을 한번만 사용

Review6

• 문제 : 인스턴스화 할 때에도 setState를 사용
• 해결방법
  • 인스턴스화 할 때 선언하면 render()와 setState() 한번에 실행되도록 변경
• 해결 : constructor(){} 파라미터에 nextData를 인자로 주어 인스턴스에서 setState()를 생략할 수 있도록 변경

추가 변경사항

• 메세지를 상수로 분리
• 변수명 구체적으로 변경 ( data -> listData, container -> listBox )
• prettier 적용

Today I Learned

• React
• SVG
• CSS flex/grid

🚩Where they are..

• React Movie Code in gitHub
• SVG Code in gitHub
• flex-grid Code in gitHub

Today Review

• 리액트에서 또 파일업로드의 문제가 있었다. 다행이도 전에 한번 겪었던 문제라 eject run 은 쉽게 할 수 있었지만 이번에도 결코 쉽게 해결되진 않았어서 따로 나의 티스토리 블로그에 문제 해결방법을 정리해두었다. react 파일로드 해결방법

• grid는 아직 container에 적용할수있는 속성들에 대해서 공부중이다. grid-templates-columns 와 grid-templates-rows 그리고 신기하게 순수 css지만 그안에 함수를 사용할 수 있다. repeat() 함수와 auto-fill auto-fit minmax() 함수

• svg 파일에 색을 변경하고 싶다면 background-color나 color 가 아닌 fill을 사용한다.

Today I Learned

• Javascript

🚩Where they are..

• Private Git Repository

Today Review

• class 문법을 접할수 있는 기회였다.
• 하루종일 고민하면서 스스로 문제해결 해보는 시간이었다. js 파일을 type=module 로 import 해주었던것 constructor 의 유무의 차이 그리고 this.id = id 에서의 this 가 가리키는것 등등 여러 방면으로 생각해보게된 시간이었다.

Today I Learned

• React
• Javascript

🚩Where they are..

react-movie in gitHub

Today Review

• 어제 한참을 헤매던 그 문제를 오늘에서야 해결했다. 기존 문법들을 hook으로 바꾸면서 진행중인데 uesEffect 를 사용함과 동시에 비동기 함수를 처리하기 위해 try{}catch{}finally{} 를 사용했다. 라이프사이클 문제라고 생각해서 검색 또한 그 방향 위주로 했다. 그렇지만 이게 무슨일.. 그저 다른 컴포넌트에 return()을 잘해주지 않아 발생했던 문제였다. {} 여기에 리턴할 컴포넌트를 넣어두었던것... 느낀점은 ... '오류 콘솔을 제대로 읽자!!'

• Javascript 테스트 문제중 한문제의 의도를 잘못 파악해서 엉뚱한 답변을 해두었다. 클로저를 사용해서 해결해야 하는 문제를 혼자 함수를 바꾸고 난리가 났다. 한번 더 문제를 확인하고 정확한 의도 및 개념을 파악해두어야겠다.

Today I Learned

• React

🚩Where they are..

react-movie in gitHub

Today Review

• 오류 때문에 거의 4시간 가까이 잡아먹었다. 전체적인 리액트 문법을 hook으로 바꿔서 진행중인데 비동기 함수에서 막혔다. throw Error() 로 에러 화면을 확인하려 했는데 잘되지 않은것. useEffect 와 비동기 함수를 같이 사용해서 그런건줄 알고 얼마나 검색을 했던지.. 해결은 그 다음날에서야 가능했다... to be continue..

Today I Learned

• Node.js
• flex/grid
• svg

🚩Where they are..

• Node in gitHub
• flex-grid in gitHub
• svg in gitHub
• interaction in gitHub

Today Review

• 오랜만에 node를 보니 분석하는 시간이 조금 더 걸린듯 하다.

• flex는 업무에서 많이 사용했었는데 grid는 아직 한번도 사용해보지 못했다. flex를 사용했다고 해도 내가 필요한것들만 사용했던 터라 이번 기회에 자세히 익혀놓으려 한다.

• svg의 스타일의 절대적 크기와 viewBox의 상대적인 크기를 잘기억해두어야 할 것 같다. 앞으로 구현하게 될 것들이 기대된다.

• 항상 욕심은 많고 시간이 생각보다 많이 들어간다. 효율적으로 움직이는 방법을 생각해보아야겠다.

Today I Learned

• DOM
• Javascript

🚩Where they are..

• In My Note & My Privite Notion

Today Review

• 문서가 왜이리 안읽히는지.. 소리내서도 읽어도고 나중엔 정리하면서 읽으니 이해가 가는중이다. DOM 에 대한 이해가 이전보다 명확해졌다. 이전에는 DOM이라 하면 막연하게 마크업, html 이 떠올랐는데 그저 html이 아닌 이유를 알게 되었다. 비동기 처리에 대해서도 보다 더 확연하게 알 수 있었다. 계속 정리해나가야지..

Today I Learned

• React
• Next.js
• ANT Design
• CSS

🚩Where they are..

• react-movie: gitHub react-movie in gitHub
• react-node-sns: gitHub react-node-sns in gitHub
• interaction: gitHub interaction in gitHub

Today Review

• react-movie es6 로 바꾸면서 무리없이 진행중이다. react에 typescript 적용하는 부분에 대해서 알고싶다.

• react-node-sns는 ant design로 스타일 입히는 작업을 진행중인데 bootstrap 보다 뭔가 부가적인 기능이 많은 느낌이다. 물론 내가 bootstrap에 대해서 자세히 몰라서 그렇게 느끼는것일 수도 있다.

• interaction에 대해서 공부중이다. 알고있다고 생각한 부분에 대해서 모르고 있었음을 깨닳았다. 동시에 flex/grid, svg 에 대해서도 욕심이 났다. 실행력이 좋아야할텐데..ㅎㅎ

Today I Learned

• React
• Javascript

🚩Where they are..

• react-movie : gitHub react-movie in gitHub

Today Review

• hook으로 바꾸며 여전히 진행중이다. 걱정이 컸는데 생각보다 따라갈만해서 해보는 중이다. 그동안 겁먹었던 데이터바인딩과 api 연결에 점점 친숙해지고 있다. axios create() async() await 일련의 과정이 익숙해졌다.