Javascript50 JS require와 import의 차이? 자바스크립트를 공부한지 어연 2개월 째... 근본없는 언어란 참으로 매력적이면서 난감하다... 뭔가 다양한 듯 싶으면서도 버전마다 바뀌는 문법을 보며, 역시 no 근본..! 을 외치게 된다. 모듈을 옮겨오는 require와 import를 바라보며 필자는 동일한 감정을 느끼게 된다. The difference between require and import 두 메소드의 차이는 위의 사진으로 한방에 정리된다. 여기서 CommonJS는 nodeJS라고 생각하면 된다. 즉 require메소드는 CommonJS에서 모듈을 들고올 때 사용하는 메소드이고 import메소드는 ES6문법에서 모듈을 들고올 때 사용하는 메소드라는 차이점이 있다. Require CommonJS 문법 원하는 부분만 따로 떼어 들고올 수 없다.. 2021. 12. 3. JS JSON 오늘 코딩을 하면서 자꾸 오류가 발생하고, 테스트 코드를 통과하지 못해 너무너무너무 화가 끝까지 차올랐다가 JSON값을 객체로 변환하지 않고 사용했음을 알고 조울증 환자처럼 갑자기 너무 기뻐서 치킨을 시켰다. 오늘은 JSON에 대해 알아보자. JSON 기본 개념 JSON의 기본적인 개념은 사실 인터넷에 잘 나와있다. JSON은 일종의 컴퓨터 세계관의 English와 같은 표기법이다. 컴퓨터와 컴퓨터끼리 사용하는 언어가 다르면 데이터를 주고받을 때 의사소통에 문제가 발생하게 되는데, 이를 공통적인 규칙을 만들어 공유함으로서 그 문제를 해결하고 있다. 이전에는 XML이라는 마크업 랭귀지를 사용했지만 요즘은 JSON이 일반적으로 사용되고 있다. JSON의 또 다른 특징은 자바스크립트의 Object와 생김새가 .. 2021. 11. 16. JS 약식 분기문에 의한 값 할당 방법 let _start = start || 0 오늘 연습문제를 보다가 이런 요상한 선언 & 할당문을 보게 되었다. 도대체 요녀석은 어떻게 이해를 하면 좋을까? 위와 같은 방식의 할당문을 약식 분기문에 의한 값 할당법이라고 부른다. 위와 같은 방식에는 || 혹은 && 오퍼레이터를 이용하는데, 이는 값이 truthy 한지 falsy 한지를 판별해 변수에 의도하는 값을 할당하기 위함이다. 예제를 통해 알아보자. let _start = start || 0 만약 start의 값이 falsy한 값이라면 _start에는 start의 값이 들어가게 된다. 이때 falsy 한 값임에 유의해야 한다. 즉 start가 false / 0 / '' 등의 값을 가진다면, false로 인정하고 || 등호 뒷편의 0이 _start에 할.. 2021. 11. 16. JS Operator "!!" & "^=" 오늘 코플릿 문제를 풀다가 요상한 연산자를 발견하였다. !! ^= 바로 알아보도록 하자. Not Not 연산자 (!!) Not연산자는 흔히 사용하는데 도대체 Not Not은 뭐지? 스택오버플로우에 따르면 Not Not 연산자는 아래와 같다. Converts Object to boolean. If it was falsey (e.g. 0, null, undefined, etc.), it will be false, otherwise, true. Not Not 연산자는 객체를 불리안 값으로 전환할 때 사용한다고 한다. 즉 Falsey한 null이나 0 등에 not not을 붙이면 False가 반환되는 것이다! !oObject // inverted boolean !!oObject // non inverted bo.. 2021. 11. 12. JS Linked-list & Hash table 오늘은 자료형의 두 가지 유형 Linked-list와 Hash table에 대해 알아보자 Linked-list In computer science, a linked list is a linear collection of data elements whose order is not given by their physical placement in memory. Instead, each element points to the next. 위키피디아에서는 linked-list를 위와 같이 설명하고 있다. 해석하자면, 링크드 리스트는 데이터요소의 일련의 집합이며 메모리상 물리적 공간에서 물리적으로 순서가 정해져있지는 않다. 대신 각 요소들은 다음 데이터요소를 가르킨다. 무슨 말일까? 아래 그림을 보면 이해가 수월해.. 2021. 11. 11. JS 매개변수 기본 값 설정하기 오늘 재귀함수 코드를 살펴보다가 이상한 표현을 발견했다. (가위바위보의 경우의 수를 계산하는 알고리즘이다.) const rockPaperScissors = (rounds) => { //if rounds is 0 we will return an empty array if(rounds === 0) return [] // define a throw options array for each play we could make // "R" represents "Rock", "P" represents "Paper", "S" represents "Scissors" const throwOptions = ["R", "P", "S"] // define a solutions array to hold all of our pos.. 2021. 11. 10. JS Tail recursion 오늘은 재귀함수의 활용 방법중 하나인 Tail Recursion에 대해 알아보자 Tail Recursion Tail recursion is a type of recursive function when the last thing executed is a recursive call. Tail recursion은 사실 그렇게 큰 의미를 가지는 용어는 아니다. 단순히 꼬리부분에서 재귀함수가 호출되는 형태를 말한다. 연습문제를 풀 때 head tail로 나누어 푸는 방식이라고 보면 된다. 따라서 꼬리부분에서 재귀함수가 호출되어 계산값이 반복해서 중첩되는 경우라면 Tail Recursion을 사용한 케이스라고 볼 수 있다. 그렇다면 Tail Recursion의 장점은 무엇일까? This type requires f.. 2021. 11. 10. JS Recursion memory leak 재귀함수를 연습하다 보면 가끔 이상한 코드를 작성해서 동작하면 스택을 초과했다는 경고메세지가 나오면서 작동이 중지되는 경험을 다들 한번씩은 해 보았을 것이다. 이것은 재귀함수를 실행하면서 재귀깊이(Recursion Depth)를 초과하는 상황이 발생했기 때문이다. 정확히는 Memory Leak가 발생하면서 execution context stack에 저장되는 중첩호출이 허용량을 넘겨버린 것이다. 오늘은 Memory Leak가 어떤것인지 한번 알아보자 Memory Leak A Memory leak can be defined as a piece of memory that is no longer being used or required by an application but for some reason is .. 2021. 11. 10. JS this 바인딩 오늘은 Javascript의 객체 지향에 대해 공부 했다. 객체 지향을 공부하면서 본격적으로 'this'를 사용하기 시작했는데, 금일 설명중에 아래와 같은 설명이 있었다. 메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않습니다. 왜 메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않는 것일까? 이유는 바로 this의 바인딩 이슈 때문이다. This this에 대한 설명은 아래와 같다. Technically, JavaScript this refers to the object that the function belongs to. And the value of this depends on how the function is called, something known as runtime bindin.. 2021. 11. 8. JS Array.prototype.sort() 오늘 문제를 푸는 와중에 객체로 이루어진 배열을 크기에 따라 배열로 나열해야하는 작업이 필요했다. if 문을 남발하면 뭔가 될 것 같기도 했지만... 이제는 코딩을 시작한지도 좀 되었으니 더 깔끔한 방법이 있을까 찾아보니 Array.prototype.sort()라는 메소드가 있었다. 오늘은 sort메소드에 대해 알아보자. 사실 이전에 몇번 sort 메소드를 사용해 본적은 있었다. const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); 위와 같이 배열을 sort하면 알아서 크기에 맞춰서 배열의 순서가 바뀐다. 객체로 이루어진 배열의 크기를 비교할 때는 sort안에 argument값을 아래와 같이 넣어주면 된다. var items = [ { name: .. 2021. 11. 5. JS Import 무지성으로 import를 남발하던 어느날... 문득 궁금해 졌다. 왜 어떤 import는 { }를 섞어서 쓰는 걸까?! 오늘은 그 이유를 알아보자. import {Something} from somelib 우선 Curly Bracket은 라이브러리 내에 특정 모듈 혹은 무언가를 불러온다는 의미가 있다. 예를들어 'somelib' 라이브러리 안에, 'Something', 'Anything'이라는 모듈이 있다면 위의 경우 그 중 'Something'만을 import한다는 의미다. 만약 둘 다 불러오고 싶다면, import {Something, Anything} from somelib이라고 하면 된다. 이 때 export하는 스크립트에서는 export Something() 혹은 export Anyhting().. 2021. 11. 1. JS Async vs Defer 자바스크립트를 HTML로 연동하기 위해서는 태그의 맨 끝 부분에 태그를 넣어야 한다. 왜 그럴까? 이유는 브라우저가 태그를 만나는 순간 코드를 해석(parsing)하는 과정을 중단하고 자바스크립트 코드를 해석해서 실행하기 때문이다. 그렇다면, 모든 HTML 문서는 위와같은 과정으로만 해석되고 실행되는 것일까? 답은 아니다. 오늘 알아볼 Async와 Defer 스크립트를 이용하면, HTML의 해석방식에 약간의 변형을 가할 수 있다. With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded. async 옵션은 DOM트리 생성을 자바스크립트를 만나자마자 중단을 하지 않고, 다운로드가 끝나고 실행.. 2021. 10. 27. 이전 1 2 3 4 5 다음
