전체 글

프로그래머스 코딩테스트 연습 - 시소 짝꿍 JavaScript

처음에 작성한 코드는 다음과 같았다. function solution(weights) { let answer = 0; // 2 3 4 미리 구하기 const weightsObj = {}; weights.forEach(el => { if(!weightsObj[el]) { weightsObj[el] = [2, 3, 4].map(item => item * el); } }) for(let i = 0; i < weights.length - 1; i++) { const now = weightsObj[weights[i]]; for(let j = i + 1; j < weights.length; j++) { const weight = weights[j]; let checker = false; weightsObj[weig..

webpack의 기초에 대해서 알아보기

webpack은 대표적인 자바스크립트 번들러이다. 이 번들러는 js 파일들을 최적화하고 하나의 파일로 만들어주는 역할을 하는데, 거기에 더해서 자바스크립트에서 번들링이 필요한 이유를 이해할 필요가 있다. webpack의 필요성 기본적으로 js파일은 script 태그를 통해서 html에 연결된다. 일반적인 html 파일 이 경우, js 파일이 하나라면 문제가 없지만 대부분의 경우 프로젝트가 조금만 커져도 js 파일은 여러개가 될 것이다. 위의 예에서 html에 사용된 js 파일은 각각 다음과 같다. // index.js let zombie = "one"; // hi.js zombie = 777; // bye.js window.alert(zombie); html 파일을 열어보면, 777 이라는 값을 보여주는..

React에서 상태관리 툴 zustand 사용하기

zustand는 flux 원리를 따르는 가볍고 뛰어난 성능을 보여주면서도 사용하기 쉬운 쉬운 상태관리 툴이다. 🥕 다양한 hooks을 지원하기 때문에, React에 익숙한 사용자라면 더욱 더 쉽게 접근할 수 있다. 🥕 기존의 Context API의 단점인 Provider 내부의 렌더링 최적화 문제를 해결하고, 심지어 zustand는 provider로 감싸주지 않아도 되는 장점을 지닌다. 🥕 기존의 redux보다 더 간편한 설정이 가능하며 recoil보다 활발하게 업데이트와 이슈 활동이 이루어지고 있기 때문에 앞으로가 더 기대되는 라이브러리이다. 간단한 사용법 위에서 말했듯, zustand는 별다른 설정없이 사용할 수 있다. create 함수를 통해서 상태와 상태를 변화시킬 함수를 작성한다. import ..

Next.js App Router 간단하게 사용하기

Next 13.4 버전이 릴리즈되면서 App Router가 stable이 되었다. 그에 따라서, 간단하게 App Router를 사용해보도록 하였다. npx create-next-app@latest 위의 명령어로 프로젝트를 생성하면 프로젝트 이름, 타입스크립트와 ESLint 사용 여부, tailwind CSS의 사용여부, src 디렉토리 사용여부를 물은 뒤 다음과 같이 질문이 나온다. 🧅 Use App Router (recommended)? › No / Yes 여기서 Yes를 선택하여 App Router를 사용할 수 있다. 🍎 next.config.js의 설정에 experimental.appDir 이 true가 된다. App 라우터를 사용하면, pages 폴더 대신 app 폴더가 생긴다. app 폴더 내부..

typescript에서 typeof (with keyof)

typeof는 기존 자바스크립트에서 이미 제공되는 문법이다. 타입스크립트에서도 역시 typeof를 사용할 수 있는데, 타입스크립트에서는 좀 더 확장된 기능들을 사용할 수 있다. 기본적인 문법은 자바스크립트와 크게 다르지 않다. // typescript v5.0.4 const str: string = "Hello type"; type Str = typeof str; // string 위와 같이 typeof로 타입을 타입 변수에 할당할 수 있다. 물론, 변수에 할당하지 않고도 곧바로 타입으로 지정할 수도 있다. // typescript v5.0.4 const str: string = "Hello type"; const hello: typeof str = "Hi"; 그리고 타입스크립트에서 typeof의 중요한..

선언식 함수와 화살표 함수에서의 this

브라우저에서 this는 Window 객체를 가르킨다. 그리고 Node에서 this는 global 객체를 가르킨다. (정확히는 최상위에서 호출 시 module.exports / exports를 가르키고, 함수 내부에서 호출 시 global 객체를 가르킨다) 이렇게 this는 환경에 따라서 다른 객체를 가르킨다. 선언식 함수 이는 function 선언식에서도 다르지 않는데, this는 함수의 호출, 실행 단계에서 동적으로 결정된다. // 브라우저 function test1() { return function consoleA() { console.log(this); } } const test3 = test1(); test3(); // Window 객체 function test2() { console.log(t..

typescript에서의 class

타입스크립트는 클래스 문법에 대한 추가적인 지원이 있다. 따라서, 클래스를 작성할 때 타입스크립트는 자바스크립트와는 다른 문법을 사용하므로 이에 대해서 글을 남기도록 하였다. interface & type interface Bus { custommer: string[]; driver: string; callBus: () => string; getCustomer: () => string[]; onBoardBus: (custommer: string) => void; } 위와 같은 interface는 타입스크립트에서 객체의 타입을 표현하기 위해서 사용할 수 있다. 다만, java와 같은 객체지향 언어와 마찬가지로 interface를 implements하여 말 그대로 클래스의 인터페이스로 사용할 수 있다. cl..

CSS Modules 사용하기

CSS Module은 클래스 이름의 중복을 방지하고, CSS 파일을 여러 개로 관리할 때 유용한 방법이다. 이를 사용하기 위해서는 프로젝트의 build 시스템이 CSS Modules를 지원해야 한다. 대부분의 bundler(예: webpack)는 CSS Modules를 기본적으로 지원한다. 따라서 먼저 프로젝트에 bundler를 설정하고 구성하자. 사용법은 간단한데, css 파일 이름을 생성할 때 이름.module.css 과 같이 네이밍을 하면 된다. React 환경에서 사용 예제 About.tsx import styles from "./about.module.css"; export default function About() { return ( Phrase ); } about.module.css .Co..