API 모킹의 중요성 대부분의 프론트엔드에서의 API 모킹은 개발 초기 단계에서 백엔드 API가 준비되지 않았을 때 MSW를 도입해서 사용합니다. 하지만, 이 API 모킹은 개발 중에도 매우 중요한 역할을 합니다. 에러를 발생시켜야 하는 환경, 로그인이 되었을 때의 화면 등을 테스트해보고 싶을 때 유용하게 사용할 수 있습니다. 왜냐하면 API 모...

수강한 강의 링크 https://www.udemy.com/course/react-native-2022-ko/ 개요 리액트 네이티브는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크입니다. 이는 안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 리액트를 사용할 수 있게 ...

String()은 null, undefined에 대해서도 잘 동작하는 반면, .toString()은 에러가 발생하는 것을 알 수 있다. String(): 어떤 형태이든 문자로 형변환 .toString(): null, undefined 형변환 시 오류 확실히 값이 명시된 경우에는 둘 다 상관없지만, null, undefined와 같이 예외...

1. const handleRemoveclick = (id: number, name: string) => { handleDelete({ id, name }); }; 2. const handleRemoveClick = (id: number, name: string) => () => { handleDelete({ id, name ...

// 함수 선언문 function fn() {} // 함수 표현식 const fn = () => {} 선언문 vs 표현식 호이스팅 여부 export default를 선언과 동시에 할 수 있는가? 이 두가지 차이는 모두 좀 더 깔끔한 코드를 지향할 때 문제가 될 수 있다. 호이스팅 호이스팅이란, 함수 안에 있는 선언들을...

학교 기숙사 생활을 지원하는 앱 개발 과정에서, 사용자의 편의성을 우선으로 고려하여 로그인 페이지 및 로그아웃 버튼이 위치한 페이지 인터페이스를 설계했다. 이번 포스트에서는 React Native 환경에서 Zustand와 AsyncStorage를 활용해 자동 로그인 기능을 구현했던 사례와, 사용자 경험을 고려한 UI/UX 디자인 개선 과정을 공유하려고...

최근 프로젝트에서 Recoil과 Next.js를 함께 사용하면서 발생한 ‘duplicate atom key’ 에러가 발생했다. 이 문제는 Next.js의 재빌드 과정 중 Recoil atom 키가 중복 선언되면서 발생했다. 문제 발생 Recoil은 React 애플리케이션에서 상태 관리를 위한 강력한 도구이다. 그러나 Next.js와 함께 사용할...

React는 컴포넌트 간의 데이터 흐름을 관리하기 위해 ‘상태 끌어올리기(Lift up state)’라는 개념을 제공한다. 하지만 이 방법은 애플리케이션의 복잡도가 증가하면서 관리에 어려움을 겪을 수 있다. 이러한 문제를 해결하기 위해 Zustand와 같은 상태 관리 라이브러리를 활용할 수 있다. React의 Lift up state란 무엇일까? ...

자바스크립트는 객체(Object) 기반의 프로그래밍 언어이다. 원시타입 단 하나의 값 변경 불가능한 값(immutable value) 객체 타입 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조(data structure) 변경 가...

JavaScript에서 연산자 중 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다. 비교 연산자는 if문이나 for문과 같은 제어문의 조건식에서 주로 사용한다. 비교 연산자에는 동등 비교 연산자와 일치 비교 연산자가 있는데, 이는 엄격성의 정도에 따라 구분이 된다. 동등 비교 연산자 그 중 동등 비교(==) 연...