[20220529 S ]

오늘은 (5) 월 (29) 일 / 날씨: ()

한줄: 5월이 끝나가네..? 역시 공부하기 쉽지 않은 한달이었다🥵🤯

💻 1) WORK MEMO & REVIEW

✍️ MEMO

• 실수를 반복하지 않도록 노력 제대로 알고 넘어갔으면..@_@ 내 코드 다시보면 너무 후져🌝

• Array.from(object, mapFunction, thisValue)
  https://www.w3schools.com/jsref/jsref_from.asp

• Array entries
  https://www.w3schools.com/jsref/jsref_entries.asp

• String.fromChaeCode()
  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

• Swagger 협업 툴

  • how to define?

  • how to document?

  • how to keep code and docs in sync?

    ---

  • 원래 Domain Specific Language (to describe Restful API) 와 Swagger Tools(editor, codegen, UI) 2가지 기능

  • Swagger Specification 2.0 , OpenAPI Specification 3.x.x (로 분리되었지만 co-exist)
    => 통상적 Swagger = Tools , OpenAPI = API 규격사항 나타내는 Specification
    https://swagger.io/
    https://www.openapis.org/

    ---

  • Swagger Editor : Restful API 모델링을 할때

  • Swagger UI : API 문서화를 자동으로 할 때

  • Swagger Codegen : 코드와 문서의 sync를 keep 할 때 /SDK 제공 => API adoption을 쉽게

    ---

  • OpenAPI Document
    OpenAPI specification version
    Info (대략적 정보)
    Servers / Security
    paths (api 경로)
    tags / externalDocs
    components (스키마)

    => 데모 테스트

    ---

  • Open API 접근방법
    1) code first (api 빠르게 구현, but 큰 그림x )
    2) Design first (협업과 피드백에 효과적, 더 나은 api 생산 , but api 구현이 늦어질 수 있음)
    json 보다 yaml 형태로..
    api 정의로 미들웨어 만들기..

    https://www.youtube.com/watch?v=7MS1Z_1c5CU

• React query

  • useQuery
    https://velog.io/@devbit4/20220523-M
  • useMutation
    https://www.youtube.com/watch?v=NYCG1o38oEQ

💻 2) CODING & STUDY

Every Morning & Every Evening

✍️ MEMO

• state management -> recoil (쓸데없는 props~)
  https://recoiljs.org/
  • atom 만들기 => 저장소??
  • useRecoilValue => value
  • useSetRecoilState => value set

    export const isDarkAtom = atom({
    key:"isDark",
    default:true,
    })
    
    const isDark = useRecoilValue(isDarkAtom);
    
    const setDarkAtom = useSetRecoilState(isDarkAtom);
    
    const toggleDarkAtom = () => setDarkAtom(pre => !prev)
    
    <button onClick ={toggleDarkAtom}/>

  -react-hook-form 셋업 => 내일 이어서

     const [value, setValue ]  = useState("");
     const onChange = (event:React.FormEvent<HTMLInputElement>)=> {
     const {currentTarget: {value}} = event;
     setValue(value);
     }
     
     const onSubmit = (event: React.FormEvent<HTMLFormElement>)=>{
     event.preventDefault();
     console.log(value);
     }

🆎🎾 3) ENGLISH/ GERMAN / TENNIS

Monday/ Wednesday/ Thursday (Clarisse랑 날짜 조정하기)
Wednesday/ Saturday

• That's beyond my expectations
  .- stargaze
• almost weekend
• admire
• enjoy the rest of the day

📌 4) ETC (READING/ ECONOMY)

Free time

6) TODO & QUESTIONS

• 5월 리플렉션 및 재정비
• 6월 TIL FORM
• plan for next week => 노션 캘린더 ok
• 참고 코드 정리 키패드 리팩토링
• task 2 =>ok
• 스터디나 스프린트 알아보기...?
• 언더바

❤️ 5월 GOALS

• 재밌는 프론트엔드기능 만들어보기
• nodejs 공부하기
• 실무 질문 많이하기
• 테니스 꾸준히 나가기 (운동량 너무 부족해 테니스를 늘리든지 운동을 하나 더 하든지)
• 책읽을 휴식시간이 필요해