본문 바로가기

Study/웹기초

 (18)
관심사의 분리(SoC) 관심사의 분리 (Separation of concerns) 소프트웨어 개발에서 가장 기본적인 원칙중 하나이다. 각 부문이 각자의 관심사를 갖도록 컴퓨터 프로그램을 여러 부문으로 나누는 설계 원칙. 프로그램을 관심사 별로 쪼개서 가능하면 한 번에 한 가지 문제를 해결함으로써 프로그램 개발과 유지보수 시의 복잡성을 줄일 수 있다. 원칙 프로그램을 하나의 단일블록으로 작성하지 않으며 작은 조각으로 나누어 각각의 개별작업을 할수있도록 만든다. SoC for functions 이 원칙은 복잡한 함수를 지양한다. 함수가 커지기 시작하면 함수가 너무 많은 작업을 처리하게 되고, 복잡해지기 시작한다. 작은 함수로 캡슐화하여 다른 부분에서 사용할 수 있게 만든다. SoC for modules 이 원칙은 각각 논리적 상관..
이벤트루프와 태스크 큐, 마이크로태스크 큐 JS는 싱글 스레드 기반의 언어이며, 하나의 호출 스택만을 사용한다. 이는 요청이 동기적으로 처리되어, 한 번에 한 가지 일만 처리할 수 있음을 의미한다. 하지만 자바스크립트가 구동되는 환경(Node.js, 브라우저)은 여러 스레드가 사용된다. 만약, 네트워크 요청과 같은 비동기 함수가 동기적으로 이루어지는 함수로 만들어졌다면, 어떤 일이 일어날까? 네트워크 요청이 다른 서버로 보내지고, 컴퓨터는 응답 받기를 기다리며 느려질 것이다. 그 사이에 클릭이나, 다른 요소가 렌더링이 되어져야 하는게 있더라도, 스택은 네트워크 요청 함수에 블락킹 되어있으므로, 아무 일도 일어나지 않게 된다. 이러한 문제는 비동기 콜백을 사용함으로써 해결된다. 여러 스레드가 사용되는 구동 환경이 자바스크립트 엔진과 연동하기 위해 ..
Restful API REST API란 REST를 기반으로 만들어진 API를 의미합니다. REST API를 알기 위해 REST부터 알아보도록 하겠습니다. REST란? REST(Representational State Transfer)의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미합니다. 즉 REST란 HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE, PATCH 등)를 통해 해당 자원(URI)에 대한 CRUD Operation을 적용하는 것을 의미합니다. CRUD Operation이란 CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(..
브라우저 저장소 차이점 (LocalStorage, SessionStorage, Cookie) 브라우저 저장소 분류 웹 스토리지(Web Storage) : 웹 데이터를 클라이언트에 저장하기 위해 만들어진 저장소. 쿠키(Cookie) : 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 저장소 웹 스토리지 ( Web Storage) 웹 스토리지는 HTML5에 추가된 클라이언트 기반 키-밸류 저장소 이며, 웹 스토리지는 로컬 스토리지 ( Local Storage ) 와 세션 스토리지 ( Session Storage ) 로 나눌 수 있습니다. 로컬 스토리지 ( Local Storage ) 는 브라우저를 종료해도 데이터를 보관(영구성)합니다. 또한, 도메인만 같으면 전역적으로 데이터가 공유되는 특성을 가지고 있습니다. 세션 스토리지 ( Session Storage ) 는 브라우저가 종료되면 데이터가 삭..
this란? 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달 받는다. function square(number) { console.log(arguments); console.log(this); return number * number; } square(2); 자바스크립트의 this keyword는 Java와 같은 익숙한 언어의 개념과 달라 개발자에게 혼란을 준다. Java에서의 this는 인스턴스 자신(self)을 가리키는 참조변수이다. this가 객체 자신에 대한 참조 값을 가지고 있다는 뜻이다. 주로 매개변수와 객체 자신이 가지고 있는 멤버변수명이 같을 경우 이를 구분하기 위해서 사용된다. 아래 Java 코드의 생성자 함수 내의 this.n..
GET vs Post HTTP 메소드 중 GET방식과 POST 방식 차이 get방식이든 post방식이든 둘 다 브라우저가 서버에 요청하는 것입니다. GET 방식 GET은 요청을 전송할 때 필요한 데이터를 Body에 담지 않고, 쿼리스트링을 통해 전송합니다. URL의 끝에 ?와 함께 이름과 값으로 쌍을 이루는 요청 파라미터를 쿼리스트링이라고 부릅니다. 만약, 요청 파라미터가 여러 개이면 &로 연결합니다. 쿼리스트링을 사용하게 되면 URL에 조회 조건을 표시하기 때문에 특정 페이지를 링크하거나 북마크할 수 있습니다. 쿼리스트링을 포함한 URL의 샘플은 아래와 같습니다. 여기서 요청 파라미터명은 name1, name2이고, 각각의 파라미터는 value1, value2라는 값으로 서버에 요청을 보내게 됩니다. www.example-..
HTML&CSS 1) HTML HTML이 무엇인가요? HyperText Markup Language의 약자로, 우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 정보를 제공하는 마크업 언어이다. 페이지에 제목, 문단, 표, 이미지, 동영상 등을 정의하고, 그 구조와 의미를 부여하는 정적 언어로 웹의 구조를 담당한다. 페이지의 뼈대, 의미에 중요성을 두며, 웹페이지의 구조를 잡을 수 있게 해준다. 2) HTML의 필수 구조는? HTML 파일의 필수 구조는 어떻게 되나요? HTML 파일의 필수 구조는 크게 , : HTML 파일 가장 상단에 위치한 선언문으로 사용 중인 파일이 어떤 버전의 HTML을 사용하는지 브라우저에게 알려주는 역할 : 선언문을 제외한 다른 모든 HTML 요소의 컨테이너로, ..
클로저(Closure)란? 클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자바스크립트가 어떻게 변수의 유효범위를 지정하는지(Lexical scoping)를 먼저 이해해야 한다. 어휘적 범위 지정(Lexical scoping) 다음을 보자: function init() { var name = "Mozilla"; // name은 init에 의해 생성된 지역 변수이다. function displayName() { // displayName() 은 내부 함수이며, 클로저다. alert(name); // 부모 함수에서 선언된 변수를 사용한다. } displayName(); } init(); init()은 지역 변수 name과 함수 displayName()을 생성한다. displayName()은 init(..

티스토리툴바