odada

내일배움카드, 국비지원교육 1주차

React Library React Router React Router는 React 라이브러리로, 라우팅을 구현할 때 사용한다. - 설치하기 React Router를 설치할 때는 다음 명령어를 사용한다. yarn add react-router-dom npm install react-router-dom - 사용하기 // index.js import { BrowserRouter } from 'react-router-dom'; ; // App.js import { Route } from 'react-router-dom'; ; ; ; ; // Home.js import { Link } from 'react-router-dom'; 소개; // Profile.js impo..

웹디자인기능사를 이용해 기획, 디자인 구현하기 웹디자인 기능사에 나온 문제 중 A-1 Just쇼핑몰 기획서를 가지고 기획, 디자인, 웹퍼블리싱을 구현해 보려고 한다. 웹디자인 요수사항 pdf를 보면 요구사항, 사이트맵, 와이어프레임 등 기획에 필요한 내용이 구체적으로 명시되어 있어 웹린이들이 참고하기에 좋은 자료라고 생각한다. 물론 실무와는 다른 부분이 있을 수 있지만, 기획, 디자인, 코딩을 처음 접하는 웹린이에게는 좋은 자료가 될 것이다. 1. 웹디자인 기능사란? & 자료 다운로드 웹디자인 기능사는 웹사이트를 기획하고 디자인하며, 웹표준에 맞춰 구현하는 업무를 수행하는 기능사 취득자를 말한다. 큐넷 : https://www.q-net.or.kr/crf005.do?id=crf00505&gSite=Q&j..

Framer Motion - 리액트 라이브러리 Framer Motion은 단순하면서도 강력한 React용 모션 라이브러리이다. 사이트 : https://www.framer.com/motion/ 1. 설치하기 yarn add framer-motion npm install framer-motion 2. 기본 사용법 import { motion } from 'framer-motion'; 으로 motion을 불러옵니다. motion이 들어갈 요소에 motion을 붙여줍니다. initial(초기값)과 animate(애니메이션)을 설정합니다. styled-components를 사용하는 경우에는 styled(motion.div)로 사용합니다. import { motion } from 'frame..

React 배우기 - 상태(State)1. State상태(State)란 컴포넌트가 가질 수 있는 동적인 데이터를 의미합니다.사용자가 입력한 텍스트현재 선택된 메뉴 항목토글 버튼의 on/off 상태서버에서 받아온 데이터useState 기본 문법 설명const [state, setState] = useState(initialValue);// - state: 현재 상태 값// - setState: 상태를 변경하는 함수// - initialValue: 초기 상태 값- State와 Props의 차이리액트 컴포넌트는 입력과 출력이 있는데 prop를 통해 입력된 데이터를 우리가 만든 컴포넌트 함수가 처리해서 retrun을 통해 출력한다.props는 컴포넌트를 사용하는 외부자를 위한 데이터이다.state는 props와..

1. 이벤트(Event)이벤트란 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것을 말한다.이벤트를 사용할 때는 on이벤트명={이벤트 핸들러} 형식으로 사용한다.이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수로 함수의 형태로 작성해야 한다.이벤트 핸들러에 ()를 붙이지 않는 이유는 이벤트를 등록할 때 함수를 호출하는 것이 아니라 함수를 등록하기 때문이다.이벤트 종류React 공식문서에서 확인 가능하다.마우스 이벤트onClick : 마우스를 클릭했을 때 발생onDoubleClick : 마우스를 더블 클릭했을 때 발생onMouseOver : 마우스를 요소 위로 올렸을 때 발생onMouseOut : 마우스를 요소 밖으로 옮겼을 때 발생onMouseEnter : 마우스가 요소 안으로 들어왔을 때 발생..

1. Props(Properties) 란?컴포넌트의 속성을 설정할 때 사용하는 요소이다.컴포넌트에게 전달되는 데이터를 의미한다.Components로 고양이를 계속 만들어낼 수 있다면...Props로 서로 다른 고양이를 만들어낼 수 있다.이미지 출처2. Props의 특징컴포넌트의 속성(props)은 컴포넌트를 사용할 때 설정하는 속성컴포넌트의 속성은 부모 컴포넌트에서 설정할 수 있다.컴포넌트 내부에서는 설정할 수 없음{}를 사용하여 자바스크립트 표현식을 속성 값으로 설정할 수 있음- Props.children (props.속성이름)컴포넌트 태그 사이에 작성한 내용을 조회할 때 사용한다.컴포넌트 태그 사이에 작성한 내용은 props.children이라는 props로 전달된다.// App.jsimport Re..

React에서 GSAP 사용하기 GSAP 설치하기 npm install gsapGSAP 사용하기 import { gsap } from 'gsap'; gsap.to('.box', { x: 100 }); GSAP을 전역으로 사용하기 위해선 index.js에 아래 코드를 추가해야 한다. // index.js import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; gsap.registerPlugin(ScrollTrigger); GSAP을 사용할 header.jsx 파일을 만들고 아래와 같이 코드를 작성한다. 스크롤 이벤트 핸들러를 만들어서 스크롤이 100px 이상이면 헤더의..

리액트 ES6 문법 정리 1. 변수 변수는 let, const 키워드를 사용하여 선언한다. let value = 1 console.log(value) // 1 value = 2 console.log(value) // 2 const a = 1 a = 2 // 에러 발생 2. 템플릿 문자열 (Template String) 템플릿 문자열은 문자열 안에 변수와 연산식을 넣을 수 있습니다. const string1 = '안녕하세요.'; const string2 = '김겨울입니다.'; const greeting = ${string1} + ' ' + ${string2}; // 병합 연산자를 사용한 문자열 연결 const cat = { kind: '러시안블루',..

모듈(Module)모듈이란?모듈은 특정 기능을 하는 함수나 변수들의 집합이다.모듈은 가져오기(import)와 내보내기(export)를 통해 사용할 수 있다.모듈은 자체로도 하나의 프로그램이지만 다른 프로그램의 일부로 사용될 수도 있다.모듈은 다른 모듈을 사용할 수 있고, 다른 모듈에 의해 사용될 수도 있다.모듈은 자신만의 이름 공간(namespace)을 가진다.모듈은 독립성을 가지며, 필요한 모듈만 불러와 사용할 수 있다.모듈은 재사용이 가능하다.모듈의 종류내장 모듈Node.js가 설치될 때 함께 설치되는 모듈fs, os, path, url 등사용자 정의 모듈개발자가 직접 정의한 모듈다른 프로그램에서도 사용할 수 있도록 npm에 배포할 수도 있다.모듈의 사용모듈을 사용하기 위해서는 모듈을 내보내기(exp..