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..

사용해 본 내비게이션은 stack, bottomtab, drawer 세 가지를 사용해 봤는데 그중 stack 내비게이터를 사용해 보겠습니다. (공식문서 링크) React Navigation reactnavigation.org 리엑트 내비게이션 설치 npm install @react-navigation/stack 버튼을 눌러서 스택내비게이터로 game이라는 화면으로 넘어가게 만들어보겠습니다. 폴더 생성 이름도 그럴싸하게 지어서 screens 폴더에 뒀습니다. 원리는 Screen컴포넌트들이 Stack에 의해 name 이 지정되면 navigation 이름을 바꿔줘 화면을 스택을 쌓아 이동하는 방식입니다. stacknavigation을 화면을 이동하면서 props로 navigation을 전달해 화면을 표시해 주..

배열이나 컴포넌트를 사용하면서 반복되는 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는 웹 브라우저 안에서 주로 사용되는 언어였는데요, 이제는 브라우저 밖에서도 많..

react는 웹 애플리케이션 개발 시 많이 쓰이는 라이브러리입니다. (저는 프레임워크라고 합니다 ㅎㅎ) 리액트는 자바스크립트 기반이기 때문에 js파일 내에서 모든 작업이 이루어집니다. 제가 생각한 React의 가장 큰 장점은 '사용자 지정 HTML'입니다 이를 컴포넌트라고 부르는데 html을 커스텀해서 간단하게 컴포넌트만 사용하면 연속적으로 사용할 수 있다는 거죠. 저는 특히 쇼핑몰처럼 상품 데이터만 바뀌고 같은 레이아웃이나 상품 박스가 연속해서 나올 때 편하게 코딩했던 기억이 있네요. props, state, useEffect 등 매력 있는 기능이 많이 있으니 코딩할 맛 나더라고요. nodejs는 어떤 프로그램일까? nodejs는 JavaScript를 이용하여 서버를 구축하거나 실행시킬 수 있는 도구입..

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