본문 바로가기

프로그래밍

 (37)
간단하게 정리하는 프론트엔드 빌드 시스템. javascript 는 es6이후로 많은 변화가 이루어졌는데, 현재 개발되는 대부분의 웹은 es6 이후의 코드로 작성이 되어있습니다. 그런데, 모든 브라우저가 es6 이후의 문법을 지원하는 것은 아닙니다. 대표적으로 internet explore는 es6이후의 핵심 기능인 promise를 이해하지 못합니다. Babel 이러한 문제를 해결 해 주는 것이 babel인데, babel은 es6이후의 js 코드 및 typescript, jsx를 활용한 코드를 모든 브라우저에서 동작 가능한 코드로 컴파일해주는 역할을 합니다. 즉, js -> js로 컴파일 해주는 역할입니다. polyfill poly-fill은 babel이 미처 해결하지 못한 문제들을 해결한다. babel은 es6이후의 코드를 es6이전의 코드로 문..
svelte default port 바꾸는 방법 svelte로 프로젝트 진행 중 맞닥뜨린 문제. svelte가 기본적으로 사용하는 port는 8080인데, 이미 사용중이다. cmd를 통해 확인해보니 무엇인가 이미 8080포트를 사용 하고 있다. 종료도 할 수없다. 이 포트를 사용하는 프로그램에 관한 문제는 나중에 해결하도록 하고, 원래의 목적인 svelte의 port 문제를 해결 하자. package.json 파일의 scripts를 다음과 같이 수정해주면 된다. 나는 3000번 포트를 사용하기로 했다.
[javascript] sort함수 sort 함수는 배열 내부의 값을 손쉽게 정렬 할 수 있다. const arr = [5,4,3,2,1] arr.sort() console.log(arr) //[ 1, 2, 3, 4, 5 ] 그런데, 아래의 코드를 보면 의도한 것과 다르게 정렬이 된 것을 볼 수 있다. const arr = [15,14,13,2,1,3,4,5,6] arr.sort() console.log(arr) //[ 1, 13, 14, 15, 2, 3, 4, 5, 6 ] 원인은 javascript 의 sort함수는 배열 안의 값을 유니코드에 기반해서 정렬하기 때문이다. 즉, 11 < 5로 비교가 된다. 1은 유니코드에서 49, 5는 53이기 때문에 해결 방법은 comapre function을 활용 하는 것 이다. const arr = ..
그동안 몰랐던 html5 1. -> header에 사용 하라고 header 테그가 있었다.. 2. 사과의 색은 빨갛고 맛은 달다 현재 문장이나 문맥에서 정의하는 용어를 나타내는 dfn이라는 테그도 있었다. 3. You can use CSS to style your HTML. 요소의 준말 또는 머리 글자를 나타내는 abbr 테그도 있었다. html, css 는 대충 하면 된다고 생각 했는데, 공부 할수록 공부할게 더 많아진다.
웹 브라우저의 저장소 session, local storage,cookie 웹 브라우저(클라이언트)에는 로컬 스토리지, 쿠키, 세선스토리지와 같은 다양한 저장소가 있습니다. web storage web storage란 해당 웹 사이트와 관련된 특정 데이터를 클라이언트의 웹 브라우저에 저장할 수 있도록 하는 기능. 기본적으로 key-value의 형태로 값을 저장하고 키를 기반으로 저장한 데이터를 조회 할 수 있습니다. web storage에는 두가지 형태의 저장소가 있습니다. session storage(임시 저장소) 브라우저가 열려 있는 동안 데이터가 저장되는 저장소 local storage(영구 저장소) 브라우저가 닫혀도 저장이 유지되는 저장소 session storage에는 유저의 로그인 정보를, local storage에는 로그인 없이 사용 가능한 장바구니, 관심 아이템 ..
svelte를 시작 해보자 svelte 학습을 위한 프로젝트로 배틀그라운드 전적 검색 사이트를 만들고 있습니다. https://github.com/dungong/pubg-web 한 3시간 정도 코딩을 진행 했는데, 이것저것 만져보느라 작업은 거의 진전이 없습니다. 흥미로웠던 점은 1) 테그의 value관리가 아주 쉽다는 것. react에서는 보통 input 테그의 value를 아래와 같은 형태로 관리하게 되는데, import {useState} from "react" const MyInput = () => { const [value,setValue] = useState("") return ( { setValue(e.target.value) })/> ) } 같은 기능을 svelte로 구현하면 아래와 같다. 훨씬 간편하다. 원래는 b..
javascipt 함수의 인터페이스 재미난 일을 찾다가 jotai라는 react 상태관리 오픈소스를 뜯어 보고 있는데, javascript에서 interface를 선언하는 방식을 새로 알게되어 공유 한다. javascript 에서는 아래와 같이 객체에 대한 인터페이스만 설정 할 수 있는 줄 알았다. interface function1 { foo: string } 그런데,, jotai를 뜯어보니 이처럼 신기하게 작성이 되어 있었다. export function atom( read: Read, write: Write ): WritableAtom // read-only derived atom export function atom(read: Read): Atom // invalid function in the first argument expor..
[알고리즘 기초] 알고리즘의 시간 복잡도 계산법 1) O(1) 입력 데이터의 양에 상관 없이 항상 일정한 실행 시간을 갖는 알고리즘 2) Olog2N 실행 시간은 입력 데이터의 수 (N)에 대하여 log2N으로 비례한다. 보통, 효율이 좋은 검색 알고리즘이 이와 같다. 3) O(N) 입력 데이터의 수와 시간 복잡도가 비례. 4) O(NlogN) 5) O(N^2) 이중 포문 도는 경우 6) O(N^3) 삼중 포문 7) O(2^n) 데이터 증가에 따라 2^n승 만큼 시간이 늘어남 * 거의 대부분의 경우에 반복의 중첩 수가 알고리즘 복잡도를 결정함

티스토리툴바