11.15.2024(금) TIL

1.  새롭게 배운 점은? (Learned)

영어 공식 문서를 읽는 연습을 하고 프로젝트에서 자잘하게 이해안되는 부분들을 검색해보고 고민하는 시간을 가졌습니다.  

새롭게 안 내용 

-3. [ css 문법 ] 가상클래스 :focus :focus-visible :focus-within 의 미세한 차이 

이 셋의 차이를 알려면 사용자가 특정 요소를 포커스할때 여러 디바이스를 사용한다는 점을 주목해야 하는 데요. 마우스, 스크린 터치, 키보드 tab 등의 방법으로 특정 요소를 포커스 할 수 있다는 점입니다.  그래서 :focus-visible은 키보드를 통해 포커스했을 때, focus-within 은 하위요소에 포커스가 왔을 때 상위 요소도 스타일할 때 사용한다고 하네요  이렇게만 봐서는 이해가 안 됐는데 input 요소와 button 요소를 결합한 검색바 컴포넌트를 만들 때 input 요소 클릭 시 검색바 외부 주변으로 포커스링이 생길 때 유용하겠네요!

-2. [ shadcn ui ] border-input  

코드보다가 모르는 테일윈드 문법 (border-input)이 있어서 커스텀 문법인가 살펴봤는 데요. 사용자가 커스텀한 게 아닌 shadcn ui를 설치하면 자동으로 tailwind.config.js 파일에서 지네들🪱이 컬러로 자동 설정 input: 'hsl(var(--input))'해준다고 하네요. (옹~)

-1. [ React.ForwardRef ] ForwardRef 사용시 displayName 

리액트 컴포넌트의 디스플레이 이름을 명시적으로 설정하는 부분입니다. 설정 전에는 컴포넌트가 <ForwardRef>로 보이기 때문에 SearchBar.displayName = 'SearchBar';     이런식으로 명시하면 <SearchBar>로 표시되어 코드와 컴포넌트를 더 쉽게 매칭할 수 있다고 합니다. 거의 필수적으로 사용된다 하네요. 근데 지금은 피곤하니 실습은 내일~ 해볼게요 

0. [ TypeScript ] interface와 type 

interface는 객체 타입을 정의할 때 사용하는 게 좋고 type은 원시값이나 튜플, 유니언 타입을 선언할 때 사용하는 것이 좋습니다.  type은 computed value 사용할 수 있는 데 이 기능이 유용해 보입니다.  

type Subjects = 'lee' | 'eun' | 'hi';

type Grades = {
  [key in Subjects]: string;
}

 

1. module.scss 설정

module은  객체형태로 import 해야 한답니다.  css 파일로 도 분리할 수 있는데 왜 module로 나누지?  styles.header처럼 객체 키로 className을 바인딩하는 게 불편한데? 싶어서 찾아봤더니 module.css 는 로컬 범위로 제한되어 전역 css를 해치지 않는다는 점이 있네요. 이는 클래스 이름이 자동으로 해시값으로 변환되기 때문에 충돌을 방지하고요 (오옹) css 로도 scss 문법이 잘 동작하니 module.css 로도 모듈화 하면 좋을 것 같아요. 

3.  restfullAPI  

Swagger는 Open Api Specification(OAS)를 위한 프레임워크로 대규모 API의 스펙을 효율적으로 설계 문서화할 수 있다고 합니다. 

API의 응답 타입을 정의할 때  보면서 하면 좋아 보여요. 근데 그 수많은 응답의 타입을 작성해야 한다니 너무 불편하다고 생각했습니다. 아마 이미 멋진 개발자분들이 해결한 방법이 있겠죠? 나중에 여쭤봐야겠습니다. 

https://www.weatherapi.com/  

https://swagger.io/

 

2. 앞으로 뭘 더 하면 좋을까? (Longed for)

weatherAPI의 응답을 Swagger를 통해 확인하고 타입 정의하는 복습을 하려고 했는데 weather api 웹사이트를 다른 사이트로 착각해서 어제 상당 시간 헤맸습니다. 결국 오늘 동료분께 여쭤봐서 해결했네요. 하하  '이거 물어보면 너무 쪽팔리는 데 선생님한테 물어봤다가 내 실력 다 까발려지겠지' 이 생각하면서 계속 혼자 시간 쏟았는데 시간 낭비가 너무 심했던 거 같아요. 사실 별것도 아니고 이미 선생님은 내가 똥이란 걸 알 텐데  이상한 자존심 부리다가 포기해서  실력 안 느는 것보다야 빨리 물어보는 게 상책이라는 생각이 들었어요.  ' 너 수업 잘 안 들었지' 혹은 '와 이 친구 심각한데'라는 생각을 할까 질문하기를 망설이기보다 (근데 그거 맞잖슴;;) 하다 하루 넘길 것 같으면 똥 같은 질문이어도 자존심 버리고 해라. 다짐했습니다. 하지만 막상 그상황 닥치면 굉장히 주저하겠지? 싶어요 그래도 다음에는 오늘 다짐을 기억하길 바랍니다.  또 Swagger와  KakaoMap은 나중에도 활용가 높아서 제대로 이것저것 만져봐야겠어요. SearchBar.displayName = 'SearchBar';   없이 Searchbar 컴포넌트 짜보기도요.