괴발개발 성장기

redux JavaScript 애플리케이션의 상태를 효율적으로 관리하기 위한 상태 관리 라이브러리 하나의 상태를 갖는다. => 어플리케이션의 복잡성을 낮춘다. # store - 정보(객체)가 저장되어 있는 곳 - 안에는 state가 있다. 직접 접근 불가능 # action - 상태를 변경하는 작업을 나타내는 객체 - type 속성 일반적으로 가지고 있다. # reducer - state값을 가공해서 리턴해주면 state에 새로운 값이 된다. - 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수 # state - state는 객체이다. - state를 다이렉트로 수정할 수 없다. # dispatch - reducer 호출 해서 state 값을 변경해준다. - subscribe를 이용해서 render 함..

설치 방법 yarn add redux yarn add react-redux # index.js import {Provider} from "react-redux"; ReactDOM.render( , , document.getElementById('root') ); : Redux 스토어를 React 애플리케이션에 제공하는 역할을 하는 Provider 컴포넌트이다. store는 Redux 스토어 객체로, 이를 통해 애플리케이션의 상태를 관리한다. # actions.js - 액션을 만든다. export const updatePageState = (state) => { return { type: "UPDATE_PAGE_STATE", payload: state, }; }; - type : 액션의 유형을 나타내는 문..

# 배경 무료 인원 수가 넘어서 gitLab을 무료로 사용할 수 없었다. 그래서 gitLab를 데브서버로 사용하는 방법을 찾아서 담당자가 변경을 했다. 그래서 원격 저장소 주소를 변경해야했다. # 문법 git remote set-url [리모트이름] [새로운 원격 URL] # 예시 git remote set-url origin git@github.com:YooGenie/react-study.git 원격저장소를 이동시킬 때 사용하면 된다.

# 배경 맥북을 초기화시키고 다시 SSH 키를 만들라고 .ssh 디렉토리로 이동하려고 했는데 아래 메시지가 발생했다. # 에러 메시지 cd: no such file or directory: /Users/genie/.ssh # 해결 방안 디렉토리가 없는게 문제여서 직접 만들어줬다. mkdir .ssh 그리고 나서 SSH를 발급 받으면 된다. 2022.09.25 - [기타 등등/MacBook 입문기] - [macOS] SSH 키 생성하는 방법 [macOS] SSH 키 생성하는 방법 # 배경 github에서 clone 받기 위해 SSH 키가 필요했다. # 방법 1) 터미널에서 SSH Key가 있는 확인 해보자 $ cat ~/.ssh/id_rsa.pub 명령어를 치면 아래와 같은 문구가 나온다. 현재 나는 ss..

# 배경 주민등록번호 뒤자리를 *(별)표시로 해놓은 걸 풀어서 볼 때마다 이력을 남겨야했다. 그래서 눈을 클릭했을 때 API를 호출하고 싶었다. 그리고 눈이 풀렸을 때 눈을 빨간색으로 하고 싶었다. 몇 달이 지나고 Input에 disabled가 ture일때도 눈이 풀려야했다. 눈을 제어하는 방법을 찾아봤다. # 눈 제어 부분을 찾기 visible ? : } /> visible이 ture 일 때 눈이 열리고 false 일 때 눈이 닫힌다. # visible이 ture 일 때 눈 색 변경 - 파고 파고 파서 옵션을 알아냈다. twoToneColor="" - 눈이 열렸을 때 빨간색으로 변경하고 싶다. # 눈을 클릭할 때 함수를 호출하기 - 눈을 클릭할 때마다 API 호출하는 함수를 타고 싶다 - 클릭할 때마다..

# 배경 회사 동료와 git 이야기를 하다가 stash를 서로 다른 방식으로 사용한다는 것을 알았다. 나는 모르고 dev에서 코드를 짜를 때 stash를 한 후 해당 브랜치로 이동할 때 많이 사용한다. 그리고 임시저장한 것을 불러올 때 git stash apply를 많이 사용한다. 회사 동료는 충돌을 방지하기 위해서 사용한다고 한다. stash 한 다음에 pull 받고 git stash pop으로 불러온다고 했다. 그래서 git stash를 알아봤다. # git stash 사용목적 - 빠른 브랜치 전환을 할 때 임시적으로 저장할 수 있다. - 일부 변경 사항은 아직 커밋하고 싶지 않을 때 임시로 저장할 수 있다. - 충돌을 해결할 수 있다. => 작업 끝나면 stash 해놓고 pull 받고 git sta..

# 배경 테스트 코드를 돌리는데 기부금영수증 이메일이 안보내지는 것을 알게 되었다. 아래와 같은 에러 메시지가 나온다. (이메일 보내는 SMTP를 구글 서버를 사용한다.) # 에러메시지 msg=": 552 5.7.0 This message was blocked because its content presents a potential\n5.7.0 security issue. Please visit\n5.7.0 https://support.google.com/mail/?p=BlockedMessage to review our\n5.7.0 message content and attachment content guidelines. k27-20020aa7999b000000b006bd67a7a7b3sm1600569p..

# 배경 git stash를 알아보다가 git 원리를 공부해봤다. # Git # Working Directory - 현재 작업 중인 프로젝트의 파일 및 디렉토리가 실제로 존재하는 디스크 상의 디렉토리를 나타낸다. - 파일 생성, 수정, 삭제를 마음대로 할 수 있다. - 모든 변경 사항은 추적이 불가능하다. # Staging Area (Index) - 프로젝트의 파일 변경 사항을 커밋하기 전에 임시로 저장해주는 곳이다. - Working Directory에 git add하면 변경된 내용이 Staging Area으로 이동한다. - git status를 통해서 변경사항이 저장되어 있는지 안되어 있는지 알 수 있다. # Repository - git commit를 통해서 변경 사항을 스냅샷으로 저장한다. - 스..

# 배경 리스트에서 이름과 주민등록번호가 동일하면 가격을 합쳐주는 코드를 짰다. 이름과 주민등록번호 같은걸 매칭할 때 includes()를 사용했다. 그런데 이름에 삼성전자, 삼성이 있으면 삼성의 가격들이 삼성전자 가격에 합쳐졌다. 테스트를 할 때 이름을 다양하게 쓰다가 발견을 했다. String을 찾을 때 정확히 다 매칭되는 경우 가격이 합치는걸로 사용로 했다. # 리스트 정보 => 변수명 : list id 이름 등록번호 수량 금액 1 지니 990101-2****** 3 6272 2 지니 990101-2****** 1 1830 3 유지니 990101-2****** 2 3660 4 유지니 990101-2****** 22 55318 5 유지니 990101-2****** 2 4442 6 지니 990101-2..

# 배경 같은 코드인데 내 local에서는 실행이 안되고 다른 개발자 local에서는 실행이 되었다. 그래서 antd 버전을 체크하기로 했다. package.json를 보면 다 똑같은 걸 사용하는데 어떻게 버전이 틀릴 수 있냐고 생각할 수 있다. 그런데 package.json에는 아래와 같이 써있다. "antd": "^4.20.0", 내꺼는 4.20.12 이고 다른 개발자는 4.20.10 이었다. # ^ 의미 ^ 기호는 일반적으로 패키지의 버전 범위를 정의할 때 사용한다. 그래서 4.20.0이상 5.0.0 미만까지 사용이 가능하다. # 패키지 버전 조회 npm ls [패키지명] 해당 패키지 버전을 조회할 수 있다. # 예시 npm ls antd 버전을 알 수 있다.