2022.05.16~05.20_TIL

5월 16일 (월)

오늘 한 일

• leetCode 풀기
  • 617. Merge Two Binary Trees  
    • 두 개의 이진 트리를 병합하는 문제였다. 처음에 문제만 보고 이게 뭐지? 싶었는데, node 값이 있다면 그 값을 더하고, 하나의 이진 트리만 node가 존재한다면 그 node를 넣어서 새로운 tree를 만드는 문제였다. 이번에는 강의를 듣지 않고 구글링을 하여 문제를 이해하는 방법을 사용했다. node를 병합하는 함수를 만들어 재귀 호출을 하면 쉽게 구현할 수 있었다.
  • 116. Populating Next Right Pointers in Each Node  
    • 같은 level의 node로 포인터를 향하게 하는 문제였다. C언어를 잘 모른다면 포인터의 개념이 어려울 수 있는데, 그냥 연결 리스트의 next와 같은 개념이라고 생각하면 된다. 구글링을 하여 코드를 보아도 이해가 가지 않아, ppt로 그림을 그리고 디버깅을 활용하여 코드의 flow를 따라가보았다. BFS를 사용하면 또 쉽게(?) 풀 수 있는 문제였다. 
• HTML 과제 4 만들기
  • 보안과 개인정보  
    
    • <a> 요소는 사용자의 보안과 개인정보에 중요한 영향을 줄 수 있다.
    • target="_blank"를 rel="noreferrer"와 rel="noopener" 없이 사용하면 웹사이트가 window.opener API 악용 공격에 취약해진다. 다만, 최근 브라우저(Firefox 79+ 등)는 target="_blank"를 지정하면 임의로  rel="noopener" 설정과 동일한 보호 수준을 적용한다.
    • <a> 속성으로 target="_blank"를 사용할 때 rel="noopener" 를 같이 명시해주어야 보안 취약점을 보완할 수 있다.
  • CSS 3번 요구사항 : 로고의 경우 /assets/logo/logo.svg 이미지를 배경으로 설정하고 “Coupang”이라는 텍스트는 스크린리더에서는 읽을 수 있지만 화면에는 보이지 않도록 구현해 주세요.
    • 화면에는 보이지 않지만 스크린리더에서 읽을 수 있게 CSS를 구현한 적이 있다. 하지만 그 방법은 background를 포함하여 content를 숨기는 기능이라, 이미지만 보이게 하지 못했다. 내일 다시 한 번 더 확인해보아야 할 사항이다.
• 인프런 모던 자바 스크립트 Deep Dive 스터디 
  • 4장 변수
    • 변수 이름은 어디에 등록되는가?
    • weakRef()
  • 5장 표현식과 문
    • 표현식인 문과 표현식이 아닌 문
    • 완료값
• 리팩터링 2판  제로베이스 강의
  • 2장 리팩터링 원칙
• 비전공자를 위한 이해할 수 있는 IT 지식
  • 1장 오리엔테이션
  • 2장 프로그래밍 언어 & 운영체제 (OS)

느낀 점

하나에 몇 시간씩 집중하는 것보다, 여러 일들을 돌아가며 하는 것이 훨씬 효율이 좋다고 생각한다. 오늘은 leetCode 알고리즘 풀이에 6시간 가까이 소요했던 것 같다. BFS, DFS를 좀 더 완벽히 이해하기 위함이다. HTML 과제 4를 시작했는데 그 전 과제들보다 난의도가 있는 것 같다. 아직 초기 부분인데 어떻게 구현해야 할지 모르겠는 것들이 있다. 내일은 HTML 과제 4 진도가 나가길 빈다. 

---

5월 17일 (화)

오늘 한 일

• JavaScript 알고리즘 듣기
  • 백트래킹 (backtracking)
  • 동적 계획법 (Dynamic programming)
• JavaScript 클로저 듣기
  • 1, 2, 3강 듣기
• HTML 반응형 디자인 듣기
  • 1, 2, 3, 4, 5, 6, 7, 8, 9강 듣기
• leetCode 2문제 풀기
  • 542. 01 Matrix  
  • 994. Rotting Oranges  

느낀 점

leetCode 문제가 상당히 난의도가 있었다. 해결 코드를 보아도 100% 이해가 가지 않았다... 내일 알고리즘 스터디원 분들의 설명을 들으며 더 깊은 이해가 필요할 것 같다. 

자바스크립트의 클로저 개념도 난해하고 어려웠다. 자바스크립트를 사용하며 이게 왜 되지? 싶었던 것이 클로저라는 개념이라는 것을 알았다! 아직 클로저가 내 머리에 자리 잡은 건 아니지만 모던 JS를 공부하며 더 보충할 생각이다.

미라클 모닝을 하니 오후 시간에는 머리가 너무 아파서 집중이 잘 되지 않았다. (정확히는 미라클 모닝이 원인인지, leetCode의 난의도 때문인지 모르겠다.) 일찍 일어나 오후까지 공부에 집중할 수 있다면 좋을 텐데 전부 내 마음대로 되는 건 아닌 것 같다.  

---

5월 18일 (수)

오늘 한 일

• HTML 과제 4 
  • 5월 16일 월요일, Coupang 로고를 텍스트로 마크업 후 background로 로고 사진을 띄우는 것을 해결하지 못했는데 해결! 
    • a11y.css에 가면 sr-only(스크린리더에만 읽히는) Class에 대한 css가 설정되어 있다. 이 클래스를 지정하면 컨텐츠 모든 내용이 보이지 않는다. width, height 값을 설정해주면 background-image 크기와 width, hieght크기가 일치하지 않는다. 이 문제는 background-size: cover로 설정하면 해결 가능하다. 
  • Grid 배치하기
    • 우선 크게 column 3개로 나누고, 두번째 column 안에 row를 2개로 나누었다. 
    • column 1 : Button
    • column 2 : logo + Search + nav
      • row 1 : logo + search
        • row1 serach form을 구현할 때, button을 추가하니 form 크기가 커졌다. (알 수 없는 빈 공간이 생겼다 😓) form 태그에 display : flex을 주니 해결됐다. 
      • row 2 : nav
    • column 3 : my coupang + cart
  • Button 만들기
  • logo + form 요소 만들기
  • 마이 쿠팡 + 장바구니 만들기
• leetCode 문제 풀기
  • 206. Reverse Linked List  
  • 21. Merge Two Sorted Lists  
• 코딩 테스트 
  • 역시나 어려웠다... 이번엔 solve 한 문제가 저번보다 반으로 줄었다 😂 풀릴 것 같으면서 풀리지 않은 문제들이 몇 개 있어 너무 아쉬웠다. 특히 Map 객체가 Array로 변환이 안되는 부분은 너무 답답했다. 아무리 구글링을 하고 그 방법을 시도해도 변환이 되지 않았다. 이번 주 주말에 다시 풀어볼 예정이다

---

5월 19일 (목)

오늘 한 일

• leetCode 문제 풀기
  • 77. Combinations  
    • 숫자들의 조합을 구하는 문제였다. backtracking을 사용하여 재귀로 풀었는데 중간에 이해가 잘 가지 않는 부분이 있어 오전 모각코 시간을 전부 사용했다. 
    • 첫번째 요소를 정하고 두번째 요소를 재귀 호출해서 해결하는 건 이해했지만, 다시 첫번째 요소를 바꾸는 재귀 호출이 처음에 이해가 잘 되지 않았지만, 계속 디버깅해보니 이해 할 수 있었다. 이 시간들은 순열 문제를 풀 때 도움이 됐다.
  • 46. Permutations  
    • 숫자들의 순열을 구하는 문제였다. 순열 backtracking은 이전에 제로베이스 알고리즘 강의에서 배운 적이 있어 그 코드를 참고했다. 제로베이스는 들어오는 원본 배열을 바꾸었는데 나는 새로운 result 배열을 만들고 그 배열에 순열 값을 넣어 반환했다. 
    • 전에 배웠을 땐 50%도 이해하지 못하고 넘어갔었는데, 오늘 다시 보니 쉽게 이해할 수 있었다. 처음 보는 것보다 두 번 보는 게 훨씬 속도가 빨라졌다.
  • 784. Letter Case Permutation  
    • 이번에는 문자열의 소문자, 대문자 경우의 수를 구하는 문자열 순열 문제였다. backtracking을 하지 않고도 풀 수 있을 것 같아 for문으로 풀어보았다. 
    • foreach로 이전에 들어갔던 모든 요소들의 S[i]를  변환해야 한다는 것을 이해하지 못해 시간을 많이 사용했다. 이것도 여러 번의 디버깅으로 이해할 수 있었다. (디버깅은 나의 친구)
• HTML 과제 4 하기
  • 마이쿠팡 Hover 시 tooltip 표시하기
    • tooltip arrow를 border로 표시하는 데에 시간을 (비교적) 많이 사용했다. 여러 자료를 보며 응용하니 내가 원하는 모양으로 사용할 수 있었다. 
    • 다른 팀원분은 figma - component에서 svg를 따와서 사용하셨다는데 나는 svg로 복사가 안됐다...😂😂 (사람 차별인가요...) 그래도 해결했으니 만족한다! 
    • 이 방법은 따로 블로그에 포스팅 해야겠다.

---

5월 20일 (금)

오늘 한 일

• HTML 과제 4 마무리 하기
  • 어제 과제를 거의 다 마친 상황이라 오늘은 마무리 작업을 했다. 오전 모각코 시간 내에 끝낼 수 있었다! 
  • 오늘 했던 작업은 매우 쉬운 작업이었다. 리스트 요소를 inline-block으로 배치하기만 하면 됐다. 
• 제로베이스 자바스크립트 문법 비동기 듣기 
  • 자바스크립트에서 비동기 함수를 배우는 것은 처음이었다. promise와 async await에 대해 배웠는데, 아직 100% 다 이해하지는 못했다. 예제 코드로 console.log로 찍는 것만 했었는데, 나중에 프로젝트에서 비동기 함수를 활용할 수 있는 단계까지는 아직인 것 같다. 모던 자바스크립트를 공부하며 더 보충할 계획이다.
  • 공부한 내용은 블로그에 따로 올렸다.