https://velog.io/@xmun74/React%EC%97%90%EC%84%9C-%ED%85%8C%EC%8A%A4%ED%8A%B8%ED%95%98%EA%B8%B0 React에서 테스트하기리액트에서는 Testing Library, Jest를 통해 테스트 가능두 개의 역할이 각각 다르므로 함께 사용해야 함Vue, Svelte에서도 사용 가능create-react-app으로 설치하면 자동으로 해당 라이브러리가 같이 설치된velog.iohttps://velog.io/@weesemoa/React-App-Test2 React App Test(2) : 코드 작성과 실행두근두근.. 첫 번째 테스트를 실행해보자React App 작업이 완료되었다면, create-react-app으로 프로젝트 생성시 함께 만들어진 ..

File -> Preferences -> Settings 로 이동한다.Workspace 탭에서 Extensions 메뉴를 열고, Emmet 을 선택한다.Preferences 에서 Edit in settings.json 링크를 클릭한다.{ "emmet.preferences": { }, "emmet.includeLanguages": { "javascript": "javascriptreact" }}settings.json 파일에 위와 같이 작성하고, 비주얼 스튜디오 편집기를 끄고 재시작한다.

기본 개념은 리액트 파일을 빌드(여러파일을 하나의 파일로 합치는 과정)하면 기본적인 html, css, javascript 파일이 build 폴더에 생성되고, 해당 폴더 안의 파일들을 깃허브 저장소에 업로드하면 된다. 1. 깃허브 저장소 이름을 BrowserRouter 컴포넌트의 basename 으로 설정해준다. 2. package.json 파일에 homepage 주소를 설정해준다. 3. public/index.html 의 head 부분에 base 태그를 추가해준다. 4. 루트폴더에서 npm run build 를 한다. 5. build 폴더로 이동하여 build 폴더의 코드를 깃허브에 업로드한다. 6. 깃허브에서 깃허브 페이지를 설정한다. dongjin 은 깃허브저장소 이름의 예시이다. "homepage..

* Styled Components 의 개념 Tagged Template Literal 을 이용하여 자바스크립트 파일 안에서 컴포넌트 스타일링을 한다. * styled-components 모듈 설치하기 npm install styled-components 위의 명령어를 실행하여 모듈을 설치하자! * Tagged Template Literal 의 개념 Tagged Template Literal 은 Template Literal 과 유사하다. Template Literal 은 문자열 안에서 달러와 중괄호를 사용하여 아래와 같이 자바스크립트 표현식을 삽입할 수 있다. import './App.css'; import React, { Component } from 'react' function App() { co..

https://sass-lang.com/ Sass: Syntactically Awesome Style Sheets Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. sass-lang.com npm 설치없이 sass 파일을 컴파일하려면 비주얼 스튜디오 편집기에서 위의 확장프로그램을 설치하면 된다. index.html 파일을 위와 같이 작성한다. 그리고 style.scss 파일을 생성하고 링크를 걸어준다. 이때 주의할점은 html 문서에서 링크를 연결할때는 style.css 로 작성하는 것이다. 그런 다음 비주얼 편집기 우측 하단의 Watch Sass 버튼을 클릭하면 style..

이벤트 처리 참고문서 이벤트 처리하기 – React A JavaScript library for building user interfaces ko.reactjs.org * 기본적인 개념 open 일반적인 HTML 문서에서 이벤트핸들러 함수를 등록할때는 위와 같이 작성한다. (인라인 이벤트등록 방식) open 리액트에서는 이벤트 이름에 카멜케이스를 사용한다. 그리고 JSX 문법을 이용하여 문자열이 아닌 함수로 등록한다. * 이벤트핸들러 함수의 this import './App.css'; import React, { Component } from 'react'; class App extends Component { showAlert() { console.log(this) alert('this is alert..

리액트 훅 참고문서 1 Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트 훅 참고문서 2 Hook 개요 – React A JavaScript library for building user interfaces ko.reactjs.org * 리액트 훅의 개념 리액트 버전 16.8 부터 새로 추가된 기능이다. 기존의 함수형 컴포넌트는 props 만 전달받아 렌더링할 뿐 state 를 사용하여 상태값을 변경할 수 없었다. 또한, 라이프사이클 메서드도 사용하지 못하였다. 함수형 컴포넌트에서도 이를 가능하게 하는 것이 바로 리액트 훅이다. * 리액트 훅을 사용하는 이유 상태관련 로직을 독립적으로 분리하기 위함이다..

리액트 라우터 참고문서 React Router | TutorialDeclarative routing for React apps at any scalereactrouter.com * 라우팅의 개념라우팅이란 현재 화면에 보여지는 웹페이지에서 다른 웹페이지로 이동하는 것을 말한다. 라우팅을 하면서 웹페이지의 주소가 변경된다.  * 리액트 라우터 동작방식예전에는 라우팅을 할때마다 보여주려는 웹페이지의 리소스를 서버에 접속해서 가져왔다.  즉, 라우팅할때마다 서버에서 HTML 파일을 가져와서 렌더링하였다. 이렇게 하면 서버에 접속하는 시간 때문에 웹페이지를 이동할때마다 사용자에게 웹페이지를 보여주는데 시간이 걸렸다.  리액트 라우터는 SPA (싱글페이지 애플리케이션)을 이용하여 라우팅할때 컴포넌트를 교체하는 방식..

요소참조 참고문서 Ref와 DOM – React A JavaScript library for building user interfaces ko.reactjs.org * 요소 참조의 개념 자바스크립트에서 특정 DOM 을 선택해야 할때 getElementById 나 querySelector 함수를 사용한다. 리액트에서는 대부분 state 를 사용하여 DOM 을 제어하지만 특별한 경우 DOM 을 직접 선택해야 하는 경우도 있다. 예를 들면, 버튼을 직접 클릭하게 한다거나 입력창에 포커스를 줘야 하는 등이다. * 요소 참조하는 방법 클래스형 컴포넌트 import React, { Component } from 'react' class CustomInput extends Component { constructor(..

* 컴포넌트 스타일링하는 몇가지 방법 기본적으로 CSS 를 사용하여 스타일링한다. 그 밖에 SASS 와 Styled Component 가 있다. SASS 는 CSS 를 마치 프로그래밍적으로 생각하여 중복되는 CSS 코드를 변수나 함수로 만들어 사용가능하다. Styled Component 는 Tagged Template literal 을 사용하여 자바스크립트로 스타일링한다. 컴포넌트 스타일링을 할때 어떤 도구를 사용할지를 결정하는건 개발자의 선호에 달려있다. 그보다 중요한건 어떤 도구를 사용하든 컴포넌트를 만들고 스타일링할 수 있는지다. 그래서 일단은 기본적인 CSS 를 사용하여 스타일링하는 연습을 하는 것이 우선이다. * 컴포넌트 스타일링시 참고할 문서 https://mui.com/material-ui/..