01.04 TIL

천영석·2021년 1월 4일
post-thumbnail

애플 웹사이트 클론 코딩

강의를 보면서 애플 웹사이트를 클론 코딩하는 중이다.

강의를 들으면서 느끼는 것은 처음부터 세세하게 코딩하는 것이 아니라 크게 코딩을 한 뒤에 점점 세세하게 좁혀나가는 것이다.
예를 들면, 스크롤을 할 때 스크롤의 위치에 따라서 글이 나타났다가 사라지는 애니메이션을 만들 때

  1. 스크롤이 어디까지 되었는지 비율을 구한다. (현재 스크롤 높이 / 총 높이)
  2. 비율에 따라 opacity를 적용해 화면 끝까지 스크롤 할 때, 서서히 opacity가 0부터 1이 되는지 확인한다.
  3. 현재 구한 비율은 화면 처음부터 끝까지이기 때문에 특정 구간에서의 비율을 구한다.
    ((현재 스크롤 높이 - 특정 구간 시작 높이) / 특정 구간 총 높이)
    ex) 400px ~ 900px에서만 글이 나타났다가 사라질 때, 이 사이의 비율을 구한다.
  4. 특정 구간에서 스크롤 할 때, 서서히 opacity가 0부터 1이 되는지 확인한다.
  5. 지금까지는 opacity가 0부터 1로 서서히 드러나게 만들었고, 이제 사라지게 만들어야 한다.
    이때, opacity를 [0,1]과 같이 배열로 만들었기 때문에 다음 함수를 호출할 때 [1,0]과 같이 사라지게끔 배열을 인수로 할당하면 된다.
    물론, 특정 구간도 배열로 만들어야 한다.
  6. translateY나 scaleY와 같은 것들을 인수로 할당해 나머지 글에도 적용한다.

이렇게 처음에는 화면 처음부터 끝까지 애니메이션을 적용해보고, 특정 구간에서 적용해보고, 사라지게도 해보는 순서로 서서히 범위를 좁혀나가면서 코딩하는 것을 확인할 수 있었다.

나는 처음에 생각했을 때, 400px ~ 1400px까지 글이 나타났다가 사라질 때 중앙 값을 구해 한 번에 처리해야 된다고 생각했었고, 그렇게 설계를 하고 코딩을 하다보니 생각이 나질 않아서 자꾸 막혔었다. 그래서 결국 강의를 보고 고쳤다.

지금은 강의를 보고 연습하는 것이라서 우아한테크코스 프리코스를 진행했을 때처럼 설계를 직접 하고 그러지는 않았지만 아마 이번주 내로 강의를 모두 보고, 웹사이트 코딩을 끝낼 것 같은데 한 번 끝내고 나면 내가 직접 설계를 해서 다른 방법으로 구현해보도록 하려고 한다.
전문가는 어떤식으로 코딩하는지 배운다는 마음으로 강의를 듣고 있다.

그렇게 물어보면 원하는 답을 들을 수 없습니다

4일 간 집에 내려가서 휴식을 취하면서 우아한테크코스에 가기 전에 어떤 것을 해야할지에 대해 생각해봤고, 코딩을 많이 연습하는 것보단 소프트 스킬 역량을 키우는 것이 더 좋을 것 같다는 생각을 했다. 코딩은 우아한테크코스 과정을 하면서 열심히 할 것이기 때문에 충분히 연습이 될 것이라고 생각하기 때문이다.

그래서 질문을 잘 하는 것이 소프트 스킬의 기본이라고 생각해서 질문과 관련된 책을 읽는 것이 좋다고 생각했고, "그렇게 물어보면 원하는 답을 들을 수 없습니다" 책을 구매했다.

간단히 줄거리를 보고 매료되어서 구매했는데, 이유는 이미 지나간 일에 대한 질문을 하지 말고 미래에 더 발전하기 위한 질문을 하라는 내용을 보고, 내가 기존에 가지고 있던 질문에 대한 고정관념을 깨줄 수 있는 좋은 책이라고 생각했기 때문이다.

책이 빨리 오면 좋겠고, 내 목표는 우아한테크코스를 시작하기 전까지 책을 손에서 놓지 않고 계속 읽는 것이다.

profile
느려도 꾸준히 발전하려고 노력하는 사람입니다.

0개의 댓글