본문 바로가기

전체 아티클133

기존 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.
JSX와 Babel JSX와 Babel JSX : 자바스크립트도 아니고, HTML도 아닌 그 중간인 새로운 표현식 Babel : JSX를 이해하기 위해서, 자바스크립트로 변환하기 위해서는 Babel이라는 자바스크립트 컴파일러가 필요하다. 반복적인 것들은 Function 형태의 컴포넌트로 찍어낸다. 바닐라 JS의 경우, 변경으로 인해 Elements를 다시 그리는 반면 리액트는 리액트의 비교 알고리즘을 통해 Elements에서 변경된 요소만을 그려준다. (Reconciliation) 리액트의 Virtual Dom은 다른 elements의 속성이 들어왔을 때 이를 비교할 때 활용된다. 2022. 12. 3.
Input 타입이 file인 디자인은 어떻게 커스텀할까? 사이드 프로젝트를 진행하면서 input type이 file인 디자인을 변경할 일이 생겼다. input type을 file로 지정을 하면, 기본 default로 설정되어져 있는 파일 업로드 버튼과 업로드가 되었을 때 파일 명을 보여주는 텍스트가 생성이 되는데 기존 제공되어지는 UI를 커스텀해서 디자인을 하기에는 번거로운 점이 많다. input type='file'을 디스플레이 상에서 숨겨놓고, 내가 디자인하고 만들어놓은 요소를 눌렀을 때 그 요소에 연결된 input을 실행시키면 자연스럽게 UI상으로 보여지지 않을까? → 바로 여기서 사용하는 것이 태그를 도와주는 태그를 활용한 방법이다. 먼저, 다음과 같이 구성을 해보자, 태그의 기본 기능들과 `업로드 버튼` 이라는 이름의 이 나올 것이다. 그리고 의 id.. 2022. 11. 12.
[프로그래머스] 옹알이(1) 오늘은 여러 기업의 코딩테스트를 준비하면서, 연습할겸 코딩테스트 문제를 풀어보았다. 가장 눈에 들어온 것이 문제 제목이 귀여운 옹알이라는 녀석이었는데, 문제도 참 귀엽다. 말그래도 아이가 말할 수 있는 단어를 하나하나 분리하여 아이가 말을 할 수 있는지에 대한 판단 여부를 출력하는 문제이다. 처음에는 해당 babbling 각 배열 요소에 아이가 말할 수 있는 단어가 포함이 되어있는지를 확인을 하였다. 정상적으로 결과 값이 출력되는 것을 확인할 수 있었으나, 추가적으로 `wyeoo`와 같이 사이에 `ye`를 포함하게되고 이는 또 `woo`로 줄여져 카운팅되는 문제점을 확인할 수 있었다. 이를 해결하기 위해 기존 반복문 안에 해당 단어의 인덱스를 찾고, 그 인덱스가 0으로 시작하는 것이 아니면 카운팅 되지 .. 2022. 11. 8.

티스토리툴바