리오의 일상

[React] 리액트 컴포넌트 스타일링_CSS, Sass, CSS Module, styled-components 컴포넌트 스타일링을 조사하던도중 자세하게 정리된 내용이 있어 공유하고자 합니다. 좀더 자세한 내용은 벨로그 https://velog.io 를 참조하시면 될듯하며 출저 등은 항상 아래에 표기해놓습니다. 리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다.저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는 프로젝트에서는 styled-components 를 사용하기도 합니다 :) CSS Module 은 작년에 자주 사용했었는데 사용하기가 ..

[react] npm / yarn 설치 오류 error An unexpected error occurred 리액트 뿐만아니라 NPM / YARN 설치시에 error An unexpected error occurred: "https://registry.yarnpkg.com/react: self signed certificate in certificate chain". 등이 오류 가 발생 할수도있다 혹은 오류들로 메시지가 발생 할 수도있는데. 해당문제는 SSL 문제이다. 해결방법을 알아보도록하자. ▼npm 오류 123456789#npm 으로 리액트등을 설치 리액트뿐만아니라 npm 설치시 >npm install -g create-react-app npm ERR! code SELF_SIGNED_CERT_IN_C..

[React] 리액트 컴포넌트 생성 & 활용 - Test 컴포넌트 생성 1234567891011121314import React, { Component } from 'react'; class TestCom extends Component { render() { return ( TestCom엔 뭐가들어을까요? {this.props.test} 입니다. ); }} export default TestCom ;cs -컴포넌트 활용 123456789101112import React, { Component } from 'react';import TestCom from './TestCom '; class App extends Component { render() { return ( ); }} export default..

[React] 리액트 IF문 사용법 리액트에서는 기본 자바 스크립트에서 사용하던 IF ELSE 방법이아닌 삼항연산자를 이용하는방법이 기본으로 사용된다. 그렇다고 IF ELSE 를 아에 못쓰는것은 아니니 그 예제를 보도록하자 ▼삼항연산자 사용법 123456789101112131415161718import React, { Component } from 'react'; class App extends Component { render() { return ( { 1 + 1 === 2 ? (O) : (X) } ); }} export default App; Colored by Color Scriptercs ▼즉시 실행 함수_IIFE(Immediately Invoked Function Expression)를 이용한 ..

[React] 리액트(react) 설치 및 설정 리액트란? 리액트 프로젝트시 컴포넌트를 파일로 분리해 저장하며 또 이 컴포넌트는 일반 JavaScript 가 아닌 JSX 라는 문법으로 저장하게됨이 여러가지 파일을 한개로 결합기위해 Webpack 이라는 도구를 사용하고 JSX / JavaScript 등의 문법을 사용하기위해 Babel 이란 도구를 사용. 시작전 준비물Node.js: Webpack 과 Babel 같은 도구들이 자바스크립트 런타임인 Node.js 기반이기 떄문에 설치 Yarn: npm 의 상위버전으로써 더나은 속도/캐싱을 위해 사용 코드 에디터: VSCode , Atom, WebStorm, SublimeText 윈도우의 경우, Git for Windows 를 설치해서 앞으로 터미널에 무엇을 입..