🚨 오류 발생 AxiosError message: 'Request failed with status code 400' axios.delete(`${url}/unlike`, { projectId: id, }) axios의 delete를 사용하여 서버에 요청을 할 때, 다음과 같이 data를 전달하면 오류가 발생한다. 💡 해결 방법 axios.delete는 request body를 지원하며 다음과 같이 두개의 매개변수를 허용한다. axios.delete(url[, config]) 👍 config.data는 request body를 설정하는데 사용할 수 있다. axios.delete(`${url}/unlike`, { data: { projectId: id, }, }) 2번째 인자에서 data를 data: {}..

JavaScript의 배열(Array)는 객체(함수)다. 따라서, 대표적 객체지향 언어인 자바와 마찬가지로 new Array()가 존재한다. 배열의 생성자(new Array())와 하나의 숫자 매개변수로 생성할 수 있지만, 그 결과는 length가 매개변수고, 길이만큼의 빈 슬롯을 가진 배열이다. 배열의 초기값을 확인해보면 undefined가 출력되는 것을 볼 수 있다. let datas = new Array(5) console.log(datas[0]) // undefined console.log(datas.length) // 5 아래와 같이 new Array()의 매개변수에 원하는 초기값들을 넘겨주는 방법으로 생성과 초기화를 동시에 할 수 있지만, 배열의 길이에 따라 한계가 존재한다. // new Ar..

CSS의 mediaQuery를 사용하여 뷰포트(viewport) 너비에 따라 CSS 속성 값을 변경해보자❗ 📌 mediaQuery란 무엇인가요? 미디어 쿼리(mediaQuery)는 단말기의 유형 (출력물 vs. 화면)과, 어떤 특성이나 수치 (화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다. if 조건문과 비슷한 개념이라고 생각하면 이해하기 쉽습니다. ex) 뷰포트 너비가 62rem 이하이면 flex-direction을 row에서 column으로 바꿔줘~ @media 키워드로 시작하는 미디어 쿼리의 문법 구조 @media (조건) { 스타일 } 스타일 부분에는 일반적인 CSS 코드가 들어가는데, 조건 부분이 만족될 때는 스타일이 적용되고, 만족되지 않을 때는 스타일..

📌 Tools React Developer Tools를 사용하게 되면, 크롬 웹 브라우저에서 개발자 모드(F12)로 컴포넌트 구조를 볼 수 있고 변경하면서 테스트하기에 용이하다. (사용 권장👍) https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 336ac8ceb on 7/13/2022. chrome.google.com 📌 Extension Reactjs Code Snippets rcc + tab, rsi..

스코프(Scope) ❓ 1️⃣ 변수를 참조할 수 있는 유효 범위 2️⃣ 식별자(변수, 함수, 클래스 이름) 접근 규칙에 따른 유효 범위 범위(스코프)는 중괄호(블록) 또는 함수에 의해 나눠진다. 스코프의 주요 규칙 ❗ 👉 규칙 1. 블럭 안의 변수는 블럭 안에서만 유효하다. 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용 가능 반면, 안쪽에서 선언한 식별자는 바깥쪽 스코프에서는 사용할 수 ❌ 블럭 내부에서만 존재하고, 블럭이 끝나면 가비지 컬렉터(GC)에 의해 자동으로 소멸된다. const a = 1; { const b = 2; console.log(a); } console.log(b); // 오류 발생(app crashed) 👉 규칙 2. 전역 스코프 vs 지역 스코프 가장 바깥쪽의 스코프를 전..

클로저 ❓ 함수와 함수가 선언된 어휘적 환경의 조합 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다. 즉, 내부 함수에서 외부 함수에 있는 상태에 접근할 수 있는 권한을 부여한다는 것이다. 왜 사용할까 ❓ 내부 정보를 은닉하고, 공개 함수(public 또는 외부)를 통한 데이터 조작을 위해 사용한다. (캡슐화, 정보은닉) 전역변수 또한 줄여지게 되므로 개발 과정에서 실수로 접근하는 일이 안생긴다. 현재는 클래스에서의 private 필드 또는 메소드를 사용하면 된다. 어떻게 이것이 가능할까 ❓ inner 렉시컬 환경이 외부 렉시컬 환경을 참조하고 있기 때문이다. 클로저를 잘 이해하려면 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다...

Install $ yarn add react-native-view-shot Import import ViewShot from 'react-native-view-shot'; Code import ViewShot from 'react-native-view-shot'; function App() { const ref = useRef(); const captureScreen = () => { ref.current.capture().then((uri) => { console.log('capture complete...', uri); }); }; return ( // 화면 캡처될 부분을 ViewShot 컴포넌트로 감싸준다❗❗ 화면 캡처 ); } 💡 useRef useRef는 특정 컴포넌트를 선택할 때 사용하는 ho..

커뮤니티 상세페이지를 만드는 과정에서 TextInput창이 스크린의 맨 밑에 위치하도록 하였다. 앱으로 개발을 처음해보니 예상치 못한 문제가 생겼다. 키보드를 띄우면 TextInput창을 덮어 무엇을 입력하는지 볼 수가 없게 된 것이다. 키보드가 TextInput창을 안가리도록 하고 포커싱이 되도록 해보자❗❗ 1️⃣ react-native-keyboard-aware-scroll-view 모듈 설치 npm i react-native-keyboard-aware-scroll-view --save 2️⃣ import문 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; 3️⃣ 본문 내용을 KeyboardAwareSc..