여씨의 개발이야기

node 버전 변경하는 방법을 계속 못 외우고 매번 찾다가 이 기회에 따로 정리해두려고 한다. nvm(node version manager)란 ? 여러개의 노드 버전을 사용할 수 있는 도구 1. 깃헙에서 nvm 설치 https://github.com/coreybutler/nvm-windows/ GitHub - coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go. A node.js version management utility for Windows. Ironically written in Go. - GitHub - coreybutler/nvm-windows: A node.js v..

내용 출처 : https://www.youtube.com/watch?v=TTLHd3IyErM front-end 개발자가 되기 위해선 총 다섯가지를 학습해야한다 basic tools : 개발을 하기 위한 기본적인 툴 Computer MacOS Windows Linux Text Editor VS Code : 강력한 extend와 무료 라이센스가 큰 장점 IntelliJ : 강력한 리팩토링 기능까지 지원하나 라이센스를 별도로 구입해야 함 Atom Sublime Text Browser Chrome Edge Safari Firefox Terminal Powershell Bash zsh front-end : 프론트엔드 스킬 HTML HTML은 웹의 Structure이다. Tags Page Structure Sema..

📢 이 버그 좀 보세요! 다른 페이지에서는 잘 돌아가는 toDate 함수가 갑자기 properties를 찾을 수 없다며 오류가 났다. 구글링해보니 제일 많이 발생하는 오류 top 10에 속한다고 한다. 🐞 버그가 나타난 이유? 처음 페이지가 마운트 될 때 View의 props는 undefined 상태이기 때문에 undefined.toDate()가 properties of undefined 에러가 떴다. 🕸 어떻게 이 버그를 잡을까? &&연산자를 이용하자. &&을 통해 props를 통해 받은 값의 유무를 체크한 뒤에 아래 소스에서 selectedValue.grt_date가 undefined일 경우에는 뒤에 toDate()함수를 타지 않도록 처리한다. function View(props) { const { ..

사이드프로젝트에서 mui의 dialog component를 사용하고 있는데 background를 image로 적용해야하는 상황이 왔다. 일반적인 방법으로 적용이 안 되어서 꽤나 애먹었던 부분이다. 적용 방법은 정말 간단하다. Dialog의 속성값 중 PaperProps 속에 style을 아래와 같이 적용해주면 된다. 📇 소스보기 {selectedValue.grt_title} {selectedValue.grt_contents} handleItemClick()}>닫기

📢 이 버그 좀 보세요! 🐞 버그가 나타난 이유? 위 버그는 모듈을 모두 import하기 전에 변수나 상수를 선언할 경우 발생하는 버그였다. 아래는 버그가 발생한 코드이다. import firebase from '../firebase'; import { getFirestore, collection, addDoc, serverTimestamp } from "firebase/firestore"; const database = getFirestore(firebase); //정보가 올바르면 아래 파이어스토어 접근 import Auth from "./auth"; function MainPage() { 🕸 어떻게 이 버그를 잡을까? import문 다음에 변수/상수를 선언해주자. import firebase from..

일반적인 repository > github.io 홈페이지 만들기로는 react app은 불가능해서 이런 저런 삽질을 한 결과 아래와 같은 홈페이지를 만들 수 있게 되었다. 개발자들은 꼭 만들어야한다는 github.io 홈페이지 만드는 방법을 알아보자. https://yeojisun.github.io/react-slick-card-multiple-row-carousel/ React App yeojisun.github.io 1. create-react-app을 통해 만든 react app 디렉토리 내의(git repository 위에 올라가있다는 전제하에) package.json에 hompage 속성값을 추가한다. ... "homepage": "https://yeojisun.github.io/react-s..

요즘 개발언어들이 버전 업그레이드를 하면서 단축해서 코딩을 할 수 있도록 하는 방법들이 많이 나오고 있다. 예를 들어서 (지금은 좀 오래 되었지만,) C#은 삼항연산을 이용하여 ?으로 조건문을 줄이기도 한다. 하지만 이렇게 코드를 줄이는 것이 마냥 좋은 방법은 아니라고 한다. 심지어 아래와 같은 한 줄짜리 코드도 지양하며 전부 컨벤션으로 작성하도록 한다. 특히 더 큰 기업에서는 지양하기를 권장한다. // No여요! if (true) return; // Yes여요! if (true){ return; } 이유는 "가독성", 그리고 코드 수정 시에 어떤 부분이 명확하게 바뀌었는 지 보기 위함이다.(마치 JS에서 trailing comma를 하기 위함과 비슷하다고 보면 된다.) 조직이 커질 수록 코드는 더 단순..

git에서 기존의 repository를 확장하는 법을 따로 찾지를 못 해서 새로운 repository를 생성해 기존 repository를 복사해서 별도의 repository로서 확장작업을 하려고 한다. 일단 아래와 같이 폴더가 존재한다. react-slick_multiple-row-carousel은 기존 repository, react-slick-card-multiple-row-carousel은 새로운 repository이다. 1. mirror clone git clone --mirror {기존 repository 주소} -- 특정 브랜치만 가져올 경우에는 git clone -b {브랜치명} --single-branch --mirror {repository 주소} clone이 정상적으로 됐다면 새로 만들..

📢 이 버그 좀 보세요! 🐞 버그가 나타난 이유? 구글링을 해보니 해당 버그가 발생하는 이유는 render가 되는 과정에서 state를 변화하는 function이 있다면 re-render가 반복적으로 일어나 Too many re-render 버그가 뜨는 것으로 확인됐다. handleClickOpen 함수안에서 state 상태값을 변경하는 함수가 있다. 즉, props를 통해 전달받은 변수를 setState에 넣을때 무한루프가 걸린다고 보면 된다. ... const handleClickOpen = (value) => { setOpen(true); setSelectedValue(value); }; ... // onClick 이벤트내의 handleClickOpen함수가 바로 리랜더링을 유도하는 함수였다. {c..

react 컴포넌트를 선언할 때 두 가지 방법이 있다. 바로 class방법과 function방법이다. 19년부터 function형 컴포넌트에 hook을 지원하면서 지금은 공식 문서에서 공개적으로 function형 컴포넌트와 hook을 같이 사용할 것을 권장하고 있다. 그렇지만, class를 자주 사용하지 않더라도 아직까지 사용하는 기업들이 있다. 그 프로젝트의 유지보수를 위해서는 클래스형 컴포넌트에 대한 개념은 알고 있어야한다. 1. function형 컴포넌트 import React from 'react'; function App() { const contents = 'hi'; return {contents}; } export default App; function형 컴포넌트는 class형 컴포넌트에 비..