TIL

• white-space: nowrap; // 한줄처리

• text-overflow: ellipsis; //말줄임표 효과

• flex-wrap: wrap; //자동 줄바꿈 적용

---

오늘 한 일

• youtube 대충 카피 프로젝트 진행중
• leetcode
  • Middle of the Linked List (easy)
  • Relative Sort Array (easy)
  • Find Pivot Index (easy)

---

To Do

• scss 도 활용을 생각해보면 좋을것 같다.

• typescript 공부 예제를 생각해보자

• vue, angular 공부 해보자

---

오늘은...

어제부터 진행한 카피 프로젝트를 이어서 진행하였다. 어제 확인한 것처럼 api키의 사용을 남용하지않기위해 우선 무검색어로 20개의 자료를 받고 그것을 json 자료화 하고 간단한 임시 로칼 서버를 구동하여 주어진 자료를 get 할수 있게 구성하였다. 그리고 그 서버로부터 자료를 받고 그 자료로 첫화면에 20개의 영상 이미지를 뿌려주는 작업을 수행하였다.

형태를 잡는 것에는 그럭 저럭 진행이 되었지만 styled-component 사용에 문제가 있는지 자잘한 에러가 발생하였다. codesandbox 에 새로이 재구성 하였을때는 또 그러한 에러가 뜨지 않았다. 정확한 원인은 모르겟으나 주체는 styled-component 사용 법에 있는듯 하니 주의하면서 사용해야할것 같다.

이미지를 뿌리고 타이틀과 설명을 붙이고 능동형 박스 구조로 만들었으나 타이틀과 설명의 정리부분에서 시행착오를 겪다가 알게된 한줄처리 기법이나(문장을 한줄로만 나오게 함), 벗어난 문장을 ... 으로 마무리 시키는 명령어로 처리를 하였고 이미지 상자들은 자동으로 다음 줄로 넘어가게 구성하여서 유투브의 첫화면과 비슷한 구도로 이미지 박스들이 정령되게 하였다. 아직 고민중인 것은 적절한 크기에 적절한 이미지 박스숫자로 나타나게 하는 부분인데 그것은 좀 디테일 한 부분이니 나중의 도전사항으로 남기고 다음 수순으로 들어가기 전에 이미지 박스는 공용으로 사용할것 같아서 컴포넌트로 분리하였다.

이제 검색이나 선택 이후의 페이지를 구성해야 하지만 최초 구상은 선택시의 페이지만 구상해두어서
검색부분은 다시 고민해봐야할것 같다. 여하튼 나머지는 내일 해야겠다.