최댓값과 최솟값 ❓ 문제설명 문자열 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) { // 내풀이 // 입력값을 모두 돌면서 최솟값과 최댓값을 각각 확인해서 정리한 후 결과 반환 return s.spl..
JAVASCRIPT 코드 품질을 높여주는 JS 함수 🔎 Debounce debounce 함수는 일련의 빠른 이벤트가 반복적으로 함수를 활성화 하는 것을 방지하는 역할을 한다. 이벤트가 실행되지 않은 채로 일정 시간이 경과할 때까지 이벤트를 실행시키지 않고 함수의 실행을 연기하는 방식으로 동작한다. debounce 함수는 사용자가 버튼을 빠르게 클릭했을 때 함수들이 실행되는 것을 방지하여 성능을 향상하는 방식으로 아주 유용한 해결책이다. // JS에서 debounce 구현 function debounce(func, delay) { let timeout return function() { const context = this const args = arguments clearTimeout(timeout) t..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 2. Package Manager 🔎 npm & yarn npm과 yarn은 Node.js 의 패키지 관리자로 전 세계의 개발자들이 자바스크립트로 만든 다양한 패키지를 npm 온라인 데이터베이스에 올리면 npm, yarn 과 같은 패키지 관리자를 통해 설치 및 삭제가 가능하다. 그리고 명령 줄 인터페이스(CLI)를 통해 패키지 설치 및 삭제뿐 아니라 패키지 버전 관리, 의존성 관리도 편리하게 할 수 있다. npm npm 은 Node Package Manager의 줄임말로 노드를 설치할 떄 자동으로 설치되는 기본 패키지 관리자. 사람들이 노드 패키지를 만들고, 업로드하고, 공..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 Tools 2. Module Bundler 🔎 Module 애플리케이션의 크기가 커지면 개발하는 과정에서 파일을 여러개로 분리하게 되는데 여기서 분리된 각각의 파일을 모듈(module) 이라 한다. 모듈화의 필요성 기능의 분리가 가능하고 인터페이스가 단순해진다. 하나의 파일에 많은 기능들을 작성하면 코드 파악이 힘들고 관리가 어려워진다. 따라서 기능별로 파일을 분리하여 관리할 필요성이 있다. 각 모듈은 자신만의 스코프를 보장해준다. 하나의 파일에서 모든 코드를 관리하면 변수나 함수명이 중복되거나 다른 기능의 코드끼리 서로 영향을 끼칠 수 있다. 이러한 문제를 해결하기 위해 기능별로 여..
JAVASCRIPT Event Loop 자바스크립트는 싱글 스레드로, 한 번에 한 가지 일만 할 수 있다. 일반적으로 이는 큰 문제가 되지 않지만 30초가 걸리는 일을 수행한다고 생각했을 때 이는 30초동안 아무것도 할 수 없는 상태가 된다는 것이다. 다행히, 브라우저는 자바스크립트 엔진에서는 제공하지 않는 Web API (DOM API, setTimeout, HTTP request)를 지원한다. 이러한 Web API들은 비동기, non-block 동작을 만드는데 도움을 준다. 우리가 함수를 실행하면, 그 함수는 call stack에 추가된다. 콜 스택은 자바스크립트 엔진의 한 부분이며, 브라우저에만 한정된 것은 아니다. 이것은 선입후출의 스택으로 함수가 값을 반환하면 그 함수는 스택에서 빠져나와 사라진..
JAVASCRIPT this 바인딩 객체지향 프로그래밍 언어들은 this라는 키워드를 사용한다. 이 때 this는 해당 코드를 실행하는 클래스의 인스턴스를 나타낸다. JavaScript에도 this라는 키워드가 있는데 JS에서 사용되는 this 는 기존 객체지향 프로그래밍 언어에서의 this와는 다른점이 있기 때문에 객체지향 프로그래밍 언어에 익숙한 사람들은 이해하지 못하는 경우가 있다. function foo() { const a = 10 console.log(this.a) } foo() // ??? JS를 처음 접할 때 해당 코드에서 출력값은 10일 것이라 기대한다. 하지만 실제로는 10이라는 값이 출력되지는 않는다. JS에서 this가 참조하는 것은 함수가 호출되는 방식에 따라 결정되는데 이것을 t..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 4. Server Side Rendering (SSR) SSR은 서버측에서 렌더링 하는 방식을 말하며 사용자가 웹 어플리케이션에 접근 시 서버에 페이지에 대한 요청을 하고 서버에서는 HTML, JS 와 같은 리소스들을 렌더링하여 반환한다. 장점 SEO(검색엔진 최적화)에 유리하다. 요청한 페이지의 html을 다운로드 하기 때문에 CSR에 배해 초기 로딩이 빠르다. 각각 페이지에 대한 정보를 입력하기 쉽다. 단점 매번 새로운 html을 받아오기 때문에 사용자 경험이 좋지 않다. (화면 깜빡임) Header, Footer 같은 중복된 내용도 매번 렌더링 하여 다운..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 3. Static Site Generators (SSG) 🔎 Single Page Application (SPA) SPA는 단일 웹페이지로 구성된 웹 어플리케이션을 말한다. 웹 어플리케이션에 필요한 모든 정적 리소스를 최초 한번에 다운로드 하고, 이후 새로운 페이지 요청이 있을 때 갱신에 필요한 데이터만 전달받아 페이지를 재구성한다. 클라이언트 관점에서 최초 페이지를 로딩한 이후 리로딩 없이 필요한 부분만 서버로 받아 화면을 갱신하기 때문에 자연스러운 페이지 이동(새로고침 시 화면 깜빡임 X)과 사용자 경험을 제공할 수 있다. . 🔎 Multi Page App..
https://www.youtube.com/watch?v=TTLHd3IyErM - 드림코딩 Front-end 로드맵 영상 JavaScript 심화 1. TypeScript 🔎 What is TypeScript? JavaScript의 단점을 보완하기 위해 MS에 의해 개발/관리 되고 있는 JS 기반으로 만들어진 정적 타입 언어. 런타임에서야 타입이 결정되는 JS는 런타임에서야 예상치 못한 에러를 발견할 수 있고 타입에 대한 안정성이 보장되지 않기 때문에 프로젝트가 커질수록 디버깅이 어려운 단점이 있다. TS는 이러한 JS의 단점을 보완하여 코드 작성단계부터 타입을 체크하고 오류를 확인할 수 있다. 또한 ES6+ 문법을 포함하고 있어 클래스, 인터페이스, 상속 등과 같은 객체지향 프로그래밍(OOP) 패턴을 ..
JAVASCRIPT Map 객체 기존 객체와는 다르게 메소드만을 이용하여 값을 넣고 뺄 수 있다. 객체(Object)와 다르게 문자열이 아닌 값도 키로 사용 가능하며 추가된 순서대로 반복이 가능하다. const testMap = new Map([ [1, '숫자'], ['1', '문자'], [true, 'boolean'] ]) console.log(testMap.get(1))// '숫자' console.log(testMap.get('1'))// '문자' console.log(testMap.get(true))// 'boolean' for (const [key, value] of testMap) { console.log(key + " : " + value) } // 1 : 숫자 // 1 : 문자 // true..
