State 만들기, 변경하기 만들어야 할 웹페이지 기능 : input창에 입력한 값을 id와 password에 저장하고, 그 값을 alert창에 띄워주기 내가 작성한 코드 import React, { useState } from "react"; function App() { const [id, setId] = useState(""); const [password, setPassword] = useState(""); return ( 아이디 : 비밀번호 : 로그인 ); } export default App; 위의 코드처럼 작성하면, 화면에서 alert창에 값을 띄워주는 것까지는 문제가 없다. 하지만, alert창 이후 serId와 setPassword로 값을 초기화 시켜주는 부분이 작동하지 않게 된다. 물론..
바닐라 자바스크립트 팀프로젝트 진행 주차 필수 구현 기능 : 영화 리뷰, 게시판 기능 아쉬웠던 점 동일한 닉네임 사용했을 경우의 예외처리 하지 못한 점 깃 명령어 능숙하지 못한 점 일부만 반응형 구현한 점 알게된 점 Localstorage 사용법 mongoDB처럼 데이터를 저장할 수 있는 기능 데이터 베이스처럼 이용하려면 key값은 'comment'같은 이름으로 한개로 설정하고, 안에 저장되는 내용을 수정하고 저장하는 식으로 이용할 수 있다. Git PR 내 브랜치에서 작업을 하고, merge를 원하는 브랜치가 있을 때 깃허브 사이트에서 PR을 보낼 수 있다. 만약 PR을 했을 때 충돌이 일어난다면 바로 merge할 수 없고, merge 권한이 있는 사람이 충돌사항을 확인해서 진행할 수 있다. Git r..
작업중인 브랜치에 새로운 커밋이 되었을 경우 새로운 커밋이 되었다는 것은 업데이트가 필요하게 된 경우를 뜻한다. 하지만 작업중인 내용이 있을 때 업데이트를 하면 충돌이 일어나거나 작업내용이 사라질 수 있기 때문에 git stash 라는 명령어를 사용해서 마무리하지 않은 작업을 잠시 스택에 저장하는게 제일 먼저다!! 해당 내용은 참고한 블로그에 이해하기 쉽게 적혀있다! 알게된 점 변경사항이 있는데, pull을 해와야 하는 상황이 발생했을 경우 혹시 몰라서 백업파일을 만들어 놓고, git pull을 실행했었다. 하지만 git stash를 이용하면 좀 더 간단한 방법으로 문제를 해결할 수 있음을 알게 되었다. git stash pop은 적용과 동시에 해당 stash를 삭제하는 명령어다. 삭제하지 않고 가져오는..
CSS grid header { background-color: black; padding: 20px; transition: background-color 0.5s ease-in-out; height: 700px; display: grid; grid-template-columns: 700px 1fr; grid-template-rows: 80px 1fr 200px 1fr; } 제일 먼저 display : gird를 설정하고 grid-template-colums와 grid-template-rows로 열과 행을 원하는 모양으로 잡아줄 수 있다. 위의 코드는 2열 4행으로 만든 코드다! 첫번째 열의 크기는 700px로 고정이고, 두번째 열의 크기는 1fr로 설정해서 남는 크기만큼 생성하도록 했다. 첫번째 행의 ..
Font Awesome 사이트 Git 명령어 강제로 git reset --hard origin/master 강제로 push git push origin feature/subin --force api 데이터 언어변경 language=ko&page=1 grid 반응형 grid-template-columns: repeat(auto-fill, minmax(300px, 400px)); auto-fill 사용시 화면 크기에 따라 colum이 자동으로 만들어짐!! Event 버블링 //수정 버튼 function editBtn(event) { console.log(event.target.className); const parent = event.target.parentNode; if (event.target.match..
3주차는 바닐라 자바스크립트 개인 프로젝트 진행 주차였다..!! 2주차 동안에 학습했던 JS강의를 기반으로 진행되었고, Open API에서 영화정보를 가져와서 페이지에 띄우고, 검색기능을 만드는 내용의 과제였다. 어려웠던 점 / 알게된 점 1. fetch (async/await) 강의를 들으면서 학습한 내용이었지만, 제대로 이해하지 못해서 사용하는데 어려움이 있었다. 하지만 setTimeOut 으로 console에 확인해본다던가 aysnc/await를 작성하는 등의 방법으로 promise pending 문제를 해결할 수 있음을 알게 되었다. 2. JS에서 DOM 접근하기 getElement나 querySelector 등으로 DOM에 접근할 수 있는 방법이 많은데, 각각 반환하는 결과가 일반 배열의 형태가..
Git 효율적으로 사용하기 브랜치 전략 git flow 커밋 컨벤션 Git Pull Request https://wayhome25.github.io/git/2017/07/08/git-first-pull-request-story/ git 초보를 위한 풀리퀘스트(pull request) 방법 · 초보몽키의 개발공부로그 개발을 하다 보면 코드를 여러 개로 복사해야 하는 일이 자주 생긴다. 코드를 통째로 복사하고 나서 원래 코드와는 상관없이 독립적으로 개발을 진행할 수 있는데, 이렇게 독립적으로 개발하는 wayhome25.github.io 위의 블로그에서는 Pull request 할 원본 주소를 fork를 한 후에 fork한 내 깃에다가 push를 하는 방법을 알려준다. 그래서 순서대로 다 진행을 해봤으나! 문..
DOM에 접근하기 HTMLCollection을 배열로 바꾸기 let title = document.getElementsByClassName('card-title'); console.log(title); title = Array.from(title); console.log(title); getElememtByClassName으로 요소를 가져오면 HTMLCollection으로 가져와짐 length가 있는 유사배열이기 때문에 Array.from()을 사용해서 배열로 바꿀수 있음! 하지만 어떤 이유에서인지 빈 배열만 출력되는 현상 발생 결국 for ... of 를 사용해서 배열로 바꾸는 방식으로 진행함 setTimeout 사용해서 DOM요소 가져오기 let title = []; setTimeout(functio..
