Coding Diary

2022년 2월 16일

✍ Today

[스터디] [TypeScript] 타입스크립트 프로그래밍 #6, 7, 8, 9장

- 자바스크립트의 주요 내용와 타입스크립트의 내용을 살펴보았다. (반복기와 생성기, async/await, 함수 조합의 원리와 응용, 제네릭 프로그래밍)

2022년 2월 15일

✍ Today

[Toy Project] Pokemon

-useState로 처음에는 포켓몬을 10개만 보여주고 버튼을 누르면 더 많은 포켓몬을 볼 수 있게 하였다.

- 처음에 type을 받아올 때 첫번째 배열만 받아와졌는데 이를 map으로 해결해였다. type이 2가지인 경우 모든 type을 받아올 수 있게 하였다. 어렵지 않은 부분이였는데 처음부터 코드를 짜보려니 생각처럼 잘 되지 않았다ㅠㅠ

map으로 받아올 때 type 부분이 빈칸으로 출력되어 console.log을 해보았다. type의 배열이 0,1로 제대로 받아오지 못한 것을 볼 수 있다.

type={pokemon.types.map((num) => num.type.name)}

위와 같이 코드를 수정하여 배열에 type이 잘 담긴 것을 볼 수 있다.

그 결과 type 2가지 모두 잘 표시 되는 것을 볼 수 있다.

❓ Next 

- api로 포켓몬의 상세정보를 볼 수 있게 한다.

2022년 2월 14일

✍ Today

[Toy Project] 프로젝트 정하기

- React로 개인 프로젝트를 만들어 지금까지 공부해 온 내용들을 적용해 볼 예정이다. api를 받아와 보여주는 프로젝트를 진행하고 싶어 여러 무료 api를 찾아보았다.

- 포켓몬 api를 이용해 포켓몬 리스트를 보여주는 웹사이트를 만들어볼 예정이다.

https://pokeapi.co/

- pokeapi를 이용해 포켓몬 name, image, type을 받아오고 styled-component로 css을 작성하였다.

❓ Next 

- 리액트 JS 챌린지 Assignment3 과제를 수행할 예정이다.

- TRELLO CLONE 강의를 들을 예정이다.

2022년 2월 13일

✍ Today

[스터디] [TypeScript] 타입스크립트 프로그래밍 #03장-05장

-자바스크립트에 타입스크립트를 적용하는 법을 알아보았다.(객체와 타입, 함수와 메서드, 배열과 튜플)

2022년 2월 9일

✍ Today

[스터디] [TypeScript] 타입스크립트 프로그래밍 #01장-02장

- 타입스크립트의 주요 문법을 살펴보았다. (비구조 할당, 화살표 함수, 클래스, 모듈, 생성기, async/await)

2022년 2월 6일

✍ Today

[스터디] [TypeScript] OT

-  Do it! 타입스크립트 프로그래밍 책으로 타입스크립트를 공부한 후 간단한 프로젝트를 진행하기로 하였다.

2022년 2월 4일

✍ Today

[챌린지] [노마드코더] 리액트 JS 챌린지/Assignment 5: Motion

- Framer Motion에서 transform-orgin을 해보았다. transformOrigin: left bottom 을 한 후에 whilehover: scale 효과가 잘 적용되었는데, overlay 애니매이션 후에는 transform-origin이 center로 다시 바뀌었다. 

공식 홈페이지를 찾아보니 framer motion에서 transform origin을 적용하려면 originX, originY, originZ를 사용해야 되는 것 같다.

 <Box
	style={{ originX: 1, originY: 1 }}
	whileHover={{ scale: 1.2 }}
	onClick={() => setId(1)}
	key={1}
	layoutId={1}
 />

이후 위와 같은 방식으로 Box들의 style을 변경해주었더니 overlay motion 적용 후에도 정상적으로 transform-origin이 작동하는 것을 볼 수 있었다.

- transform-origin을 적용한 후 overlay 효과를 주는데 Box가 튀는 현상이 발생하였다. overlay 애니매이션이 실행된 후 다시 Box를 만드는 과정에서 transform-orgin을 적용해주지 않아 발생 되는 문제였다.

			{id === 1 ? (
              <Box
                layoutId={id}
                style={{
                  width: 220,
                  height: 200,
                  backgroundColor: "white",
                  originX: 1,
                  originY: 1
                }}
              />
            ) : id === 4 ? (
              <Box
                layoutId={id}
                style={{
                  width: 220,
                  height: 200,
                  backgroundColor: "white",
                  originX: 0,
                  originY: 0
                }}
              />
            ) : null}

위와 같이 조건문을 활용해 id에 따라 originX, originY를 바꿔주어 문제를 해결할 수 있었다.

❓ Next 

- 리액트 JS 챌린지를 과제를 할 예정이다.

2022년 2월 2일

✍ Today

[챌린지] [노마드코더] 리액트 JS 챌린지/Assignment 4: Recoil

- todolist에서 사용자가 새로운 카테고리를 생성하고 todo를 추가할 수 있게 하였다.

새로운 카테고리에서 기존 카테고리처럼 category, text, id 순으로 배열이 정리되게 하면 더 좋을 것 같다.

2022년 2월 1일

✍ Today

[챌린지] [노마드코더] 리액트 JS 챌린지/Assignment 4: Recoil

- todolist를 localstorage에 저장해 보았다.

recoil-persist를 이용하여 새로고침을 해도 todo가 localstorage에 남아있게 하였다.

❓ Next 

- todolist에서 카테고리 만들기를 할 예정이다.

2022년 1월 31일

✍ Today

[클론코딩] [노마드코더] ReactJS Master Class/NOMFLIX CLONE/#8.0-8.15

- Nexflix 홈페이지의 header, home을 구성하고 애니매이션을 넣는 강의를 수강하였다.

- https://www.themoviedb.org/ 에서 Movie api를 가져와 Slider에 보여주었다.

- 애니매이션을 넣을 때  type, layoutID, initial, animate, exit 등을 어떤 상황에 어떻게 적용하는 지를 알아보았다.

❓ Next 

- ReactJS 챌린지를 수행할 예정이다.