내배캠 TIL 2022.12.07
오늘 한 일
09:20am ~ 10:30am : 알고리즘 문제풀기
10:30am ~ 01:00pm : Todolist 만들기
01:00pm ~ 02:00pm : 쉼
02:00pm ~ 05:00pm : Todolist 제출하고 개인적으로 수정
05:00pm ~ 07:00pm : 쉼
07:00pm ~ 09:00pm : Todolist 리뷰 강의 들음
09:00pm ~ 11:30pm : 쉼, 치킨, 사과주스 먹음
11:30pm ~ 01:30am : Todolist 리뷰 강의 피드백 바탕으로 코드 수정
프로그래머스 알고리즘 javascript
캐릭터의 좌표
switch 문 써보고 싶었는데, 잘 쓸 줄 몰라서 if, else if로 풀었다.
function solution(keyinput, board) {
let x = 0;
let y = 0;
let xLimit = (board[0] - 1) / 2;
let yLimit = (board[1] - 1) / 2;
keyinput.forEach((item) => {
if (item === "left") {
if (x === -xLimit) {
} else {
x -= 1;
}
} else if (item === "right") {
if (x === xLimit) {
} else {
x += 1;
}
} else if (item === "up") {
if (y === yLimit) {
} else {
y += 1;
}
} else if (item === "down") {
if (y === -yLimit) {
} else {
y -= 1;
}
}
});
let answer = [x, y];
return answer;
}
const keyinput = ["down", "down", "down", "down", "down"];
const board = [7, 9];
console.log(solution(keyinput, board));다른 사람이 switch로 푼 답
function solution(keyinput, board) {
var answer = [0, 0];
const bndrX = (board[0] - 1) / 2;
const bndrY = (board[1] - 1) / 2;
keyinput.forEach(cmd => {
switch(cmd) {
case 'up': {
if(answer[1] !== bndrY) answer[1]++;
break;
}
case 'down': {
if(answer[1] !== -bndrY) answer[1]--;
break;
}
case 'left': {
if(answer[0] !== -bndrX) answer[0]--;
break;
}
case 'right': {
if(answer[0] !== bndrX) answer[0]++;
break;
}
}
});
return answer;
}
리액트 Todolist 과제 리뷰 강의
yarn create react-app sample-project
app.js를 다 지우고 다 써보는 것을 추천한다
const App = () => {
// 여기 들어가는 것은 javascript
return
//여기 들어가는 것은 jsx
}
Q: state가 변경됐는지 React 어떻게 알아?
A: state와 setState를 변수로 가진 useState라는 함수로 인해 변경할 때 감지할 수 있다.
피드백 반영하여 Todolist 수정
컴포넌트 더 쪼갤 수 있다.
한 폴더에 컴포넌트 + css 이렇게 짝지어서 넣어주면 좋다.
인풋 비워주기(성공)
빈값을 넣었을 때 알러트 띄워주기 (성공)
const addToDoHandler = () => {
if (body !== "" && title !== "") {
const newToDoList = {
id: toDoList.length + 1,
title: title,
body: body,
isDone: false,
};
setToDoList([...toDoList, newToDoList]);
setTitle("");
setBody("");
} else {
alert("제목과 내용을 입력해주세요");
}
};
초기에 설정해놓은 id 0번 배열은 안 나오게 하기
{toDoList.map((toDo) => {
if (toDo.isDone === false && toDo.id !== 0) {
return (
<TodoList
DoneCancel={DoneCancel}
deleteHandler={deleteTodoList}
toDo={toDo}
key={toDo.id}
/>
);
} else {
return null;
}
})}
쪼개주면 좋은 컴포넌트들
헤더 컴포넌트(성공)
인풋 컴포넌트(실패)(setState를 어떻게 분리하는지 모르겠다)
투두 리스트 컴포넌트(성공)
나도 todo 컴포넌트랑 done 컴포넌트랑 나눴는데 합치는 것 알아봐야겠다 (합치기 성공)
- 중복되는 done 컴포넌트 삭제, done 컴포넌트랑 연결했던 것 todo로 바꿔줌
- 시도 1차: 이벤트 타겟을 이용해서 완료, 취소를 변경해주려고 했으나, setState가 없어서 렌더링이 되지 않았다.(실패)
-시도 2차: CustomButton을 이용해서 그 전에 색만 바꿔주던 기능은 없애고 true, false에 따라 다르게 return 하도록 했다(성공)
function CustomButton(props) {
const { isDone, onClick } = props;
if (isDone === false) {
return (
<button className="done-btn" onClick={onClick}>
완료
</button>
);
} else {
return (
<button className="undone-btn" onClick={onClick}>
취소
</button>
);
}
}
컴포넌트가 들어간다면 jsx를 이용하는 것을 권장(파일명 확장자 jsx로 변경성공)
주석 좀 넣어라(넣는 중)
이름 알아보기 좋고 기능에 적합하게 잘 넣기
children 없을 때는 컴포넌트 tag 하나만 써주자(children없는 컴포넌트 tag 하나로 변경성공)
구조분해 할당은 props 자리에 키 이름들을 넣어주면 된다.
(인풋 컴포넌트 분리할 때 이용해봤다, 구조분해 할당은 잘 되었다)
굳이 const {title, text} = props 할 필요 없다
강의에서는 레파지토리에 새 커밋 들어가면 자동으로 배포된 내용도 수정 된다고 했는데, 나는 초기에 커밋한것 외에는 적용이 안되고 있다.
이벤트 타겟으로 내용 가져오는 법.
event.target.value 는 클릭한 tag에 value 속성이 있을 때만 undefined가 아닌 값을 가진다.
자바스크립트 문법이 빈약한 상태로 왜 안 되나 한참을 헤맸다.
<button>내용</button>
이 버튼 클릭 시 자바스크립트로 "내용"을 얻으려면 event.target.textContent 를 사용해야 한다.