odada

1. Git 이란?https://github.com/GitHub는 버전 제어 및 협업을 위한 코드 호스팅 플랫폼입니다. 그것은 당신과 다른 사람들이 어디서나 프로젝트에 협력 할 수 있습니다.이 튜토리얼에서는 리포지토리 , 브랜치 , 커밋 및 풀 요청 과 같은 GitHub 필수 사항에 대해 설명 합니다 . 자신 만의 Hello World 리포지토리를 만들고 코드를 만들고 검토하는 일반적인 방법 인 GitHub의 풀 요청 워크 플로를 배우게됩니다.2. Git 저장소의 간단 구조  3. Git 사이트 회원 가입 후 리포지토리 생성하기아래 사이트에서 회원가입을 해주세요~https://github.com/ GitHub: Let’s build from hereGitHub is where over 100 millio..

API 통신1. API란?API는 application programming interface의 약자로, 프로그램과 프로그램 사이의 통신을 위한 규약이다.API는 서버와 클라이언트 사이에서 데이터를 주고 받는 방식을 의미한다.- 비동기 처리비동기 기본 : https://odada.me/337비동기 예제 : https://odada.me/309async/await를 사용한 코드async function fetchData() { // API 요청을 보내는 함수 (async : 비동기 함수) try { // try 블록 안에서 예외가 발생하면 catch 블록이 실행된다. const response = await fetch('https://API.example.com/data'); // fetch..

Automator 열기 현재 수신하는 작업흐름 : 파일 또는 폴더 선택 항목 위치 : Finder 이미지 : 동작 셀 스크립트 실행 셀 : /bin/zsh 통과 입력 : 변수 open -na "IntelliJ IDEA CE.app" --args "$@" open -na "IntelliJ IDEA.app" --args "$@" open -n -b "com.microsoft.VSCode" --args "$*" 환경설정 > 키보드 단축키 > 앱 단축키 > Finder 에 추가

react build 후 배포하기 1. build 웹브라우저는 html, css, javascript만 이해할 수 있다. react는 jsx로 작성되어 있기 때문에 브라우저가 이해할 수 없다. build란 개발자가 작성한 코드를 브라우저가 이해할 수 있는 번역된 코드로 변환하는 것을 말한다. $ npm run build $ yarn build 2. gh-pages 설치 gh-pages는 GitHub에서 제공하는 호스팅 서비스로 GitHub 저장소에 정적 파일을 업로드하여 배포할 수 있다. $ npm install gh-pages $ yarn add gh-pages package.json 파일 수정 { "homepage": "https://[사용자 이름].github.io/[저장소 이름]", // "hom..

내일배움카드, 국비지원교육 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 : 마우스가 요소 안으로 들어왔을 때 발생..