React

[HTML/CSS] 기초 문법

웹 사이트 제작시 고려사항 웹 표준 : 웹에서 요구하는 공식 표준이나 기술 규격을 만족하는지 여부 웹 접근성 : 장애 여부와 상관 없이 모두가 웹 사이트를 이용할 수 있는지 여부 크로스 브라우징 : 모든 브라우저와 기기에서 웹사이트가 제대로 작동하는지 여부 HTML html 문서 구조 - html5로 문서 선언 기본 태그 image 태그 alt 속성은 웹 접근성을 고려하는 옵션으로, 시각장애인들이 사용하는 스크린 리더 프로그램에서 읽힌다. h 태그 태그는 가장 중요한 정보만 담으며, 하나의 html 문서에서 한 번만 사용하자. p 태그 Paragraph의 약자로 본문을 담는다. ol / ul 태그 ol은 Ordered list, ul은 Unordered list의 약자로 나열할 때 사용하며 태그를 자식으..

웹사이트 성능 최적화하기 with LightHouse

웹 개발 에서는 특히 성능이 중요하다. 어떤 부분이 개발한 웹에서 부족한지, 보완할 점은 무엇인지를 알기 위해 성능 측정을 해보자. LightHouse 구글에서 개발한 웹 성능 측정기이다. 크롬의 개발자도구에 기본으로 내장되어 있어 F12 - LightHouse로 작동시킬 수 있다. 성능 측정 한창 프로젝트로 진행 중인 웹사이트를 측정해보았다. 성능과 접근성이 상당히 낮게 나온다. 아래쪽에서 원인과 해결 방법을 상세하게 알려준다. 따라서 한번 수정해보자. 성능 향상 Reduce unused JavaScript React는 기본적으로 SPA(Single Page Application)이다. 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 변경하며 표현하는 것이다. 이러한 동작을 위해 하나의..

[React] React.Lazy() (Code Splitting)

Code Splitting React는 기본적으로 SPA(Single Page Application)이다. SPA (Single Page Application) 웹 사이트의 전체 페이지를 하나의 JS 파일에 담아 액션에 따라 동적으로 화면을 변경하며 표현하는 방식이다. 과거에는 한 페이지마다 크기가 작았기에 페이지 변경 시 서버에서 하나의 페이지가 담긴 html 파일을 통째로 전달해주곤 했다. 하지만, 서버의 부하, 화면 blinking 등의 이슈로 Client Side Rendering인 SPA가 등장하게 되었다. SEO (검색 엔진 최적화)의 효율이 좋지 않아 최근에는 Server Side Rendering을 고려하는 경우가 많다. SPA의 가장 큰 문제점은 모든 페이지가 하나의 JS 파일에 담겨져 ..

[TS] TypeScript Object 다루기

//JAVASCRIPT let obj = {}; obj["name"] = "pitter"; 자바스크립트와 타입스크립트에서 쉽게 체감할 수 있는 눈에 띄는 차이점은 객체이다. 자바스크립트에서는 위와 같이 간단하게 객체를 선언하지만, 타입스크립트에서는 {}가 정확히 객체만을 의미하는 것이 아니라 사실 Non-nullable Any 타입정도로 생각할 수 있다. 타입스크립트에는 여러가지 객체 타입 선언 방법이 있으니 알아보자. object 타입 var object: object; //{}와 []가 할당 가능한 타입이다. object = { prop: 0 }; object = []; //아래 형태의 변수는 할당 불가능하다 object = 42; // Error object = "string"; // Error o..

[TS] Styled-Components에 TypeScript 적용하기

Styled-Components와 TypeScript를 함께 사용할 때 아래와 같은 에러가 발생한다. Property 'isSelected' does not exist on type 'Pick & { ...; } & ThemeProps' Styled-Components가 전달받은 프로퍼티에 타입이 지정되어 있지 않아 발생하는 에러이다. 크게 두 가지 해결법이 있다. 방법1 const SStyledBookmark = styled.div` color: ${({ isSelected, theme } : { isSelected : any, theme : any}) => ... 단순하게 프로퍼티에 타입을 명시해주면 된다. 하지만 중복되는 프로퍼티가 많다면 방법2를 사용하는 것이 좋다. 방법2 interface P..