Coding
-
[React] - 12) Sass로 스타일링 하기Coding/React.js 2019. 12. 16. 16:16
velopert 님의 리액트를 사용하는 기술에서 공부한 내용임을 밝힙니다 😀 Sass 리액트에서 컴포넌트를 스타일링 하는 방법은 다양합니다. 가장 무난하게 일반 css를 이용하는 방법도 있겠습니다만 오늘은 Sass를 이용하여 컴포넌트를 스타일링해보도록 하겠습니다. Sass는 기본적으로 create-react-app으로 리액트 프로젝트를 만들 때 자동으로 사용할 수 있게 됩니다. 우선 리액트 프로젝트를 만들고, 터미널에서 node-sass를 추가해 줍시다. 이를 설치하면 sass를 자동으로 css로 변환하여 줍니다. yarn add node-sass 라이브러리가 설치 되면, SassTemplate.scss파일을 만들어 다음과 같이 스타일링 해 봅시다. .SassComponent { .red { color:..
-
[React] - 11) Hook - useMemo, useCallbackCoding/React.js 2019. 12. 6. 15:38
velopert 님의 리액트를 다루는 기술 책으로부터 공부한 내용임을 밝힙니다 😄 Hook 안녕하세요 이번엔 지난 포스팅에 이어 함수형 컴포넌트의 Hook에 대해 포스팅합니다. useMemo는 특정 값이 바뀔 때만 호출되어 연산 최적화에 도움을 줍니다. onChange 같은 이벤트 처리 시에 굳이 렌더링 할 필요가 없음에도 불필요하게 렌더링 하는 경우를 최소화 할수 있다는 것입니다. 다음 코드를 작성한 후 App에 렌더링 해 봅시다. import React, { useState, useMemo } from 'react'; const getAverage = numbers => { console.log('평균 값 계산 중'); if (numbers.length === 0) return 0; const sum..
-
[React] - 10) Hook - useState/useEffectCoding/React.js 2019. 12. 5. 15:15
velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃 Hook 안녕하세요 오늘은 Hook의 한 종류인 useState와 useEffect에 대해 포스팅합니다. 이전에 Hook이 뭔지 알아야겠죠? 이전 포스팅에서 클래스형 컴포넌트에서는 state를 관리하기 간편하지만, 함수형 컴포넌트에서는 원래는 불가능하다고 했습니다. 하지만 useState의 등장으로 함수형 컴포넌트에서도 state를 굳이 클래스형으로 변환하지 않고도 다룰 수 있게 되었죠! Hook은 이처럼 함수형 컴포넌트에서도 상태 관리를 하고/렌더링 후 작업을 설정하는 등의 작업을 할 수 있습니다. 클래스형 컴포넌트는 이러한 Hook의 역할을 라이프사이클 메소드가 대신하는데요! 사실 라이프사이클 메소드가 보다 종류가..
-
[React] - 9) 에러 발생 시 처리하기Coding/React.js 2019. 12. 4. 14:38
velopert 님의 리액트를 다루는 기술 책으로부터 공부한 내용임을 밝힙니다 😄 에러 발생시키기 안녕하세요 오늘은 리액트에서의 에러 발생 시 화면 처리에 대해 포스팅하겠습니다. 대부분의 웹 페이지들은 특정 에러가 발생하였을 때 띄우는 창이 있습니다. 예를 들면 PageNotFound 에러 발생 시에 나타나는 이런 페이지가 있겠죠? 리액트에서도 에러 발생시에 나타나는 창이 있습니다. 우선 억지로 에러를 만들어 볼까요? ErrorFound.js를 만들고 다음과 같이 작성합니다. import React, { Component } from 'react'; class ErrorFound extends Component { render() { return ( {this.props.abc.value} ); } } ..
-
[JavaScript] map()Coding/JavaScript 2019. 11. 29. 14:46
map 자바스크립트 배열 객체의 내장함수인 map을 이용하면 복잡한 반복과정을 쉽게 이행할 수 있습니다. const numbers = [1, 2, 3]; let result = numbers.map((v) => { return num += 1; }); console.log(numbers); // 1, 2, 3 console.log(result); // 2, 3, 4 쉽게 말하면 map은 기존에 있는 배열을 이용하여 각 인덱스마다 반복처리를 하여 새로운 배열을 만드는 역할을 합니다. 리액트에서 활용했던 ES6의 화살표 함수를 이용하면, let result = numbers.map(v => num +=1) 이렇게 더 간단하게 표현이 가능합니다. 특히 map은 리액트에서 반복되는 컴포넌트들을 렌더링할때 효과적..
-
[React] - 8) 이벤트 핸들링과 refCoding/React.js 2019. 11. 28. 16:29
velopert 님의 '리액트를 사용하는 기술' 교재로 부터 공부한 내용임을 밝힙니다😃 이벤트 핸들링 안녕하세요 오늘은 저번 포스팅에 이어 리액트의 이벤트 핸들링과 ref에 대해 포스팅합니다. 이전에 리액트에서의 이벤트 핸들링은 HTML에서의 이벤트 핸들링과 유사한 점이 많다고 했는데요. 예전 포스팅에서도 다루었던 onClick 기억하시나요 ? 이것들도 button DOM에 연결된 이벤트 중 하나라고 할 수 있겠습니다. 오늘은 간단한 예제로 이벤트 핸들링과 ref에 대해 알아보겠습니다! 우선, 리액트 프로젝트를 열고 클래스형 컴포넌트를 하나 만들어 줍시다. (vscode에서 code snippets을 사용하고 있다면 rcc만 눌러도 클래스형 컴포넌트가 자동완성 됩니다!) 그리고 입력 창 하나와 버튼 하나..
-
[Tistory] 인라인 코드 테마 변경하기Coding/etc 2019. 11. 27. 17:26
티스토리 인라인 코드 테마 변경하기 안녕하세요😆 오늘은 티스토리의 스킨 편집에서 인라인 코드의 테마를 변경하는 법을 알아보겠습니다. 그 전에, 인라인 코드가 뭐냐구요? 사실 티스토리 글쓰기에서 기본 모드만 이용하신 분들은 인라인 코드가 뭔지 잘 모를 수 있습니다. 하지만, 마크다운이나 HTML 모드로 작성하면 코드블록과는 살짝 다른 것이 인라인 코드입니다. 우선은 마크다운 기준으로 설명을 해 보겠습니다. HTML 모드로 이용하시는 분들은 이미 인라인 코드의 차이를 아실테니 적용 단계부터 해보세요. 마크다운에서 코드블록을 입력하기 위해서는 ```와 ``` 사이에 코드를 입력하면 기존에 설정한 테마대로 코드블록이 생길 겁니다. 저 같은 경우 티스토리 국민 테마인 highlight.js에서 ir-black 스..
