Atelier BiCute

#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..

웹의 특정 요소를 조작할 때, 가장 간편한 방법은 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..

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

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

#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) }) ..

#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 ..

#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 폴더에 파일이 있는 경우 그냥 /로 시작해서 이미지 경로를 입력하는것으로도 적용은 된다. 하지만, 빌드하여 배포할때 도메인이 아닌 하위 경로에 위치하게되면 파일을 찾지 못하기 때문에 다음과 ..

#1 모바일 친화성 테스트 모바일 친화적인 사이트를 보유하는 것은 온라인 인지도를 유지하는 데 중요한 역할을 합니다. 여러 국가에서 스마트폰 트래픽이 데스크톱 트래픽을 넘어서고 있습니다. 아직 사이트를 모바일 친화적으로 만들지 않았다면 모바일 친화적인 사이트를 만들어야 합니다. Search Console의 모바일 친화성 테스트 도구를 사용하면 사이트가 모바일 친화적인지 빠르고 간편하게 테스트할 수 있습니다. 사용 방법은 매우 간단합니다. 테스트 하려는 웹페이지의 전체 URL만 입력하면 됩니다. 모바일 친화성 테스트 페이지로 바로가기 > #2 PageSpeed Insights 웹페이지의 전반적인 속도를 측정하여 사이트 성능을 파악할 수 있습니다. 사이트를 로드하여 시뮬레이션을 한 후 속도에 관한 다양한 분..