⌚️ 시간관리
☀️ 기상시간 - 9:00
🌕 마감시간 - 24:20
❌ 오프라인 모임으로 구래동 다녀온 날. 오후에 출발했는데 도로공사때문에 예상치못하게 이동시간이 더 걸려버렸고, 내 체력도 동시에 떨어져서 낮잠을 조금 자버렸다ㅠㅠ
💻 오늘 배운 것
◉ 1차 프로젝트 - Button Component 수정
- 버튼컴포넌트에서 props의 color 기본값을 설정해주었더니 불필요한 입력이 아주 조금이긴 해도 줄어들었다. 그리고
background-color: ${(props) => {
if (props.mode === 'icon') return '#fff';
return props.color;
//mode='icon'일 경우에만 흰색으로 지정. 나머지는 color props 받아오기
}}; 이런식으로 props를 받아올 수 있다는 것도 알게 되었다. 역시 코드는 스스로 작성해보면서 배우는 부분이 많은 것 같다.
2. useState를 통해 버튼에 기능을 추가하고 싶었는데 아직도 사용법이 익숙하지가 않아서, 손을 못쓰고 있다가
<Button mode="full" onClick={ () => {
console.log("This is a Basic button.");
}}>contained</Button>버튼 클릭 시 콘솔에 찍히는걸 확인하고 너무 신기하고 놀라웠다. 아직도 코드의 세계는 내게 너무 놀라움의 연속이다 😲
3. 애니메이션 세번째 버튼 보더에 효과를 주고 싶은데,, 너무 어려운 것 같다. 아무래도 방향을 바꿔야 할 것 같다. &::after 이런식의 스타일링을 주는데 무슨 의미인지도 모르니... 내일은 꼭 완성을 해야겠다.
◉ useState의 사용법
import React, { useState, useEffect } from "react";
import styled from "styled-components";
const [id, setId] = useState("");
const [pasw, setPasw] = useState("");
const [name, setName] = useState("");
const [email, setEmail] = useState("");
useEffect(() => {
console.log({
id,
pasw,
name,
email
});
});
export default function App(props) {
return (
<SignIn>
<input value={id} onChange={onChangeId} placeholder="id" />
<input value="pasw" type="password" placeholder="password" />
<input
value="confirmPasw"
type="password"
placeholder="confrim password"
/>
<input value="name" placeholder="name" />
<input value="email" placeholder="e-mail" />
<button onClick={() => setSubmit(console.log(submit))}>SUBMIT</button>
</SignIn>
);
}
const SignIn = styled.div`
display: flex;
flex-direction: column;
width: 100px;
`;부끄럽지만 오늘 회원가입창을 30분안에 만들어보라는 ethen의 갑작스러운 미션에 대한 나의 결과물이었다...ㅠㅠ 아주 참혹한.... 심지어 마지막에 에러난 상태로 끝나버렸다ㅠㅠ
이후에 리뷰를 하면서 직접 보여주는것을 보며 다시 배웠기에 내일 공부하며 수정해보려 한다.
1. 우선 코드가 길더라도 일일이 작성해보는 작업을 거쳐야겠다.
const [id, setId] = useState('');
function handleChange(e) {
setId(e.target.value);반복되는 작업을 통해, 어떤 부분이 중복되는지 눈으로 확인하고 줄이는 방법을 계속해서 연구하는 작업을 거쳐야겠다.
2. 내가 작업한 코드에서는 value 생각을 못했는데, <input>태그에서 type, value, name, onChange 등의 요소를 넣어주어야 조작할 수 있다는걸 다시 깨달았다.
❓오늘의 나는
- 그래도 열심히? 공부한 하루였다. 하지만 늘 ethen과 오프라인 만남을 하고 나면 자꾸 찔린다. 국비지원학원 다니는 사람들보다, 아니 그만큼이라도 공부를 해야 하는데 이건 너무 공부량이 적은 상태니까ㅠㅠ 열심히 해야 한다... 오늘도 자극을 받았다.
- 오전에 집중이 잘 안되는걸 알기에, 어제 너무 피곤해서 정리하지 못한 내용들을 블로그에 정리하면서 다시 공부했다. 하지만 허투루 보내는 시간은 아직도 많은 것 같다. 정신차리자!!
- 나는 왜이렇게 useState적용을 못하는걸까... 아직도 원리 이해가 안된건지 여러가지 상황에서 쓰는걸 잘 못한다..ㅠㅠ hook에 대해 다시 공부해야 할 필요가 있다..
- 컨디션 회복이 안되는게 느껴져서, 체력을 위해서 오늘은 블로그 정리만 마무리하고 일찍 잠들어서 다음날 일찍 일어나는걸 목표로!
- 이제 ethen과 계획했던 시간 중 7주 반 정도 남았다. 많으면 많다할 수 있지만 나에겐 턱없이 부족해보이는 시간들. 정신차리고 집중해서 해야 할 때다. 그래야 취업시장에 나를 내놓을 수 있다. 가뜩이나 어려운 취업시장에서 나를 잘 포장하기 위해서는 잘 준비되어야한다. 정신차리자!!!!!
❗️내일의 나는
- 아침에 일찍 일어나서 해야 할 일들을 하는 것 부터 밀리지 않는게 목표다. 그리고 내일부터는 핸드폰을 공부할때 저 멀리 버려둬야할 것 같다. 허투루 보는 시간이 너무 많은걸 오늘 느꼈다.
- 식사시간은 침해당하지 않기로 처음부터 마음먹었기 때문에, 준비시간에 너무 시간을 버리지 않고 나가서 식사를 하기로 했다. 그걸 목표로 더 열심히 하는 오전이 되기를..!
- 버튼컴포넌트의 기능처리까지 이번주엔 마무리를 해야한다. 그와 동시에 useState 사용법에 대해서도 제대로 익혀야겠다. 여러 코드를 접하면서 사용법을 익히는 시간을 가져야겠다. 우선 내일은
- 버튼컴포넌트 작업 완성하기
- 깃허브 꼬인 부분 정리해보기... -> 하지만 시간을 너무 쏟진 않기
- useState로 회원가입창 스스로 만들어보기 (hook공부하기)
