Gatsby가 무엇인지 알기 전에 먼저 JAM Stack이 무엇인지 알아야 한다 JAM Stack이란?더 빠르고 안전하고 확장하기 쉬운 웹페이지를 만들기 위해 디자인된 아키텍쳐 JavsScriptAPIMarkup의 약자로, 어떤 기술을 사용하는지 이름에서 명시되어 있다 기존 웹사이트의 방식은서버/데이터베이스에서 데이터를 가져와 프론트엔드에 뿌려주는 방식으로 절차가 길어 복잡 반면, JAM Stack을 이용한 방식은 절차가 매우 간단빠르게 만든 정적 웹사이트를 CDN을 통해 빠르게 구현JAM Stack의 장점1. 기존 방식에 비해 더 빠르게 웹 사이트 제공- pre-render 방식으로 시간 단축- CDN을 통한 제공=> 브라우저에서 첫 응답을 받기까지 걸리는 시간인 TTFB(Time to First By..

Gatsby 프레임워크를 사용하면 정적 페이지를 빠르고 간편하게 만들 수 있다고 들은 적이 있다. 나도 나만의 웹사이트를 쉽고 빠르게 만들어보자 인프런 강의 시작~

타겟 이미지 내 코드 아웃풋 결과 Score: 689.58 {157}, 100% match 정리 기본적인 것만 써도 157 byte인데, 1등은 54byte이다.. 가독성을 일체 배제하고 작성하여야 하는 듯 하다 주석도 코드 길이에 포함되기 때문에, 주석을 지우고 제출해야한다 이번 문제는 user agent를 제거해 주는 것을 확인하는 문제인듯 하다

https://cssbattle.dev/ CSSBattle CSS Code Golfing Game is here! cssbattle.dev CSS Battle 이란? - HTML/CSS로 주어진 이미지를 구현 - 가능한 최소한의 코드로 작성 - 코드를 작성하고 제출하면 순위를 확인할 수 있다 - JS로 작성하거나, 코드에 이미지를 포함하면 안된다 무료 버전으로는 서비스의 모든것을 이용할 수 없다. 우선 하나씩 시작해서 CSS를 재밌게 숙달해보자 #1 pilot battle 부터 시작~

객체 타입 TypeScript 에서 객체를 만들고 const person = { name: 'john', age: 30 } person에 커서를 올리면 아래처럼 TypeScript가 타입을 추론한 결과가 나온다 각 항목이 콤마가 아닌 세미콜론으로 구분됨에 주의한다 const person: { name: string; age: number; } 또한 객체에도 : object 또는 : {}를 붙여 타입을 확실하게 명시해줄 수도 있다 또는 아예 키 : 타입 쌍을 추가하여 정확하게 지정할 수도 있다 // app.ts const person: { name: string; age: number; } = { name: 'john', age: 30 } console.log(person.name); JavaScript에..

TypeScript는? TypeScript는 언어이면서 도구(컴파일러)이다 TypeScript 코드를 JavaScript 코드로 변환해주는 강력한 컴파일러 도구 : 변수 선언문 끝에 !를 붙이면 이것이 절대 null 이 되면 안된다는 것을 typescript에게 알려줌 JS 와 TS 간 공유되는 타입 - number (integer / float 등의 구분은 없음 -> 5 나 5.0이나 똑같음) - string - boolean 컴파일 해보기 app.ts 파일과 app.js 파일을 같은 위치에 만들고, tsc app.ts 명령어를 사용하면 TypeScript로 작성된 app.ts 가 JavaScript 코드로 작성된 app.js로 컴파일된다. // app.ts function add(n1, n2) { r..

출처 - 리액트를 다루는 기술(김민준 지음) 이벤트란? 사용자가 웹 브라우저에서 DOM 요소들과 상호작용 하는 것 예) 버튼에 마우스 커서 올렸을 때 -> onmouseover 이벤트 클릭했을 때 -> onclic 이벤트 Form 요소의 값이 바뀔 때 -> onchange 이벤트 리액트에서의 이벤트 시스템 1. 이벤트 이름은 카멜 표기법을 사용한다 HTML은 onclick 이지만 리액트는 onClick HTML은 onkeyup 이지만 리액트는 onKeyUp 2. 이벤트에 함수 형태의 값을 전달 HTML에서 이벤트를 설정할 때는 큰따옴표 안에 실행할 코드를 넣었지만 리액트에서는 함수 형태의 객체를 전달 즉, 중괄호 안에 함수명만 넣음 -> () 안붙임 예시 import React, { useState } ..

📍문제 링크 https://school.programmers.co.kr/learn/courses/30/lessons/136798 📍알고리즘 분류 - 수학 - 구현 📍문제 풀이 1 ~ N까지 각 자연수의 모든 약수의 갯수를 빠르게 구하는 문제 약수의 갯수를 빠르게 구하려면, 제곱근을 사용하면 된다 예를 들어, 100의 약수를 구한다고 생각해보면, 100의 제곱근은 10이다. 전체 약수는 1, 2, 4, 5, 10, 20, 25, 50, 100 인데 1, 2, 4, 5, 10 까지만 구해도 나머지 약수를 계산할 수 있다 이를 잘 구현하면 된다 📍코드 (JavaScript) function solution(number, limit, power) { const answer = [1]; // 1의 약수는 1이므로..