📖 들어가며 최근 React Native + TypeScript 로 간단한 어플을 만들면서 공부하던 도중에 환경 변수 (env)를 적용이 필요했는데, 그냥 React에서 사용하던 방법과 조금 다른 것 같아서 생소했습니다. 1. react-native-dotenv react-native-dotenv는 React Native 환경에서 환경변수(env)를 적용할 수 있습니다. 터미널을 켜고 해당 명령어를 통해 라이브러리를 설치합니다. npm i react-native-dotenv 또는 yarn add react-native-dotenv 그리고 타입스크립트 환경에서는 추가로 types를 설치해 줘야 타입스크립트 환경에서 사용할 수 있습니다. npm install -D @types/react-native-dote..

📖 들어가며 최근 '클린 코드'책과 여러 개발 관련 영상이나 문서를 보고 테스트 코드의 중요성을 깨닫게 되었다. 앞으로 개발을 하면서 테스트 코드를 작성하기 위해서 테스트 코드를 먼저 작성하고 테스트 코드를 통과하기 위한 코드를 작성하는 TDD 개발 방식으로 React에서 Jest와 React testing library로 테스트 코드를 작성하는 법을 공부하게 되었다. 공부한 내용을 복습하고 정리하기 위해 글을 작성해 본다. 해당 글에서는 버튼을 클릭하면 숫자가 증감되는 간단한 앱을 TDD 개발 방식으로 테스트하고 만들어 볼 것이다. Jest와 React testing library Jest ? Jest는 개발자가 자바스크립트와 타입스크립트 코드에 대한 테스트를 실행할 수 있도록 하는 자바스크립트 테스트..

📖 들어가며 React + Typescript 환경에서 React Testing library와 jest를 이용해서 테스트 코드 작성에 대해서 공부하려는 도중에 오류가 발생했고, 결과적으로 해결하기 위해 해야 할 것은 별 거 아니었지만 힘들게(?) 해결 방안을 찾아서 기록을 해두려고 한다. 1. 문제 발생 CRA typescript로 패키지들을 설치하고 난 후에 npm test 명령어를 통해서 기본적으로 작성되어 있는 테스트 코드들이 잘 실행이 되는지 확인을 해봤다. 하지만 ReactDOM.render is no longer supported in React 18 오류가 발생했다. 테스트 코드 자체는 PASS가 되면서 잘 실행이 되었지만 위와 같은 오류 메시지가 매우 신경 쓰였다. 2. 발생 원인 Rea..

📖 들어가며 리액트는 자바스크립트 라이브러리 중 하나로 웹사이트 개발 시 많이 사용되는 언어입니다. 특히 최근들어 많은 사람들이 관심을 가지고 있고, 실제로 회사에서도 적극적으로 활용되고있는 추세죠. 이번 포스팅에서는 리액트가 어떤 특징을 가지고 있는지 알아보고자 합니다. 리액트(React.js)는 무엇일까 ❓ React.js는 특히 SPA(Single Page Application)을 위한 사용자 인터페이스를 구축하는 데 사용되는 오픈 소스 JavaScript 라이브러리입니다. React는 Facebook에서 일하는 소프트웨어 엔지니어 jordan walke가 처음 만들었습니다. 웹 및 모바일 앱의 view layer를 처리하는 데 사용됩니다. 데이터 바인딩 기법을 통해서 여러가지 정보를 한 곳에 모아..

📖 들어가며 이번에 팀 프로젝트로 팀 프로젝트를 구하는 웹앱을 클론 코딩하게 되면서 프로젝트 진행 기간을 선택할 수 있게 하는 Input이 필요했습니다. 그래서 캘린더가 표시되고 캘린더에서 날짜를 선택하면 Input에 해당 날짜가 입력될 수 있게 구현하고 싶었습니다. 캘린더를 일일이 구현하기에는 많은 시간이 걸릴 거 같아서, 리액트 캘린더 관련 라이브러리를 찾아보던 중에 react-datepicker라는 라이브러리를 발견했습니다. 지금껏 공부하면서 캘린더 관련해서는 처음이기 때문에 알게 된 내용을 정리하려 합니다. react-datepicker react-datepicker는 리액트에서 달력을 매우 간단하고 재사용이 쉽게 가능하게 만들 수 있게 한 라이브러리입니다! npm 사이트의 주간 다운로드 횟수를 ..

📖 들어가며 리액트로 팝콘 타임을 클론 코딩하는 포트폴리오를 제작하면서 공부 중에, Link (react-router-dom)을 클릭하면 url은 변경이 되지만 컴포넌트가 업데이트가 되지 않아서 제대로 기능이 작동하지 않는 문제를 겪었다. 해결하고 나니깐 정말 별 것 아니었지만...(개념 부족) 무엇이 문제이고, 어떻게 해결했는지 다시 복습하기 위해 정리해본다. ❗ 문제 문제의 화면이다. Detail 컴포넌트에서 해당 영화의 관련 영화 데이터를 받아와서 보여주는 컴포넌트다. Detail 컴포넌트에서 관련 영화를 보여준 뒤, 관련 영화를 클릭하면 그 관련 영화의 Detail 컴포넌트가 렌더링 되게 구현하고 싶었다. 하지만 사진에 보이는 바와 같이 클릭을 하면 url은 잘 변경이 되지만 해당 영화의 Deta..

📖 들어가며 최근 React를 공부하는 도중에 react router를 설치해야 하는 상황이었습니다. react router를 설치 했는데, 로그에 npm error가 여러 개 발생했습니다. 리액트로 실행 시키자 아래와 같은 오류가 발생했습니다. ./src/App.js Module not found: Can't resolve './src/components/Navbar/Navbar' in '/Desktop/React_Components/test/src' Module not found: Can't resolve './node_modules/react' 💡 해결 방법 create-react-app으로 구성된 리액트 파일은 아래와 같이 되어있습니다. 프로젝트 내부에 있는 package-lock.json 또는 ..