yeeed_log

맥은 윈도우와 다르게 초기 구매시 아이콘 자동정렬이 되어있지 않다. 윈도우도 마찬가지로 정렬기준을 하지 않으면 아무곳에나 아이콘을 배치할 수 있다. 맥에도 자동정렬 기능이 있지만, 기본 값으로 지정하지 않으면 폴더마다 제각각 설정이 나뉘게되서 아주 불편하다😓 파인더 기본값 설정하는 방법 1. 정렬하고 싶은 폴더로 이동한다 이렇게 제멋대로 놓인 아이콘들을 정렬해주자 2. 빈 영역에 우클릭후 보기 옵션 메뉴를 클릭한다 정렬 부분을 이름으로 설정한 후 하단의 기본값으로 사용 버튼을 눌러준다 + 추가 폴더에 들어간 상태에서 cmd + ctrl + 1 키를 눌러주면 해당 폴더기준으로 자동정렬된다 ㅇㅂㅇ

문제 설명 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 제한 조건 s에는 둘 이상의 정수가 공백으로 구분되어 있습니다. 입출력 예 s return "1 2 3 4" "1 4" "-1 -2 -3 -4" "-4 -1" "-1 -1" "-1 -1" 나의 풀이 🙂 function solution(s) { let answer = '' const arr = s.replaceAll(' ',',').split(',').map((v) => +v) ..

애증의 밴딩머신 타입스크립트로 마이그레이션 진행기 바닐라 자바스크립트에 타입스크립트? 처음엔 단순히 타입스크립트를 설치하고 파일 확장자를 .ts로 바꿔주면 되겠지? 라고 생각했다. 당연하게도 그렇게 쉽게 언어가 컴파일되지 않는다 ^^...ㅎ 리액트에서는 cra를 사용했기때문에 자동적으로 웹팩환경이 구성된 상황에서 개발을 했었다. 그래서 내가 작성한 코드가 어떻게 빌드되고, 어떻게 컴파일되는지 자세히 알지 못했다. 하지만 바닐라 자바스크립트에서는 cra같은 손쉬운 셋팅이 없다. 모두 직접 구성을 해야만 했다. 그렇게 웹팩공부를 하게 되는데...🫠 바닐라 자바스크립트에서 타입스크립트를 사용하기 위한 웹팩 환경 구성하기 🦾 우선 타입스크립트를 자바스크립트 언어로 컴파일하기 위한 환경을 셋팅해야했다. 웹팩 시리..

기존 commonJS 모듈방식을 사용하다 ES module 방식으로 바꾸게되면 많은 에러를 만나게된다. ES module 방식은 import/export 구문을 사용할 수 있게 해준다. 원래도 import/export 방식을 사용했다고해서 ES module 시스템을 사용하는 것은 아닐 수 있다. 마침 이번 feconf 에서 토스팀의 박서진 개발자님이 이 주제로 연사를 한 내용이 있어 첨부한다. https://youtu.be/mee1QbvaO10 esm방식을 사용하기 위해선 package.json 파일에 모듈선언을 해야한다. { "type": "module" } { "type": "commonjs" } 타입 선언을 하고나면 현재 package.json 파일을 기준으로 하위에 있는 파일은 선언한 방식을 사용..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) 프로젝트 환경설정 이전 포스팅의 마무리 느낌으로 바닐라 자바스크립트 기반의 개발환경을 세팅해보자! 👊 1. 프로젝트 버전관리 npm init -y 2. .gitignore 파일 생성 및 설정 # dependencies /node_modules # production /dist # etc .DS_Store .vscode .gitignore 파일에는 git으로 추..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Dev Server 매번 웹팩 명령어를 실행하지 않아도 코드를 수정하고 저장하면 웹팩으로 빌드한 후 브라우저를 새로고침 해준다 실시간으로 리로드 되는 웹팩의 개발 환경 동작과정 dev-server는 dist 폴더와는 관계없이 동작 빌드한 결과물이 파일 탐색기나 프로젝트 폴더에 보이지 않는다. 메모리에 저장되고 파일로는 생성 X 수정된 결과물 또한 메모리 상에 ..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Plugin 플러그인은 웹팩의 기본동작에 추가기능을 제공하는 속성 로더는 파일을 해석하고 변환하는 과정 플러그인은 해당 결과물의 형태를 바꾸는 과정 // webpack.config.js module.exports = { plugins: [] } 플러그인 배열에는 생성자 함수로 생성한 객체 인스턴스만 추가될 수 있다. const webpack = require(..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Loader 웹팩이 웹 어플리케이션을 해석할 때 웹 자원을 변환시켜주는 속성 자원을 해석할 때 js, json파일을 기본으로 본다. 만약 다른 파일을 모듈로 불러와 사용하게 될 경우, loader 라는 요소를 설정해줘야 한다. // webpack.config.js module.exports = { module: { rules: [ { test: , use:[]..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Output 웹팩이 빌드되고 난 후 결과물의 파일 경로. // webpack.config.js module.exports = { output: { filename: 'bundle.js' } } 객체형태로 옵션을 추가할 수 있다. 최소한의 옵션으로 filename을 지정해줘야 한다. Output 옵션 속성 // webpack.config.js module.exp..

[ Webpack 시리즈 ] [Webpack] - #1 Webpack이란? [Webpack] - #2 Entry [Webpack] - #3 Output [Webpack] - #4 Loader [Webpack] - #5 Plugin [Webpack] - #6 Dev Server [Webpack] - #7 웹팩 세팅하기 (feat: ES module) Entry 웹팩에서 웹 자원(HTML, CSS, JavaScript, Image, Font...)을 변환하기 위해 필요한 최초 진입점 자바스크립트 파일 경로 웹팩이 빌드를 수행하는 곳 // webpack.config.js module.exports = { entry: './src/index.js' } 어떤 내용이 담겨야 하는가? 웹 어플리케이션의 전반적인 구조..