전체 글
-
TIL-2024.07.22 - programmers-lv2 - 이진 변환 반복하기카테고리 없음 2024. 7. 22. 22:43
URL:https://school.programmers.co.kr/learn/courses/30/lessons/70129 프로그래머스코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.programmers.co.kr Code: // URL > https://school.programmers.co.kr/learn/courses/30/lessons/70129const solution = (s) => { let countConversions = 0; // 이진 변환 횟수 let countZerosRemoved = 0; // 제거된 0의 개수 while (s !== "1") { ..
-
TIL-2024.07.18 - TIL - Redux - 003. redux-saga + redux-saga/effects> Frontend/React 2024. 7. 18. 09:20
목표- 기본적인 Redux Saga 사용법- 추가 : Redux Saga / Effects 사용법1. 프로젝트 및 tsconfig.json 설정 > 필요 패키지 설치npm install @reduxjs/toolkit react-redux redux-saga axios @types/react-redux typescript > tsconfig.json 설정{ "compilerOptions": { "target": "es5", "lib": ["dom", "es2015", "es2017"], "allowJs": true, "jsx": "react", "strict": true, "moduleResolution": "node", "esModuleInterop": true, ..
-
TIL-2024.07.17 - TIL - Redux - 002. ReduxSaga 101> Frontend/React 2024. 7. 17. 11:45
목표- Redux Saga 와 Flow- Redux Saga 사용 이유- Redux Saga 사용 전 기본 개념 Redux Saga 와 Flow - Redux Saga 는 Redux Application의 복잡한 비동기 로직을 관리하기 위해 사용하는 미들웨어- 여기서 미들웨어란, Action 을 Dispatch로 전달되고, Reducer 가 실행되기 전 에 처리되는 기능을 의미 - Redux Saga 플로우는 다음과 같이 작동됨. - 1. Dispatch an Action : (React Component 에서 action 을 dispatch )- 2. Redux Saga 작동 : (Redux Saga 는 Dispatch 된 action 을 감지하고, 해당 액션에 대한 Saga 함수를 실행)-..
-
TIL-2024.07.16 - TIL - Redux - 001. Redux 101> Frontend/React 2024. 7. 17. 09:27
목표- Redux 란 ? - 다른 State Management 에 비교했을 때, 장점- 사용 방법 Redux 란 ?- JS Application 을 위한 상태 관리 (State Management) 라이브러리로, Application 의 상태를 예측 가능하고 일관되게 전역에서 관리하기 위해서 사용 사용 이유- React 의 State Management 라이브러리는 Redux 말고도 다양한 라이브러리가 있음. - 대표적인 예로 Zustand, Mobx, Recoil 이 있는데, 아래 블로그 글 참고 상태관리 라이브러리 비교: Redux vs Recoil vs Zustand vs Jotai새 프로젝트 웹소켓을 활용한 여행 플래너 개발을 위한 상태관리 라이브러리로 어떤 걸 사용할 지, 대표적인 4가지..
-
TIL-2024.07.12 - ERROR- Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen.> Extra/Error Code 2024. 7. 12. 12:03
배경 - Login 페이지에서 Email input Tag 에 onChange 될 때, onChangeIdInput 이 실행되어 setId 로 설정하려고 작업- 아래의 코드와 같이 작성 후, 웹에서 id 입력할 떄, 아래 사진과 같은 에러 발생const [id, setId] = useState();const [password, setPassword] = useState();const onChangeIdInput = (event) => { setId(event.target.value);};const onChangePasswordInput = (event) => { setPassword(event.target.value);};... 생략 ...Email... 생략 ... 에러메시지Warn..
-
TIL-2024.07.11 - React - redux 기초> Frontend/React 2024. 7. 11. 12:24
목표- redux 기본 사용법 기본 사용법 1. store.js 설정import {createStore} from 'redux';const counterReducer = (state = {counter: 0}, action) => { if(action.type === 'increment') {return {counter: state.counter+1}} else if(action.type === 'decrement') {return {counter: state.counter - 1}} return state;};const store = createStore(counterReducer);export default store; 2. 사용할 component에 적용 import class..
-
TIL-2024.07.08 - ERROR - Failed to execute 'open' on 'XMLHttpRequest': Invalid URL> Extra/Error Code 2024. 7. 8. 12:01
배경- 평화롭게 작업하는 중, 아래와 같은 에러 발생- 에러 메시지: Error: SyntaxError: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL - network 창에서 확인해보니, api 자체가 전달되지 못한 상황 문제 원인 - VITE_API_URL , 즉 host-name에 semi-colon (;) 가 붙어있는 것을 확인- 이것 이외에도, 보내는 path 에 / 등 이 붙어있어서 오류가 발생하는 건들도 있음.
-
TIL-2024.07.06 - Nginx - 001. Nginx 기초> DevOps/Nginx 2024. 7. 6. 21:29
목표 Nginx 란?> Nginx는 고성능 HTTP 및 리버스 프록시 서버로, 이메일(IMAP/POP3) 프록시 서버 기능도 제공하는 Open-source Web Server 기본 HTTP 설정 파일 설명 > nginx 설치 시 /etc/nginx/conf.d/default.conf 에 기본 HTTP 설정파일이 생성# HTTP protocol 과 80 포트를 이용해 /usr/share/nginx/html root 경로에 저장된 정적 콘텐츠 제공server { listen 80 default_server; server_name www.example.com; // 이 도메인으로 들어오는 요청은 이 서버 블록이 처리 # location은 특정 URI 패턴에 대한 설정을 정의 # 기본블록(/) :..