odada

Visual Studio Code 란? MS에서 제공하는 크로스 플랫폼 에디터로 다양한 언어를 서포트 하며, IntelliSense와 Git 기능, 그리고 Extension 을 이용한 확장 기능을 제공하고 있는 IDE 이다. - Visual Studio Code 설치하기 Visual Studio Code 사이트에서 다운로드 받아 설치한다. 설치 시 아래와 같은 페이지에서 기타에 모두 체크한다. - Visual Studio Code 기본 설정 왼쪽 하단 설정 아이콘을 클릭한다. Auto Save 를 onFocusChange 로 설정한다. Font 를 D2Coding 으로 설정한다. Font Size 를 14 로 설정한다. Font Ligatures 를 true 로 설정한다. Tab Size 를 2 로 설정..

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