프로그래밍언어

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

모던 리액트 deep dive 스터디 - 14장 발표 정리   주제: 14장 웹사이트 보안을 위한 리액트와 웹페이지 보안 이슈(874p~902p)크로스 사이트 스크립팅(XSS)웹사이트 개발자가 아닌 제3자가 웹사이트에 악성 스크립트를 삽입해 실행할 수 있는 취약점  xss 이슈가 발생할 수 있는 방법 dangerouslySetInnerHTML prop - 특정 브라우저 DOM의 innerHTML을 특정한 내용으로 교체할 수 있는 방법- 인수로 받는 문자열에는 제한이 없다. (검증 필요)  useRef를 활용한 직접 삽입 - useRef를 활용하면 직접 DOM에 접근 가능하져 보안에 취약해진다.   xss 문제를 피하는 방법 - 제3자가 삽입할 수 있는 HTML을 안전한 HTML 코드로 한 번 치환하는 것..

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

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

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

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

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

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