2022.05.09 ~ 05.13_TIL

5월 9일(월)

오늘 한 일(회고)

• leetCode 2문제 풀기
  • 977. Squares of a Sorted Array  
  • 189. Rotate Array  
• HTML 미션 2 완성
• JavaScript 프로토타입 강의 듣기
  • 프로토타입이란?
  • constructor
  • __proto__
  • 프로토타입 체인
  • 프로토타입 확장

 

---

5월 10일(화)

오늘 한 일(회고)

• leetCode 3문제 풀기
  • 167. Two Sum II - Input Array Is Sorted
  • 344. Reverse String
  • 557. Reverse Words in a String III
• JavaScript 클래스 강의 듣기
  • 클래스란?
  • 인스턴스란?
  • 클래스와 인스턴스
  • 클래스 확장
• JavaScript 클래스 실습 예제 풀어보기
• HTML 과제 3 절반 구현 
  • HTML 요구사항 넘버링 기준 1~10 완료
  • CSS 요구사항 넘버링 기준 7 제외 1~8 완료
  • 화면 구성 상 2/3 완료
• HTML 과제 2 중 필요없는 class 값 삭제
  • 과제 구현 중 header 는 모듈처럼 사용하는데, 이전 과제 header에 쓸모 없는 class가 딸려와서 다시 확인하고 삭제하는 작업을 진행했다.
• HTML 과제 2 중 class hidden을 사용하여 화면 상 나타나지 않지만 스크린 리더가 읽을 수 있는 기능 추가 (8번)
  • 캐러셀 구현 중 떠오른 아이디어다. 캐러셀은 버튼을 누르면 슬라이드처럼 요소가 넘어간다. 이때, active되지 않은 요소는 화면에 보이지 않도록 프로퍼티를 설정을 해주어야 한다. 이런 특징을 착안하여, 스크린 리더가 읽을 수 있지만 실제 모니터 상 보이지 않는 요소를 만들어 주었다. 찾아보니 나같은 생각을 했던 사람이 많았던 것 같다. 예시가 있어 쉽게 구현할 수 있었다.

http://egloos.zum.com/njpaiks/v/1936740

소리 시각화

내일 할 일

• leetCode 1문제 풀기
  • 내일은 코딩 테스트를 보는 날이니 아마 leetCode는 적은 문제를 풀게 될 것 같다.
• HTML 과제 3 문법 오류 나는 부분(캐러셀) 다시 보기
  • 캐러셀은 웹 접근성을 고려하지 않은 HTML이라고 설명이 되어 있어, 웹 접근성을 위해 따로 WAI-ARIA 설정을 해주어야 한다. 여러 사이트를 보고 설정을 해주었는데, 설정했던 것들이 거의 다 문법 오류가 나버린 것이다. 문법 오류가 나지 않는 방법을 찾아야 할 것 같다. 찾지 못한다면... 둘 중 하나는 포기해야 하나? 🥺
• HTML 과제 3 전부 구현
  • best item card 부분만 구현하면 된다. 이 부분은 과제 2에서 했었기 때문에 어렵지 않게 할 수 있을 것 같다.
• HTML 과제 4 시작
  • 과제 4는 Grid 레이아웃을 활용해야 한다. 아직 Grid 강의를 듣지 못했기 때문에 HTML 강의 진도를 같이 병행해야 한다. 그래도 내가 할 수 있는 건 다 할 수 있길 바란다.
• JavaScript 클로저 강의 듣기
  • JavaScript도 어려운 부분만 남았다. 진도가 많이 나가진 못하더라도 하나씩 꼼꼼하게 이해하고 넘어가자. 그래야 JavaScript 과제 할 때 발목 잡히지 않을 수 있다.
• HTML flexbox 듣기
  • 이미 HTML 과제를 하면서 display: flex를 많이 사용했지만, 강의를 들으며 제대로 개념을 익혀보자. (무려 14개...)
• 제로베이스 프론트엔드 스쿨 코딩 테스트 보기
  • 매 주 수요일 저녁 코딩 테스트를 본다. 저번 시험에서 6.2점을 맞았으니 이번에는 더 높은 점수를 노려보자. 화이팅!

 

---

5월 11일(수)

오늘 한 일

• leetCode 1문제 풀기
  • 876. Middle of the Linked List  
    
    • 토끼와 거북이 알고리즘을 이용하여 풀었다. ( 원래 이 알고리즘에 대해 자세히 적었었지만 컴퓨터가 갑자기 먹통이 되는 바람에 전부 날라가고 말았다... 😇 일단 오늘 해야 할 공부부터 하고 작성하겠다. )
• 제로베이스 프론트엔드 스쿨 HTML flexbox 강의 듣기
  
  •  Flexbox 개요
  • 용어 - flex container, flex item, main axis, cross axis
  • Container - display
  • Container - flex-direction
  • Container - flex–wrap, flex-flow (shorthand)
  • Item - order
  • Item - flex-shrink
  • Item - flex-basis
  • Item - flex (shorthand)
  • Container - justify-content
  • Container - align-items
  • Container - align-content
  • Item - align-self
• 제로베이스 코딩 테스트 보기 (3시간)
  • 문제를 이해하는 게 너무 힘들었다. 예시를 하나도 주지 않으니... 이해 못해서 못 푼 문제가 2개 이상이었다. 

배운 점

• flex 레이아웃을 잘 모르고 과제에 썼었는데, 이제 flexbox를 어떻게 사용하는 건지 알 수 있었다. 

개선 점

• 알고리즘 문제를 좀 더 많이 풀어봐야겠다는 생각을 했다. 코딩 테스트 문제가 너무 난해하게 출제되다보니 처음 보는 문제라면 이해하는 데 시간이 많이 걸린다... 

---

5월 12일(목)

오늘 할 일

• 제로베이스 프론트엔드 스쿨 HTML Grid 강의 듣기
• HTML 과제 3 끝내기
• HTML 과제 3 문법 오류 정정

오늘 한 일

• 제로베이스 프론트엔드 스쿨 HTML Grid 강의 듣기
• leetCode 풀기
  • 3. Longest Substring Without Repeating  
    • 이 문제는 제로베이스 코딩 테스트 1주차 때 나왔던 문제다. 당시에 문제가 이해가 가지 않아 알고리즘 구현을 못했었는데, 문제 원문을 보니 그제서야 이해가 갔다 😅 medium의 난의도였지만 vs code로 디버깅을 돌리며 푸니 여차저차 해결할 수 있었다.
  • 567. Permutation in String  
    • sliding window 로 풀어야 했는데 그 개념을 잘 몰라 구글링을 하고 그 코드를 분석하며 공부했다. a-z 26개의 array를 생성하고, 알파벳마다 인덱스 값을 ++, -- 시키며 all zero가 되면 return true 시키는 코드였다. 처음 배우는 개념이라 좀 더 식견이 넓어졌다고 생각한다!

 

---

5월 13일(금)

오늘 한 일

• HTML 과제 3 마무리
  • column 1, 2는 구현이 끝났지만 3는 끝내지 못했기 때문에 과제 마무리를 우선적으로 하였다. display : flex로 해보고 싶었으나 column 1, 2를 이미 position 레이아웃으로 구현했기 때문에 비슷하게 position 레이아웃으로 구현을 완성했다. <span> 태그를 <p> 태그로 바꾸니 css가 달라졌다. class의 이름은 같은데 왜그럴까...? 같은 클래스를 갖고 있어도 <span>, <p> 에 따라 적용이 되는 게 있고 되지 않는 게 있었다.
• HTML 과제 3 문법 오류 정정
  • 마무리를 하고 문법 오류 검사를 해보니 캐러셀과 마크업 구조에 에러가 많이 났다..ㅎ (10개 넘게...) product card 같은 <div> 요소들은 구조가 같아서 복사 - 붙여넣기를 했는데, 그 과정에서 들여쓰기가 제대로 되지 않은 게 화근이었다. 다시 하나하나 여는 태그와 닫는 태그를 매칭시키며 오류를 잡았다. 캐러셀 오류는 검사기에서 시키는 대로 바꾸니 오류가 사라졌다. 그래도 혹시 모르니 나중에 캐러셀 WAI-ARIA를 다시 찾아보고 내 것과 비교해봐야 할 것 같다. 

 

배운 점

• 같은 class를 갖고 있어도 <span> 과 <p>에 따라 css가 달라진다. 이유는 주말에 다시 찾아볼 예정이다.

 

개선 점

• 어제와 오늘, 공부 시간에 공부에 온전히 집중을 하지 못하는 것 같다. 코딩 메이트가 30분씩 자기가 제대로 집중을 하고 있는지 checking을 해보라고 했다. 역시 나는 공부할 때 '오늘 하루 공부해야 하는 양' + '공부를 끝내야 하는 시간' 둘 다 주어져야 더 긴박하게(?) 공부가 잘 되는 것 같다. 아무래도 팀 프로젝트라기 보다 혼자만의 공부를 하다보니 더 늘어지는 게 아닌가 싶다. 다음 주부터 다시 미라클 모닝을 시작해볼까 한다. (다시 그 지옥으로 들어간다고??..) 그리고 몇 년동안 꾸준히 운동을 하던 내가 4~5월부터 운동을 일절 하지 않으니 체력이 부족한 게 느껴진다. 운동도 하루 루틴을 정해서 해야 할 수 있을 것 같다. 너무 나태해졌어!!! 시간 관리도 다시 잘 해보자...😢 벌써 5월 중순이니 다시 열정 모드로 돌아가자. 화이팅!

 

주말동안 해야할 일

• 제로베이스 프론트엔드 스쿨 2주차 코딩 테스트 못 풀었던 문제 다시 풀어보기
• Git 사용하는 법 공부하기
• leetCode 문제 풀기
• 티스토리 스킨 바꾸기 (글씨가 너무 작아서 보기 힘들다)
• 앞으로의 하루 루틴 정하기