[TDL] 07/09 Today's-Done-List

- 제로베이스 알고리즘 배열 복습

숫자 빈도수 구하기, 달팽이 만들기

주어진 범위 안의 숫자 빈도수를 구할 때 만약 해당 숫자가 일의 자리 이상이라면,

let num;
for (let i = f; i <= s; i++) {
  num = i;
  while (num != 0) {
    result[num % 10]++;
    num /= 10;
    num = parseInt(num);
  }
}

만약 i, 즉 num이 123이라면 123 % 10를 해주어, result 배열의 해당 index에 할당하여 ++를 해준다.
첫 번째 123 % 10는 3으로, 1-9까지의 배열을 생성한 배열 result의 3번째 index에 ++을 해주었고,
(이때 result는  [0,0,3,0,0,0,0,0,0] )
123을 10으로 나눈 12.3에서 parseInt로 정수만을 뽑아내면, 12가 된다.

따라서, 두 번째 12 % 10는 2로, 1-9까지의 배열을 생성한 배열 result의 2번째 index에 ++을 해주었고,
(이때 result는  [0,1,1,0,0,0,0,0,0] )
12를 10으로 나눈 1.2에서 parseInt로 정수만을 뽑아내면, 1이 된다.

따라서, 세 번째 1 % 10는 1로, 1-9까지의 배열을 생성한 배열 result의 1번째 index에 ++을 해주었고,
(이때 result는  [1,1,1,0,0,0,0,0,0] )
1을 10으로 나눈 0.1에서 parseInt로 정수만을 뽑아내면, 0이 되므로 반복문이 종료된다.

result는  [1,1,1,0,0,0,0,0,0]가 되는 것을 볼 수 있음.

---

2차원 배열을 생성 : 아래와 같이 해주면 [ [], [], [], [] ] 형태의 2차원 배열이 나타남.

let length = 4;
let result = [];

for (let i = 0; i < length; i++) {
    result[i] = [];
}

 

2차원 배열의 x, y축을 이동할 때의 코드.

/* x축 이동 */
for (let i = 0; i < length; i++) {
    x += direction;
    result[y][x] = ++num;
}

/* y축 이동 */
for (let j = 0; j < length; j++) {
    y += direction;
    result[y][x] = ++num;
}

 

반복문에 해당 코드를 적고, 반복문의 조건으로 length가 0보다 작거나 같으면 break 되도록.
x축과 y축을 시계방향으로 이동하면서 숫자를 채울 때,  direction을 하나씩 줄여주어야 2차원 배열의 안쪽 숫자들도 채울 수 있음.

---

- 제로베이스 html/css 강의

애니메이션과 flexbox를 학습.

animation-name
@keyframes애니메이션의 키프레임을 설명하는 at-규칙의 이름을 지정합니다.

animation-duration
애니메이션이 한 주기를 완료하는 데 걸리는 시간을 구성합니다.

animation-timing-function
애니메이션의 타이밍을 구성합니다. 즉, 가속 곡선을 설정하여 애니메이션이 키프레임을 통해 전환되는 방식입니다.

animation-delay
요소가 로드된 시간과 애니메이션 시퀀스의 시작 사이의 지연을 구성합니다.

animation-iteration-count
애니메이션이 반복되어야 하는 횟수를 구성합니다. infinite애니메이션을 무기한 반복하도록 지정할 수 있습니다.

animation-direction
애니메이션이 시퀀스를 실행할 때마다 방향을 바꾸거나 시작점으로 재설정하고 자체를 반복해야 하는지 여부를 구성합니다.

animation-fill-mode
애니메이션이 실행되기 전과 후에 적용되는 값을 구성합니다.

animation-play-state
애니메이션 시퀀스를 일시 중지하고 다시 시작할 수 있습니다.

 

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes name | duration | easing-function | delay */
animation: slidein 3s linear 1s;

/* @keyframes name | duration */
animation: slidein 3s;

---

flex properties를 학습할 때,
container에 들어갈 수 있는 속성인지 혹은 내부에 들어가는 Items에 들어가는 속성인지 구분하면서 공부하는 것이 좋다.

container - display, flex-direction, flex-wrap, flex-flow
justify-content, align-items, align-content

Item - order, flex-grow, flex-shrink, flex-basis, align-self

---

- web tech camp 백엔드 기초

오늘은 자바스크립트 기초 문법 강의해주시는 거 같아서 한 시간 정도 듣다가 껐음.
유튜브로 다시 볼 수 있다고 하니깐, 조만간 유튜브로 대충 훑어보면서 들을 부분 있으면 들어보자.

---

- 보충 학습 : 3d carousel

아직 transform스타일링을 하는 것이 익숙지 않아서, 혼자서 구현하려면 시간이 많이 소요될 것 같다.
transform(translate, rotate), transition(transform) 요소와
3d를 위한 translateZ, transform-style(preserve-3d), perspective 요소들을 꾸준히 공부해야 할 것 같음.

transform: translate(-50%, -50%);
transform: rotateY(0deg) translateZ(346px);
transform: translateZ(-346px);

transform-style: preserve-3d;

perspective: 1000px;

transition: transform 1s;

transform-style
요소의 자식이 3D 공간에 배치되는지 또는 요소 평면에서 병합되는지 여부를 설정합니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style

transform( )
요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다.
CSS 시각적 서식 모델의 좌표 공간을 변경합니다.
https://developer.mozilla.org/ko/docs/Web/CSS/transform

translate( )
가로 및/또는 세로 방향으로 요소의 위치를 ​​변경합니다
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

rotate( )
2D 평면의 고정점을 중심으로 요소를 변형하지 않고 회전하는 변형을 정의합니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate

rorateY( )
요소를 변형하지 않고 세로축(세로축)을 중심으로 요소를 회전하는 변형을 정의합니다
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY

translateZ( )
 3D 공간에서 z 축을 따라 요소의 위치를 ​​변경합니다. 즉, 뷰어에 더 가깝거나 멀게 합니다
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ

translate: transform (transition-property)
속성은 전환 효과를 적용할 CSS 속성을 설정합니다
https://developer.mozilla.org/en-US/docs/Web/CSS/transition-property

https://www.youtube.com/watch?v=cnzkQ1i2U8k

---

- 보충 학습 : react 직접 환경 설정

 

https://dev-minju.tistory.com/267

---

주말 회고 (만족도 : 7)

주말이라 조금 여유롭게 목표를 잡아서, 그래도 목표를 모두 달성하였음.
저녁 먹고 다시 스터디 카페에 왔다는 거에 스스로 칭찬해주고 싶어, 만족도 7점 하겠다. 오전엔 못일어나는게 함정
오전에도 더 일찍 일어나서 오전 공부를 해보자!

---