본문 바로가기

프로그래밍/javascript

 (10)
[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 = ..
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..
begining functional javascript 8장ㅇ=0 함수자 우선 알아야 할 것 . static 과 heap static 메소드는 메모리의 static 영역에 생성된다. -> 한번 할당이 되면 프로그램이 종료 될 때 까지 메모리에 남아 있는다. heap 영역에 할당 된 것들은 사용이 종료되면 gc (Garbage Collector) 에 의해서 메모리에서 지워지게 된다. 약 3년간 학교 와 회사에서 프로그래밍을 하면서 함수자 라는 단어는 처음 들어봤다. 책에 따르면 함수자는 순수하게 함수형 방법으로 에러를 다룰 수 있도록 하는 것 이라는데 .. 확 와닿지는 않는다. 겉으로만 봐서는 그냥 클래스 안에 함수 추가하는거랑 다를게 없어 보이는데... 조금 더 공부가 필요하다
javascript의 this 그리고 [call,bind,apply] 함수 자바스크립트의 this는 python의 self 나 c#의 this와는 조금 다른 개념으로 사용된다. 보통의 프로그래밍 언어에서 this는 class에서 현재 인스턴스를 지칭하는데 사용되는것에 반해, javascript에 this의 값은 함수를 호출한 방법 및 환경에 따라 결정된다. *실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있다. ??? function f1() { return this; } // 브라우저 f1() === window; // true // Node.js f1() === global; // true 기본적으로 this = global 즉, 아래와 같다. // 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당 var a = 'Global'; functio..
begining functional javascript 4장 클로저 *begining functional javascript -(에이콘 출판사)를 읽고 공부한 내용을 바탕으로 작성한 글입니다. 자바스크립트에서 클로저(closure)란 함수 안의 함수이다. 아래의 outer 함수와 같은 형태가 바로 클로저이다. const outer = () => { const inner = () => {} return inner } 이러한 형태의 함수 이름이 closure인 이유는 함수가 처음 실행 될 당시의 스코프를 포섭(closure)하여 이후에 실행할때 이용하기 때문이다. const outer = (num) => { const inner = (num) => {console.log(num)} return inner } const example = outer(4) example() 위의..
begining functional javascript functional javascript 함수형 프로그래밍 원칙 항상성 => y = ax +b 하나의 x에 대해서 같은 y값이 보장되어야 한다. 순수 함수 => 함수 안에서 모든 변수(상수x)는 인자로 받아야 한다. 항상성의 원칙을 지키기 위해서 --> 결국 수학의 함수 개념과 똑같다 2장은 함수의 사용법과 es6에 관하여 기본적인 내용들이라 크게 생각나는 내용이 없네요.. 함수의 정의와 es7의 함수, 기존의 함수의 차이점에 관한 내용들 이었습니다 3장은 고차 함수와 추상화에 관하여 고차함수란 함수를 인자로 받거나 함수를 리턴할 수 있는 함수를 일급 객체로 취급한다고 하고, 이를 *이 장에서 새로 알게된 것 if (0){ //js 에서 if (0)
[react] clean-up function에 대한 이해 리액트의 hooks 인 useEffect 에는 clean-up Function 이라는 기능이 있습니다. 이에 관해 햇갈리는 분들이 많은 것 같아 한 번 정리해 보았습니다. 1) useEffect 는 기존 class형 컴포넌트의 componentDidMount 와 유사한 기능을 하고 clean-up Function은 componentDidUnMount와 유사한 기능을 합니다. 다음은 useEffect와 clean-up function 예시입니다. 예시) https://codepen.io/leeyh-kor/pen/NWvdOxW?editors=1111 NWvdOxW ... codepen.io useEffect 는 총 두개의 인자를 전달 받습니다. useEffect(()=>{이 함수를 실행},[이 값이 변경되면..

티스토리툴바