코드스테이츠 week3 (객체, 목업, DOM(유효성검사))

호키키·2022년 1월 2일

😅 점점 복잡해지는 3주 차

📌 2021.12.22 ~ 2021.12.31

😞 마치며

codestates

목록 보기

3/4

😅 점점 복잡해지는 3주 차

📌 2021.12.22 ~ 2021.12.31

객체
객체 값 사용하는 방법에 대해서 처음 봤을 때 되게 간단하다 생각했는데 변수를 활용할 때랑 키 확인할 때 사용하는 in 연산자를 쓸 때 싱글쿼트('')를 자꾸 헷갈렸다
그 외 객체의 속성 제거(delete), for in 반복문, object.keys/values/entries 도 배웠는데 페어분이랑 코플릿 문제를 풀면서 금방 적용할 수 있었던 거 같다

let user = {
  name: 'namhyun'
  age: '27'
}
user.name = 'hokiki'; // dot.notation
user['age'] = '100'; // bracket notation: 대괄호에 '', 변수 활용 시 [] 만!

'name' in user // user에 name 키가 있는지 확인

twittler 목업
css selector와 display: flex에 대해서 배웠는데 flex는 어느정도 감이 오지만 selector로 원하는 요소를 정확히 집어서 css에 불필요한 반복을 줄이고자 하였지만 어려움이 있어서 반복되는 코드를 요소마다 각각 스타일을 주게 되었다. selector는 꼭 시간내서 추가적으로 공부 해야되겠다는 생각이 들었다 😇
아래 간단하게 figma를 통해 와이어프레임을 그린 뒤 목업 작성을 했는데 처음 생각했을 때와 결과는 좀 다르게 나왔지만 나름 만족스럽게 나온 거 같다

DOM(유효성 검사)
html 요소를 DOM으로 조작하는 방법(CRUD: Create, Read, Update and Delete)을 배웠고,
이를 활용해서 회원가입 폼을 만들어보았다. 처음엔 간단하게 아이디 입력했을 때 조건에 따른 시각적 메세지를 제공하였고, 비밀번호 일치 여부를 검사하고 그에 따른 시각적 메세지를 주는게 1차 목표였다. 생각보다 어렵지 않았으며 다음 단계는 전화번호 입력을 추가하고 숫자가 아니면 피드백 메세지를 나오게 하고 입력이 없으면 회원가입 버튼을 비활성화 하는 것이다.

// 숫자가 아니면: 숫자만 가능한 정규표현식
function isNotNumber(value) {
  return /^[0-9]/g.test(value);
}

// 버튼 비활성화: 
// 초기값 버튼 비활성화
elButton.disabled = true;

// 1차시도 각 입력칸에 입력이 있으면 버튼 활성화
// 조건에 맞지 않아도 버튼이 활성화 되는 문제가 발생
 function validate() {
   if(elInputUsername.value !== '' && elInputPhone.value !== '' && elCheckPassword.value !== '') {
     elButton.disabled = false;
   } else {
     elButton.disabled = true;
   }
 }

// 조건을 넣어준 함수를 불러와 모든 조건이 충족할 때 버튼 활성화
function validate() {
  if(isMatch(elInputPassword.value, elCheckPassword.value)&& 
  isNotNumber(elInputPhone.value)&& 
  isMoreThan4Length(elInputUsername.value)) {
    elButton.disabled = false;
  } else elButton.disabled = true
}

😞 마치며

벌써 4주 차,,
처음에는 시간이 별로 안가는 거 같았지만 벌써 4주 차가 되었다.. 이제 고차함수, react를 배우게 된다
준비는 안됐지만 하다보면 또 되지 않겠는가 라는 마인드로 하루하루 정규시간에 배웠던 부분은 잘 따라가고 있다

반복만이 살 길
매 번 새로운 걸 접하게 되면 무슨 말인지도 모르겠다 싶었지만 문제를 풀고 시간이 지나다보면 자연스럽게 손에 익고 머리에 들어오게 되는 거 같다. 그러니 어려워도 포기하지말고 계속 반복해서 적립해 나가자

주말에 한 것
✔ 이번 주는 진짜 공부를 많이 안했다. 연말연시가 되니 마지막으로 좀 쉬고 싶었던 거 같다,, 정신 좀 차려야겠다
✔ Algorithm Basic1, 2: 내가 풀이한 방식 말고 다른 방법으로 풀어본 것
✔ javascript koans 다시 보며 전체적인 문법 정리