DH의 개발 공부로그

API란? API는 "Application Programming Interface"의 약자로 응용 프로그램 간 상호 작용을 가능하게 하는 소프트웨어 인터페이스를 말합니다. 간단하게 API는 일종의 중개자 역할로 API를 이용해서 데이터를 주고받거나 서비스를 요청할 수 있는 방법을 제공합니다. 예를 들어보겠습니다. 레스토랑에 간 손님(클라이언트) 이 웨이터(API) 에게 음식을 주문을 하면 주방장(서버) 이 주문에 해당하는 음식을 제공을 합니다. 위의 상황이 바로 간단하게 API를 이용하여 데이터를 주고 받는 상황이라고 할 수 있습니다. API는 어떻게 사용 될 까? API는 웹 개발, 모바일 앱 개발, IoT, 클라우드 컴퓨팅, 인공 지능 등 다양한 분야에서 널리 사용되고 있으며, 현대 소프트웨어 개발에..

서론 최근들어 CRA방식이 아닌 Vite를 이용한 프로젝트들을 작업하다보니 의문이 드는 지점이 있었습니다. 바로 리액트파일을 생성을 할 때 다음과 같이 + SWC가 붙어있는게 과연 무엇을 의미하는지 입니다. SWC란? 바로 구글링을 통해 알아 본 바로는 SWC란 Speedy Web Compiler의 약자로 Rust라는 언어로 제작이 된 말 그대로 매우 빠른 자바스크립트 컴파일러이며, 기존 Babel이 하던 일의 대체제라고 합니다. 또한 SWC는 컴파일러이지만 웹팩과 같은 자바스크립트 번들러의 기능도 제공하고 있다고 합니다. 따라서 그냥 컴파일러가 아닌 SWC란 Rust기반의 플랫폼입니다. SWC가 왜 빠를까? 바로 SWC가 Rust 기반의 툴이기 때문입니다. Rust 언어의 특징이 바로 병렬 처리를 고려..

서론 리액트로 작업을 하다 보면 console.log를 이용해서 작업을 확인 할 때가 있는데, 그때마다 콘솔 창에는 두 번씩 찍혀있습니다. 이 말은 렌더링이 두 번씩 된다는 것입니다. 그래서 항상 작업을 할 때마다 그 이유가 무엇일지 궁금했기 때문에 이번에 이렇게 정리하게 되었습니다. 두 번씩 찍히는 이유? 결론부터 설명을 드리면 바로 로 감싸져 있기 때문입니다. StrictMode? StrictMode란 리액트 공식 문서에 따르면 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구이며, Fragment와 같이 UI를 렌더링하지 않고, 자손들에 대한 부가적인 검사와 경고를 활성화 한다고 합니다. 그리고 StrictMode는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다. ..

서론 가격표를 표시 할 때는 10000원 보다는 10,000원 식으로 표시해야 가독성이 좋습니다. 하지만 숫자 데이터를 표시하면 콤마 없이 표시되기 때문에 이번에는 자바스크립트를 이용해서 콤마를 찍어주는 방법을 정리해보겠습니다. 1. 정규 표현식 사용하기 첫 번째 방법은 replace() 메서드에 정규 표현식을 사용하여 콤마로 변환하는 방법 입니다. const num = 123456789 console.log(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")) // 123,456,789 ※ 정규표현식에 대해서는 글이 길어지기 떄문에 다음에 정리하겠습니다. 2. toLocaleString() 두 번째로는 toLocaleString() 메서드를 이용하여 콤마를 찍..

Redux Toolkit 리덕스 툴킷이란 리덕스의 여러가지 불편했던 부분들을 리덕스 팀에서 개선하고, 더욱 효율적으로 리덕스를 이용할 수 있도록 만든 도구 모음입니다. 그리하여 리덕스 공식문서에서는 러덕스 툴킷이 필수는 아니지만 사용하기를 적극 권장하고 있습니다. Redux Toolkit의 장점 초기 설정이 간편해졌습니다. 리덕스 툴킷 내부에 설치되어있어서 더이상 다양한 패키지들를 설치 하지 않아도 됩니다. (redux devtool, immer, thunk 등등) 반복되는 코드가 많아서 코드가 복잡해졌던 부분이 개선되었습니다. 툴킷에서는 더이상 불변성을 신경쓰지 않아도 됩니다. 코드 비교 및 사용 방법 1. createSlice 기존 리덕스에서는 action value, action creator, i..

상대 경로로 파일 import 우선 절대 경로를 설정하기 이전에 상대 경로로 import 했을 때의 방식은 다음과 같습니다. import Home from './pages/Home' import Detail from './pages/Detail' import ToDoLIst from '../components/ToDoLIst';위의 경우와 같이 ./ 또는 ../을 이용하여 경로를 찾아가서 import 해야 합니다. 지금의 같은 경우는 어렵지 않게 찾아가기도 하고, 크게 가독성을 떨어뜨리지는 않는다고 볼 수 있지만, 뎁스가 깊어지고, 폴더가 다양해지면 나중에는 ../../../../파일명의 형태처럼 복잡하고 가독성이 떨어지게 됩니다. 그래서 이 문제를 해결하기 위..

문제 발견 이전의 작업을 했던 리액트 Set을 이용한 checkbox를 다루었던 코드에서 문제점이 있었습니다. [React] 리액트에서 Set 이용한 Checkbox 상태관리하기! 이전의 코드를 확인하고 싶으면 다음과 같습니다. 이전 소스코드 확인하기 문제점이 무엇인지 확인을 해보면, 우선 전체선택과 개별선택이 있는 체크박스의 기능들은 다음과 같아야 합니다. 개별 체크박스 선택/해제 기능 전체 선택을 클릭 시 전체 선택/해제 변경 기능 전체 선택 시에 하나라도 체크가 해제되면 전체 선택 박스 체크 해제 모든 체크박스가 선택될 경우 전체 선택 박스 체크 활성화 이렇게 4가지의 경우가 충족이 되어야 합니다. 하지만 위의 코드에서 1번과 2번의 조건은 충족이 되지만, 3번과 4번의 기능들은 충족하지 못하는 문..

Git Add 취소하기 가끔 add를 실수로 해서 다시 unstaged 상태로 되돌리고 싶을 때가 있습니다. 그럴 때에는 다음의 방법으로 add를 취소 할 수 있습니다. 1. Git Reset HEAD $ git reset HEAD reset 명령어를 이용하여 전체 파일을 unstaged 상태로 되돌릴 수 있습니다. 그리고 reset 뒤에 파일명을 입력을 하면 개별로 취소 할 수도 있습니다 $ git reset HEAD [파일명] 여기서의 HEAD는 HEAD가 가리키는 시점의 버전으로 파일을 unstage하고 되돌린다는 것을 지정을 해주는 것입니다. 2. git restore --staged git reset과 사용법은 비슷하지만, restore를 사용할 경우에는 반드시 해당 파일을 지정해야만 합니다. ..