프로그래머스 입문 : 369게임 첫번째 시도 function solution(order) { var answer = 0; //숫자를 문자열로 변환 let newOrder = String(order); //반복문을 통해 n%3==0인지 확인 for (let i = 0; i < newOrder.length; i++) { if (newOrder[i] % 3 === 0 && newOrder[i] !== 0) { answer++; } } return answer; } newOrder[i] !== 0 을 하면, 비교연산자이기 때문에 0이 아닌 값인지 판단하는 것으로 생각하여 해당 연산자를 사용했다. 하지만 !==이 엄격한 비교를 하는 연산자인지 모르고 사용하여 원하는 값이 출력되지 않았다. 두번째 시도 functi..
React props 추출하기 - 구조분해 할당 자식에게 props 전달하기 {todo .filter((todo) => todo.isDone === false) .map((todo) => { return ; })} 구조분해 할당X function WorkingCard({ props }) { return ( {props.todo.title} {props.todo.body} ); } 부모로부터 상속받은 값을 그냥 props로 사용한다면, key-value pair 형식인 객체로 값을 받기 때문에 상속받은 요소를 사용할 때마다 앞에 props.을 붙여줘야 한다. 그렇게 하지않으면 undefined를 마주할 수 있다. 구조분해 할당O function WorkingCard({ todo, onSubmitHandle..
버튼을 컴포넌트로 분리할 때 event 넘겨주기 분리하기 전에 작성은 onClick={()=>함수명(필요한 인자)} 이 방식으로 작성했고, 정상적으로 기능도 했다. 하지만 분리하고 난 후에 클릭한 요소의 event값을 받아오는 부분은 자동으로 되지 않아서 콘솔에 event가 undefined로 확인되었다. 그래서 onClick={(event)=>함수명(event,필요한 인자)} 이렇게 클릭할 때 event 요소를 같이 넘겨주고, onSubmitHandler선언부에서 ( event, id )로 인자를 두개 받아주면 작동이 된다! 프로그래머스 입문 : 최댓값 구하기(1) sort 메서드를 이용해서 내림차순으로 정렬하면 간단하게 풀릴 문제이지만, sort를 사용하지 않고 풀어보고 싶었다. 첫번째 시도 func..
State의 변경이 있어야 리렌더링됨 React는 화면을 렌더링할지를 state의 변화에 따라 결정한다 단순 변수는 무시한다 객체는 새로운 객체를 만들어줘야 한다. (새로운 데이터 주소값 할당) spread나 map, filter 등으로 처리할 수 있다. React 개인과제 const notDoneButtonHandler = (id) => { // 해당하는 값의 isDone:true로 변경 const newTodo = todo.map((todo) => { if (todo.id === id) { todo.isDone = false; } return todo; }); setTodo(newTodo); }; map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 ..
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로 설정해서 남는 크기만큼 생성하도록 했다. 첫번째 행의 ..
