💡 slice() 배열 메서드 slice() 메서드는 배열의 복사본을 만들거나 배열의 일부를 반환하는 데 사용할 수 있다. slice() 메서드는 원래 배열을 변경하지 않고 대신 얕은 복사본을 생성한다는 점에 유의해야 한다. 기본 구문은 다음과 같다. slice(optional start parameter, optional end parameter) 이 예시에서는 과일 목록을 만들었다. const fruits = ['apple', 'banana', 'mango', 'melon']; slice() 메서드를 매개변수 없이 사용하는 방법 ❓ slice() 메서드를 활용해 해당 배열의 얕은 복사본을 만들 수 있다. console.log(fruits.slice()); // ['apple', 'banana', 'm..

📖 들어가며 최근 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..

📖 들어가며 이 포스팅은 Next.js 11 버전(page router) 환경에서 작성된 글입니다. 13버전 이후 app router 환경에서 구현하는 방법은 이 포스팅에서 1 ~ 1-3까지만 보시고 여기를 참고해주세요. Next.js + Typescript 환경에서 토이 프로젝트를 진행하던 중 카카오톡으로 공유하기 기능이 필요해서 구현을 했었는데, 몇몇 오류도 마주치고 따로 정리를 하면 좋을 것 같아서 이렇게 정리하게 됩니다. 1. 애플리케이션 등록하기 일단 첫 번째로 개발하기에 앞서서 Kakao Developers에서 어플리케이션 등록을 해줘야 합니다. 1-1 로그인 사이트에 접속 해주시고 첫 화면에서 로그인을 해주시고 '내 애플리케이션'을 클릭해주세요. 1-2 애플리케이션 추가하기 그러면 이렇게 애..

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

📖 들어가며 React를 처음 학습하던 시절, Redux가 무엇인지, 그리고 왜 필요한지에 대한 명확한 이해 없이 'Redux를 왜 배워야 하는지'에 대해 의문을 갖곤 했습니다. 하지만, React를 이용하여 클론 코딩을 하거나 실제 프로젝트를 진행하면서 데이터를 사용하고자 하는 컴포넌트가 멀리 떨어져 있어 자식 컴포넌트에게 불필요하게 많은 Props를 전달해야 하는 상황(Props Driling)을 겪게 되었습니다. 이런 경험을 통해 "전역 상태 관리"의 필요성을 체감하게 되었습니다. 그래서 이번 포스팅에서는 Redux에 대해 알아보려 합니다. Redux란 ❓ Redux는 JavaScript 애플리케이션의 상태를 효과적으로 관리하는 데 도움을 주는 라이브러리입니다. Redux는 React와 함께 사용되..

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

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