분류 전체보기
이펙티브 타입스크립트 스터디 - 4주차 발표 정리
이펙티브 타입스크립트 스터디 - 4주차 발표 정리 주제: 4장 (타입 설계, 아이템 28~32) 아이템 28. 유효한 상태만 표현하는 타입을 지향하기 효과적으로 타입을 설계하려면, 유효한 상태만 표현할 수 있는 타입을 만들어내는 것이 가장 중요하다. interface State { pageText: string isLoading: boolean error?: string}function renderPage(state: State) { if (state.error) { return `Error! Unable to load ${currentPage}: ${state.error}` } else if (state.isLoading) { return `Loading ${currentPag..
이펙티브 타입스크립트 스터디 - 3주차 발표 정리
이펙티브 타입스크립트 스터디 - 3주차 발표 정리 주제: 3장 (타입 추론, 아이템 24~27) 아이템 24. 일관성 있는 별칭 사용하기 const target = { name: "target", location: [1, 1] };const loc = target.location;loc[0] = 2;console.log(target.location); // [2, 1] - 별칭의 값을 변경하면 원본 값의 속성도 변경 된다. 이 별칭을 남발하면 제어의 흐름을 추적하기가 힘들어진다. interface Coordinate { x: number; y: number;}interface BoundingBox { x: [number, number]; y: [number, number];}inter..
이펙티브 타입스크립트 스터디 - 1주차 발표 정리
이펙티브 타입스크립트 스터디 - 1주차 발표 정리 주제 : 1장 (타입스크립트 알아보기) 1. 타입스크립트 알아보기 아이템 1. 타입스크립트와 자바스크립트의 관계 이해하기 "타입스크립트는 타입이 정의된 자바스크립트의 상위집합이다" 라는 말을 들어봤을 것이다. 이 말을 좀 더 자세히 풀어보면 자바스크립트는 타입스크립트라는 명제는 맞지만, 타입스크립트는 자바스크립트라는 명제는 틀리다. 타입스크립트는 타입을 명시하는 추가적인 문법을 가지기 때문이다. const word = 'hello'console.log(word.toUppercase()) // c가 대문자 C여야 한다. js 내의 파일에 위 코드를 작성하면 코드 작성시에 에러를 뱉지 않는다 하지만, 파일 확장자를 ts로 바꾸게 되면 이..
모던 리액트 deep dive 스터디 - 8주차 발표 정리
모던 리액트 deep dive 스터디 - 8주차 발표 정리 주제: 15장. 마치며 리액트 프로젝트를 시작할 때 고려해야 할 사항 1. 유지보수 중인 서비스라면 리액트 버전을 최소 16.8.6에서 최대 17.0.2로 올려두자. 리액트 17 버전은 새로운 기능 출시 및 호환성이 깨지는 변경 사항을 최소한으로 맞춘 업데이트라 가능하면 업데이트 해두는 것이 좋다. 그렇다고, 클래스형으로 작성한 컴포넌트를 함수형으로까지 바꿀 필요는 없음. 클래스형 컴포넌트는 사라질 계획이 없기 때문에 둘 다 능숙하게 다룰줄 알아야한다. 2. 인터넷 익스플로러 11지원을 목표로 했다면 각별히 더 주의를 기하기. 인터넷 익스플로러에 대해 지원을 공식적으로 하지 않기때문에 버전 업데이트시 주의하기 3. 서버 사이드 ..
모던 리액트 deep dive 스터디 - 7주차 발표 정리
모던 리액트 deep dive 스터디 - 7주차 발표 정리 주제: 13장. 웹페이지의 성능을 측정하는 다양한 방법 📌 create-react-app crate-react-app을 통해 프로젝트를 생성하면, reportWebVitals라는 함수를 볼 수 있을 것이다. - 누적 레이아웃 이동 (CLS) - 최초 입력 지연 (FID) - 최초 콘텐츠풀 페인트(FCP) - 최대 콘텐츠 페인팅 (LCP) - 첫 바이트까지의 시간 (TTFB) 이 함수는 위의 것들을 측정하는 용도로 사용된다. 이러한 지표는 web-vitals 라이브러리를 통해 웹페이지 성능을 측정하는데, 이는 PerformanceObserver라는 API를 사용하기 때문이다. ❓PerformanceObserver 브라우저에서 웹페이지의 성능을 측정..
KAKAO TECH MEET 5회 참석 후기
4월 11일에 kakao tech meet에 다녀왔습니다. 이번 주제는 프론트엔드 관련 주제들이라 꼭 가고 싶었는데, 운 좋게 뽑혀서 갈 수 있었네요. 두근거리는 마음으로 입장했던 카카오 아지트 이때는 몰랐는데, 이 건물 말고도 판교역 주변으로 다 카카오 건물이더라고요.... (지린다) 그리고 진행된 kakao tech meet 발표는 총 3개의 세션으로 다음과 같은 순서로 진행되었어요. 1. 스벨트 이미지 뷰어 라이브러리(phocus) 2. 웹 텍스트 에디터 3. 웹뷰 디버깅 환경 만들기 카카오 프론트엔드 개발자 분들이 발표를 해주셨고, 그들의 개발 방식과 개발을 어떤식으로 하는지 새로운 기술 개념들을 배울 수 있었습니다. 쉬는 시간에 찍은 사진 편해보이는 의자들이 놓여져있는 카카오 사내의 쉼터 kak..
4월 COMMIT - 당근 해외 진출 고군분투기
구름의 4월 COMMIT에 다녀왔다. 이번 내용은 당근이 어떻게 성공적으로 해외에 진출 할 수 있었는지에 대한 내용이다. 발표 내용은 따로 직접적으로 유출하면 안되는걸로 알고 있어서 자세히 적지는 않겠다. https://open.substack.com/pub/lauriehwang/p/work-1n?utm_campaign=post&utm_medium=web 1. 당근마켓 영국 사업 - 출장 가기 전까지 서울에서 준비 코로나 시대에 해외 진출한 당근마켓, 서울에서 어떤 일들을 했을까? lauriehwang.substack.com 위는 발표자분께서 해외 진출에 대한 내용을 자세하게 적은 글이다. 궁금하다면, 위 글을 참고하면 좋을 것 같다. 💁♂️ 소감 3월에도 COMMIT을 다녀왔는데, 따로 소감 같은걸 ..
React, Next 배포와 배포 자동화 A부터 Z [1주차] [GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)]
React, Next 배포와 배포 자동화 A부터 Z [1주차] [GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)] 실습 참고 CloudFront, S3 쉽게 배포하기 GitHub Action에서 React 지속적 전달 구현하기 (CF, S3) 이번 1주차에 진행했던 내용은 GitHub Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화 (React CSR)에 대한 내용이였습니다. 이번 주차에서 중점으로 배웠던 항목은 다음과 같습니다. GitHub Action의 특성 CI/CD 개념 aws cli, terraform GH CLI 이번 주차의 과정을 진행하면서 얻고자하는 역량은 무엇일까요? 구매한 도메인을 AWS를 통해 배포를 하는 것 뿐..