2022/05 16

[React] axios 사용하여 서버와 데이터 주고받기

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

[React] 라우터 사용방법 (react-router-dom@v6)

#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가 각각의..

[React] styled-components 설치와 사용 방법

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

[JavaScript] 클래스를 제어하는 방법

웹의 특정 요소를 조작할 때, 가장 간편한 방법은 CSS로 해당 속성을 미리 지정한 후, 클래스를 추가 삭제하는 방식으로 제어하는 것입니다. 아래는 클래스를 제어와 관계있는 classList 속성과 className에 관한 예시입니다.. - Setting - BUTTON bt1과 bt2라는 2개의 클래스를 가진 버튼을 생성. // JavaSciprt let $button = document.querySelector('button') $button.addEventListener('click', () => { // $button.classList.add("active", "add"); // $button.classList.remove("bt2"); // $button.classList.toggle("acti..

[JavaScript] innerHTML / innerText / textContent 의 차이점

막상 사용해보면 비슷한데, 조금씩 용도가 다른 innerHTML / innerText / textContent 의 차이점입니다. - Setting - // HTML 헬로 월드 헬로 자바스크립트 숨겨놓은 글 // JavaScript let $textbox = document.getElementById('textbox'); innerHTML console.log($textbox.innerHTML); 해당 요소의 HTML값을 그대로 가져옵니다. 출력 결과 " 헬로 월드 헬로 자바스크립트 숨겨놓은 글 " ※ console.log나 alert 등으로 출력을 할경우 내부 태그도 함께 보이지만, 당연하게도 document.write로 출력할 경우엔 태그 속성이 적용된 [헬로 월드 헬로 자바스크립트]로 출력됩니다. i..

[React] useEffect와 생명주기 메소드(Lifecycle Methods) 정리

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

BiCute 스킨 ver.2.0 - 대규모 업데이트

BiCute 스킨에 많은 부분 변화가 있었습니다. 전체적으로 모바일에서 보기 좋아졌으며, 효과들이 단순화 되었습니다. 추가로 게시물의 스타일을 조금은 애플스럽게(?) 변경하였습니다. 상세한 변동 내용은 아래와 같습니다. 커버 스타일 Ver. 1 Ver. 2 (1) 전체적인 마우스 오버 효과 삭제 썸네일에 검게 테두리가 나타나는 효과 / 제목에 배경 색이 슬라이드 되는 효과 제거. 마우스 포인터에 효과를 주어 링크 위로 마우스가 올라가면 포인터가 변하도록 변경 (2) 반응형 1:1 비율 3단 포스터 하단 제목을 삭제 / 이미지로 표시 / 게시물간 여백 조절 (3) 단순 텍스트 타입 스타일 변경 하단 날짜 삭제 및 모바일에 어울리는 디자인으로 변경 본문 스타일 (1) 폰트 색상 조절을 통하여 라이트 모드와 ..

[JavaScript] Map의 사용방법과 동작 방식

#1 map의 기본 동작 방식 [1,2,3].map(function(){ console.log('확인') }) (1) map은 array 자료의 개수만큼 함수안의 코드를 반복하여 실행해 줍니다. (2) 작성은 '배열.map.콜백함수' 이후 실행할 내용순으로 적습니다. *위와 같이 작성할 경우 배열[1,2,3]의 수만큼(3) console.log를 실행해 줍니다. 결과 #2 map의 첫번째 파라미터 [1,2,3].map(function(a){ console.log(a) }) (2) 함수안에 있는 파라미터 a는 배열에 있는 각각의 자료입니다. #3 map의 두번째 파라미터 [1,2,3].map(function(a, i){ console.log("자료" + a) console.log("인덱스" + i) }) ..

[JavaScript] 사용 위치에 따른 this의 변화

#1 일반 함수에서 사용될 경우 function 디스(){ console.log(this); } 디스(); this = Window 단, strict mode라면 undefined 'use strict' function 디스(){ console.log(this); } 디스(); #2 오브젝트 내에서 함수(Function)로 사용될 경우 let 오브젝트 = { 이름: "후시딘", 디스: function(){ console.log(this) } } 오브젝트.디스(); this = 속해있는 object #3 오브젝트 내에서 화살표 함수(Arrow Function)로 사용될 경우 let 오브젝트 = { 이름: "후시딘", 디스: () => { console.log(this) } } 오브젝트.디스(); this ..

React 스타일 적용하는 방법

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

반응형