KEEP CODING

처음엔 이렇게 구상했었다. https://joylee-developer.tistory.com/178 해피 저금통 만들기 인터넷에서 '해피 저금'이라는 것을 발견했다. 행복한 순간들을 적어서 병에 넣어두고 연말에 열어보는 거라고 한다. 개인적으로 해보고 싶었는데 아예 홈페이지로 만들어보면 어떨까 했다. 화 joylee-developer.tistory.com 병에 넣는 것을 시각적으로 표현하고 싶었는데 구현하다보니 내가 원하는데로 되지 않았다. 그리고 굳이 만들 필요가 있나 싶어서 삭제하고 저장한 글들을 목록으로 보여주는 식으로 만들었다. 완성된 해피 저금통! https://purple402.github.io/jarOfHappiness/ 해피 저금통 purple402.github.io 기능 설명 사이트 ht..

firebase에 저장된 내용을 매번 불러오는 것 보다 localStorage를 사용하는 것이 더 좋을 것 같아서 localStorage를 이용해봤다. 기본적인 사용법 https://joylee-developer.tistory.com/187 [Javascript] localStorage 사용하기 LocalStorage 브라우저에 자료를 저장할 수 있는 저장소이다. cookie와의 차이점 Cookie LocalStorage 공통점 브라우저에 자료를 저장하는 저장소 키-값 형태의 자료를 저장한다 차이점 만료 기한이 있다( joylee-developer.tistory.com 일단 firebase의 자료와 localStorage의 자료를 어떻게 사용하고 불러올지 flow chart를 만들어보았다. count 는..

https://joylee-developer.tistory.com/184 [React] Modal 만들기(1) CSS, 외부클릭 방지 React에서 Modal을 만들어보았다. Modal은 현재 화면 위에 새로운 창을 만들어 추가적인 일을 실행할 수 있도록 한다. Modal의 특징이 몇 가지 있다. 1. 현재 화면과 구분하기 위해 현재 화면은 어둡게( joylee-developer.tistory.com React에서 Modal 만들기에 대한 글을 작성하다가 글이 길어져서 스크롤 방지에 대한 내용은 따로 글을 작성했다. 3. modal이 떠 있을 땐 화면 스크롤이 금지되어 있다. 스크롤에 대한 설정을 따로 하지 않으면 뒷쪽 화면이 움직일 수 있다. 뒷면이 움직이지 않도록 모달이 떠 있을 땐 스크롤을 금지하고..

React에서 Modal을 만들어보았다. Modal은 현재 화면 위에 새로운 창을 만들어 추가적인 일을 실행할 수 있도록 한다. Modal의 특징이 몇 가지 있다. 1. 현재 화면과 구분하기 위해 현재 화면은 어둡게(혹은 어둡고 흐릿하게) 처리한다. 2. modal안의 x버튼 혹은 modal의 외부를 누르면 modal이 사라진다. 3. modal이 떠 있을 땐 화면 스크롤이 금지되어 있다. 첫 번째는 CSS로 설정가능하며, 두 번째와 세 번째 특징은 react 코드로 작성해주어야 한다. 일단 Modal component를 만든다. 재사용을 위해 modal안의 내용은 props.children을 사용한다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22..

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

"webpack"의 버전이 맞지 않는다며 아예 프로젝트가 실행되지 않는 경우가 있다. The react-scripts package provided by Create React App requires a dependency: "webpack": "4.41.5" Don't try to install it manually: your package manager does it automatically. However, a different version of webpack was detected higher up in the tree: 콘솔에 나온 대로 여러가지 방법을 사용해봤지만 해결이 안됐다. 그러던 중 인터넷에서 다른 사람이 해결했다는 것을 보고 따라했는데 해결됐다. 내가 생성한 프로젝트보다 상위 경로에..

useEffect useEffect는 컴포넌트가 랜더링 될 때 마다 원하는 동작을 수행하는 명령이다. useEffect( 함수, 배열 ); 함수 : 원하는 동작 배열 : 검사하고자 하는 특정 값, 배열 배열의 내용 빈 배열일 경우 - 마운트 될 때만 앞의 함수를 수행한다. 1 2 3 import React, { useEffect } from 'react'; useEffect(() => { console.log("mount!")}, []); cs 마운트 될 때 마다 console에 "mount!"라고 알려준다. 배열의 값을 집어넣는 경우 보통 props나 state의 변화를 감지하기 위해 배열안에 집어넣는다. (state를 배열에 넣으면 state값이 변경되어 다시 렌더링 할 때마다 앞의 함수가 실행된다...