전체 글

모던 리액트 deep dive 스터디 - 12장 발표 정리

모던 리액트 deep dive 스터디 - 12장 발표 정리      주제: 12장. 모든 웹 개발자가 관심을 가져야 할 핵심 웹 지표 (775p ~ 812p) 핵심 웹 지표 - 최대 콘텐츠풀 페인트(LCP)- 최초 입력 지연(FID)- 누적 레이아웃 이동(CLS) - 최초 바이트까지의 시간(TTFB)- 최초 콘텐츠풀 시간(FCP)   1. 최대 콘텐츠풀 페인트(LCP) 페이지가 처음으로 로드를 시작한 시점부터 뷰포트 내부에서 가장 큰 이미지 또는 텍스트를 렌더링하는 데 걸리는 시간  큰 이미지와 텍스트 (가장 큰 요소로 고려됨) 내부의 poster 속성을 사용하는 url()을 통해 불러온 배경 이미지가 있는 요소텍스트와 같이 인라인 텍스트 요소를 포함하고 있는 블록 레벨 요소 (, ...) 크기가 크더라..

모던 리액트 deep dive 스터디 - 10장 발표 정리

모던 리액트 deep dive 스터디 - 10장 발표 정리     주제: 10장 리액트 17과 18의 변경 사항 살펴보기 (655p ~ 714p)  리액트 17 특징 : 16 버전과 비교하면 새롭게 추가된 기능은 없으며 호환성이 깨지는 변경 사항, 즉 기존에 사용하던 코드의 수정을 필요로 하는 변경 사항을 최소화하였다. 16 버전에서 17 버전으로의 업그레이드는 큰 부담 없이 할 수 있다.  리액트 17부터는 점진적인 업그레이드가 가능하다. *일부 트리와 컴포넌트에 대해서만 리액트 18을 선택하는 점전적인 버전 업이 가능이전버전까지는 이전 버전에 머무르던 새로운 버전으로 완전히 넘어가버리던 둘 중 정했어야함. 관리측면에서는 비효율이지만, 새로운 버전으로 한꺼번에 업그레이드하기 부담스러울 때는 유용하다  ..

모던 리액트 deep dive 스터디 - 4장 발표 정리

모던 리액트 deep dive 스터디 - 4강 발표 정리     주제: 4장 서버 사이드 렌더링 (252p ~ 335p)   싱글 페이지 애플리케이션(SPA) 렌더링과 라우팅에 필요한 대부분의 기능을 서버가 아닌 브라우저의 자바스크립트에 의존하는 방식 최초에 서버에서 최소한의 데이터를 불러온 이후부터는 이미 가지고 있는 자바스크립트 리소스와 브라우저 API를 기반으로 모든 작동이 이뤄진다. # LAMP Linux, Apache, MySQL, PHP/Python # JAM JavaScript, API, Markup  JAM 스택을 사용하여 프런트엔드는 자바스크립트와 마크업을 미리 빌드해 두고 정적으로 사용자에게 제공하여 서버 확정성 문제에서 자유로워질 수 있게 됨.  시대가 지나면서 인터넷 속도, 하드웨어..

[협업] 사내 Git Branch 전략 소개 및 git branch sync - shell script 작성

사내에서 사용중인 git branch 전략에 대해 설명해보고자 합니다. 저희 프로젝트는 서비스 운영 전에는 단일 서버로만 운영되었고, 약 5명의 프론트엔드 개발자들이 동시에 많은 개발 작업을 진행하다 보니, develop 브랜치 하나에 모든 커밋을 쌓아가며 개발을 진행했습니다. 그러나 실제 서비스가 운영되면서 서버가 두 개(운영, 개발)로 나뉘게 되었고, 프론트엔드 Git 브랜치 관리에 새로운 전략이 필요해졌습니다. 서비스 운영 당시에는 저를 포함한 두 명의 프론트엔드 개발자가 메인 개발을 담당했고, 어떻게 하면 가장 편리하고 효율적으로 서로 작업할 수 있을지 고민했습니다. 이후 몇 번의 시행착오를 거친 끝에, 현재도 유지 중인 회사의 Git 브랜치 전략을 마련할 수 있었습니다. 서비스 운영시점부터 실제..

이펙티브 타입스크립트 스터디 - 7주차 발표 정리

이펙티브 타입스크립트 스터디 - 7주차 발표 정리     아이템 56. 정보를 감추는 목적으로 private 사용하지 않기 const diary = new Diary()diary.secret// ~~~~~~ Property 'secret' is private and only// accessible within class 'Diary' 타입스크립트에는 public, protected, private 접근 제어자를 사용하여 접근을 제한할 수 있다. 하지만, 이러한 접근 제어자들은 타입스크립트 키워드이기 때문에 컴파일 이후에는 제거된다 자바스크립트에서는 접근 제어자가 없기때문이다. 자바스크립트 코드로 변환되면 일반적인 속성으로 취급되어 접근이 가능해진다.   onst diary = new Diar..

이펙티브 타입스크립트 스터디 - 6주차 발표 정리

이펙티브 타입스크립트 스터디 - 6주차 발표 정리     아이템 49. 콜백에서 this에 대한 타입 제공하기let, const는 렉시컬 스코프인 반면에, this는 다이나믹 스코프이다. 이는 '정의된' 방식이 아니라 '호출된' 방식에 따라 달라지는 것을 말한다.  const c = new C()const method = c.logSquaresmethod() 이 코드는 this를 찾지못해 런타임에 오류를 발생시킨다. method.call(c) 이럴때는 call을 사용해서 명시적으로 this를 바인딩 하여 문제를 해결할 수 있다.  this는 반드시 인스턴스에 바인딩 되어야하는 것이 아니며 어떤 것이든 바인딩 할 수 있다.  class ResetButton { constructor() { this...

이펙티브 타입스크립트 스터디 - 5주차 발표 정리

이펙티브 타입스크립트 스터디 - 5주차 발표 정리   주제: 5장 any 다루기 (아이템 42 ~ 44) 아이템 42. 모르는 타입의 값에는 any 대신 unknown을 사용하기 함수의 반환값과 관련된 형태function parseYAML(yaml: string): any { // ...}interface Book { name: string author: string}const book: Book = parseYAML(` name: Wuthering Heights author: Emily Brontë`) 만약, 함수의 반환 타입을 any로 설정했다면 사용하는 쪽에서 함수의 반환 타입을 따로 설정을 해줘야한다. const book = parseYAML(` name: Wuthering Height..

이펙티브 타입스크립트 스터디 - 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..