y.developer

2023.12.06 수 Thunk의 주요 개념 살펴보기 Redux toolkit에 내장되어 있는 기능 미들웨어 dispatch 시, 객체가 아닌 함수를 dispatch 비동기 통신 처리 1. RTK(Redux Toolkit)에 내장되어 있는 기능이다. Redux Toolkit은 Redux Thunk를 기본 미들웨어로 포함하고 있어 별도의 설치가 필요하지 않다. 2. 미들웨어이다. Redux Thunk는 Redux 미들웨어로 작동한다. 이는 액션을 보내기 전과 후에 추가적인 로직을 실행할 수 있게 해 줍니다. 3. 함수를 dispatch 할 수 있다. 기본적으로 Redux는 객체 형태의 액션만을 dispatch 할 수 있다. 하지만 Redux Thunk를 사용하면 함수를 dispatch할 수 있게 되어, ..

2023.12.05 화 1. fetch와 axios - HTTP 요청을 처리하기 위한 도구 - fetch와 axios는 모두 HTTP 요청을 처리하기 위한 JavaScript 라이브러리이다. - GET, POST, PUT, PATCH, DELETE 2. React에서 axios를 fetch보다 선호하는 이유 - 자동 JSON 변환 axios는 응답을 자동으로 JSON으로 변환한다. 반면, fetch를 사용할 때는 응답을 JSON으로 수동 변환해야 한다. - 요청 취소 axios는 요청 취소 기능을 제공한다. 이는 특정 조건 하에서 API 호출을 중단할 수 있게 해준다. fetch는 기본적으로 이 기능을 제공하지 않는다. - 타임아웃 설정 axios를 사용하면 요청에 대한 타임아웃을 설정할 수 있다. 이는..

2023.12.04 월 프래그래밍에서 모듈 시스템은 코드를 구조화하고 재사용 가능한 조각으로 분리하는데 중요한 역할을 하며 많은 부분에서 export와 import 된다. 모듈을 불러올 때 자동완성을 사용하다 보면 import, require 두 가지의 방법으로 입력되는 것을 볼 수 있다. 어떤 경우에 사용이 되는지, 어떤 것을 사용하는 것이 더 좋은지 궁금해서 찾아보게 되었다. 1. import ES6에서 도입된 표준 모듈 시스템이다. 주로 브라우저 측 JavaScript 및 모던 프론트엔드 프레임워크에서 사용된다. import는 비동기적으로 동작하며, 필요한 부분만 가져올 수 있다. import myModule from './myModule'; 사용 목적 브라우저에서의 사용을 강조하며, 더 최신의 J..

2023.12.01 금 조건문을 통해서 코드를 작성하기 위해서 Boolean으로 나타내야 할 때가 있다. 그때마다 비교연산자를 쓰려니까 너무 비효율적이라는 생각이 들었다. 조건문에 바로 Boolean 타입으로 변환하여 작성하는 방법을 찾게되었다. 1. Boolean() 함수 인자를 명시적으로 불리언으로 변환한다. 어떠한 값이 주어지면, 이를 불리언 값으로 변환하여 반환한다. const value = "Hello"; const booleanResult = Boolean(value); console.log(booleanResult); // true 2. !! (논리 이중부정 연산자) 변수나 값을 강제로 불리언으로 변환시킨다. 해당 값이 참인지 거짓인지 명확하게 확인할 때 사용한다. const value = ..

2023.11.30 목 그동안 메모했던 꿀팁들을 모아봤다. 나중에 찾아볼 나를 위해서라도 흩어져있는 정보들을 한 곳에 모아서 정리해야겠다. 1. ENV란? 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL, 포트, API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. 기억해야할 것! - 환경변수의 이름은 REACT_APP_로 시작하게 만든다. process.env.REACT_APP_은 예약어이므로, 다른 이름은 사용하면 React가 인식하지 않는다. 이는 의도적인 것으로, 우연히 우연히 같은 이름..

2023.11.29 수 JavaScript에서 `??`는 Nullish 병합 연산자로 알려져 있습니다. 이 연산자는 왼쪽 피연산자가 `null` 또는 `undefined`일 때만 오른쪽 피연산자를 반환합니다. 그 외의 경우에는 왼쪽 피연산자를 반환합니다. 예를 들어: const value = someValue ?? defaultValue; 위의 코드에서 `someValue`가 `null` 또는 `undefined`이면 `defaultValue`가 `value`에 할당됩니다. 그렇지 않으면 `someValue`가 `value`에 할당됩니다. 이 연산자는 기존의 `||` 연산자와 비슷해 보일 수 있지만, `||`는 왼쪽 피연산자가 falsy한 경우에도 오른쪽 피연산자를 반환합니다. 반면에 `??`는 `nul..

2023.11.28 월 순수 리덕스는 이제 잘 사용되지 않는 추세이다. 편의성을 갖춰 더 효율적인 방법으로 고안되어 탄생한 Redux Toolkit을 주로 사용한다. Redux Toolkit은 Redux를 더욱 효과적으로 사용할 수 있게 도와준다. 이를 통해 간단하고 강력한 API를 제공하여 Redux 코드의 생산성을 높이고 반복적인 작업을 줄일 수 있다. Redux Toolkit에 대해서 알아보자! Redux Toolkit 리덕스 툴킷은 우리가 이전에 배운 리덕스를 개량한 것으로 생각된다. 리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 ..

뉴스피드 프로젝트 (2023.11.21 ~ 11.27) B반 7조 - 7ㅏ보조 KPT 회고 프로젝트를 마치고 회고하는 과정으로 Keep, Problem, Try 부분으로 나누어 진행한다. Keep : 잘하고 있는 점, 계속 이어갔으면 하는 부분 Problem : 개선이 필요하다고 생각되는 부분, 아쉬웠던 부분 Try : 앞으로 시도해 보면 좋을 방법 및 문제 해결책 KPT 회고 진행 팀 프로젝트를 제출하고 이번에도 프로젝트를 되돌아볼 수 있는 회고를 진행했다. Figjam을 활용해서 실시간으로 의견을 작성하고, 이야기를 나누는 시간을 가졌다. 정들었던 팀원들과의 마지막 회의, 마음껏 보드를 꾸미며 진솔한 마음을 꾸밈없이 나눌 수 있었다. Keep 잘하고 있는 점, 계속 이어갔으면 하는 부분 SA와 와이어..