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. 고차 함수와의 상호작용 : 클로저는 고차 ..

한국소프트웨어진흥원 공개SW지원센터의 문서에서 발췌했습니다. 크로스 브라우징이란? 크로스 브라우징(상호 호환성)이란 표준 웹기술을 채용하여 1. 다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦. 2. 어느 한쪽에 최적화되지 않도록 공통 요소를 사용해 웹페이지를 제작하는 기법 모든 웹브라우저에서 100% 똑같이 보이도록 만드는 것은 오해다. OS가 다르고, 기본 글꼴이 다르며 HTML을 렌더링하는 엔진이 다르기 때문에 모든 웹브라우저에서 100% 똑같이 보이게 하는 것은 가능하지 않다. 웹브라우저간 특이성 브라우저의 특이성은 당연히 존재하는 것, 특징을 알아두고 최대한 표현하고자 하는 컨텐츠 형태로 출력하는 것이 중요하다. 1. 모든 브라우저가 HTML, CSS, 자바스크립트 표준안을 충..

[ CORS(교차 출처 리소스 공유) ] CORS(Cross-Origin Resource Sharing)는 출저가 다른 자원들을 공유한다는 뜻으로 한 출저에 있는 자원에서 다른 출처에 있는 자원에 접근하도록 하는 개념 즉 교차되는 출처 자원들의 공유 다른 출처에 있는 자원을 요청한다고 하면 이를 교차 출저 요청이라고 부름 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다. 웹 애플리케이션은 리소스가 자신의 출처(도메인, 프로토콜, 포트)와 다를 때 교차 출처 HTTP 요청을 실행합니다. - mdn 설명..

CORS란 교차 출처 리소스 공유(Cross-origin Resource Sharing)로, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하기 위한 체제이다. 출처는 프로토콜, 도메인, 포트로 구성되며, 같은 출처는 이 세 가지 요소가 동일한 경우를 말한다. 브라우저는 CORS 정책을 적용하여 요청을 보낼 때 출처를 검사하고, 서버는 응답 헤더를 사용하여 허용된 출처를 명시한다. 만약 CORS 정책을 위반하는 리소스 요청이 발생하면 브라우저는 해당 응답을 무시하고 접근을 차단한다. CORS의 동작 방식은 크게 세 가지가 있다: Preflight Request (프리플라이트 요청): 브라우저는 특정 조건을 충족하는 요청에 대해 사전에 서버에 OPTIONS ..

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

HTTP 메세지 > HTTP 요청 메세지 > HTTP 응답 메세지 HTTP 메시지에 모든 것을 전송 HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML 거의 모든 형태의 데이터 전송 가능 서버간에 데이터를 주고 받을 때도 대부분 HTTP 사용 시작라인 요청 메시지 start-line = request-line / status-line request-line = method SP(공백) request-target SP HTTP-version CRLF(엔터) HTTP 메서드 (GET: 조회) 요청 대상 (/search?q=hello&hl=ko) HTTP Version 💫요청 메시지 - HTTP 메서드 종류: GET, POST, PUT, DELETE... 서버가 수행해야 할 동작 지정 GET..

[ REST ] ▶ REST REST(Representational State Transfer)는 웹에서 데이터를 전송하고 처리하는 방법을 정의한 인터페이스 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고 HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미 웹 사이트의 이미지, 텍스트, DB 내용 등의 모든 자원에 고유한 ID인 HTTP URI를 부여함 ▶ CRUD Operation CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)..