study

패스트캠퍼스 챌린지 8일차

문자열을 활용한 HTML 다루기 UI의 복잡해짐에 따라 (디자인, 기능 등 추가) 마크업 구조가 더 복잡해지는데 현재 코드의 문제점 등을 개선한다. DOM API의 문제점: HTML의 구조와 코드를 보고 서로의 구조를 명확히 알기 힘들다. DOM API를 최대한 사용하지 말자. const container = document.querySelector('#root'); const ajax = new XMLHttpRequest(); const content = document.createElement('div'); const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json' const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@i..

2022. 1. 31. 13:00

study

패스트캠퍼스 챌린지 7일차

두개의 화면을 가진 웹 앱 SPA = 하나의 어플리케이션이 여러개의 화면을 가지고 화면을 전환하면서 보여주는 방식 (라우팅) const container = document.querySelector('#root'); const ajax = new XMLHttpRequest(); const content = document.createElement('div'); const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json' const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json'; ajax.open('GET', NEWS_URL, false); // method, Url, async ajax.send(); const n..

2022. 1. 30. 23:37

study

패스트캠퍼스 챌린지 6일차

parcel 번들러를 이용한다. npm install parcel - 기본 html 구조 번들링 작업을 하게되면 dist 폴더안에 app.xxxx.js 형태로 파일이 생성된다 >parcel index.html parcel 번들러를 이용해서 번들링 작업을 한다. 서버에서 데이터를 가져오는 도구 = ajax const ajax = new XMLHttpRequest(); // ajax const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json' ajax.open('GET', NEWS_URL, false); // method, Url, async ajax.send(); const newsFeed = JSON.parse(ajax.response); // JSON을 Objec..

2022. 1. 29. 14:50

study

패스트캠퍼스 챌린지 5일차

Node.js & npm node.js = V8엔진 (JavaScript를 브라우저 외에 다른 환경에서 실행 시킬 수 있다) npm = 어떤 기능을 하는 소프트웨어를 설치하고 사용할 수 있게 해준다 https://www.npmjs.com/ npm Bring the best of open source to you, your team, and your company Relied upon by more than 11 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the center of Java www..

2022. 1. 28. 09:24

study

패스트캠퍼스 챌린지 4일차

JavaScript & TypeScript JavaScript는 초기 HTML을 조작하는 언어로써 처음엔 보잘것 없었지만 웹이 빠르게 발전하고 변화함에 따라 같이 유명해지고 변화에 발 맞춰 살아남았다고 볼 수도 있다. 결론적으로 지금은 여러방면으로 사용하는 언어가 되었는데 TypeScript는 왜 나왔을까 ? TypeScript는 JavaScript의 슈퍼셋이다. TypeScript는 JavaScript가 지원하는 모든 기능을 지원하기 때문인데 왜 그런 방향으로 갔을까 ? 프로그래밍 언어의 좋고 나쁨을 떠나서 현재 웹에서 JavaScript는 유일한 언어이고 그렇기 때문에 JavaScript를 대신한다라는 개념보다 공생하는 개념이 훨씬 전략적으로 좋을 것이라 생각한다. TypeScript가 JavaScr..

2022. 1. 27. 19:42

study

패스트캠퍼스 챌린지 3일차

모던 자바스크립트와 개발 환경 Node.js와 NPM의 등장으로 인해 FE의 개발환경은 급변했다. 프론트엔드 개발 환경이 복잡할 수 밖에 없는 이유 ? :웹 앱의 규모가 굉장히 커지고 복잡해짐 JavaScript의 디자인은 단순히 HTML을 조작하기 위한 언어였지만 ES2015부터 모듈 스펙을 지원하기 시작한다. 모듈 스펙은 파일과 파일간의 어떤 기능을 사용하기 위해 어떤 파일의 기능을 해당 파일로 불러들여서 사용하는 것을 말한다. (import export) 모듈 스펙을 사용하는 경우는 예를들어 JavaScript를 사용하기 위해선 HTML 파일의 태그를 사용하여 로딩하는데 js파일의 갯수가 대량이 되어버리면 스크립트 태그를 그 만큼 작성해야 한다. 때문에 운영하는데도 불편하고 또 문제점이 생길수 있다..

2022. 1. 26. 09:38