안녕하세요, 프론트엔드 개발자 김현우라고 합니다. 제 블로그에서는 개발과 관련된 다양한 이야기들을 풀고있어요. 아무리 어려운 문제라도, 쉽게 풀어 설명할 수 있는 방법은 무조건 존재한다고 생각을 해요. 제가 연재해드리는 내용이 선한 영향력을 가져다 주었으면 좋겠어요. 도리 깃허브로 놀러오세요 전체 아티클77 기존 React 프로젝트에 TypeScript 적용하기 서론기존 리액트 프로젝트에서 토이프로젝트를 리팩토링하면서 타입스크립트를 적용해야하는 일이 생겼다.이번 게시물에서는 타입프로젝트에 관련된 내용과, 타입스크립트를 적용하는 방법을 알아보려고 한다.(타입스크립트 공부를 위해 포스팅을 한 게시물이니, 코드가 필요하신 사용자들은 적용하기 파트부터 봐주시기 바랍니다)타입스크립트란?마이크로소프트가 발표한 타입스크립트(TypeScript)는 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어이다.프로젝트에서 프론트엔드 분야에서 널리 흔하게 사용되고 있으며, 필연적으로 사용되는 기술이 되어버렸다. 컴파일 언어이면서 동시에 정적 타입의 언어이다.자바스크립트의 경우 인터프리터 언어로 런타임에서 오류를 발견할 수 있다. 반대로 타입스크립트는 정적 타입의 컴파일 언.. 2022. 12. 29. [React] UI 라이브러리 Onsen UI UI 라이브러리 스타일링 된 컴포넌트 제공 기본적인 기능 제공(ex. Action Sheet) JS / VUE / React / Angular 모두 서포트 가능하다 모바일 대응 안드로이드 / 아이폰 대응 다양한 컴포넌트 모바일 케이스 대응 아이콘 Font-awesome / Ionicons 문서 최신화 잘 안되는 듯 (React에 불친절) Ant Design React 리액트를 베이스로 하는 디자인, 그렇기에 공식문서를 복사해서 붙여넣기 하면 된다. Day.js Ant Design도 Moment.js를 제거하는 것을 지향하며, Day.js를 사용할 때 해당 라이브러리를 추천한다. Design 철학 단순한 컴포넌트 제공 + @ Typography 다양한 사이즈의 Text Layout 화면 구.. 2022. 12. 26. 템플릿 리터럴 (Template literals) 이란? 문득 React의 Styled-Components와 Emotion 등 스타일 라이브러리를 공부하다가, 템플릿 리터럴이라는 용어에 대한 의문이 들었다. 뭔가 문법에서 자연스레 쓰고 있었던 것 같은데.. 이게 대체 무엇일까? MDN Web Docs에 따르면 아래 내용에 명시가 되어있다. 더보기 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다. 이전 버전의 ES2015사양 명세에서는 "template strings" (템플릿 문자열) 라고 불려 왔습니다. `string text` `string text line 1 string text line 2` `string text ${expression} string text` tag `st.. 2022. 12. 19. useEffect는 왜 사용할까? Hook의 개요 원래는 State를 클래스 컴포넌트로만 관리할 수 있었다. UseEffect는 왜 사용이 되는가? Class Componant 같은 경우, 관련 없는 로직들은 모아놓고, 관련이 있는 로직들은 여러 개의 메서드로 나누어 놓은 경우가 있었다. (componantDigMount, componentDidUpdate, componentWillUnMount와 같이,,) 이에 대한 해결책으로 UseEffect 표현으로 하나로 합치고, 버그를 방지할 수 있었다. 그리고, 클래스 컴포넌트에서는 이전 값과 현재 값을 매번 받아가며 비교를 하였는데 useEffect 같은 경우 dependency array를 통해 prop의 변화가 일어날 때만 실행을 할 수 있게 할 수 있다. 데이터를 fetch 하거나, 구.. 2022. 12. 5. 공식문서는 왜 보는걸까? 라이브러리는 만든 사람이 있다. 그들이 만든 목적과 도구의 사용법을 정리해둔 곳이다. 책에서도 거의 공식 문서의 내용을 담는다. 친절할 수도 있고, 친절하지 않을 수도 있다. 한국어 번역이 있을 수도 있고, 없을 수도 있다. Tutorial이 있을 수도 있고, 없을 수도 있다. 리액트는 친절하고, 한국어 번역도 거의 있고, Tutorial도 있다. 보는 이유와 방법 웹 기반의 표준기술은 MDN, 리액트 표준 공식 문서 React Document 공식 문서를 보는 방법은 목적에 따라 나뉜다. 바로 써보기 vs 이해해보기 써보기만 하고 이해하지 않을 수 있다. 써보지 않고 이해만 해볼 수 있다. 써보면서 이해할 수도 있다. 이해 먼저하고 써볼 수도 있다. 2022. 12. 3. React에서의 DOM TREE DOM DOM은 논리트리를 의미한다. 컴포넌트 앨리먼트의 집합 앨리먼트 요소 사이드 이펙트 = 부작용 리액트에서는 부수효과라고 볼 수 있다. (그렇게 해석하자) useState 상태 값을 관리해주는 훅 useEffect 컴포넌트 사이드 이펙트 다루기, dependency array에 따라 언제 언제 호출되는지를 설정 가능 Custom Hooks 만약 훅이 반복되는 상황이면 이를 Custom Hook으로 커스텀할 수 있다. hook flow 이해하기 hook들의 호출 타이밍을 각 hook에 콘솔 디버깅 창을 통해 순서를 확인할 수 있다. 로컬스토리지에서 값을 꺼내거나, 값을 가져오는데 시간이 걸리는 경우 useState나 useEffect에서 return을 사용하여 lazy initialize를 할 수 있.. 2022. 12. 3. 이전 1 ··· 6 7 8 9 10 11 12 13 다음
