허도경, limewhale

이전에 스스로 공부하면서 만들었던 리액트 프로젝트를 타입 스크립트도 공부할 목적으로 타입 스크립트를 적용하였습니다. 타입 스크립트를 사용하기 전에는 단순히 값의 형태만 정의해주면 되는 건데.. 뭐가 이렇게 요즘 핫한 거지?라는 생각으로 접근을 했습니다만.. 실제로 타입스크립트를 적용하면서 처음에 제가 생각한 부분은 많이 단순한 생각이었다는 것을 처참히 느낄 수 있었습니다. 서론은 각설하고 React에서 useRef를 사용하였던 부분이 Error가 발생하여 이유를 찾아보았는데 처음 제가 useRef(null)로 선언한 값이 Object is possibly 'null'이라는 타입 스크립트 오류가 났습니다. 해결방법은 useRef에 type값을 any로 정의해주면 해결되었습니다. typescript를 쓰는 ..

리액트에서 클릭 이벤트 시 필요한 값을 매개변수로 전달할 때 일반적으로 자바스크립트에서 사용하던 방식으로 전달하게 되면 원하는 결과가 발생되지 않습니다. 만약 일반적인 방식처럼 작성한다면 리액트는 화면이 Render 되면서 계속해서 이벤트가 발생되기 때문에 우리가 원하는 특정 이벤트일 때 결과를 얻는 이벤트는 적용할 수 없습니다. 그래서 우리가 원하는 결과를 위해서는 화살표 함수로 감싸서 전달해야 우리가 원하는 클릭 이벤트가 발생했을 때 원하는 매개변수 값을 확인할 수 있습니다. 보다 이해가 쉽게 코드를 보면서 살펴볼게요. 예제 코드 import React from 'react'; const Example = () => { function sayHello(name) { alert(name); } retu..

반응형 웹 테블릿과 스마트폰에서도 인터넷을 사용할수 있게 되자 각 기기 화면 크기에 따라서 사용자들에게 최적화 된 화면을 재공하기 위해 웹 페이지의 사이즈가 '재조정' 되는 것을 말합니다. react-responsive 셋팅 npx create-react-app 작업폴더명 ※ 작업폴더 이름을 react-responsive로 하면 오류가 나니 라이브러리 이름과 다르게 만들어야 합니다. cd 작업폴더명 (작업폴더로 이동) npm install react-responsive npm install @types/react-responsive (typescript를 사용하는 서비스이기 때문에 아래 모듈도 설치 해줍니다. useMediaQuery 문법 const 변수명 = useMediaQuery ({ query :..

기본 강의를 숙지하고 책의 예제를 따라 하기 위해 리액트에서 제공하는 CRA(Create React App) 프로젝트를 신규로 생성해서 공부를 하려 하였습니다. 기분 좋게 신규 프로젝트 생성 $ npx create-react-app my-app $ npx create-react-app my-app 하지만 폴더만 생성되었을 뿐 폴더 안에는 어떠한 내용도 생성되지 않았습니다. 이 문제로 한참 동안 시간을 허비하였는데 이는 기존에 설치한 CRA를 삭제하고 다시 설치하여야만 설치가 된다는 걸 알게 되었습니다. 기존에 global 옵션으로 create-react-app을 설치했다면 아래 커맨드로 삭제해야 합니다. $ npm uninstall -g —-save create-react-app 아래와 같은 에러가 나온..

이 글은 React에 관심이 있는 분들이라면 모두를 대상으로 작성되었습니다. 동기 워낙 빠르게 다변하는 IT에서 Angular, Vue, React는 확실히 자신들만의 생태계를 구축하며 Front개발에는 이제 빠져서는 안 되는 라이브러리로 자리 매김했습니다. 저도 Angular, Vue 두 프레임워크는 실무에서 사용을 해 본 적은 없지만 개인적으로만 공부를 해 본 상태였고 혼자서 공부를 하지 않고 있는데 하루가 다르게 변하는 코드들을 보면서 더 이상은 미룰 수 없다고 판단하여 공부를 시작했습니다. 운이 좋게도 저는 현재 개발팀에 소속되어서 UI 개발 업무를 담당하고 있는데 팀에서 인원들을 나누어 각자의 관심 분야를 공부하고 토의하는 자리를 만들면 좋겠다는 의견이 있었고 저는 관심분야인 React를 선택하..

React를 최근에 공부를 하고 있습니다. 요즘은 너무나 많은 자바스크립트 라이브러리가 나와 있고 이미 실무에서도 해당 라이브러리를 많이 사용하고 있습니다. 이전에 Vue를 공부하면서 포트폴리오도 Vue로 만들기도 했지만 혼자서 공부를 한다는 것에 한계가 있었고 아무래도 혼자서 공부를 하며 업무와 병행하다 보니 공부를 한다는 게 생각처럼 쉽지 않았습니다. 이 글은 큰 목차로 보면 UI 개발 카테고리에 포함되어야 하는 것이 맞지만 React는 너무나 큰 생태계를 가지고 있고 React만으로도 다루어야 되는 이야기 목차가 많다고 생각하여 별도의 항목으로 나누게 되었습니다. 이 글은 저와 같이 React를 공부를 하고 싶은데 막연히 어떻게, 또 어디서부터 시작을 해야 되지? 하는 의문과 불안감 등의 고민을 가..