오늘도 삽질중

Create React App이란? create react app 하기전에 터미널을 통해 준비해야할것 프로젝트 파일만들기 Create React App이란? Create React App은 리액트 SPA(single page application)를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다. create react app 하기전에 터미널을 통해 준비해야할것 1. git --version git --version 2. git --version git --version 3. npm --version npm --version 프로젝트 파일만들기 만들고 싶은 폴더를 생성후, 그 폴더 안에서 Create React App을 생성한다. Create React App은 npx라는 명령어를 활용하여 만들어준..

브라우저에서 공짜로 뭔가를 기억할 수 있게 해주는 기능이 있는데 그것이 바로 Local Storage이다. local Storage: 브라우저에 뭔가를 저장할 수 있게 해주고 나중에 가져다 쓸 수도 있게 해준다. local Storage에 뭔가가 들어있는지 보고싶다면 개발자 도구를 이용하면 된다. (inspect->application->local Storage) 1) setItem: local Storage에 정보를 저장한다 ->localStorage.setItem("key",value) 2) getItem: local Storage에 저장되어있는 정보를 가져온다 -> localStorage.getItem("key") 3) remove: local Storage에 저장된 정보를 제거한다 -> local..

목표: 1. 아이디 입력 후 자연스레 login-form 사라지게 하기 2. 동시에 h1태그에 "hello"+ id 나오게하기 방법: css로 숨겨주기 1 2 3 .hidden{ display:none; } cs html 1 2 3 4 5 6 7 8 9 log In Colored by Color Scripter cs 일단 h1 greeting 태그는 숨겨줌 js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 const loginForm = document.getElementById("login-form"); const loginInput = document.querySelector("#login-form input"); const loginButton = document..

로그인 화면을 만드는 여정을 떠나보자! html 1 2 3 4 5 6 7 8 log In Colored by Color Scripter cs js 1 2 3 4 5 6 7 8 9 10 11 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const loginButton = document.querySelector("#login-form button"); function onLoginBtnClick(){ console.log(loginInput.value); } loginForm.addEventListener("submit",onLoginB..

요즘 js에서 html을 읽는걸 배우고있다. js가 html과 연결되어있고 상호작용을한다는 사실을 기억하고! 오늘 내가 할 거는 js를 통해 html을 위와같이 변화시키려는 것이다. 내가 하고싶은것: 한 번 클릭하면 blue 또 한 번 클릭하면 tomato 또 한 번 클릭하면 blue 또 한 번 클릭하면 tomato 무한반복 =>이 말을 듣고 내가 생각한것 js에서 html element 호출해오고, event반응 필요하고 , function 의 if으로 참, 거짓 판별 html js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 const h1=documnet.querySelector(".hello h1"); ---> 1.element function handleTitleC..