Coding/React.js
-
[React][Typescript] 이벤트 타입을 외우지 않아도 되는 이유Coding/React.js 2020. 10. 14. 23:38
안녕하세요😄 오늘은 타입스크립트에서 이벤트 핸들링을 할 때 종종 발생하는 문제에 대해 포스팅하겠습니다. 타입스크립트는 어떠한 것이든 타입을 명시해 주어야 합니다. 타입을 모른다면 any라도 해줘야겠죠? 하지만 타입을 모른다고 무작정 any로 채워넣는 건 좋지 않습니다. 그럴 바에 그냥 자바스크립트로 리액트를 사용하는게 훨씬 편하겠죠. Vscode와 같은 IDE가 있다면 다른 인텔리전시 플러그인 없이도 타입을 알아낼 수가 있습니다. 다음 코드를 한 번 보겠습니다. const TelArea: React.FC = () => { const [value, setValue] = useState(''); const onChange = (e) => { const { value } = e.target; } return ..
-
TypeScript로 React를 사용하면 왜 import 구문이 다를까요?Coding/React.js 2020. 10. 12. 22:45
최근에 리액트를 TypeScript에서 많이 사용하게 되면서, 이 쪽으로 유저들의 개발이 많이 이루어지고 있습니다. 실제로 TypeScript 커뮤니티 중 하나인 definitelytyped.org 를 방문해 보면, 유명한 라이브러리들은 이미 유저들이 .d.ts 파일을 만들어 놓은 경우가 많습니다. (실제로 타입스크립트를 사용해 프로젝트를 꾸리실 때 이 사이트를 애용하는 것을 추천합니다. npm 모듈 중 아주 유명한 모듈을 제외하면 @types 형태를 제공하지 않고 있고, 타입스크립트를 위해 만들어야하는 .d.ts 파일들을 이 사이트에서 많이 받을 수 있거든요!) 하지만 아주 유명하고 대중적인 라이브러리 중 하나인 react, react-dom은 이미 @types/의 형태로 npm/yarn에서 다운로드 ..
-
[React][TypeScript] 리액트에서 Swiper 모듈을 사용해보자Coding/React.js 2020. 9. 27. 01:52
안녕하세요. 굉장히 오랜만인 리액트 포스팅입니다. 그동안 이것저것 다양한 기술들을 사용해보느라, 본업(??)에 충실하지 못했네요.ㅎㅎ 오늘은 인기 많은 Carousel/Slider 모듈 중 하나인 Swiper에 대하여 소개합니다. 잠깐!😳 이번 포스팅은 다음을 전제로 합니다. 1. npm이 설치되어 있다. 2. 타입스크립트를 사용하는 리액트 프로젝트에서 사용한다. 3. 여러분들의 귀찮음을 덜기위해 scss를 사용한다. 홈페이지에서는 가장 모던한 모바일 터치 슬라이더라고 되어 있으나, 넓은 해상도에서도 충분히 사용할 수 있습니다. Swiper는 cdn 형태로 소스 코드를 제공하며, 리액트/타입스크립트 환경에서는 이를 html 파일로 추가하여 전역 객체에 추가하는 방법으로도 사용은 가능하지만, 그 방법은 리..
-
[React] - 18) 프로젝트 빌드하기(+코드 스플리팅)Coding/React.js 2020. 3. 22. 14:32
안녕하세요, 오늘은 완성된 프로젝트를 빌드하는 것에 대해 포스팅하겠습니다. 사실 프로젝트를 빌드하는 것은 간단합니다, 예제 프로젝트를 하나 만들어서 다음과 같이 진행해 봅시다. $ yarn create react-app build-test $ cd build-test $ yarn build 그러면 이제 프로젝트 루트 폴더에 다음과 같은 파일이 생성될 것입니다. 프로젝트가 Index.html으로 빌드되었습니다. 이 yarn build 명령어 하나로, 프로젝트에서 사용되는 자바스크립트 파일 안에서 불필요한 주석, 경고 메시지 , To-do, 공백 등이 삭제되어 파일 크기를 최소화하고, 브라우저에서 JSX 문법이나 다른 자바스크립트 문법이 원활히 시행되도록, 브라우저에 맞게 변하기도 합니다. 그리고, 기본적으..
-
[React] - 17) React 프로젝트에서 api 호출하기Coding/React.js 2020. 3. 14. 00:09
안녕하세요 실로 오랜만의 포스팅입니다.. 그동안 리액트 공부를 꾸준히 해왔으나 프로젝트에 집중하다보니 포스팅이 많이많이 늦어졌습니다. 앞으로는 다시 꾸준하게 포스팅하도록 하겠습니다 ㅠ ㅠ 이번 포스팅에서는 리액트 내부에서 Api를 호출하는 코드를 작성해보도록 하겠습니다. 자바스크립트의 Promise 문법과 매우 연관이 있으며, 사실 api 호출은 백엔드를 사용하여 서버에서 호출한 뒤 다듬어 프론트 단으로 넘겨주 는 방식이 일반적이지만, 지금은 아주 단순한 Github Api를 호출할 것이기 때문에 리액트 내부에서만 작성하도록 하겠습니다. 우선 axios라는 라이브러리를 설치해야 합니다. 이에 대해 잠깐 알아봅시다. axios는 http 통신을 하는데에 있어 가장 인기많고 사용하기 쉬운 편인 자바스크립트 ..
-
[React] - 16) package.json을 이용하여 패키지 정보 옮기기Coding/React.js 2020. 1. 19. 21:26
안녕하세요, 리액트 포스팅이 많이 늦었습니다 ㅠ ㅠ 그동안 토익공부니 스터디니 이것저것 일이 많이 겹치는 동안에 리액트에 시간을 쓸 겨를이 없었습니다..(네다핑) 이제 리액트에서 매우매우 기초라고 될 부분은 라우팅 이전까지 모두 끝냈으니, props와 state 관리를 통하여 아주 간단한 웹 페이지 하나쯤 만드는 것은 가능할 것입니다. 물론 거기에 reactstrap 같은 라이브러리를 사용해준다면 금상첨화겠죠 ! 그런 뜻에서 이번 포스팅에서는 프로젝트의 패키지 정보를 다른 패키지로 옮기는 방법에 대해 알아보겠습니다 ! create-react-app으로 리액트를 설치하면 자동으로 경로에 package.json이 생성됩니다. 이 파일에 프로젝트의 패키지 정보가 저장됩니다. 이건 이전 포스팅에 사용했던 rea..
-
[React] - 15) 리액트에서 배열을 처리하는 방법Coding/React.js 2019. 12. 26. 13:51
안녕하세요 이번 포스팅에서는 리액트에서 배열을 처리하는 가장 기본적인 방법에 대해 알아보겠습니다. 리액트의 불변성을 유지해주어야 한다, 라는 특성 상 리액트에서 배열을 처리하는 방법은 다소 다릅니다. 함수형 컴포넌트로 만들었다고 할 때, 각 배열을 처리하는 법을 알아보았습니다. 새로운 데이터를 추가해 줄 때 기존 배열을 복사한 후 추가할 내용을 덧붙인다. setArrayData({ ...Arraydata, array: data.array.concat(info) }); ...ArrayData로 배열을 얕은 복사하여(자바스크립트의 전개 연산자 문법), Concat 메소드를 이용하여 배열에 데이터를 추가해 줍니다. 이 때에, 배열을 직접적으로 건드리는 것이 아닌(리액트의 불변성에 어긋) 복사하여 간접적으로 건..
-
[React] - 14) reactstrap으로 프로젝트를 꾸며보기Coding/React.js 2019. 12. 24. 15:12
웹 페이지를 꾸밀 때 대표적으로 부트스트랩을 많이 사용합니다. 리액트에서 부트스트랩을 적용시킬 때는 부트스트랩의 리액트 버전인 reactstrap을 사용합니다. 저 같은 경우 yarn의 create react-app으로 프로젝트를 생성하였다면, 다음과 같은 명령어로 reactstrap을 추가해 줍시다. $ yarn add bootstrap reactstrap reactstrap은 기본적으로 부트스트랩의 css파일을 가져다 사용하기 때문에 부트스트랩도 같이 설치해줍시다. 이제 src/index.js에 다음과 같은 코드를 추가해 주세요. import 'bootstrap/dist/css/bootstrap.css' 이제 App.js에서 reactstrap을 적용해 봅시다. reactstrap에서 사용할 수 있는..
