본문 바로가기

Front-End: Web

 (163)
[제로초] ReactJS Chpater 1. 리액트 시작하기 1. 리액트를 왜 쓰는가 React의 미래 현재 한국에선 React.js가 Vue.js보단 대세! 앞으로 10년 정도는 더 사용될 것 React 사용하는 이유 Single Page Application(SPA) 전통적인 웹은 Multiple Page Application(MPA). 문서같은 페이지(공식문서)는 React를 사용할 필요없이 MPA로 만들면 됨. 이전에는 JQuery, JSP로 백엔드 개발자가 프론트엔드를 함께 개발했는데, 현재는 프론트에 다양한 기능들이 추가되면서 프론트엔드 개발자가 추가되었음. 지메일 ➡️ 첫 웹 애플리케이션. 웹 사이트가 아니라 하나의 애플리케이션이라는 느낌. 웹에서 사이트 뿐만 아니라 다양한 애플리케이션(워드, 파워포인트, ... 등 사용 가능)이 나옴 전통적인 웹보다..
[코딩애플] js part 3-13. Optional Chanining(?.) / Nullish Coalescing (??) 신문법) ?. / ?? 연산자 (optional chaining) 자바스크립트에서 여러 문자, 숫자를 한 변수에 저장하고 싶다면, Object. var user = { name: 'kim', age: 20 }; 꺼내 쓰려면, user.name; // 'kim' use.age; // 20; ?. (optional chaning 연산자) 왼쪽에 있는 자료가 비어있으면, 오른쪽을 실행해주지 않는다. 즉, ?. 왼쪽이 null, undefined면 점안찍어주고 undefined 남겨준다. 언제쓰나? 중첩된 object 자료에서 자료뽑을 때 reference 에러 없이 안전하게 뽑을 수 있음 예로 들어보자. 중첩된 object를 만들어보자. var user = { name: 'kim', age: {value: 2..
[코딩애플] js part 3-12. class로 만들어보는 2D 게임 class로 만들어보는 간단한 2D 게임 (배웠으면 써먹어야하니까) 자바스크립트만으로도 간단한 게임을 만들 수 있다. HTMl, CSS, JS만으로 만든 게임 중 해볼만한 명작: candy box, Synergism 우리는 크롬 공룡 게임을 만들어 보자. 게임 개발 원리와 구현 방법 화면에 네모, 원 그릴 수 있어야 함 (네모 위에 공룡, 선인장 등 그림을 입힘) -> 태그를 이용하면 자바스크립트로 간단하게 네모를 그릴 수 있다. 프레임마다 코드실행 가능해야 (애니메이션을 위해) 예로 들어서 공룡이 방향키를 누르면 60px 이동해야 한다. 근데 순간이동하면 안되겠지. 서서히 60px로 이동시켜야 한다. 그러면 1초에 60번 정도 +1px 해주면 된다. 그래서 1초에 60번 움직이도록 자바스크립트 코드를 ..
[코딩애플] js part 3-11. shadow DOM과 template으로 HTML 모듈화하기 shadow DOM과 template으로 HTML 모듈화하기 shadow DOM이란? 가끔 보면 복잡한 HTML 태그가 있는데, 이렇게 작성하면 두세 개로 만들어진 것 같은(실은 맞음) range input이 뜬다. 이게 어떻게 가능할까? shadow DOM 덕분이다. 이게 div 태그가 맞는지 확인해보자. ![](.\images\01.png) 확인하고 싶다면 개발자 도구에 설정 > Preferences > Elements > 'Show user agent shadow DOM' 옵션을 체크한다. 그러면 이제 input 태그를 까볼 수 있다. 이제 다시 보면, ![](.\images\02.png) div 3개로 이뤄진 걸 확인할 수 있다. 어떻게 숨길 수 있었을까! 이처럼 태그 하나를 써서 태그 세 개가 ..
[코딩애플] js part 3-10. Web Components: 커스텀 HTML 태그 만들기 Web Components: 커스텀 HTML 태그 만들기 HTML을 쓰다보면 자주 출몰하는 덩어리들이 있다. 이걸 한 단어로 축약하고 싶은 충동이 든다. 이때 커스텀 태그로 치환할 수 있다. Web Components 자바스크립트 문법으로 구현할 수 있는 **브라우저 기본 기능**임 [상식] 웹개발 잘하고 싶으면 브라우저 기능을 잘 알아야한다. 자바스크립트 문법은 도구일 뿐이다. 로 길고 복잡한 HTML 축약하는 법 과 태그를 으로 축약해보자. ➡️ 이렇게 쓰면 label과 input이 나옴 **connectedCallback()** : 우리가 만든 태그가 HTML에 장착될 때 실행할 코드 적는 곳. 정해진 함수명임. **this.innerHTML** : 새로 생성될 요소 HTML 생성하는 다른 방법 t..
[코딩애플] js part 3-9. Map, Set 자료형 매우 짧게 알아보는 Map, Set 자료형 ES6부터 추가된 신자료형. Map 자료형: key, value를 저장 ⭐[목적] Map 자료형은 자료간의 연관성을 표현하기 위해 쓴다. Object와 비슷하게 key, value를 저장하는데, 담는 형태가 다르다. 콜론(:)이 아니라 화살표(=>)로 담긴다. var person = new Map(); person.set('name', 'Kim'); person.set('age', 20); person; // Map {"name" => "Kim", "age" => 20} name은 Kim과, age는 20과 연관이 되어 있다는 걸 나타낸다. Object 자료형은 자료 이름으로 글자(string)만 가능했지만, Map 자료형은 다 가능하다. 숫자, array, ...
[코딩애플] js part 3-8. Symbol 자료형 Symbol 자료형은 쓸모없어보이는데 왜 있는거죠 쓸데없는 Symbol ES6부터 추가된 자료형 그렇게 실용성있진 않음 사용법 var 심볼 = Symbol('설명'); 용도 1. Object 자료형의 비밀스런 key값 object를 하나 만들어보자. var person = { name : 'Kim'}; 근데 만약 밖에 공개하기 싫은 비밀스런 데이터(weight)를 저장하고 싶다면? 일반적이면 이렇게 저장하겠지만 person.weight = 100; person; // {name: 'Kim', weight: 100} Symbol을 이용해서 비밀스런 데이터를 저장해보자. **원래 Object의 key값에는 string만 가능했는데, 이제 Symbol도 넣을 수 있다.** var weight = Symbol(..
[코딩애플] js part 3-7. for in / for of 반복문과 enumerable, iterable 속성 for in / for of 반복문과 enumerable, iterable 속성 반복문 코드 여러번 실행할 때 Array, Object에서 자료를 꺼내쓸 때(2,3,4) 1. 그냥 for 반복문(어려움) for (var i = 0; i < 3; i++){ } 2. forEach() 반복문 (Array 전용) [1,2,3].forEach(); 3. for in 반복문 (Object 전용) object에 있던 값을 전부 하나씩 꺼내서 사용할 때 사용 사용법 var 오브젝트 = { name: 'Kim', age: 30}; for (var key in 오브젝트){ console.log(오브젝트[key]); } // Kim // 30 특징 1. enumerable 한 것만 반복해준다. 이 오브젝트에는 'Kim'말..
반응형

티스토리툴바