분류 전체보기 145

ReactNative 리액트네이티브 : useState Hook으로 상태값 관리하기 (feat. 구조분해할당)

리액트네이티브와 리액트에서 상태 값을 관리하는 방법으로 useState를 사용할 수 있다import React, {useState} from 'react';function App() {const [value, setValue] = useState('');return (...)} useState는 구조분해할당(=비구조화 할당) 문법을 사용한다. const number = ['one', 'two', 'three'] const one = number[0];const two = number[1];const three = number[2]; 이렇게도 가능하지만, 구조 분해 할당을 통해 더 쉽게 작성이 가능하다 const [one, two, three] = number 이 같은 방법으로 useState도 첫 번째 ..

IT 2022.02.08

ReactNative 리액트네이티브 : 기본 컴포넌트 구성 및 CSS 스타일링

1. ReactNative 컴포넌트  컴포넌트는 '구성 요소'라는 의미를 갖고 있다. 즉, UI를 구성하는 요소라고 이해하면 된다.리액트의 경우, 여러 컴포넌트로 쪼갠 뒤 그 컴포넌트를 이어 붙이면서 작업하는데 이는 리액트 네이티브에서도 마찬가지다. import React from 'react';import {SafeAreaView, StyleSheet, View, Text} from 'react-native';function App() { return ( React Native! );}; const styles = StyleSheet.create({ // 스타일 지정 방법 block: { ..

IT 2022.02.08

ReactNative 리액트네이티브 안드로이드,IOS 시뮬레이터 이용하기

새로운 RN 프로젝트 생성npx react-native init  npx는 Node.js와 함께 설치되며, node 환경에서 구동되는 CLI 도구를 간단하게 사용할 수 있도록 도와준다.  yarn android 또는 yarn ios를 터미널에 입력하여 각 환경에서 앱을 구동할 수 있다.yarn start는 Metro를 구동해준다. Metro란, 리액트 네이티브를 위한 자바스크립트 번들러로 js 파일을 읽어서 순서에 맞게 하나의 파일로 합쳐주고 앱에서 실행 준비를 해준다. 참고로 yarn android, yarn ios 스크립트를 입력하면 start 스크립트가 자동으로 시작되어 따로 입력하여 실행하는 일은 드물다.   1. 안드로이드 환경에서 리액트 네이티브 앱 구동 안드로이드 스튜디오에서 새로운 프로젝트..

IT 2022.02.04

ReactNative 리액트네이티브 시작을 위한 설치목록 (MacOS 환경)

node.js와 npm, VSCode 설치되어있다는 가정하에 진행  1. yarn : npm과 같은 패키지 관리 도구. npm보다 패키지를 더 빨리 설치한다npm install --global yarn 2. Java Development Kit : 안드로이드 앱 개발을 위해 필요하다 (버전 8 이상 설치)HomeBrew를 통해 편하게 설치가 가능하다brew install --cask adoptopenjdk/openjdk/adoptopenjdk8 3. WatchMan (권장) : 페이스북이 만든 파일 모니터링 도구 (MacOS만 지원)brew install watchman 4. 안드로이드 스튜디오 : 안드로이드 앱 개발을 위해 필요하다 https://developer.android.com/studio?hl..

IT 2022.02.04

Three.js/Canvas Uncaught TypeError: Cannot read properties of null (reading 'width')

요즘 하루에 한 강의씩 udemy Three.js 강의를 수강하고 있다 처음엔 화면에 4개의 renderer가 잘 출력되다가 다시 확인해 보니 아무것도 나오지 않았다 콘솔창에는 Uncaught TypeError: Cannot read properties of null (reading 'width') 라는 에러 메세지가 출력되었다 ... 스택오버플로에서 찾아보니 아이디가 제대로 주어졌는지, 스크립트를 body의 제일 하단에 두었는지를 확인 해보라 한다 난 세 번째 아이디를 c3가 아닌 c2로 되어있어서 생긴 에러였고, 아이디를 수정하니 바로 해결되었다 하하 별다른 오타가 없는데 이와 같은 에러를 만난다면 script를 body의 제일 하단으로 옮기면 될 것 같다 script를 body의 하단으로 옮기는 이..

카테고리 없음 2022.01.09

git push error : Invalid username or password, Authentication failed 해결방법

오랜만에 토이프로젝트를 조금 진행하고 git add commit 후 push 하려는 순간 git push origin main remote: Invalid username or password. fatal: Authentication failed for 'https://github.com/jieungo/meong.git/' 인증 실패 에러가 뜨면서 push가 되지 않았다 이럴땐 역시 구글 git remote remove origin git remote add origin git remote -v 우선 원격 저장소를 삭제하고 다시 저장소를 연결시켜주고 git remote -v 를 입력하여 잘 연결되었는지 확인해준다 git push origin main To https://github.com/jieungo/..

카테고리 없음 2022.01.02

[node.js] Data argument must be of type string/Buffer/TypedArray/DataView 에러 : mysql 비밀번호 변경하기

프로젝트 진행 중, DB를 생성하려고 npx sequelize db:create 하는 순간 에러가 발생했다 Data argument must be of type string/Buffer/TypedArray/DataView .. 에러가 발생한 이유를 찾아보니, 처음 mysql 설치하고 비밀번호를 설정할 때 숫자로 작성해서 발생하는 문제라고 한다. 에러 문구를 잘 보면 TypeError이며 Received type number (1004)라고 1004라는 넘버 타입을 받았다고 나오는데 내 mysql 비밀번호가 1004였기 때문이다 ^^,,머쓱,, 그래서 mysql 비밀번호를 글자로 바꿨는데 너무 간단하고 짧게 작성하면 설정이 안 된다 그래서 나름 적당히 길게 작성하고 저장까지 했다. 그리고 config.js..

카테고리 없음 2021.10.27

[React] Invalid hook call. Hooks can only be called inside of the body of a function component.. 에러 해결방법

next.js error: cannot find module 'react' 프로젝트 진행하고 실행하는데 갑자기 에러가 발생하면서 react 모듈을 찾을 수 없다는 에러가 발생했다응? 분명 react 설치했을 텐데.. 해서 구글링을 통해 github에 누군가 남겨놓은 해결방안을 따라 해 봤다local에 react react-dom을 설치하라 해서 그대로 따라 했는데,, (이러면 안 됬었는데,,,)   Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:You might have mismatching version..

IT 2021.10.15

[styled-components] You may see this warning because you've called styled inside another component.. 에러 해결방법

개인 프로젝트를 진행하다가 회원가입 폼을 만들었고, 폼에 글자를 입력하는데 한 글자 입력하고 포커스가 사라졌다 키보드가 잘못 눌렸나? 싶어서 다시 글자 입력하는데 계속 한 글자 타이핑할 때마다 포커스가 사라지더라 뭐가 문제지? 하고 콘솔창을 열어보니 The component styled.div with the id of * has been created dynamically. You may see this warning because you've called styled inside another component. To resolve this only create new StyledComponents outside of any render method and function component. 노란색 ..

카테고리 없음 2021.10.14
반응형