Atelier BiCute

서버에 보통 자료를 요청할 때는 GET, 자료를 생성하거나 업데이트할 때는 POST라고 작성하고 서버의 주소를 함께 적는 것으로 해당 위치에 자료를 가져오거나 업데이트를 진행할 수 있습니다. 이러한 경우 기본적으로는 페이지가 새로고침이 되는데, AJAX는 페이지 전체를 리프레쉬하지 않고, 일부분만을 업데이트할 수 있게 도와줍니다. AJAX를 사용하는 방법은 여러가지가 있는데, 이 글에서는 axios라는 라이브러리를 사용하는 방법에 대하여 설명합니다. #1 설치 npm 사용하기: $ npm install axios yarn 사용하기: $ yarn add axios #2 사용하기 get 요청은... axios.get('URL주소')형식으로 작성하고, .then에는 데이터 요청 성공 시 수행할 코드, .cat..

#1 설치와 세팅 설치 터미널을 열고 아래 방식 중 원하는 방식으로 설치 npm 설치 $ npm install react-router-dom@6 yarn 설치 $ yarn add react-router-dom@6 세팅 index.js 파일을 열어 브라우저 상단에 BrowserRouter를 import 하고, 를 로 감싸 주면 이제 앱 어디에서나 React Router를 사용할 수 있게 됩니다. import { BrowserRouter } from 'react-router-dom'; ... #2 기본 사용법 페이지 나누기 App.js 파일의 상단에 Routes, Route, Link를 import 해옵니다. 페이지가 변경되며 표시될 위치에 컴포넌트를 작성해주고, 안에 를 넣어줍니다. 이 Route가 각각의..

설치 방법 npm install styled-components 터미널을 열어 위 코드를 입력해주면 끝입니다. 공식 페이지의 install 설명에는 --save옵션이 포함되어 있는데, --save 옵션은 package.json의 dependency 항목에 모듈을 추가한다는 의미입니다. 모듈이 추가되어 있지 않으면, 파일을 공유하거나 옮길 때 많게는 수백 메가에 달하는 node_moduls 폴더를 함께 옮겨야 하는데, dependency 항목에 모듈이 추가되어 있다면, 이 항목을 체크하면서 자동으로 관련된 모듈을 다운로드합니다. 하지만 현제 release 되는 버전들은 --save 옵션이 기본 적용되어 있어 --save를 사용하지 않아도 자동으로 추가됩니다. 사용 방법 가져오기 (import) import..

생명주기 메서드 생명주기 메서드(Lifecycle Methods)는 클래스형 컴포넌트에 사용되는데, 컴포넌트가 브라우저에 ① 나타나고, ② 업데이트되고, ③ 사라지게 될 때 작동되는 메서드입니다. 이렇게 태어나고(생성) 사라지게 될 때까지의 컴포넌트의 인생을 Lifecycle이라 표현하는 것인데, 사용 방법은 대략 아래와 같습니다. class Lifecycle extends React.Component { componentDidMount(){ // 컴포넌트가 Mount될 때 실행될 코드 } componentDidUpdate(){ // 컴포넌트가 Update될 때 실행될 코드 } componentWillUnmount(){ // 컴포넌트가 unmount될 때 실행될 코드 } } useEffect 라이프사이클..

#1 css파일에서 수정하기위해 클래스를 적용하는 방법 카멜케이스 방식으로 작성하는 className으로 class지정. * 자바스크립트 기반이기때문에 class는 이미 다른용도로 사용되고 있기 때문 (App.jsx) Title #2 인라인 방식으로 스타일 지정하는 방법 style={ { 속성명 : '속성값' } } 형식으로 사용합니다. {} 안에 {}자료형 으로 넣기 때문에 2번 사용됩니다. 여러가지 속성을 사용할때는 ,로 함께 지정할 수 있으며, font-size, background-color 같이 하이픈(-)이 있는 속성들은 -을 빼고 단어들을 붙여 카멜 케이스 형식으로 작성합니다. (App.jsx) Title

#1 src 폴더에 파일이 있을 경우 1) css에 background로 적용하는 방법 일반적인 css 적용 방법과 동일. (App.css) .logo { background-image : url('./logo.png'); } 2) html 내부에서 적용하는 방법 import [이름] from [경로]를 적은 후, 이미지를 삽입하고 싶은 위치에 img src = {} 태그를 사용 (App.js) import logo from './logo.png' function App(){ return ( ) } #2 public 폴더에 파일이 있는 경우 그냥 /로 시작해서 이미지 경로를 입력하는것으로도 적용은 된다. 하지만, 빌드하여 배포할때 도메인이 아닌 하위 경로에 위치하게되면 파일을 찾지 못하기 때문에 다음과 ..

리액트를 시작하기 위하여 Node.js와 React를 설치하는 방법. 그리고 기본적인 파일들의 설명을 정리해 보았습니다. #1 Node.js 설치하기 다음 사이트로 이동하여 Node.js를 설치합니다 링크 : https://nodejs.org/en/ 왼쪽은 많은 사람들이 사용하고 있어 신뢰할 수 있는 안정성을 가진 버전, 오른쪽은 최신 버전입니다. (그냥 최신버전 받으시면 됩니다) ※ Node.js는 라이브러리를 설치하기 쉽게 도와주는 툴 #2 Visual Studio Code 설치 다음 사이트로 이동하여 Visual Studio Code를 설치합니다 링크 : https://code.visualstudio.com/ 1) 작업 폴더 생성 원하는 위치에 리액트를 사용하기 위한 폴더를 생성합니다. 2) 작업 ..