[TIL] 0430, 2022 Today I Learned

Yungsang Hwang·2022년 4월 30일
0

Today I Learned

목록 보기
8/56
post-thumbnail

작성 규칙

  1. 🟠 작성 상태
    ✅ 작성한 날짜를 기록함으로써 리마인드
    ✅ 작성한 프로젝트를 기록함으로써 프로젝트를 찾아볼 수 있음
    ✅ 몰입 상태를 기술함으로써 하루를 파악하기
  2. 🧨 오늘의 공부
    ✅ 알고 있던 기능(내 블로그 링크)
    ✅ 새로 알게 된 기능(레퍼런스 링크)
  3. 🎢 학습 소감
    ✅ 왜 이런 공부를 하게 되었는지?
    ✅ 공부한 내용의 난이도는 어땠는지?
    ✅ 공부한 것을 내 것으로 만들 수 있었는지?
    ✅ 오늘 다한것과 하지 못한 것, 내일 해야할 것을 적어보기

🟠 작성 상태


🟠 작성 날짜 : 0430, 2022

🟠 작성 프로젝트 : 기획 - Instagram UI 클론코딩

🟠 몰입 상태 : ⭐⭐ 적게 몰입함

🧨 Today I Learned


🧨 알고 있던 기능

🧿 기획서, 와이어프레임 정리 1 2

📌 하위태그 absolute 가두기 CSS

  • 인스타그램 피드에서 스토리카드 안에는 네 가지의 버튼이 있다. 이미지 앞뒤로 넘기기, 태그 사용자 표시, 배경음악 음소거.
  • 총 네가지의 버튼은 피드 이미지 안에 고정된 위치로 존재해야 한다.
  • 단순하게 absolute로 위치를 고정해버리면, 아래로 무한 로딩 피드 어펜딩을 할 때마다 가져와지는 피드 이미지 내부의 버튼들의 위치를 잡아줄 수가 없게 된다. 따라서 필요한 것은, 하위 태그들이 상위 태그의 내부에서 absolute 포지션에 위치할 수 있어야 한다.
  • 내일배움캠프 첫주차 팀 소개 웹 페이지 개발에서 해당 기능을 팀원이 사용한 적이 있어 참조했다.
  • 간단한 설명이었지만, 핵심적인 내용을 모두 담는 한마디는 '상위는 relative, 하위에 absolute' 였다.

🧨 새로 알게 된 기능

🎨 폰트어썸 아이콘 사용 및 크기조절

  • 아이콘을 i, svg 태그로 쉽게 가져다 쓸 수 있는 아이콘 제공 웹 서비스.
  • free 티어 킷 코드를 웹 링크로 붙여넣은 뒤, 원하는 아이콘을 골라 i태그를 복사해서 붙여 쓰면 된다
  • 크기를 다양하게 조절할 수 있는데, style font-size 를 직접 지정해주거나, 정해진 클래스 이름 (fa-lg) 와 같은 방식으로 편리하게 설정할 수도 있다

🎢 학습 소감


🎢 왜 이런 공부를 하게 되었는가?

🙄 "똑.같.게" 하기 위한 연습

  • 인스타그램 클론코딩이라는 과제로 주어지기는 했지만, 과제라는 것 만이 결과물을 보여줘야 할 이유는 되지 못했다. 인스타그램을 똑같이 만들어 낼 수 있다는 것은, 응당 다른 페이지도 본인의 힘으로 베껴낼 수 있다는 것이다. 그리고 또한 베껴낸다는 것은, 개발자로서 그냥 당연하게 하는 것이 아닌 실제 서비스 중인 페이지에 구현된 기능을 따라하고, 또 실제로 해낼 수 있다는 점에서 실무에 한 발자국 더 가까이 다가갈 수 있을 것이라 생각했다.
  • 그렇다면 일정한 틀에 의해서 실무는 움직일 터였다. 그래서 기획과 와이어프레임에 다소 더 집착했다. 정해진 내용(뼈대구조와 CSS정보)을 기획서에 베껴내고 그것을 바탕으로 와이어프레임을 제작했다. 기획서와 와이어프레임은 단순히 업무를 따라해낼 수 있는 것 뿐만 아니라 생각한 내용만을 코딩할 수 있게 해주는 습관을 들여주는 역할 또한 톡톡히 수행했다.

🎢 공부한 내용의 난이도는 어땠는가?

🤔 시간이 너무도 모자란 것이 어떤 것을 시사하는가?

  • 기획서와 목업을 작성하는 것은 코딩을 굉장히 효율적으로 하게 한다. 그러나 그 과정에서 너무도 많은 시간을 소모했다.
  • 애당초 제시된 기한은 이틀이다. 이틀차가 되어갈 때에도 나는 헤더를 겨우 만들었으며, 다른 캠퍼들은 기본 수행기능까지는 제대로 완성을 향해 가고 있었다. 따라서 기획과 목업작성에 너무 많은 시간을 투자해 내 발목을 잡고 있는 것이었다.
  • 현재 사흘차인 지금에서 피드 부분의 절반정도를 완성했다. 그것도 기본적인 기능만을 포함한 이야기다.
  • 결론을 내자면 "기획과 목업에 대한 시간투자가 코딩을 완수하지 못하게 만들었다" 라는 이야기와 "그렇게 해서라도 내가 얻어가는 것이 큰가?" 라는 생각을 하게 되었다.

🎢 공부한 것을 내 것으로 만들 수 있었는가?

🐱‍🚀 기획과 목업, 계속하자

  • 내가 내린 결론은 스파르타 내일배움캠프에 왔기 때문에 확실하게 나를 만들 수 있는 기회라고 생각했다.
  • 코더는 될 수 있겠지만, 이런 사고방식을 거치지 않는다면, 설계하고 정확하게 일정을 지켜나가는 능력을 기르지 않는다면 나에 한정해서 개발자는 될 수 없을 것이라고 생각한다.
  • 그렇기에 조금 더 시간을 투자하더라도 간략하지만 핵심적인 부분을 기술하는 기획과 간결하지만 눈에 확 들어오는 와이어프레임 제작은 계속해야한다.
  • 내 망상들을 자꾸 덧붙여 프로젝트를 산으로 가지 않게 한다는 점에서는 정말 크나큰 성장이다! 이 것은 지금 나에게 흡수되고 있고 점점 내 것이 되어가는 것 같다.
  • 계획적이고 체계적인 개발자가 되어 엉성하고 애매한 사고와 실행력을 개선하자!

🎢 오늘 마친 것, 마치지 못한 것, 해야할 것

  1. 오늘 마친 것 : 프로젝트 헤더, 프로젝트 스토리카드 중반까지
  2. 오늘 마치지 못한 것 : 프로젝트 스토리카드 하반, 푸터필드까지의 기본 구현
  3. 해야할 것 : 프로젝트 기본 구현을 끝내고, javascript를 활용한 캐러셀, 모달, 반응형 웹
profile
하루종일 몽상가

0개의 댓글