odada

우리가 배울 것들 HTML 웹 페이지의 구조를 정의하는 언어 https://www.w3schools.com/html/default.asp 웹 페이지의 기본적인 뼈대를 만들며, 텍스트, 이미지, 링크 등의 콘텐츠를 웹에서 어떻게 표시할지 정의합니다. 태그(tag) 기반으로 되어 있으며, , HTML 기본 문서 HTML은 웹 문서를 만드는 언어입니다. CSS 란? 웹 페이지의 디자인과 레이아웃을 담당하는 스타일 시트 언어 https://www.w3schools.com/css/default.asp HTML 요소의 색상, 폰트, 간격, 크기 등을 설정하여 사용자에게 보여지는 페이지의 시각적인 면을 꾸밉니다. 클래스, ID, 태그 등 다양한 선택자(selector)를 사용하여 특정 HTML 요소를 대상으로 스타일..

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 저장소의 간단 구조 1. Git 사이트 회원 가입 후 리포지토리 생성하기 아래 사이트에서 회원가입을 해주세요~ https://github.com/ Build software better, together GitHub is where people ..

axios 라이브러리를 사용한 api 통신 1. api란? api는 application programming interface의 약자로, 프로그램과 프로그램 사이의 통신을 위한 규약이다. api는 서버와 클라이언트 사이에서 데이터를 주고 받는 방식을 의미한다. 2. axios 라이브러리를 사용한 api 통신 axios는 API 요청을 보내는 라이브러리 Axios는 JavaScript에서 사용되는 유명한 HTTP 클라이언트 라이브러리로 웹 브라우저와 Node.js 환경에서 사용될 수 있으며, HTTP 요청을 보내고 받는 기능을 제공합니다. Axios는 Promise 기반의 API를 사용하여 비동기 HTTP 요청을 간편하게 처리할 수 있게 해줍니다. - Axios 설치 npm install axios ya..

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