· dependency 설치 styled-components를 적용하기위해서는 먼저 dependency를 설치해야한다. 사스Sass와 styled-components를 설치해야한다. Sass는 node버전을 맞춰서 설치하는게 좋기때문에 지난번 작성한 포스팅을 참고하면 좋겠다 [React] 여러가지 스타일 적용 방법 기본 CSS, 사스Sass SCSS @mixin 리액트에서 스타일을 적용하는 방법은 정말 다양하다. 그중에서도 요즘에는 styled-component를 많이 사용한다고 하는데 이번 포스팅에서는 리액트에서 사용하는 스타일 적용방법을 정리해보려고 sophiecial.tistory.com yarn add styled-components 또는 npm install styled-components vs..

· Module.css 클래스 이름의 중첩을 방지하기 위해 사용 기존 프로젝트의 css 클래스와 이름이 중복되어도 스타일이 꼬이지 않게 하기 위해서 css파일의 확장자를 .module.css로 만든다. 다른 파일이 같은 클래스명을 사용해도 중첩되지 않는다. 개발자모드로 소스를 보면 클래스명이 '파일명_클래스명__아무말'형식으로 나온다. 모듈 스타일과 일반 css의 차이점을 보기 위해 아래처럼 파일을 생성했다. ModuleStyle.js는 간단하게 스타일이 어떻게 적용되는지만 확인할 수 있는 요소만 몇개 만들어서 클래스명으로 구분했다. 모듈 스타일을 import할때는 위에 3째줄 처럼 참조변수명을 지정해서 import해준다. 11, 14번째 줄 등 클래스명에 적용할때 이 변수를 사용해 적용할 수 있다. i..

리액트에서 스타일을 적용하는 방법은 정말 다양하다. 그중에서도 요즘에는 styled-component를 많이 사용한다고 하는데 이번 포스팅에서는 리액트에서 사용하는 스타일 적용방법을 정리해보려고 한다 목차 · 기본 스타일 · SCSS -------------- 다음포스팅에 이어서... · Module.css · styled-component · 기본 스타일 기본적으로 아무런 dependency 설치 없이 바로 적용할 수 있는 css는 일반적으로 html, css작업했던 것과 유사하게 적용할 수 있다. 15번째 줄처럼 div요소 내부에 style속성을 겹중괄호 {{}}안에 넣어 적용할수도 있고 19번째 줄처럼 코드 가독성을 위해 스타일 객체를 따로 만들어서 적용할수도 있다. 23번째 줄처럼 스타일 css파..

오늘은 지난시간에 배운 검색기능을 구현하는 세가지 방법을 복습하는 포스팅! 사실 검색기능 자체를 구현하는 코드는 자바스크립트식이기때문에 자바스크립트 게시판에 쓰려고 하다가... 그래도 리액트 수업시간에 했던 예제라 리액트 게시판에 쓰기로 했다. 일단 사용법만 익혀두면 여기저기서 정말 많이 쓰게될 것 같다. 특히 정규식 RegExp!! 일단 기능구현 자체가 목적이니 간단하게 데이터를 준비한다. 생각나는 연예인 이름을 줄줄 썼는데 영문검색 대소문자 필터링을 해야하기때문에 영문 데이터도 몇개 넣었다. 검색한 단어가 바뀔때마다 화면을 다시 그려주기때문에 useEffect를 사용한다. 42번째 줄, useEffect내에서 data상태를 설정해주는데 전체 데이터에서 filter로 해당값만 찾아준다. 이때 두 단어를..

리액트가 공개(2013년)되고 개발자들이 막 사용하기 시작했을때는 이정도 수준의 프로젝트도 취업준비할때 포트폴리오로 제출가능했던 때가 있다고 한다. 아... 리액트... 일찍 배웠어야 했어...... anyway. 지난 시간에는 리액트 기초 내용 총집합이라고 할 수 있는 To do List만들기를 했다. 완성된 모습은 아래 gif와 같다. 아니 저거 체크하면 hotpink로 해놨는데 gif로 만드니까 왜저뤠.................ㅋㅋㅋㅋㅋㅋㅋ 리액트 정리 포스팅이므로 css는 생략한다. 프로젝트 구조는 아래와같다 일단 App.js에 메인 컴포넌트가 될 Todo.js를 import 한다 지난 스타벅스 복습 포스팅은 작업하는 순서대로 썼는데 그렇게 하니까 복습하는 시간보다 포스팅 하는 시간이 더 길어..

참고 서적 : Learning React 한빛미디어 리액트는 자바스크립트 언어를 베이스로 한 라이브러리이기때문에 기본적으로 자바스크립트 함수를 많이 사용하는데 그래서 그런지 리액트를 처음시작할때 기본적인 자바스크립트 함수를 먼저 배우고 시작하는 것이 좋다. 시중에있는 리액트 교재도 그런식으로 커리큘럼이 짜여져 있고 유튜브나 학원 강의도 보통 그렇게 시작하는 것 같다. Do it 자바스크립트 4-2. 배열 객체와 자주쓰는 메서드. 배열함수 배열객체 여러개의 데이터를 하나의 저장소에 저장하려면 배열 객체(Array Object)를 생성하면 됩니다. 배열(配列)은 '나눌 배'와 '열거할 열'을 사용해서 만든 글자로, 글자 뜻 그대로 하나의 저장 sophiecial.tistory.com 많이 쓰이는 자바스크립트..

리액트 프로젝트를 실행할때 명령어 npm start 또는 yarn start를 사용하는데 yarn start는 에러가 생기는 경우가 있다. 오류내용은 아래와 같다 보안오류 PSSecurityException UnauthorizedAccess yarn 보안오류를 해결하기 위해서는 PowerShell을 열어야 한다 window 검색으로 PowerShell을 찾아서 관리자 권한으로 실행한다 ExecutionPolicy를 치면 아래처럼 제한된 상태라는 Restricted가 뜨는데 이 제한을 풀어줘야 한다 명령어는 Set-ExecutionPolicy Unrestricted Set-ExecutionPolicy Unrestricted 아무래도 보안 설정을 건드리는 것이기 때문에 한번더 물어보는데 예(y) 하고 실행한..

※ 실행 환경 window 10, 에디터는 비쥬얼스튜디어코드vsCode입니다 - node.js 설치 - yarn 설치 - react 프로젝트 생성(웹팩설치) - 프로젝트 실행하기 node.js 설치 리액트를 사용하기 위해서는 먼저 node.js를 설치해줘야 한다. 아래 공식 사이트에서 받으면 된다. 구버전과 신버전 선택은 자유. 나는 최신 버전으로 설치했는데 아직 복잡한 프로젝트를 구성하지 않아서 그런지 버전으로 인한 에러는 없었다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org installing... 설치가 생각보다 오래 걸릴 수 있다. (기타..