odada

1. JSX란? JSX = JavaScript + XML/HTML A syntax extension to JavaScript (자바스크립트의 확장 문법) 대입 연산자를 통해 Html 코드를 변수에 저장한다. const element = Hello, world!; 2. JSX의 역할 JSX로 작성된 코드는 모두 자바스크립트 코드로 변환 JSX는 React.createElement()로 변환된다. // JSX Hello => // React.createElement() React.createElement('div', { id: 'foo' }, 'Hello'); 3. JSX의 장점 코드가 간결해진다. 가독성이 향상된다. // jsx 사용 Hello, {name}; // jsx 사용 안함 React.reactE..

React Package 설치Create React App 을 사용하여 React 프로젝트를 생성하고, React 프로젝트에 필요한 패키지를 설치하는 방법을 알아봅니다.1. Create React App 이란?Create React App은 React 프로젝트를 생성할 때 필요한 환경을 구축해주는 도구입니다.Create React App 공식문서장점별도의 설정 없이 바로 React 프로젝트를 생성할 수 있습니다.초기 개발 시간 단축, 개발 생산성 향상Babel, Webpack 같은 도구들을 별도로 설치할 필요가 없습니다.프로젝트에 필요한 설정이 미리 적용되어 있고 패키지가 설치되어 있습니다.단점빌드 설정을 커스터마이징하기 어려움리액트 앱 구조에 대해 이해하기 어려울 수 있음원..

1. React란 무엇인가? React (ReactJS)는 Facebook에서 개발한 오픈 소스 JavaScript 라이브러리 원저자 : Jordan Walke 개발자 : 페이스북 및 공동체 저장소 : https://github.com/facebook/react 프로그래밍 언어 : javascript 종류 : 자바스크립트 라이브러리 웹사이트 : https://react.dev/ 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 자주 사용되는 기능을 정리해 모아 놓은 것 UI 라이브러리 웹사이트를 만들기 위해서는 HTML, CSS, JS를 모두 잘 다뤄야 하는데, 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 리액트이다. 2. React의 장점 빠른 업데이트와 렌더링 속도 컴..

나만의 도메인을 붙여주면 더 멋진 포폴이 될 수 있습니다. 가비아에서 구매한 도메인을 github에 붙여보도록 할께요. 도메인 연결하기 github의 블로그에 저의 https://oddodd.io/ 도메인을 연결하려고 합니다. 도메인 연결 전 가비아 등 도메인 구매 업체에서 DNS 설정 변경해야 합니다. DNS 관리 https://dns.gabia.com/ [홈 > DNS 관리 > DNS 설정 > 레코드 수정 > 레코드 추가] CNAME의 값/위치를 입력할 때는 마직막에 .(점)을 입력한다. 타입 호스트 값/위 TTL CNAME @ 깃헙아이디.github.io. 600 CNAME www 깃헙아이디.github.io. 600 도메인 연결 .github.io > Settings > Pages > Custom..

오늘은 Jekyll을 사용하여 GitHub에서 포트폴리오 만들기에 대해 포스팅 해보겠습니다. 최근 대기업에서 채용시 GitHub 포트폴리오 제출이라는 문구가 많이 보입니다. GitHub은 버전관리 및 협업 툴로 사용하지 못하면 업무가 어렵기 때문입니다. ㅜㅜ 해서 포트폴리오 사이트도 GitHub에 만들면 프로젝트 업로드 및 관리가 쉽기 때문에 GitHub 블로그를 만들어 포트폴리오로 활용해봅시다. 그럼 간단하게 GitHub이 무엇인지 알아보고 포트폴리오 만드는 방법을 알아보겠습니다. GitHub 이란? 여러 개발자가 협업하여 소프트웨어를 개발 소스 코드를 호스팅하고 버전 관리 소프트웨어 프로젝트 관리, 공유 https://github.com/ Jekyll Theme Jekyll 테마란 Jekyll 웹사이..

클래스 (class) Class는 객체를 만들기 위한 템플릿이며, 프로토타입 기반 상속을 보다 명시적이고 간편하게 사용할 수 있도록 해줍니다. class를 통해 원하는 구조의 객체 틀을 짜놓고, 비슷한 모양의 객체를 여러개 만들 수 있습니다. 클래스=붕어빵 틀, 객체=붕어빵 0. 클래스의 개념 "커피숍"을 운영한다고 가정하고, 커피숍에서 판매하는 다양한 종류의 커피를 클래스를 사용하여 모델링해 보겠습니다. - 클래스를 사용하지 않은 경우 // 생성자 함수를 사용하여 커피 객체를 생성 function OrderCoffee(name, price, size) { // 커피의 속성 this.name = name this.price = price this.size = size } // 커피의 가격을 사이즈에 따라..

node.js 란? Chrome V8 Javascript 엔진으로 빌드된 JavaScript 런타임으로 자바스크립트를 브라우저 밖에서도 사용할 수 있게 해주는 런타임 환경이다. Chrome V8 Javascript 엔진 : 자바스크립트의 문법을 해석하고 동작시켜줄 수 있는 엔진 JavaScript 런타임 : 자바스크립트 언어가 동작하는 환경 쉽게 말해 node.js를 사용해 브라우저 및 컴퓨터를 제어할 수 있다. 프론트앤드가 node.js를 알아야 하는 이유 컴퓨터에서 제어하기 위한 용도는 아니지만 웹페이지를 개발하기 위한 도움을 받는 용도로 사용한다. html, css, js 만으로 웹사이트 개발을 할 순 있지만 그 과정이 약간 비효율적이다. 개발을 도와주는 여러가지 모듈들을 도움을 받으면 효율적으로 ..

#swiper #slide ​홈페이지에 빠지지 않는 슬라이드의 대모, 모든 이들이 사용하는 슬라이드인 swiper 슬라이드 에 대해 알아보자 ​ 아래 사이즈에 가면 사용방법과 데모를 볼 수 있다. https://swiperjs.com/ Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com ​ 1. Getting Started With Swiper ​ CDN HTML Slide 1 Slide 2 Slide 3 Slide 4 Slide 5 Slide ..

#github #readme #깃포트폴리오 #깃포폴 GitHub에 프로젝트를 올리고 README.md에 프로젝트에 대한 내용을 정리해둔다. 정리할 때 예쁘게 정리하면 더 좋을거 같은데... README도 예쁘게 꾸미는 것이 가능하다. 1. 리포지토리 만들기 리포지토리 이름은 본인의 아이디와 동일하게 만들면 ✨special✨ repository를 만들 수 있다. Repository name : 본인 아이디 Public 체크 Add a README file 체크 대표사진 삭제 사진 설명을 입력하세요. README 꾸미기 위해 방금 만든 리포지토리의 README 파일을 수정한다. 사진 삭제 사진 설명을 입력하세요. 1. README Header https://github.com/kyechan99/capsule..

웹디자인기능사 샘플소스 https://github.com/oodada/exam-webdesign 0. HTML 코딩 시 중요(★★★★★) 체크포인트 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 하며, HTML 유효성검사 (W3C validator)에서 오류(‘ERROR’)가 없도록 코딩하여야 한다. ※ HTML 유효성검사 서비스는 시험시 제공하지 않는다.(인터넷 사용불가) 주어진 자료(수험자 제공파일)를 활용하여 HTML 페이지를 제작한다. 웹페이지 코딩은 HTML5 기준 웹 표준을 준수하여야 한다. (시작시 html:5 emmet 사용) CSS, JS는 별도의 파일로 제작하여 링크로 연결한다. 상호작용이 필요한 모든 콘텐츠(로고, 메뉴, Slide, 공지사항, 갤러리 등)는 임시링크 (예:#)..