KEEP CODING

React에서 여러 개의 input을 관리하는 경우, 하나의 state로 관리하면 편하게 관리할 수 있다. 1. html 작성 input으로 email, password, displayName을 입력받는다. input 하나당 여러개의 attribute가 있는데 각각 다른 기능을 가진다. attribute 기능 type 입력 형식을 제한한다 id label과 연결한다 (label의 for - input의 id 가 같아야 한다) name 여러 개의 input 입력값에 이름을 지정해 관리한다 value 입력값을 관리한다 onChange input에 입력된 값의 변화를 감지해 실행한다 required 꼭 필요한 값을 설정한다(값이 없으면 form 제출 안됨) 1 2 3 4 5 6 7 8 9 10 11 12 13..

Modal을 만들었는데, Modal이 떠있을 땐 뒷쪽 화면이 스크롤 되지 않도록 설정하고 싶었다. 스크롤을 막는 방법 몇 가지가 있었다. 1. class를 통해 스크롤 방지하기 1 2 3 4 .stop-scrolling { height: 100%; overflow: hidden; } cs 1 2 3 body.classList.add("stop-scrolling") // body.classList.remove("stop-scrolling") cs stop-scrolling이라는 class를 추가해 스크롤을 막고, modal이 사라질 때 class를 제거하는 방법으로 스크롤을 막을 수 있다. 이 경우, Modal을 띄우는 스크롤 위치가 맨 위일 땐 원하는대로 작동한다. 하지만 스크롤을 내린 후에는 아래로는 ..

npm start를 입력했는데 에러 메시지만 나오고 실행되지 않는다. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! my-app@0.1.0 start: `react-scripts start` npm ERR! Exit status 1 npm ERR! tional logging output above. npm WARN Local package.json exists, but node_modules missing, did you mean to install? 인터넷을 찾아보니 npm의 버전이 맞지 않을 때 나오는 메시지라고 한다. npm을 다시 다운받고 ..

전에 한번 해봤던 기억을 가지고 npm install create-react-app을 실행하면 아래와 같은 명령어가 나온다. You are running `create-react-app` 4.0.2, which is behind the latest release (4.0.3). create-react-app의 설치 방법이 바꼈기 때문이다. * npm을 통해 create-react-app 을 설치했던 경우, 터미널에 npm uninstall -g create-react-app 을 입력해 삭제부터 해줘야 한다. 설치를 원하는 곳에 create-react-app을 바로 실행한다 npx create-react-app my-app react 문서에는 npm init create-... 명령어도 소개하고 있는데 n..

인터넷에서 '해피 저금'이라는 것을 발견했다. 행복한 순간들을 적어서 병에 넣어두고 연말에 열어보는 거라고 한다. 개인적으로 해보고 싶었는데 아예 홈페이지로 만들어보면 어떨까 했다. 화면 설계 필요한 기능 로그인 입력받은 글을 저장 해가 바뀌면 이전 글을 확인할 수 있도록 설정한다. 글을 얼마나 저장했는지 그림으로 보여줌 1. 로그인기능 firebase사용 친구 태그가 가능하면 프로필 있으면 좋을듯 2. 입력받은 글을 저장한다 날짜 입력받음 텍스트 입력받음(짧은글) 3. 해가 바뀌면 이전 글을 확인할 수 있도록 설정 계정과 날짜가 확인되어야 글 열람 가능 보여주는 순서 - 무작위? 날짜순?? 날짜 역순?? 볼 수 있는 글은 따로 모아두기? 4. 글을 얼마나 저장했는지 그림으로 보여줌 병 안에 사탕이나 작..

타이머를 터치해서 시간을 설정할 수 있도록 만들려고 한다. Progress.Pie는 1과 0 사이의 수를 입력받아 색칠해준다. 0이면 비어있고, 1이면 모두 차 있는 파이를 나타낸다. 1 cs 화면 터치로 파이를 채우려면 알아야 될 것이 있다. 1. 파이 내에서 터치 이벤트가 발생한 위치 2. 각도 위치는 각도를알기 위해서 알아야하는 정보이고, 각도를 알아야 (각도 / 360)으로 progress값을 전달해 파이를 채울 수 있다. 한 점만 움직이고, 그 점과 y축과의 각도만 구하면 된다. 1. 터치 이벤트가 발생한 위치 알아내기 터치를 인식하기 위해 TouchableOpacity로 Progress.Pie를 감싸주었다. onPress로 setTime이라는 함수를 넘겨주었다. 1 2 3 4 5 6 7 8 9..

Params 화면을 구성할 때 함께 전달되는 매개변수(parameters)를 말한다. Params 사용하기 params를 사용하기 위해서는 두 가지 과정이 있어야 한다. 1. navigation.navigate() 함수의 두 번째 변수로 params를 전달해야 한다. navigation.navigate('RouteName', { /* params go here */ }) params 는 JSON직렬화가 가능한 형태를 추천한다. (보통 객체 형태로 전달한다) 2. Screen의 구성요소에서 params를 읽어야 한다. function ScreenName({ route }) { /* route.params 으로 사용할 수 있다. */ } params에 관련된 함수들 setParams() params를 변경한..

React Native로 만든 App에서 화면 전환은 어떻게 해야할까? Navigation React Native에서는 화면전환을 위해 navigation을 제공한다. 1. navigation 설치 react-navigation과 stack navigation을 설치한다(stack을 사용하는 경우) npm install @react-navigation/native @react-navigation/native-stack expo를 사용한다면 expo install로 react-native-screens와 react-native-safe-area-content도 같이 설치해준다. expo install react-native-screens react-native-safe-area-context 2. Navi..

동기식과 비동기식 동기식(Synchronous) 하나의 작업이 시작하면, 마칠 때 까지 기다렸다가 다음 작업을 수행하는 방식 작업의 순서가 정해져있다 비동기식(Asynchronous) 하나의 작업이 완료되기를 기다리지 않고 다음 작업을 수행하는 방식 보통 위에서 아래로 코드를 읽어나가지만 늦게 시작한 작업이 먼저 마칠 수 있다 우리는 코드를 작성하고, 읽어나갈 때 작업이 당연히 동기식으로 이루어질 것이라고 생각한다. 하지만 프로그램은 이전 작업이 오래 걸린다고 기다려주지 않고, 다음 작업을 시작한다. 이런 방식때문에 시간이 오래 걸리는 작업을 프로그램 중간에 수행할 경우, 오류가 생기기 쉽다. 시간이 오래 걸리는 작업의 경우 주로 온라인상으로 통신해 작업을 수행하거나, 자료를 가져오는 경우이다. 가져온 ..

공부하는데 아래와 같이 작성된 코드가 있었다. const { user } = await signInWithEmailAndPassword(auth, email, password); 뒤의 signIn...을 통해 반환되는 것은 userCredential이라는 객체였다. 그 중에서 다른 정보는 필요없고 user만 필요했다. 이런 경우, { user } 에 userCredential을 할당하면 userCredential 내의 user항목만 user에 저장된다. 분해할당 이와 같이 객체나 배열의 값을 추출할 때 쉽게 사용할 수 있는 것이 분해할당이다. 객체의 분해할당 const { 프로퍼티명 } = 전체객체 여기에서 주의할 점은 좌항의 변수 이름은 우항의 전체 객체 내에 존재하는 프로퍼티명을 사용해야 한다는 것이..