livlog

What Is Testing? So what is testing after all? Don't we test all the time when we just click around in our app? Well, this is testing, you are right. But it's manual testing. We test by clicking around. To some extent, this is a good thing to do. Actually, you will always be doing that because you want to experience your app on your own. But writing automated tests - and that is what this articl..

The goals 💪🏻What is "Performance"? ✌🏻Measuring & Analyzing Performance 👍🏻Optimization Ideas 👊🏻Further Resources insertAdjacentElement jsperf 서버 측 성능 최적화 이 강의 섹션에서는 JavaScript 성능에 대해 배웠습니다. 웹 사이트의 전반적인 성능이 중요한 것은 JavaScript만이 아닙니다. 다른 클라이언트 측 최적화(예: CSS, 이미지 => 참조: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency) 외에도 서버 측 성능을 개선시킬 수 있습니다. 서버 측(예: NodeJS)에서..

웹사이트의 다양한 유형 다양한 웹사이트/웹 애플리케이션을 구축할 수 있습니다. 구체적으로 구분되는 세 가지 주요 유형이 있습니다. (HTML + CSS + JS만 있는) 정적 웹사이트 단일 페이지 애플리케이션 (SPA, HTML + CSS + JS는 단 하나의 HTML 페이지만 제공되고 클라이언트 측 JS는 페이지를 동적으로 다시 렌더링하는 데 사용됩니다) 동적으로/서버 측에서 렌더링된 웹 애플리케이션. HTML 페이지가 서버에서 동적으로 생성되는 웹사이트(예: EJS와 같은 템플릿 엔진을 통해 만들어지는 웹사이트). 이 링크에서 더 자세한 비교를 볼 수 있습니다. https://academind.com/learn/web-dev/dynamic-vs-static-vs-spa/ 이러한 웹 사이트를 배포할 때..

The goals 💪🏻Potential Security Holes ✌🏻Protecting Your Code 👍🏻CORS, CSRF, XSS Attacks 👊🏻npm Packages Quiz 질문 1: 클라이언트 측(브라우저 측) 자바스크립트 코드에 저장해서는 안 되는 것은 무엇일까요? 일부 API 설정에서 접근을 제어할 수 있는 API용 API 키입니다. 데이터베이스에 대한 연결을 열기 위한 데이터베이스 자격 증명입니다. 백엔드 경로의 URL입니다. 질문 2: 잠재적인 XSS 시나리오는 무엇일까요? textContent를 통해 사용자 생성 콘텐츠(예: 필드에 사용자가 입력한 것)를 출력합니다. alert()를 통해 사용자 생성 콘텐츠(예: 필드에 사용자가 입력한 것)를 출력합니다. innerHTML을 통..

The goals 💪🏻What Exactly Is Node.js ✌🏻Writing Node.js Code 👍🏻Using Express.js 👊🏻Talking to a Database How to use File System const fs = require('fs'); fs.readFile('user-data.txt', (err, data) => { if (err) { console.log(err); return; } console.log(data.toString()); }); fs.writeFile('user-data.txt', 'username=Max', err => { if (err) { console.log(err); } else { console.log('Wrote to file!'); } })..

The goals 💪🏻What & How? What? Symbols Iterators & Generators Reflect API Proxy API Primitive values Create your own "loopable" values API to control objects Create "traps" for object operations Used as object property identifiers What arrays, string etc. use internally Standardiezed & grouped methods Step in and execute code Built-in & creatable by developers Control code usage / impact Uniquene..

The goals 💪🏻What is a "Framework"? ✌🏻Example: React.js import React, { useEffect, useRef } from 'react'; import './SelectedPlace.css'; const SelectedPlace = props => { const { centerCoords, fallbackText } = props; const mapEl = useRef(); useEffect(() => { if (centerCoords) { const map = new window.google.maps.Map(mapEl.current, { center: centerCoords, zoom: 16 }); new window.google.maps.Marker({..

The goals 💪🏻Practice What We've learned! Google Maps SDK export class Map { constructor(coords) { // this.coordinates = coords; this.render(coords); } render(coordinates) { if (!google) { alert('Could not load maps library - please try again later!'); return; } const map = new google.maps.Map(document.getElementById('map'), { center:coordinates, zoom: 16 }); new google.maps.Marker({ position: co..

The goals 💪🏻What is "Browser Support" About? ✌🏻Determining Required Support 👍🏻Finding Out Which Feature Works Where 👊🏻Polyfills 🤟🏻Transpilation Babel - ES6/7 코드를 ES5 코드로 Transpiling 해주는 Transpiler - ES5 이전까지는 표준이 없었고, jquery 가 브라우저 호환성을 해결해줄 수 있기 때문에 필요 없었음 - Babel 은 스크립트 자체가 수정되어야 하는 상황으로 새로운 컴파일이 필요할 때 사용함 - 자바스크립트 스펙으로 아직 확정되지 않은 Proposal 스펙이 5개의 Stage 로 구분되어 존재하는데, Babel 은 각각의 Stage 에 대해 Pre..

The goals 💪🏻What & Why? Difference Between Local Storage, Session Storage And Cookies Local Storage Session Storage Cookies The storage capacity of local storage is 5MB/10MB The storage capacity of session storage is 5MB The storage capacity of Cookies is 4KB As it is not session-based, it must be deleted via javascript or manually It’s session-based and works per window or tab. This means that ..