[Day 44] 2022-0824 : 피그마로 클론하기

🐈오늘 공부한 것

✔️피그마 사용법 익히기

피그마를 이용해 실제 사이트를 클론하는 과제를 진행했다. 디자인 툴을 많이 다뤄봤기 때문에 익숙한 부분도 있었지만, 컴포넌트 생성으로 기능이 동작하도록 한다던지 이벤트를 발생시키는 부분이 많이 어려웠다. 헤맸던 기능을 정리해보려고 한다.

1. 먼저 개별 Frame 을 생성한 뒤에 이들을 Component set 으로 만들어 각 frame 에 다른 frame으로 이동할 수 있는 change to 기능을 만드려고 했다. frame 에 interaction 을 추가하고, After Delay 이벤트를 넣은 뒤에 change to 를 선택했는데, change 될 프로퍼티를 입력할 수 있는 칸이 전혀 뜨지 않았다. 원인이 뭔지 몰라서 1시간을 헤맸는데 알고보니 하위 컴포넌트 이름을 변경할 때 Property 1= 이 부분까지 전체 삭제를 해서 안되는 거였다. = 기호 다음만 바꿔주니 Property 1 하고 입력한 이름이 잘 표시되었다. 

2. 두 번째는 figma에서 plugin을 적용하는 방법이었다. 유어클래스 강의자료에는 업데이트 된 내용이 반영되지 않았는데, 검색해도 자료가 잘 나오지 않아서 꽤 애를 먹었다. 업데이트 이전에는 community 탭에 들어가 설치할 plugin을 찾은 뒤 install을 해주어야 했는데, 이제는 저 ... 그림과 같은 버튼을 누르고 Plugins 탭을 누르면 바로 플러그인을 검색하여 사용할 수 있다. 별도의 설치가 필요한 것 같진 않았다! 오늘은 unsplash 플러그인을 유용하게 활용했다. 

 

이것은 페어와 함께 만든 웹페이지 피그마 클론. 어려웠던 부분은 컴포넌트 인스턴스 수정하는 부분 => 인스턴스 내부 요소가 잘 수정되지 않아서 dispatch를 한 뒤에 진행했는데, 이러면 컴포넌트로 만든 의미가 있는건지 잘 모르겠다. 그리고 여러 요소가 스크롤 혹은 드래그로 보여지게 하는 부분이었는데, figma에 내가 원하는 효과가 없는 것인지 100% 완벽하게 구현할 수는 없었다. figma 기능이 생각보다 많고, 제대로 공부하고 했으면 좋겠는데 좀 주먹구구식으로 한 것 같아 아쉽긴 함

Figma

✔️TIL 스터디 발표준비

내일이 발표인데 3일째 발표 준비를 질질 끌고 있다. 일단 내가 이해가 안되는데 설명을 어떻게 할 수 있을까 싶어서 최대한 이해를 하고 납득하려고 노력하는 중이다. 렌더링 과정에 렌더링만 포함되는 것이 아니고 HTTP 통신부터 시작하다 보니까 거기에 사로잡혀서 통신 레이어, OSI 7계층까지 찾아보게 되었는데 이해가 잘 안되니 중요한 부분만 짚고 넘어가야겠다.

지금까지 살펴본 내용은, 브라우저에 JS 엔진 이외에 브라우저 엔진과 렌더링 엔진이 있어서 각각 맡은 역할이 조금씩 다르다는 것이다. 렌더링 엔진에서는 통신레이어(라고 표현해야할지... 통신이 정확히 브라우저의 어디서 이루어지는 것인지 모르겠다. OS 에서 이루어진다고 하는데 그게 브라우저와 어떻게 연동되어서 이루어지는지 잘 이해되지 않음.), 통신 레이어에 HTTP 요청이 이루어지도록 URI를 전달하고, 전달받은 리소스가 있다면 그것을 파싱하는 역할을 한다. JS 파싱은 JS 엔진 - 크롬의 V8이 별도로 담당한다. 

✔️피보나치 수열 - 동적계획법과 메모이제이션

오늘 데일리코딩 레퍼런스를 보고 내 나름대로 이해한 내용이다. 

오늘도 역시나 그렇듯 한번에 이해가 되지 않아서 그림으로 그려보았다. 일단 동적 계획법이란 큰 문제를 작은 문제로 쪼개서 푸는 기법인데 재귀와 약간 다른 점은 중복되는 연산이 있을 때 그 연산의 결과를 저장해두고, 연산을 하게 되면 그 결과값을 꺼내서 쓸 수 있다는 것이다. 이게 '한 번 풀었던 문제를 기억한다'의 의미이다. 이런 기법을 메모이제이션이라고 하고, 연산 횟수를 줄일 수 있는 최적화 기법이다. 지금 가만 생각해보면 한 번 있었던 일을 기억하는 것이 성능 최적화에 좋은 방법인 것 같다. 브라우저에서도 쿠키나 캐시같은 것을 사용하는 것 처럼... 

아무튼 아래 코드를 보면 위 그림이 조금 더 이해가 될 수도 있고 아닐 수도 있고 아무튼..!

function fibonacci(n) {
  // 연산의 결과는 이 memo 배열에 저장된다.
  const memo = [0, 1];

  // 재귀적으로 반복하여 연산 결과를 저장하거나, 리턴할 함수.
  const recursive = n => {
    // n이 인자로 전달되었을 때, memo 배열에 n이 존재하고 있다면 해당 결과를 리턴한다.
    if (memo[n] !== undefined) return memo[n];
    // memo의 n번째 요소 즉 피보나치 수열의 n번째 항을 재귀적으로 계산한다.
    // 각 함수 호출에서 위 if문의 조건에 따라 memo에 존재할 경우 계산하지 않고 그 항을 리턴한다.
    memo[n] = recursive(n - 1) + recursive(n - 2);

    // 최종적으로 계산이 완료되면 저장된 memo배열의 n번째 항을 리턴한다.
    return memo[n];
  };
  return recursive(n);
}

🐈더 공부할 것

1. 리플로우 & 리페인트는 언제 이루어지는지?

🐈오늘의 느낀 점

1. 작은 웹페이지를 클론하는 것인데도 디자인 통일성이라던지 효율적인 작업이 전혀 안된 것 같아서 좀 아쉬웠다. 원인은 피그마의 사용 방법에 대해서 제대로 몰라서 그런 것 같다. 사용 방법에 좀 더 익숙해지면 어떤 부분을 컴포넌트화 하여서 프로토타입을 만들지 미리 생각하고 행동에 옮길 수 있을 것 같다. 

 

2. 주말에 제대로 공부를 안하면 평일에 고생한다는 것을 절절하게 깨닫고 있다. 다행히 아침에 일찍 일어나서 공부를 하기 때문에 엄청 몰아서 한다는 느낌은 없긴 하지만. 내일은 렌더링 엔진에 대해서 좀 더 정리하고, 리플로우와 리페인트에 대해서 공부해야지. 

 

3. 이번 주 부터는 오프라인 모각코를, 다음주 부터는 강의와 함께 알고리즘 스터디를 다시(!) 시작하게 되었다. 새로운 것을 하는게 아니라 기존에 하던 것을 같이 하는거라 크게 무리는 없을 것 같고 주말에 모각코 하는 것은 상당히 기대가 된다. 왜냐면 주말에 해야지 해야지 하고 안한 적이 100이면 75는 되었기 때문에 ㅜ