전체보기

[아키텍쳐] ARM vs AMD... 어라 그럼 Intel은 어디로..?

최근 PlanetScale 이라는 서버리스 DB를 공부하고 있다. 근데 PlanetScale의 CLI를 Linux 환경에 설치하려는 과정에서 아래와 같은 상황과 마주하였다. 나의 경우, 데스크탑은 AMD CPU이고, 노트북은 Intel을 쓴다. 그래서 데스크탑에서는 자신있게! amd64를 깔아왔었지만, 노트북은 이제 겨우 2달 남짓 쓴 터라 설치할 일이 그리 많지도 않았고, 그동안은 64가 붙은게 하나뿐이라 눈치껏 64 붙은 녀석으로 설치해왔는데, 이번에는 amd도 64, arm도 64다. 난관이다. 그래서 이번 기회에 여태 미뤄왔던 아키텍처 부분을 조금 정리해보려 한다. 사실 amd64, arm64를 마주한 상황에서의 정확한 나의 심정은 아래와 같았다. arm은 죽었다 깨어나도 아니니 amd일 것 같은..

[ReactJS] React hook form, 모던 Form을 위한 치트키

React로 form의 이벤트를 모두 컨트롤하기 위해서는 발생 가능한 이벤트를 다 상정하여 개별적으로 state를 설정하여 컨트롤 해야하는 문제가 있다. 물론 이 마저도 바닐라 JS에 비해서는 아주 많이 간편해진 셈이지만, 사람의 욕심은 끝이 없고 개발자의 게으른 부지런함(?)도 마찬가지다. form과 관련된 웬만한 이벤트들을 한 번 싸그리 모아다가 상정해두고 이를 컨트롤할 간단한 방법을 만들어두면 두고두고 쓸 수 있지 않을까? 위 고민에 대한 답을 내놓는 React 라이브러리가 바로 React-hook-form 이다. 1. 설치하기 $ npm i react-hook-form 위 커멘드를 입력하면 설치가 진행된다. 2. 기본 개념 React를 기반으로 하고 있으므로 큰 틀은 React와 동일하다. rea..

[NextJS] ReactJS를 품은 프레임워크, NextJS를 알아보자

NextJS는 ReactJS를 바탕으로 만들어진 웹 Front-End 프레임워크이다. 프레임워크다보니, ReactJS에 비해 자유도는 낮지만, 그만큼 정형화/규격화 되어 있어서 협업이 편하고 생산성이 높다. NextJS는 ReactJS의 SEO문제를 해결하고자 등장했다. 대표적인 CSR 라이브러리인 ReactJS는 Request에 대해 Javascript 코드만을 Response하는데, 이 JS 코드가 최종적인 HTML을 만드는 구조라, JS를 돌릴 줄 모르는 검색엔진이 사이트를 크롤링하면 텅 빈 HTML만 인식하게 되어 검색친화적이지 못하다. 반면, NextJS는 Request가 오면, 서버측에서 먼저 Rendering을 거친 후 HTML과 JS를 따로 Response한다. 따라서, 사용자는 HTML코..

[도서/AI] '구글 브레인 팀에게 배우는 딥러닝 with TensorFlow.js' 개발자 리뷰

얼마 전 주변의 아는 분께서 이번에 길벗에서 개발자 리뷰어 모집을 한다는 소식을 전해주셨고, 여러가지 책 중에서 내 마음을 이끄는 책은 당연 였다. 나는 현재 JavaScript를 이용하여 Front-End와 Back-End 개발을 진행하는 개발자이지만, 동시에 머신러닝, 딥러닝 쪽에 관심이 많은 사람인지라, JS 라이브러리인 TensorFlow.js를 바탕으로 딥러닝을 소개하는 책이 가장 흥미로울 수 밖에 없었다. 그래서 길벗 18차 개발자 리뷰어 모집에 책으로 신청을 하였고, 운 좋게 선정되어 책을 받아보게 되었다. 이 책의 특징 TensorFlow.js를 진심으로 다루는 책 내 개인적으로는 이 책의 가장 큰 장점으로 TensorFlow.js를 사랑하는 사람들이 정말 진심을 담아, 보다 많은 사람들이..

[TS] Typescript의 enum, const enum, as const 에 대해 알아보자

enum enum의 개념 enum은 열거형 타입(Enumerated Type)을 앞 글자를 따와서 만들어진 단어이다. Javascript에는 존재하지 않는 Typescript 만의 몇 안되는 기능이다. Typescript에서는 숫자기반 뿐만 아니라 문자열 기반의 열거형까지도 지원한다. enum의 대표적인 예로 boolean Type을 생각할 수 있다. 일반적으로 JS에서 숫자 1은 True에, 숫자 0은 False에 대응되는데, 일종의 Built-in enum인 셈이다. enum booleanType { False = 0, True = 1 } 위 코드를 JS로 컴파일하면 아래와 같이 바뀐다. "use strict"; var booleanType; (function (booleanType) { boolea..

[WSL2] Vmmem의 RAM 점유율 해결 방법

RAM 95% 달성 기념으로 이전 포스팅에서 RAM 용량에 대한 내용을 다루었다. 개발자 노트북의 RAM은 16GB로는 부족하다 주변에서 컴퓨터 견적이나 노트북 추천을 부탁해오면 항상 하는 말이 있다. 램은 최소 32GB로 맞춰라.. 게이밍 머신으로 데스크탑을 맞추는 용도가 아니면, 램 16GB는 정말 정말 뜯어 말리고 싶다. xpectation.tistory.com 이 포스팅에서 살짝 언급한 WSL2는 램을 얼마나 잡아먹고 있는걸까? 작업 관리자에 표시되는 Vmmem 프로세스가 아마도 VmMemory를 뜻하는 것 같은데, 이 프로세스가 WSL2의 전부는 아니다. WSL2에서 잡아먹고 있는 램은 아래 명령어를 통해 확인 가능하다. $ free -h 보시다시피, 물리 메모리가 7.6GB, Swap기술을 통..

개발자 노트북의 RAM은 16GB로는 부족하다

주변에서 컴퓨터 견적이나 노트북 추천을 부탁해오면 항상 하는 말이 있다.램은 최소 32GB로 맞춰라..게이밍 머신으로 데스크탑을 맞추는 용도가 아니면, 램 16GB는 정말 정말 뜯어 말리고 싶다. 게다가 게이밍으로 맞추는 경우에도 굳이 16GB로 타협하는 이유는 금전적인 부담이 크기 때문이지 16GB가 넉넉해서 그런 것은 아니다. 게임을 할 때는 다른 프로그램을 멀티태스킹 하는 일이 '적다'. (없다고는 안했다) 따라서 멀티태스킹 성능은 상대적으로 덜 중요하다. 그러다보니 견적 최적화의 결과, 램 용량을 낮추더라도 램 효율을 극대화하는 세팅이 일반적이게 자리 잡게 된 것뿐이다. 게임 프레임성능을 뽑아내면서 동시에 멀티태스킹 성능까지 확보하려면 금전적 부담이 확 뛰기 때문. 조금 더 부연 하자면, 게이밍 ..

[ReactJS] react-router의 useParams 에 대해 알아보자

react-router SPA을 위해 React의 Client-side routing을 위해 필요한 녀석이다. Declarative routing for React apps at any scale | React Router Version 6 of React Router is here! React Router v6 takes the best features from v3, v5, and its sister project, Reach Router, in our smallest and most powerful package yet. reactrouter.com 대표적으로 BrowserRouter, Switch, Route 그리고 Link 정도를 import 해서 자주 쓴다. 오늘은 이 중에서 Route와 관련..

[JS] 모듈을 받아오는 import와 모듈을 내보내는 export

Javascript에서 A파일에 작성한 코드를 B파일에서 쓰고 싶을 때 쓰이는 것이 바로 import와 export이다. export는 현재 파일에 있는 어떤 변수나 함수, class 따위를 import 가능한 상태로 전환시켜주는 기능을 하고, import는 현재 파일에서 다른 파일에 export 되어 있는 어떤 변수나 함수, class 따위를 쓸 수 있게 만드는 기능을 한다. 따라서, 먼저 export 부터 살펴보자. export export는 크게 두 가지가 있다. 이름을 지정하여 내보내기 (named) //변수, 함수, 클래스를 선언하고 초기화하면서 동시에 export 하는 방법 export const randomNum = Math.random //변수, 함수, 클래스를 선언하고 초기화한 뒤, 이미..

[ReactJS] styled-components와 함께 하는 즐거운 ReactJS

styled-components를 이용하지 않고 React만을 통해서 웹 퍼블리싱을 하는 방법은 크게 3가지가 있다. 해서... 원래는 3가지 방법을 모두 설명하려 했지만.... 다음에 기회가 되면 하기로 하고, 바로 styled-components로 들어가보자. 어차피 지금 시점에서 React를 쓰면서, styled-components 를 쓰지 않는다는 것은 어불성설이다. 설치 npm i styled-components 주의할 점이 딱 하나 있다. styled-component가 아니라 styled-components 이다. 맨 끝에 s가 반드시 붙어야한다. 실제로 npm 에 styled-component라는 패키지가 이미 존재한다. 따라서 주의가 필요하다. 뭐 악성프로그램은 아니지만, 더 이상 관리가..

[NestJS] NestJS, 한 번 빠지면 벗어날 수 없는 마성의 늪(3) : NestJS를 이해하기 위한 First Class Function, Closure 그리고 Decorator

NestJS를 이해하려면, Decorator를 알아야하고, Decorator를 알기 위해서는 Closure 개념과 비교하면 좋다. 근데 Closure 개념과 Decorator를 위해서는 First Class Function 이라는 개념에 대해 짚고 가는 것이 먼저이다. 따라서 이번 포스팅에서는 First Class Function, Closure, Decorator를 알아보려고 한다. 참고로 Decorator는 아직 ES의 정식 기능이 아니며, ECMA TC39의 실험적 기능이다. 하지만 Nest 등 최신 프레임워크 중에서는 Decorator를 지원하는 경우가 있고, Babel도 Decorator를 지원하고 있다. 이 이면에는 비밀이 있는데, Decorator는 새로운 문법이 아니라는 점이다! 사실 De..

[NestJS] NestJS, 한 번 빠지면 벗어날 수 없는 마성의 늪(2) : NestJS 시작하기 & Express 프로젝트를 Nest로 마이그레이션 하는 경우

1. NestJS 시작하기 $ npm i -g @nestjs/cli cli 버전으로 설치하는 이유는 cli 버전을 통해 nest가 지원하는 '프로젝트 초기화' 기능을 활용하기 위함이다. 다시 말해, @nestjs/cli를 설치한다고 해서 nest의 실질적인 패키지가 다운로드 되지는 않는다. 이는 위 코드를 입력한 뒤 성공적으로 설치가 끝나더라도 package.json 파일상에서는 그 무엇도 변하지 않았다는 점을 통해서 확인할 수 있다. 참고로 -g는 global의 약자이다. 그렇다면 이제 진짜 nest를 다운받아보자. 아래의 코드를 입력하면, nest가 지원하는 '프로젝트 초기화' 기능이 작동하여, nest를 통해서 서버를 빌드하는데 있어 필요한 모든 기본적인 툴과 세팅이 제공된다. 가령, @nestjs..

[WSL] Ubuntu에서 현재 디렉토리를 윈도우 탐색기로 열기

우분투에서 현재 경로를 윈도우 탐색기로 띄워보고 싶을 때가 있다. 그럴 때 쓸 수 있는 코드. $ explorer.exe . explorer.exe 를 실행하라는 명령어 + 현재 디렉토리 전체를 의미하는 마침표 '.' 의 조합이다.

[NestJS] NestJS, 한 번 빠지면 벗어날 수 없는 마성의 늪(1) : 소개

NestJS란, MIT 라이센스 하에서 공개된 Node.js 기반의 프레임워크이다. NestJS는 Javascript계의 django이자, spring 이라고 볼 수 있다. 아래는 공식 홈페이지에 소개된 Nest의 문제 의식 및 철학 In recent years, thanks to Node.js, JavaScript has become the “lingua franca” of the web for both front and backend applications. This has given rise to awesome projects like Angular, React and Vue, which improve developer productivity and enable the creation of fast..

Tistory의 코드블럭을 이쁘게 만들어보자 : 코드블럭 테마 (highlight.js) 적용방법

1. 준비사항 만약 Tistory에서 제공하는 코드블럭 플러그인을 쓰고 있다면 이를 먼저 해제하자. 안쓰고 있다면 다음 단계로~ highlight.js demo highlightjs.org 위 링크에서 자신이 원하는 테마를 찾자. 마음에 드는 테마를 찾았다면 그 녀석의 이름을 유심히 봐야한다. 2. 코드블럭 테마 입히기 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html편집 에서 HTML의 부분에 아래의 코드를 입력해주자. 이 때, 위 코드상 세번째 줄의 default.min.css 부분에서 'default' 부분에 앞서 유심히 봐둔 마음에 드는 테마의 이름을 입력해줘야한다. 테마의 이름은 소문자로 입력해주면 되고, 만약 띄어쓰기가 있다면 하이픈 (-)으로 표현하자. 예를 들어, Base16/Mat..

[TS] 타입스크립트의 기초(2) - Class와 상속, 그리고 interface와 type의 차이점

[TS] 타입스크립트의 기초(1) - type 키워드 및 Type에 대한 이해 TypeScript(TS)는 기본적으로 Javascript complier다. TS는 Strongly type 언어이고 JS에서 발생할 수 있는 오류를 미리 감지하고 경고해준다. 따라서 TS에서 오류가 없다면 JS에서도 오류가 없을 것이다. 이것은 xpectation.tistory.com TS에서는 Java나 C계열 언어에서의 Class와 거의 동일한 Class문법을 명시적으로 지원한다. 하지만 오해하지 말자. JS도 객체지향적 언어이다. class 키워드를 통한 문법 대신 prototype을 통해 객체지향성을 구현했을 뿐. TS로 Class 를 작성한뒤 컴파일 하면, ES6에서 도입된 JS의 Class 문법으로 코드가 변환되..

[TS] 타입스크립트의 기초(1) - type 키워드 및 Type에 대한 이해

TypeScript(TS)는 기본적으로 Javascript complier다. TS는 Strongly type 언어이고 JS에서 발생할 수 있는 오류를 미리 감지하고 경고해준다. 따라서 TS에서 오류가 없다면 JS에서도 오류가 없을 것이다. 이것은 마치 모래를 촘촘한 거름망을 통해 먼저 걸러내는 것과 비슷하다. 촘촘한 거름망으로 걸러내고 나면 더 큰 거름망에서는 아무런 문제 없이 통과할 것. TS는 암묵적 Type과 명시적 Type을 모두 지원한다. Type은 변수를 선언할 때 명시적으로 지정해줘야한다. 그렇지 않으면, 변수 선언 후 처음으로 할당될 때를 기준으로 Type이 추론된다. 따라서 처음 할당된 변수의 Type과 다른 Type을 추후에 섞어서 쓰게 되면 에러가 뜬다. 변수의 Type은 기본적으로..

[TS] 타입스크립트 Generic에 대한 이해와 활용

첫 번째 인자로 어떤 Array를 받아와서 두 번째 인자로 입력된 값을 Array의 가장 마지막에 추가하는 함수를 생각해보자. TS로 이 함수를 작성하려면 다음과 같이 작성 가능하다. type AddItem = (arr:(T|M)[], item : M) => (T|M)[] const addItem : AddItem = (arr, item) => { arr.push(item); return arr } 이 때, arr: (T | M)[ ] 부분이 이해가 안갈 수 있다. 은 item에서 정해져야할 것 같은데 arr에서 을 쓰면 뭔가 엉키지 않을까? 결론부터 말하면 엉키지 않는다. 위 코드를 작성한 뒤 TS의 Call Signature를 뜯어보자. 위 사진에서 볼 수 있듯 첫 번째 인자인 arr까지만 작성한다면..

[NPM] 패키지 설치시 더 이상 '--save' 플래그를 입력하지 않아도 되는 이유

인터넷상에서 패키지 설치와 관련된 내용을 읽다보면 패키지 설치 코드에서 --save가 들어간 코드를 종종 접하게 된다. 하지만 이는 과거의 흔적이라고 볼 수 있다. 현재의 시점에서 '--save' 플래그는 더 이상 쓰지 않아도 된다. --save 의 뜻과 기능 --save 옵션을 통해 설치된 패키지는 package.json 파일의 dependencies 목록에 기록된다. 따라서 향후 npm install (혹은 npm i)를 입력하게 되면 해당 패키지가 설치된다. 그렇다면, --save를 입력하지 않으면 어떻게 될까? $ npm install 이런 경우 해당 패키지는 임시로 설치되고, package.json의 dependencies에는 추가되지 않기 때문에 언제든 node_modules 폴더를 지운 뒤,..

渴

1. 갈증은 소중하다. 목 마른자는 스스로 우물을 판다. 2. 갈증은 중요하다. 목 마르지 않은 자에게는 물을 줄 가치가 없다. 물고문은 서로의 감정만 상하게 만든다. 3. 갈증은 위험하다. 찬 물, 더운 물 가리지 않게 만든다. 일찍이 맹자는 목마름의 위험을 경고한 바 있다. 맹자가 말했다. "굶주린 자는 무엇을 먹어도 맛있게 먹고, 목마른 자는 무엇을 마셔도 달게 마신다. 그러나 이는 맛을 제대로 느끼지 못하는 것이다. 굶주림과 목마름이 미각의 본성을 해쳤기 때문이다. 어찌 입과 배만이 굶주림과 갈증으로 인해 해를 입겠는가? 사람의 마음도 굶주림과 갈증으로 해를 입는다."

[JS] 자바스크립트의 배열(Array)은 배열이 아니다.

arr['a'] = 1; 위 코드가 먹힌다는 사실이 제목을 설명해준다. 자바스크립트의 배열은 엄밀히 말해서 배열이 아니다. 바로 객체이다. 아주아주 엄밀히 말하자면, 'JS의 배열은 희소 배열이기 때문에, 일반적으로 의미하는 밀집 배열이 아니다' 라고 말할 수 있겠다. 밀집 배열(협의의 배열)이란, 메모리 공간이 동일한 한 가지 자료형으로만 구성되어 자료가 서로 연속하여 나열된 자료구조이다. 희소 배열(광의의 배열)이란, 하나 이상의 자료형을 허락하는 배열이여서 한 자료가 차지하는 메모리 공간이 불규칙할 수 있고, 그 때문에 서로 연속적으로 나열되어 있지 않을 수도 있는 자료구조이다. 여담이지만, JS 배열은 희소 배열이기 때문에 배열 요소를 인덱스로 접근하려는 경우 밀집 배열인 다른 언어에 비해 상대적..

[VSCode] remote.wsl:connection Method 를 알아보자

VSCode 설정 중에는 remote.wsl:connection Method 가 있다. 구체적으로는, WSL1 에 localhost, wslExeProxy 의 2가지 방식 WSL2 에 localhost , wsl2VMAddress, wslExeProxy 의 3가지 방식이 있다. 기존 WSL1에서는 localhost 방식을, WSL2에서는 wsl2VMAddress 방식을 기본값으로 하고 있었다. 즉, WSL2에서는 IP를 통해 로컬환경 외부에서도 WSL2로 접근이 가능했다. 하지만 WSL2가 재시작할때마다 IP값은 매번 달라지는데(유동IP여서 그때 그때 ip를 받아온다고 이해하면 편하다) 이 때문에 시스템이 절전모드에서 깨어나거나 네트워크가 재설정되거나 하는 경우 VSCode의 원격접속이 계속 끊어지는 현..

[WSL] WSL 기본 명령어

잘 정리된 MS 공식 글을 발견하여 블로그에 남겨둔다. WSL의 기본 명령 WSL(Linux용 Windows 하위 시스템)에 포함된 기본 명령에 대한 참고자료입니다. docs.microsoft.com

[Windows11] 결국 BitLocker 해제했습니다. (+ 삼성전자 공식답변)

[Windows] BitLocker : '다른 URL을 시도해 보세요. 이 링크에 표시할 내용이 없습니다. 대신 원하는 내 1. 사건의 발단 윈도우11에서는 '장치 암호화'를 활성화하기만 하면 그게 곧 BitLocker 활성화라는 사실을 몰랐다.. 기존의 윈도우에 있는 단순 알고리즘의 암호화인줄 알았더니... 무엇보다도 윈도 xpectation.tistory.com [Windows] BitLocker 무한 잠금 현상(보안 부팅 정책이 예기치 않게 변경되었으므로...) 해결 방법 일단 본인의 경우, 삼성 갤럭시북2 프로 (NT950XED-K71A) 모델에서 나타난 현상이다. 윈도우 11 Home 환경이고, 윈도우 업데이트를 모두 끝낸 뒤, 삼성 업데이트를 통해 삼성에서 제공하는 업데이트(칩 xpectati..

[내돈내산/추천] 1만원대 가성비 좋은 블랙앤화이트 스카치 위스키

동네마트에 갔다가 이런 녀석이 보여서 업어 왔다. 업어오는 김에 토닉워터도 함께 샀다. 그 날 바로 하이볼을 만들어 마신 뒤, 다음 날 다시 마트에 가서 하나 더 업어 왔다. 잔이 1개면 되겠냐...라는 합리화와 함께.. 생각보다 맛이 괜찮다. 오크향도 나름 나고, 카라멜의 단 맛도 과하지 않은 선에서 느껴진다. 한 가지 흠이라면 끝에 치고 올라오는 기분 나쁜 쓴맛인데, 그 맛이 치고 올라오는 타이밍이 신의 한 수다. 전체적인 위스키 맛의 강도가 뚝 떨어지는 하향곡선을 그리며 급격히 입 속에서 사라지는 바로 그 타이밍에 좋지 못한 향이 나는 편이여서 단점을 커버치기 쉬운 테이스팅 커브라고 평가할 수 있겠다. (아 물론 저가 위스키라는 점은 감안해야 한다. 고가의 위스키를 상상하지는 말자...) 해서 나의..

[WSL2] 폴더를 VSCode로 여는 방법 3가지와 각 경우의 폴더 경로

오늘 재밌는걸 발견했다. 누군가는 그냥 지나갔을 수 있지만, 누군가는 나처럼 이게 뭐지? 싶을 수 있다고 생각하여 기록에 남긴다. WSL2상의 폴더를 VSCode로 여는 방법은 총 3가지가 있다. $ code . Ubuntu와 같은 리눅스 환경에서 직접 code . 명령어를 통해 여는 방법 VSCode 상의 콘솔에서 code . 을 통해 여는 방법 파일탐색기에서 무식하게 네트워크 주소를 통해 접근한 뒤 원하는 폴더나 파일을 우클릭하여 VSCode로 여는 방법 각각의 경우에 따라 VSCode는 서로 다르게 인식한다. 작업표시줄에서 VSCode를 우클릭했을때 나오는 창이다. 여기서 고정됨으로 고정시켜둔 monitor 폴더 위로 마우스를 가져가면 경로가 아래와 같이 나온다. vscode-remote://wsl..

[Git] 주니어 개발자가 되기 위해 알아야 할 Git의 모든 것 - (1)

0. Git은 코드 전용 클라우드가 아니다 나의 경우처럼, 독학이라고 하기에는 애매하지만(코딩과 관련된 인터넷 강의를 듣긴 했다) 사수가 있는 것도, 어디다 물어볼 지인이 있는 것도, 전공생인 것도, 부트캠프를 수료한 것도 아닌 경우에는 은근히 git과 같은 것에 대해 제대로 알기 어렵다고 본다. 부진정 독학러로서는 코딩 그 자체를 배우는 것만으로도 정신없기 때문에, 자연스럽게 특정 언어에 대해 공부하거나 포트폴리오를 만드는데 치중하게 되고 git은 그저 개발자들이 쓰는 구글 드라이브 수준으로만 활용하는게 현실이지 않나 싶다. 특히나 협업 경험이 없다면 십중팔구는 코드 전용 클라우드로만 쓰이고 있지 않을까? 물론 이 포스팅을 쓰는 현 시점에서 생각해보자면, 이 포스팅에 담겨져 있는 수준의 내용은 이미 G..

[JS/Array] 배열 Method 및 배열 고차 함수 정리

분류 mutator : 호출한 원본 배열을 직접 변경함 accessor : 원본 배열을 직접 변경하지 않고 새로운 배열을 반환함. 배열 Method Array.prototype 분류 내용 반환값 비고 .indexOf accessor 인수가 몇 번째 순서인지 검색 첫 번째 검색 일치 결과의 인덱스를 반환 검색 불일치시 -1 을 반환 인수의 존재확인시에는 includes를 쓸 것 .push mutator 인수를 마지막 요소로 추가 length 속성 값을 반환 하나만 추가한다면 arr[arr.length]로 직접 추가하자 mutate가 싫다면 스프레드 문법을 쓸 것 .pop mutator 마지막 요소를 제거 제거한 요소를 반환 .unshift mutator 인수를 첫 요소로 추가 length 속성 값을 반환 ..

[JS/반복문] 반복문 및 반복문을 대체할 수 있는 기능 6가지 총 정리 : for 문, while 문, do ... while 문, forEach 메서드, for ... in 문, for ... of 문

반복문 3가지 : for 문, while 문, do ... while 문 for 문 for (변수선언문;반복조건식;변수변형식){ 반복 조건식이 참인 경우 실행될 문; } 반복조건식이 참이라면, 코드블록을 실행한 뒤 변수변형식에 따라 선언된 변수를 변형시키는 제어문이다. users = ['가영','나영','다영','라영','마영'] for (i = 0; i

[JS/함수] 함수의 유형 (1) - 즉시 실행 함수

오늘은 즉시 실행 함수, 재귀 함수, 중첩 함수, 콜백 함수, 순수 함수, 비순수 함수 중 즉시 실행 함수에 대해 정리해보겠다. 1. 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)의 정의와 특징 즉시 실행 함수란, 함수 정의과 동시에 호출되어 실행되는 함수를 말하며, 단 한 번만 호출 할 수 있다. 따라서 보통 익명 함수로 많이 정의하여 활용한다. 어차피 기명으로 함수를 사용하더라도 재호출이 불가능하기 때문이다. 이름 짓기가 얼마나 귀찮은 일인가... Simple is best. 2. 표현 즉시 실행 함수는 그룹 연산자로 감싸서 표현하는 것이 일반적이다. 즉, 괄호()로 감싸줘야한다. (function () { const a = 1; const b =..