22.06.06~06.10_TIL

6월 6일(월)

오늘 한 일

• 제로베이스 프론트엔드 스쿨 Git/Github 강의 듣기
  • 셋업하기 3, 4, 5, 6
    • 셋업하기 3강을 들으며 적었던 글이 날아가서 다시 들으며 적었다...
  • 기본 컨셉 1, 2
  • 저장소 1, 2
• leetCode 풀기
  • 1290. Convert Binary Number in a Linked List to Integer
    876. Middle of the Linked List
    104. Maximum Depth of Binary Tree
    404. Sum of Left Leaves  
• HTML 과제 5번 is--active 해결하기
  • class를 활용하여 각 요소에 스타일을 주는 것을 완성했다. 
  • 자식 요소에 focus가 되어있을 때 부모 요소에도 스타일이 적용되어야 하는데, 부모 요소를 선택하지 못하여 시간을 많이 소요하였다. class를 따로 설정하여 해결해야 할 것 같다.
• 반응형 웹 만들기 (이모티콘 스토어)
  • @media 를 사용하여 모바일, 피씨 웹 사용 가능하도록 함
  • flex, grid 레이아웃을 활용
  • 모바일과 웹에서 structure를 바꾸어야 하는 부분에서 시간을 많이 소요했다. 결국 같은 section 두 개를 만들어서 피씨일 때, 모바일일 때를 나누어 display : none, block 를 해주었다.

느낀 점

• 웹 디자이너의 요청으로 이모티콘 스토어를 만드는 작업을 진행하였다. HTML, CSS를 열심히 공부하였지만 돈을 받고 웹을 만드는 것은 처음이었기에 (반응형 웹 페이지도 제대로 만들어 본 적이 없어 자신감이 없었다...) 매우 떨렸으나, 막상 직접 해보니 너무 재밌었다...! 내가 하고 싶은 대로 마크업을 짜고 CSS를 만드는 경험을 하는 것이 소중했다. 단점은 디자이너 분께서 figma 파일이 아닌 포토샵 파일을 주셔서 내용을 볼 수 없었다 😥 svg로 다시 받아 작업을 하고 있지만 피그마 파일에 비해 보는 게 매우 불편하다... 내일 얼른 끝내고 자바스크립트 구현 강의를 빠르게 들어야 할 것 같다.

---

6월 7일(화)

오늘 한 일

• 반응형 웹 만들기 (이모티콘 스토어) 완성
  • 파일 폰트 적용하기
    • https://awesomek.tistory.com/entry/HTML-%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0-%ED%8C%8C%EC%9D%BC-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%EB%B0%B0%EB%8B%AC%EC%9D%98-%EB%AF%BC%EC%A1%B1-%ED%8F%B0%ED%8A%B8
  • img 빈 공간 없애기
    • https://curryyou.tistory.com/204

[CSS] HTML: 이미지 태그 img 여백 뜨는 문제 해결방법

HTML 공부하기 : 파일 폰트 적용(배달의 민족 폰트)

 

느낀 점

• 이틀만에 반응형 웹 만들기를 완성했다...! 완성도가 100%는 아니지만 나름 제로베이스에서 배웠던 시멘틱 마크업을 하려고 노력을 많이 했다. 다음에 내 포트폴리오로 사용할 때는 WAI-ARIA랑 파비콘을 추가해서 올리면 좋을 것 같다. 

---

6월 8일(수)

오늘 한 일

• HTML 과제 5번 제출하기
  • 하위 요소가 active 될 때 부모 요소도 같이 CSS가 적용되는 것을 구현하지 못했었는데, 스터디 팀원분들의 도움으로 해결하여 결국 모두 구현을 성공적으로 마치고 제출할 수 있었다!
• leetCode 풀기
  • 1603. Design Parking System
    303. Range Sum Query - Immutable
• 프로젝트로 배우는 JavaScript 
  • To-do List
    • 1. 프로젝트 및 레이아웃 설명
    • 2. json-server로 fake api 구축
    • 3-1. API 연동 - 데이터 가져오기
    • 3-2. API 연동 - 데이터 입력하기
    • 3-3. API 연동 - 데이터 체크박스 처리하기
    • 3-4. API 연동 - 데이터 수정하기
    • 3-5. API 연동 - 데이터 삭제하기
  • To-do List 페이지네이션 적용
    • 1. 페이지네이션 이론
    • 2. 데이터 가져오기
    • 3. 페이징 처리
  • 야구게임
    • 1. 야구게임의 원리
    • 2. 마크업 작성
    • 3. JavaScript로 야구게임 구현 및 실행
  • 드럼 만들기
    • 1. 프로젝트 및 레이아웃 설명
    • 2. 키값에 따른 오디오 재생
  • 프로그레스 바
    • 1. 프로젝트 및 레이아웃 설명
    • 2. 자바스크립트 window height 개념 설명
    • 3. scroll에 따른 progressbar 생성

느낀 점

• HTML 과제를 드디어 제출했다...! 나름 모두 다 구현하고 제출했기 때문에 뿌듯한 마음이 크다. 
• 프로젝트로 배우는 JavaScript는 Git을 사용하며 코드를 만들고 있다. Commit을 하면서 코드를 짜려니 시간이 배로 많이 드는 것 같다. 이 시간 비용을 통해 나중에 Git을 좀 더 유연하고 능숙하게 사용할 수 있길 바란다.
• 야구게임 프로젝트에서 배운 구조 분해 할당, 프로그레스 바 프로젝트에서 배운 throttle은 나중에 따로 정리해서 블로그 포스팅하면 좋을 것 같다. 
• 하루에 프로젝트 5개라니... 진짜 인간 승리다.

---

6월 9일(목)

오늘 한 일

• leetCode 문제 풀이
  • 896. Monotonic Array
    28. Implement strStr()
• 프로젝트로 배우는 JavaScript
  • 무한 스크롤
    • 1. 프로젝트 및 레이아웃 설명
    • 2. 데이터 가져오기
    • 3. 페이지 끝 체크해서 데이터 추가로 가져오기

---

6월 10일(금)

오늘 한 일

• leetCode 문제 풀이
  • 110. Balanced Binary Tree
    459. Repeated Substring Pattern
• 프로젝트로 배우는 JavaScript
  • 이미지 슬라이더
    • 1. 프로젝트 및 레이아웃 설명 (레이아웃 꾸미기)
    • 2. 슬라이더 네비 만들기
    • 3. 슬라이더가 동작하는 동안 네비 기능 막기
  • JavaScript 기본 스터디 준비
    • Ajax 글 쓰기 (모던 자바스크립트 참고)