CS겸 취준까지

ESLint란 ESLint는 ‘작성한 JS코드가 EcmaScript재단에서 명시한 Specifiaction에 부합하는지 검사해주는 툴’ 이라고 할 수 있음 ESLint는 문자 그대로 ES와 Lint를 합친 것 ES는 EcmaScript로서 Ecma재단에서 만든 Script Specification이라 할 수 있고 Lint는 에러가 있는 코드에 표시를 달아주는 것을 의미함 ESLint는 코드에 특정 스타일과 규칙을 적용해서 문제를 사전에 찾고 패턴을 적용시킬 수 있는 정적 분석 툴로 분류 함 기본적인 기능은 에러도출이나 전반적인 코딩스타일(tab설정, ; 여부, usingSpaces 등)을 직접 정할 수도 있음 ESLint는 자신의 스타일과 규칙을 정해서 사용할 수도 있고 대기업에서 사용하는 스타일과 규칙..

JavaScript의 런타임 모델 자바스크립트는 싱글 스레드 기반의 언어이다. 하나의 스레드 = 하나의 콜 스택 = 한번에 하나의 작업 입력된 호출을 순차적으로 실행한다. 앞선 코드가 다 실행되기 전까지 다른 코드를 실행시키지 않는다. 자바스크립트는 웹브라우저 상에서 동작한다. 실행하기 까지 오래걸리는 A라는 코드가 존재하면 나머지 화면 렌더링이라던가 다른 동작해야하는 모든 코드가 A코드가 실행을 마칠 때까지 기다려야 한다.(블로킹 현상) 이벤트 루프 이벤트 루프는 코드의 실행, 이벤트의 수집과 처리, 비동기 함수들의 처리를 담당하는 메커니즘이다. 동기 함수는 그대로 실행하게 되고 비동기 함수들은 Web API로 처리하여 일을 분배한다. 자바스크립트의 싱글 쓰레드 특성을 유지하면서 비동기적인 동시성을 제..

아래의 글은 좋은 글들을 발췌해 모아 편집한 내용입니다. 발췌의 출처는 제일 하단에 모아놓았습니다. 브라우저 이벤트 이벤트란 시스템에서 일어나는 액션이다. 브라우저의 모든 DOM 노드는 액션을 만들어 낼 수 있다. 이벤트 흐름의 3단계 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계 참고) 자주 사용되는 DOM 이벤트 마우스 이벤트: click : 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때(터치스크린이 있는 장치에선 탭 했을 때) 발생합니다. contextmenu –:요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 발생합니다. mouseover와 mouseout : 마우스 커서를 요소 위로 움직였을..

1. 클로저란? 클로저는 프로그래밍 언의 스코프와 관련된 속성으로, 특히 함수형 프로그래밍에서 중요하다. 여기서 함수형 프로그래밍에서 중요한 이유는 1. 테이터 은닉 : 클로저를 사용하면, 특정 함수에 한정된 변수를 만들 수 있다. 이는 외부에서 해당 변수에 접근하거나 수정하는 것을 막을 수 있다. 이런 특성은 모듈화, 정보 은닉, 캡슐화 등의 개념과 일치하며, 프로그램의 안정성을 높인다. 2. 상태유지 : 클로저는 함수가 종료된 이후에도 특정 데이터를 기억하는데 사용한다. 이는 함수가 일종의 상태 유지하는 것이다. 예를 들어 함수 호출 간에 일종의 메모리를 갖게 해준다. 이러한 특성은 반복자, 비동기 프로그래밍, 함수 메모이제이션 등에 유용하게 사용된다. 3. 고차 함수와의 상호작용 : 클로저는 고차 ..

더 많은 아키텍처 디자인 패턴은 피그마로 정리하였습니다. Figma Created with FigJam www.figma.com 사전에 알아야 하는 개념 Presentation(프레젠테이션) 로직 실제 눈에 보이는 GUI 화면을 구성하는 코드 비즈니스 로직 데이터를 보여주기 위해서 데이터베이스를 검색하는 코드 및 GUI 화면에서 새롭게 발생된 데이터를 데이터베이스에 저장하는 코드 의존성이 강해지면? 하나의 데이터의 변화가 다른 데이터의 변화를 함께 불러옴 상호간의 연결이 강해진다는 뜻으로 유지 보수하기 어려워진다 MVC 특징 컨트롤러와 뷰는 1:n 관계입니다. 컨트롤러는 뷰를 선택할 뿐 업데이트 하지 않습니다. 업데이트는 (model에서 view로 데이터를 받아올 때 || view가 model을 직접 이..

1. 비동기 방식 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 생할하는 특성을 말한다. 기다리는 동안 다른 함수를 호출할 수 있다. 2. 동기적 방식 작업이 끝날 때까지 다른 작업을 할 수 없다. 위 그림과 같이 비동기적과 동기적을 나타낼 수 있다. 동기적은 위그림과 같이 1번 작업이 끝나고 2번 그리고 2번 끝나면 3번 이러한 순서로 진행이 된다. 하지만 비동기적은 1번이 끝나기 전에 2번 코드를 실행 그리고 3번 4번 이러하게 진행이 가능하다. 비동기적에서 대표적인 함수는 setTimeout()가 있다. 이 코드는 바로 실행하지 않고 지정한 시간만큼 기다렸다가 로직을 실행한다. 아래와 같이 예시가 있다. function test() { console.log('첫번째')..

선요약 map은 리턴 값을 받을 수 있지만, forEach는 리턴 값을 받을 수 없으며 리턴 값은 항상 undefined이다. 공통점 1. Array 관련 메서드들로 ES5 부터 등장하였다. 2. 세 개의 인자를 가지고 호출된다. - currentValue (배열 원소의 값) - index (현재 요소의 인덱스) - array (현재 배열) 차이점 forEach()가 배열 요소마다 한 번씩 주어진 콜백함수를 실행 -> 새로운 배열 X map()은 배열 내의 모든 요소 각각에 대하여 주어진 콜백함수를 호출한 결과를 모아 새로운 배열을 반환한다 Array.prototype.forEach forEach() 메서드는 for문을 대체할 수 있는 함수다. forEach 메서드는 자신의 내부에서 반복문을 실행한다. ..

1. 객체 지향 프로그래밍(Object-Oriented Programming, OOP) 이란? 객체 지향 프로그래밍이 있기 전 절차 지향 프로그램이라는 것이 있었다. 이는 프로그램을 순차적인 절차로 구성하는 방식인데, 작은 문제를 해결하기 위해 절차를 정의하고, 그 절차들을 조합하여 큰 문제를 해결하는 방식이다. 하지만 프로그램이 커지고 복잡해지면서 코드의 유지보수와 디버깅이 어려워지는 문제가 생겼다. 그리고 데이터와 그 데이터를 조작하는 함수들이 분리되어 있어 코드의 응집성이 떨어졌다. 이를 보완하기에 나온게 객체 지향 프로그래밍이다. 객체지향 프로그래밍은 객체라는 단위로 구성하는 방식이다. 객체는 데이터와 데이터를 조작하는 함수들을 하나의 단위로 묶어서 관리한다. 이를 통해 코드의 응집성을 높이며, ..

호이스팅 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다. 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. (코드를 실행하기 전 변수선언/함수선언을 해당 스코프의 최상단으로 끌어올리는 것이 아니며, 끌어 올려진 것 같은 현상을 말한다. 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화는 없다.) 이 호..

호이스팅이란? 호이스팅은 변수나 함수 선언을 코드 상단으로 끌어올리는 동작을 말한다. case 1. 변수 호이스팅 Var vs Let & Const Var var는 선언과 초기화가 동시에 일어나면서(선언과 초기화가 분리되지 못하기 때문) 호이스팅이 발생한다. 함수에 쓰인 것 말고도 for + if문에 쓰인 것도 올라간다. var a 로 선언할 때 undefind로 기본값이 초기화 된다. console.log(호이스팅); // undefind console.log(i); // undefind var 호이스팅 = '호이스팅' console.log(호이스팅); // 호이스팅 for (var i = 0; i < 10; i++) {...} let & const 선언에는 호이스팅이 발생하지만 초기화는 호이스팅이 되..