728x90

Dev/JavaScript 21

[JavaScript] ASCII Code

오늘은 코테 풀다가 생각나서 쓴다. ASCII 코드 쓰면 상당히 단순하게 풀릴 수 있는 문제들이 있는데, 일단 적어도 내주변에선 잘 떠올리지 않는 케이스가 많다보니 한번 남겨두면 도움이 되지 않을까 함. 일단 ASCII 코드가 뭔지부터 한 번 알아보자. 1. ASCII Code 일단 백날 설명하는거보다 한번 보는게 낫다고 생각해서 띄워봤는데, 이게 아스키코드표다. 저 10진수, 16진수, 문자들이 컴퓨터에게는 동일한거로 받아들여지는건데, 자세히 설명하면 8비트의 공간 안에서 많이 사용하게 되는 내용들을 미리 할당해놓은 거라고 생각하면 되겠다. (엄밀히 따지면 7비트긴함.) 물론 JavaScript에서만 쓰는거도 아니고 그냥 컴퓨터와 인간의 소통을 위한거라 어떤 언어든 동일한게 있다. 다 외워서 사용할 필..

Dev/JavaScript 2023.06.26

[JavaScript] Arrow Function

요즘 나는 내가 공부한게 명확히 잘 되어있는지 확인하기 위해 다른 누군가에게 코딩을 가르쳐주러 다니고 있다. 물론 당연히 나도 공부를 하기 위한 목적이기 때문에, 보수는 받지 않는다. 근데 오늘 수업 중에 우리가 흔히 처음에 개발을 할 때 배우는 함수와 일반적으로 ES6문법을 사용하는 많은 개발자들이 사용하는 Arrow Function이 뭐가 다른거냐는 질문을 받았다. 함수 문법을 간결하게 축약할 수 있다. 괄호나 중괄호를 사용하지 않아도 함수의 역할을 할 수 있다. 함수라는것을 직관적으로 느끼게 할 수 있다. 이런 장점 정도는 생각했는데 특별히 다른게 없는데 왜 Arrow Function을 많이 사용하는지 설명할 수가 없어서, 상당히 난감했었다. 그래서 집에 오자마자 급하게 모던 자바스크립트 열고 Ar..

Dev/JavaScript 2023.06.24

[JS] slice()

계속 코테 준비를 깔짝깔짝하다가 오늘 오랜만에 문제 풀려고 해커랭크 들어갔는데, 자바스크립트 문법을 좀 까먹은 것 같다. slice()를 생각을 못해서 한줄이면 끝날거 한참 돌아갔음. 그런 김에 slice 정리 한번하고 넘어가겠다. slice()는 어떤 iterable한 객체의 특정 지점부터 또 다른 특정지점까지의 요소들을 반환한다. 난 별 생각도 안하고 배열에서만 써왔었는데, 오늘 보니까 iterable한 객체면 되는 것 같다. 사용 예제를 보는게 훨씬 간편할텐데, 코드로 한번 작성해보자. const arr = [1,2,3,4,5,6]; arr.slice(1,3); /* * 다른건 모르겠고 이게 제일 헷갈릴텐데, 이러면 인덱스 1번부터 3번까지가 아니고, * 1번부터 2번까지 애들만 가져온다고 보면 된..

Dev/JavaScript 2023.06.16

[TypeScript] TypeScript

어디서 봤는데 TypeScript가 Front-End 개발자들이 사용하고 싶은 언어 1위라고 하더라. 근데 오히려 학원에서 한창 배울 당시에 코로나 걸려서 javaScript 스킵하다시피하고 회사와서 바로 TypeScript 쓰라길래 TypeScript쓴 내 입장에선 공부할 것도 없이 걍 익숙해져버린 언어라 제대로 공부해볼 생각조차도 안했던 것 같다. JavaScript도 그냥 코테 공부하려니 선택지가 그나마 열심히 써봤던 언어가 그것 뿐이라 골랐던거구.. 그러다보니 자연스레 공부하게 되었다는 느낌이 되어버렸다. 서론은 이제 끊고, TypeScript에 대해서 이야기를 해보자. 1. 타입스크립트란? TypeScript는 JavaScript에 Type을 부여한 확장판 같은 것이다. 그 콘솔겜 하다보면 확장..

Dev/JavaScript 2023.06.02

[JavaScript] 함수는 1급 객체 (First-Class Object)

오늘은 1급 객체에 대한 이야길 해볼건데, 이게 왜 중요하냐면 대부분 이 내용 때문에 현재 우리가 사용하고 있는 모든 코드들이 구현가능하기 때문이다. 결국 이 내용을 이해하면 지금 우리가 이렇게 쓴다라고 거의 대충 감으로, 혹은 애매모호하게 이해하고 있던 부분들이 퍼즐이 끼워맞춰지는 것처럼 줄줄이 이해가 될거기 때문에, 아주 도움이 될 거라고 생각한다. 1. 1급 객체란? 정의 : 다른 객체들에 일반적으로 적용가능한 연산을 모두 지원하는 객체를 가리킨다. -출처: 위키 백과 1급 객체가 되기 위한 조건. - 변수에 할당할 수 있다. - 다른 함수를 인자로 전달 받는다. - 다른 함수의 결과로서 리턴될 수 있다. 위의 이야기들을 모두 종합하면, 결국 데이터를 다루듯이 동일하게 다룰 수 있는 것들 그러니까,..

Dev/JavaScript 2023.06.01

[원리] 실수 표현 원리

JS 관련 밈을 보면 JS가 어처구니 없는 결과 값을 보여주는 순간들이 있어서 웃긴 것들이 꽤 있는데, 그 중에 1.1+1.2 == 2.3 이 false라는 것도 심심찮게 보이곤 한다. 그걸 보다가 왜 저런 결과가 나오는건지 궁금해져서 조금 찾아보게 됐는데, 이는 비단 JS 만의 문제가 아니라 float, double 형을 쓰는 모든 언어들이 같은 문제를 겪는다고 볼 수 있다. 오늘은 이 이야기를 해보고자 한다. 컴퓨터는 기본적으로 이진법 즉, 0과 1로 모든 말을 알아듣는다. 당연히 실수를 저장할 때도 10진수로 표현된 수를 이진법으로 변환해서 저장을 할텐데, 이 때 소수점 아래 내용을 저장하는 방식이 여러가지로 쓰인다. 여기서는 일단 float, double형에서 사용하게 되는 부동소수점 방식을 다룰..

Dev/JavaScript 2023.05.30

[JavaScript] parseInt()

코테 문제 풀다가 parseInt()의 제대로 된 사용법을 알게 돼서 작성한다. 일반적으로 parseInt()는 Number()와 같이 string 타입을 number 타입으로 변환시키는데 주로 사용하게 되는데, 이게 원래 용도가 진수 변환으로 쓰인다는 건 알았지만, 두번째 파라미터가 있다는 사실을 몰랐다. 그냥 당연히 10진법으로 가는건줄.. parseInt의 두번째로는 첫번째 파라미터로 넣은 인자의 진수를 써줄 수 있는데,parseInt(010101010101, 2) 이렇게 써주면 2진수를 10진수로 바꿔준다는 의미다. 문법 공부 착실히 좀 해야겠다. 다 안다고 생각했는데 생각보다 모름..

Dev/JavaScript 2023.05.23

[JavaScript] Hoisting

학원에서 자바스크립트를 처음 배우던 시점에 Hoisting을 가르쳐줬었던 것으로 기억한다. 그 때는 애초에 수강생들이 코딩의 ㅋ 정도 겨우 알아가는 과정이라 알려줘봐야 제대로 이해할 리가 만무하니 그냥 선언하기 전에 실행시켜도 나중에 뒤에서 선언만 해주면 문제가 없다. 라는 식으로 알려줬었는데, 이번에 블로그 쓰기 시작하면서 제대로 정리해야겠다는 생각이 들어 작성한다. Hoisting (호이스팅) 이란 무엇인가? 공식적인 설명은 "인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 " 을 의미한다. 하지만 우리는 이 말로는 절대 이해할 수 없다. 그래서 일반적으로 잘 풀어서 쉽게 설명하는 경우를 가져오면 "변수와 함수의 선언과 초기화를 분리한 후, 선언만을 코드의 최상단으로 옮기는 것"..

Dev/JavaScript 2023.04.20

[JavaScript] Scope & Closure

순서가 조금 잘못된 것 같긴한데, 어쩔 수 없다고 생각한다. 체계적으로 공부를 해서 기초부터 차근차근 닦아올려가며 일을 하게 된 것이 아니라 당장 오늘 이 코드를 작성하지 못하면 큰일난다는 생각으로 언제나 목에 칼이 들어온 기분으로 코드를 만들어가며 체득하는 신입 SI 개발자는 이런 체계적인 용어? 개념적인 지식? 그런거 모르기 때문에 아 내가 지금까지 써온 이런게 이런 이름이구나~ 라며 깨닫기 마련이다. 오늘은 이런 식으로 깨달은 Scope 와 Closure 기법에 대한 이야기를 해보고자 한다. 1. Scope (유효범위) Scope는 유효범위를 의미한다. 정의나 설명을 통해 이야기하면 누구나 한번에 이해하긴 힘들다. 하지만 일단 이런거다 정도는 알고 있어야하니 정리해보자. 함수, 변수를 선언 했을 때..

Dev/JavaScript 2023.04.20

[JS].sort()

코테 준비를 하다보니 이해가 안되는 것들이 꽤나 있다. 그 중에 하나가 오름차순, 내림차순 정렬시 sort()를 있는 그대로 사용하지 않고 안에 인자를 넣어주는 것이었는데, 이게 이해되지 않는 이유는 내가 업무할 때 사용하는 데이터 타입이 거의 대부분 string이기 때문이다. 1. sort() sort() 함수는 특정 배열 내의 요소를 규칙에 따라 정렬해주는 함수이다. 내가 업무에서 사용시 abc 순서로 정렬하며 많이 사용하게 되는데, 코딩테스트의 경우 type 이 number인 요소들을 비교하는 케이스가 더 많기 때문에 다른 추가적인 설정이 필요하다. 2. compareFn sort 함수의 인자로 compareFn을 넣어줄 수 있다. array.sort((a,b)=> a-b) // 오름차순 array..

Dev/JavaScript 2023.04.14
728x90