하고 싶은게 많은 아이의 개발 성장 일지

Fetch API?JavaScript 에서 네트워크 요청을 보낼 때 사용하는 기본 API 과거 XMLHttpRequest 를 사용했으나 코드가 복잡해 가독성이 저하되는 문제가 말생했었다. 이를 개선하기 위해 Fetch API가 등장했는데 Promise 기반으로 비동기 요청을 훨씬 더 깔끔하게다룰 수 있다.1. Fetch API 기본 문법fetch('url', option).then(response => response.json()) // 응답을 JSON으로 변환.then(data => conosole.log(data)) // 변환 데이터 출력.cath(error => console.error('Error:', error)); // 에러처리✅ fetch(URL) : 저장된 URL로 네트워크 요청 보냄✅ r..

이전 비동기 프로그래밍을 다룰 때 콜백함수, 프로미스를 사용하면서 코드가 복잡해지면서 가독성이 떨어지는 문제가 발생했다.이를 해결하기 위해 async / await 등장했다. async/await 에 대해 들어가기 전 비동기 프로그래밍이란 무엇인지부터 알아보도록 하자.1. 비동기 프로그래밍?한 번에 하나의 작업만 수행하는 동기적인 코드와 달리 시간이 걸리는 작업(네트워크 요청 etc)을 기다리는 동안다른 작업을 실행할 수 있도록 하는 방식2. async/await ? 1) async✅ 함수 앞에 붙으며 해당 함수가 항상 Promise를 반환하다록 만듦→ 함수 내 await 키워드 사용 가능  2) await✅ Promise가 처리될 때까지 기다렸다가 결과값 반환→ async 함수 내부에서만 사용 가능안쪽..

Promise비동기 작업을 보다 쉽게 다룰 수 있도록 도와주는 객체기존 콜백 함수 방식보다 가독성/유지보수 ↑ → 비동기 연산의 최종 완료(실패) 여부와 그 결과 값을 나타내는 객체→ 최종 결과를 반환하는 것이 아닌 미래 어떤 시점에서 결과를 제공해주는 것1. Promise 상태 → 한 번 변경되면 재변경 x1) 대기 (Pending) : 초기 상태로 비동기 작업이 완료되지 않은 상태2) 이행 (Fulfilled) : 작업이 성공적으로 완료된 상태3) 거부 (Rejected) : 작업 실패 상태2. Promise 기본 문법1) Promise 객체 생성const myPromise = new Promise((resolve, reject) => { const success = true; if (s..

JSON(Java Script Object Notation)데이터를 저장하고 전송하는 데 사용하는 경량 데이터 형식자바스크립트 객체와 비슷한 형태로 1:1 매핑에 용이 + 저장되거나 전송될 때 문자열(string) 형태로 변환1. JSON 특징- 텍스트 기반 데이터 포맷- 자바스크립트 객체 표기법 따름- 키-값 (key - value) 구조- 중첩 가능- 배열 지원2. 작성 방법{"데이터 이름", "값"}JSON 의 작성 방법은 모든 객체에 문자열 표시가 붙으며 데이터 쌍은 , 으로 구분한다.→ 중괄호는 객체, 대괄호는 배열을 의미한다. (객체 안에 배열 넣기 가능)3. JSON과 호환되는 자바스크립트 타입- string, number, object, array, boolean, null4. JSON과 ..

React에서 라우터를 설정 할 때 기존에는 와 를 사용 했으나React Router v6.4부터 새로운 방식인 RouterProvider가 도입되어 기존 방식보다 더 선언적이고 깔끔한 코드 구조 유지에 좋아졌다. 그래서 나는 Router Provider를 프로젝트에 사용하여훨씬 더 깔끔하고 편리한 방식으로 코드를 작성하고자 하였다. ReactProvider?1. React Router v6.4+ 에서 도입된 새로운 라우팅 방식2. 기존 방식보다 더 선언적이고 깔끔한 코드 작성 가능3. 비동기 데이터를 사전 로드 가능4. createBrowserRouter()와 함께 사용1. BrowserRouter vs fRouterProvider 비교1) 기존 방식기존 React Router 는 안에 와 를 정의..

React 는 기본적으로 SPA (Single Page Application)로 하나의 HTML만 로드된 상태에서 페이지를 바꾸는 것 처럼 동작한다.그러나 브라우저의 주소(URL)에 따라 다른 화면을 보여주는 기능은 제공되지 않는다.  그렇기에 React Router를 통해 페이지 새로고침 없이 URL 변경 및 해당하는 컴포넌트를 렌더링하는 것이다. +)기본적으로 HTML의 태그를 사용하면 클릭할 때마다 페이지가 새로고침된다. → 대체해당 방식은 SSR(서버 사이드 렌더링)에서는 괜찮으나 React와 같은 CSR(클라이언트 사이드 렌더링)에서는 비효율적이다.React는 컴포넌트 기반 UI를 사용하기 때문에 전체 페이지를 로드하는 것이 아닌 필요한 부분만 변경하면 된다. React Router? 1. ..

00. Day.js란JavaScript에서 날짜와 시간을 다루기 위한 라이브러리이다.📌특징가벼움 : 약 2KB 크기로 번들 사이즈를 줄일 수 있다.빠름 : 불필요한 기능 없이 최적화된 성능을 제공한다.불변성(Immutability) 지원 : 기존 객체를 변경하지 않고 새로운 객체를 반환한다.Moment.js 와 유사한 API : 기존 Moment.js 사용자도 쉽게 적응이 가능하다.플러그인 확장 가능찾아보니 Moment.js의 경우 업데이트가 중단되어 공식적으로 유지보수되지 않으며파일 크기가 약 300KB로 크고, 성능 최적화도 부족하여 Dayjs보다 상대적으로 느리다. 그렇기에 나는 Day.js를 사용하여 날짜를 구현하고자 한다.01. 설치 방법npm install dayjs혹은const dayjs=..

react native 에서는 svg 파일을 따로 불러와 사용하는 것보다 react-native-vector-icons를 통해편하게 icon을 사용할 수 있다.00. react-native-vector-icons 설치npm install react-native-vector-iconsReact Native 0.60 이상에서는 자동 링크가 지원되므로 별도로 link 명령어를 사용하지 않아도 된다.설치 후 ios 와 안드로이드에 맞게 설정을 해주어야 한다. 01.  ios : xcode 에 프로젝트 파일 열기xcode를 키고 해당 위치에 있는 Pods.xcodeproj 를 눌러 현재 프로젝트 파일을 열어준다.01.  Fonts폴더 만들기./TodoWithMe/TodoWithMe 디렉토리에서 Fonts 폴더를 ..

react-native 환경에서 안드로이드 앱 개발을 프로젝트로 진행중이라Mac에 안드로이드 스튜디오를 설치했다.00. Android Studio 설치 : https://developer.android.com/studio?hl=ko mac 환경에 맞게 다운을 받아준다. 나는 Apple chip M1이라 Mac with Apple chip 을 다운 받았다.Android Studio 를 제대로 설치하면 위와 같이 뜨는데들어가서 전부 다운 받고 협업 중인 프로젝트를 열어 준다.01. SDK 설정Tools > SDK Manager 를 눌러 SDK 를 설정한다.안드로이드 SDK Location은 환경 설정 경로를 설정해야 하기 때문에 미리 복사해두자.SDK platforms 를 선택하여 설치 받고 Image Sy..

React Native에서 텍스트(Text) 컴포넌트를 사용할 때, 화면 크기나 내용에 맞게 폰트 크기를 조정하거나텍스트가 여러 줄로 표시되도록 처리하는 과정을 해야 회전이나 다양한 디바이스에서 텍스트가 잘리지 않도록자동 크기 조정 기능을 수행할 수 있다. 이번 포스팅에서는 내가 프로젝트하며 직면한 문제들과 해결하기 위해 어떻게 풀어나갔는지 작성해보도록 하겠다.첫 번째 문제 : rem 단위 미지원react-native를 활용한 프로젝트를 진행하고 있는데 react와 달리 rem 이 지원되지 않아 반응형 디자인에 첫 번째 문제가 발생했다.이를 해결하기 위해 remToPx 함수를 활용하여 rem 단위를 px 단위로 변환하여 사용했다.import { PixelRatio } from 'react-native';..