KEEP CODING

Hashurl 에서 hash 란 주소의 # 뒤에 연결된 식별자를 말한다.https://developer.mozilla.org/ko/docs/Web/API/URL/hash#예제위 링크에서 #뒤의 예제가 url 의 hash 값이다.mdn 사이트에서는 목차를 클릭할 경우, hash 라우팅을 통해 해당 #{목차}로 이동할 수 있도록 되어있고, 목차를 id로 사용해 링크로 진입하면 바로 메뉴로 이동할 수 있도록 만들어져있다.123h2 id="예제">    a href="#예제">예제/a>/h2>cs  해시 라우터URL 의 #뒤의 해시를 활용해 페이지를 이동하는 라우터이다.해시를 사용하면 #를 통해 이동한 경로가 아닌 이전 경로를 사용해 웹페이지를 받아온다.별도의 서버 설정이 필요하지 않고, 새로고침시 오류가 발생..

처음엔 이렇게 구상했었다. 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: 콘솔에 나온 대로 여러가지 방법을 사용해봤지만 해결이 안됐다. 그러던 중 인터넷에서 다른 사람이 해결했다는 것을 보고 따라했는데 해결됐다. 내가 생성한 프로젝트보다 상위 경로에..