node.js express를 사용해서 api를 작성 후 테스트해보려 했는데 사소한 문제가 발생했는데 원인파악이 힘들었는데 생각보다 당연한 문제여서 해결했던 경험을 공유합니다. API code //router로 get 요청받기 router.get('/', (req,res) => { const responseObject ={ key: 'value', key2: 'value2' //costom }; res.send(responseObject); }); get 요청을 주소에 localhost로 지정하고 보내면 될 줄 알았는데 axios error이 계속 떠서 뭐가 문제인지 몰랐다. // data get요청 const getData = async() =>{ const response = await axios.g..

배열이나 컴포넌트를 사용하면서 반복되는 return값을 map()이라는 함수를 많이 사용하실 텐데 이때 state나 배열에 데이터가 없다면 에러가 납니다. "데이터가 없는데 어떻게 데이터를 부르겠다는 거냐" 그럴 때는 state가 갖는 특성인 리렌더링을 이용하셔서 데이터가 들어왔다면 return값을 바꿔주는 삼학 연산자를 더해주면 됩니다. randomDiaryData.map((my, index) => { return ( ); }) 직접 만든 카드 컴포넌트에 randomDiaryData라는 배열을 map을 돌려 순서대로 출력하는 코드입니다. 이때 randomDiaryData에 값이 없다면 map() 함수에서 에러가 납니다. 이럴 때 삼학연산자를 사용해서 randomDiaryData [0] 안에 데이터값이 ..

리엑트 네이티브(React Native)란 리액트 네이티브(React Native)는 페이스북에서 만든 모바일 애플리케이션 개발 프레임워크입니다. 리액트 네이티브를 사용하면, 웹 기술(HTML, CSS, JavaScript)로 ios나 안드로이드 앱을 개발할 수 있습니다. 웹앱을 모바일 환경에서도 동일하게 동작하도록 해주는 기술입니다. 기존 안드로이드나 ios에서는 앱을 개발하기 위해서 Java 언어를 이용해서 코드를 짰는데요, 이 과정에서 많은 시간과 노력이 소요됩니다. 하지만 react native는 자바스크립트만으로 모든 작업을 수행할 수 있어서 훨씬 효율적이고 빠르게 앱을 개발할 수 있게 되었습니다. JavaScript는 웹 브라우저 안에서 주로 사용되는 언어였는데요, 이제는 브라우저 밖에서도 많..

가운데 정렬하는 법은 여러 가지가 있지만 가장 많이 사용하는 방법으로 flex 설정 된 에 justifyContent와 alignItems속성을 추가로 사용해서 'center'로 지정해 주면 됩니다. 즉, 컨테이너 내부의 요소를 가로와 세로로 가운데 정렬할 수 있습니다. 예제코드를 확인해주세요 {/* 내용을 가운데로 정렬할 컴포넌트 */} 왼쪽 : 사용 전 오른쪽 : 사용 후 flex 속성이 들어가면서 버튼들이 가로로 넓게 잡지 않고 자기 자신 크기 만큼 잡아버리네요 왠지 모르게 자주 사용하는 건데 계속 검색하게 되네요.

react Native 사용하는데 npm install 많이 사용할 겁니다. react Native 애플리케이션 개발을 위해서는 Expo CLI와 함께 Expo 프로젝트를 생성하여야 합니다. Expo CLI를 이용하여 프로젝트를 생성하면, React Native 애플리케이션 개발에 필요한 다양한 라이브러리와 도구들이 자동으로 설치됩니다. 프로젝트를 생성한 이후에는 npx expo start 명령어를 이용하여 Expo 개발 서버를 실행할 수 있습니다. 이때 -c 옵션을 추가하여 개발 서버 캐시를 제거할 수 있습니다. 캐시를 제거하면 Expo 서버가 최신 변경 사항을 적용할 수 있습니다. npm expo start -c 이 캐시삭제 명령어는 웬만한 오류를 다 해결해 줬던 것 같아요. 외국에서는 실제로 신 취..