본문 바로가기

Front-end

(97)
02.Typescript : creating-classes
flexbox 연습 사이트 https://flexboxfroggy.com/
CSS selector 연습 사이트 https://flukeout.github.io/
Print# LandingPage Project Preview : 사이트 방문 : https://hopeful-bartik-7f11bd.netlify.app/# 개발목표 : 인쇄소 홈페이지를 의뢰받아 제작한다는 컨셉으로 구현하였습니다. 지금까지 공부한 HTML, CSS, Javascript를 사용하여 이해도를 높이고 실제로 웹페이지 제작시 어떻게 사용되는지를 익히는데 집중하였습니다. 대부분의 코드에 주석을 달아 다시 코드를 참고할 수 있도록 하였고 새롭게 배운 내용은 블로그에 기록하였습니다. 구현기간 : 2021-05-10 ~ 2021-05-24 Skills : HTML, CSS ( SCSS ), JavaScript 배포 : Netlify 시연영상 : https://youtu.be/uxzyqD7RBCc Code : https://github.com/b..
자바스크립트 Tutorial By Ellie (3) Javascript를 배우고나면 Typescipt를 꼭 배워라! 5. Arrow Function은 무엇인가? 함수의 선언과 표현 // Function // - fundemental building block in the program // - subprogram can be used multiple times // - performs a task or calculates a value // 1. Function declaration // function name(param1, param2) { body ... return; } // one function === one thing // namin: doSomethingg, command, verb // e.g. createCardAndPoint -> cr..
자바스크립트 Tutorial By Ellie (2) 자바스크립트 4. 코딩의 기본 operator, if, for loop 코드리뷰 팁 // 1. String concatenation console.log('my' + 'cat'); console.log('1' + 2); console.log(`string literals: 1 + 2 = ${1+2}`) ////////////////////////////////////////////////////////////////////////////////// // 2. Numeric operators console.log(1 + 1); //add console.log(1 - 1); // substract console.log(1 / 1); // divide console.log(1 * 1); // multply c..
자바스크립트 Tutorial By Ellie (1) script async 와 defer의 차이점 DOM을 따라 반드시 순서대로 실행되어야 한다면 DOM이나 다른 스크립트에 의존성이 없고, 실행 순서가 중요하지 않은 경우라면 DOM이나 다른 스크립트에 의존성이 있고, 실행 순서가 중요한 경우라면 'use stric' "올바르지 않은 문법" 을 사전에 검출할 수 있다. 수업내용 // 1. Use stric 'use stric'; ////////////////////////////////////////////////////////////////////////////////// // 2. Variable 변수 // let (added in ES6) let golbalName = 'global name'; { let name = 'jace'; console.lo..
React Portfolio Project https://khhomepage.ml/ 요구사항 : Landing Page, 자기소개, 취미, 웹 개발자로써의 목표 4가지 페이지를 포함하여 개인 홈페이지를 제작 구현기간 : 2021-02-24 ~ 2021-03-19 Skills : HTML, CSS, JavaScript, React 배포 : Netlify 시연영상 : https://youtu.be/DuhIKl-6hTw Code : https://github.com/bellcastle88/ReactPortfolioProject