Languages

Fetch API란? HTTP의 GET, POST, PUT, DELETE같은 메소드를, 사용할 수 있도록 해주는 javascript API ( Promise 객체를 반환한다. ) Fetch 특징 1. fetch()로 부터 반환되는 Promise 객체는, HTTP error 상태를 reject 하지 않는다. ( HTTP Statue Code가 404나 500을 반환하더라도 ) 대신 ok 상태가 false인 resolve가 반환되며, 네트워크 장애나 요청이 완료되지 못한 상태에서 reject가 반환된다. 2. fetch()는 쿠키를 보내거나 받지 않는다. 사이트에서 사용자 세션을 유지 관리해야하는 경우, 인증되지 않는 요청이 발생 쿠키를 전송하기 위해서는 자격증명(credentials) 옵션을 반드시 설정해..

기본 Array 형식 // array 만들기 const array = [1, 2, 3, 4, 5] array.slice() // slice()로 특정 부분 자르기 array.slice(0,4) // 결과 : array = [1, 2, 3, 4] array.map() // map()으로 Arrap 요소 하나하나에 함수 적용하기 - 인덱스로 배열 순서 확인 가능 array.map((element, index) => { console.log(index, " : ", element) }) /* 결과 ( 콘솔창 ) 0 : 1 1 : 2 2 : 3 3 : 4 4 : 5 */

object-fit CSS의 object-fit 요소를 사용하면, 이미지를 내가 원하는 방식으로 쉽게 설정할 수 있다. ex ) height 100px, width 100px 옵션 기능 fill 설정된 너비와 높이에 꼭 맞게 늘리고 줄인다. contain 설정된 너비와 높이에 맞춰 비율을 유지하여 늘리고 줄인다. cover 설정된 너비와 높이중 더 작은 요소에 맞추고, 남는 부분은 자른다 ( 사진 가운데 정렬 ) none 이미지를 편집하지 않고, 설정된 만큼만 보여준다. ( 사진 왼쪽, 위쪽 정렬 ) scale-down none과 contain중에, 이미지가 더 작아지는 것을 선택한다. 사용방식 object-fit: cover;

// tsconfig.json { "compilerOptions": { // 옵션 형식으로 구성되어 있습니다. // "모듈 키": 모듈 값 /* 설명: 사용가능 옵션 (설명이 "~ 여부"인 경우 'true', 'false') */ /* 기본 옵션 */ // "incremental": true, /* 증분 컴파일 설정 여부 */ "target": "es5", /* 사용할 특정 ECMAScript 버전 설정: 'ES3' (기본), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 혹은 'ESNEXT'. */ "module": "commonjs", /* 모듈 불러오는 코드 방식 설정: 'none', 'commonjs', 'amd', 'sys..

HTML 헤드 부분에 태그로 넣어주기 CSS로 넣은 폰트 사용하기 body { font-family: 'Nanum Gothic' } CSS로 넣고, 바로 사용하기 @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap'); body { font-family: 'Nanum Gothic' }

Go 란? 구글에서 개발한 프로그래밍 언어 Go 설치하기 The Go Programming Language Download Go Binary distributions available for Linux, macOS, Windows, and more. // You can edit this code! // Click here and start typing. package main import "fmt" func main() { fmt.Println("Hello, 世界") } Hello, World! Conway's Game of Life Fibonacci golang.org Go의 특징과 필요성 한 가지 기능을 구현하기 위한 방법이 한 단개 밖에 없다. ( 코드의 획일화 ) - 배워야 할 것이 적다 - 다른..

1. Nullish Coalescing Operator ( 널리쉬 콜싱 오퍼레이터 ) function printMessage(text) { const data = text ?? "is Nothing"; console.log(data) } // text="View" 일때 View // text가 없을때 ( undefined ) is Nothing // text가 null 일때 is Nothing 2. Default Parameters ( 디폴트 파라미터 ) function printMessage(text = "is Nothing"){ console.log(text) } // text="View" 일때 View // text가 없을때 ( undefined ) is Nothing // text가 null 일때..

autocapitalize 란? auto ( 자동 ) capitalize ( 대문자로 쓰다 ) input 태그의 autocapitalize란? 사용자의 영어입력에 대하여, 자동으로 대문자로 바꾸어주는 기능을 켜고, 끌 수 있다.

목적에 맞게 HTML 태그 사용하면 좋은점 본인이 작성한 코드를 다시 봐야할때 ( ex : 디버깅 ), 원하는 부분을 더 쉽고 편하게 찾을 수 있어서, 빠른 업데이트가 가능하다. 1. header HTML문서나, 섹션 부분에 대한 헤더를 만들때 사용하는 태그 2.nav 메뉴를 만들때 사용하는 태그 ( 링크 모음 ) 3.main 사이트의 모든 내용을 담는 태그 4.section 전체적인 내용과 관련이 많은 콘텐츠를 만들때 사용하는 태그 5.article 전체적인 내용과는 관련이 적은 콘텐츠를 만들때 사용하는 태그 6. figure, figcaption 이미지를 설명하는 콘텐츠를 만들때 사용하는 태그 ( 형식으로 사용 ) 7. footer 사이트의 가장 밑에 있는 내용을 만들때 사용하는 태그 ( 일반적으로 ..