공부 기록일지📚

//타입 좁히기(타입 가드) { function numOnStr(a: number | string) { // if (typeof a === "string") { // a.split(","); // } else { // a.toFixed(1); // } a.toFixed(1); // number면 쓸 수 있지만 string일수도 있기 때문에 Error } numOnStr("123"); numOnStr(1); } -> 매개변수 타입이 number라면 toFixed 메서드를 사용할 수 있지만 string일수도 있기 때문에 내부에서 바로 쓰게되면 빨간 줄로 에러가 뜬다. TS에러 메세지가 여러 줄이 뜰 때에는 결국에는 마지막 줄을 보면 된다. 마지막 줄에 원인이나 해결방법이 나와있다. 위에 a.toFixed를 ..

CHAPTER 1 this에 대한 오해들 function identify() { return this.name.toUpperCase(); } function speak() { let greeting = 'hello, I am' + identify.call(this); console.log(greeting); } let me = { name: 'alex', }; let you = { name: 'rachel', }; identify.call(me); identify.call(you); //me & you 의 이름 대문자변환 speak.call(me); //hello, I amALEX speak.call(you); //hello, I amRACHEL -> indentify()와 speak() 두 함수는 객체..

실제 업무를 겪으면서 FE개발자가 해결해야할 보안적 이슈(권한이 없는 사용자, 웹 스토리지), 비동기 처리, JWT 토큰 refreshtoken의 특징, API 요청이 여러 개 갔을 때(비동기 처리의 연장선) 그리고 무한 스크롤 페이징 처리 시 DOM의 최적화 등 해결방법에 대해 FE개발자님과 얘기를 나눴습니다. 외에도 최근에 관심있는 툴이나 제가 개인적으로 궁금했던 점을 여쭤볼 수 있었는데요. 개인적으로 이런 기회가 쉽게 있지않아 저에게는 값진 시간이었습니다. 아 또한, Next에 대해서도 여러가지 견해를 들을 수 있었습니다. 예를 들어 Next가 제공하는 이미지 최적화가 정말 효율적인가에 대해서 얘기하였는데 제공하는 기능을 그냥 갖다쓰는 것이 아니라 어떤 방법이 베스트인가부터 비교하면서 잘 생각하고 ..

TCP/IP 없는 인터넷 서비스는 상상할 수 없다. 우리가 개발하고 사용하는 모든 인터넷 서비스는 TCP/IP라는 토대에 기반하고 있다. 어떻게 네트워크를 통해 데이터가 오가는지를 이해하면, 튜닝 등을 통한 성능 개선이나 트러블 슈팅, 신기술 도입 등에 많은 도움이 된다. TCP/IP의 중요한 성질 데이터의 순서가 바뀌지 않으면서 데이터가 유실되지 않도록 가급적 빠르게 데이터를 보내려면 네트워크 프로토콜을 어떻게 설계해야 할까? TCP/IP는 이런 고민 아래 설계된 것이다. TCP와 IP 엄밀히 말해 TCP와 IP는 서로 다른 레이어의 것이라 분리해서 이해하는 것이 옳지만, 이해의 편의상 여기서는 이 장에서는 둘이 분리하지 않고 설명한다. Connection oriented 두 개의 엔드포인트(로컬, 리..

query param == query string (e.g. user?id=23) path param == path parameter (e.g. user/23 ) *용어를 섞어 쓰지만 위와 같은 의미로 해석하시면 됩니다. day에 해당하는 day word list를 삭제하는 것은 다른 툴을 추가하지 않고 순수 react로는 작업이 번잡해진다. word 컴포넌트에서 props를 받아 렌더링하고 있으므로 부모 컴포넌트인 Day에서 word의 상태가 변화됨을 감지하고 변화된 내용을 감지하려면 word의 deleteWord 함수를 역으로 올려줘야 할 거 같음 react-query를 통해 서버 데이터의 변화가 일어났을 때, 클라이언트의 state값을 변경시켜주는 게 베스트 방법일 듯 특히, wordList는 da..

우선 기존에 create-react-app 으로 만든 폴더를 TS를 적용하여 마이그레이션한다고 했을 때, 노드 패키지 매니저(npm or yarn)으로 typescript를 설치해줍니다. typescript만 추가하는게 아니라 아래와 같이 여러 개의 패키지를 추가로 설치해줍니다. npm i typescript @types/node @types/react @types/react-dom @types/jest @types/react-router-dom js확장자를 ts로 변경하고 jsx 를 tsx로 변경해줍니다. 👾컴포넌트를 .ts 확장자로 변환하면 jsx를 제대로 인식하지 못하고 에러를 토해내는 에러를 만났습니다. jsx를 반환하고 있는 컴포넌트는 tsx로 변환해주면 되고 jsx를 반환하지 않는 js파일은 ..

최근에 설치된 extension들을 확인하려면 @installed @sort:updateDate 검색어로 확인이 가능합니다. 저는 그냥 깔대기처럼 보이는 아이콘(Filter extensions -> sorted by -> updated date)을 눌러서도 보는 것이 가능합니다. 2022 12 05 기준 추천하는 기능 extension(snippet, intellisense 등..) 대부분이 필수적이라 생각하지만 개인적으로 추천하는 extension은 이모지를 달아두었습니다. 🥳 Auto Import - ES6, TS, JSX, TSX WakaTime // 하루에 내가 어떤 환경에서 어떤 언어로 코드를 짜는 지 확인할 수 있도록 연동하는 기능 Tailwind CSS Highlight // 테일윈드 css..

저번에 읽었던 [You Don't know JS 타입과 문법, 스코프와 클로저] 가 흥미로웠어서 같은 시리즈의 this와 객체 프로토타입, 비동기와 성능을 빌려왔습니다. 외에 JavaScript 자바스크립트 성능 최적화(올빼미가 그려진..) 책을 빌려와 봤는데요. 저번에 읽었던 부분은 기초적인 부분이고 (분량도 그리 많지 않음)제가 이미 여럿 접했던 내용이라 2-3일만에 독파가 가능했습니다. 이번에는 잘 모르겠네요 ㅎㅎ 시간을 크게 할애하고 싶지는 않아서 우선 빠르게 훑어보려고 합니다. 내용이 좋으면 소장해놓고 필요할 때 찾아보는 용도가 됐으면 합니다. 여담으로 면접을 보고 온 회사에서 디자인패턴, 알고리즘, 네트워크 관련 질문을 주셔서 이 부분에 대해서도 공부해야 할 것 같습니다. 저번에 유투브에서 T..