0. 동기 동기적 처리 (Synchronous) 순차적 실행 서버에 요청을 보냈을 때 응답이 돌아온 뒤 다음 동작을 수행 A 작업이 모두 진행되어 마칠 때까지 B 작업은 대기 ex. console.log('first'); console.log('second'); console.log('third'); /* first second third */ 위와 같이 코드를 작성한 뒤 실행되는 결과를 확인해 보면 위에서부터 한 줄씩 내려오며 하나의 작업이 완전히 끝난 뒤 다음 코드가 차례로 실행되는 것을 확인할 수 있다. 이를 동기적 처리 방식이라고 한다. 1. 비동기 비동기적 처리 (Asynchronous) 서버에 요청을 보냈을 때 응답 상태와 관계 없이 다음 동작 수행 가능 A 작업이 시작되면 동시에 B 작업 실..

0. 미들웨어란? 운영 체제와 해당 운영 체제에서 실행되는 응용 프로그램 사이에 존재하는 소프트웨어 요청이 들어오면 응답까지 걸리는 중간 과정을 함수로 분리한 것 기본적으로 숨겨진 변환 계층으로 기능하는 미들웨어는 분산 응용 프로그램의 통신 및 데이터 관리를 가능하게 함 데이터와 데이터베이스사이를 "파이프"로 연결하기 때문에 배관이라고도 불림 미들웨어를 사용해 사용자가 웹 브라우저에서 양식을 제출할 수 있음 웹 서버가 사용자의 프로필을 기반으로 동적 웹 페이지를 반환하도록 요청 가능 쉽게 말하자면, 서버와 클라이언트를 이어주는 중간 작업을 하는 것 1. 기능 1.1 클러스터링 (Clustering) 기기들을 고속 네트워크를 이용하여 병렬로 연결 여러 개의 같은 작업을 하는 서버를 하나의 컴퓨터처럼 사용하..

깃허브에 리포지토리 안만든 상태에서 로컬에서 프로젝트 생성했을때 : 깃허브에서 새 리포지토리 생성 (임의로 만든 프로젝트랑 똑같이 이름 설정하는게 좋음) git init : 현재 있는 경로에서 모든 파일을 깃으로 버전 관리를 하겠다 ls -al : 아래 .git이 생김 + 옆에 메인 브랜치 표기 + 변경 사항 표기 git add . : 스태이지 올림 git commit -m " " gir remote add origin 깃허브 주소 git remove -v 하면 현재 리포지토리 확인 가능 git push -u origin main : 올라감 다른 사람이 올린 깃허브 파일 불러오기 (클론) : git bash 열어서 어디에 파일 만들건지 이동 git clone 깃허브주소 하면 클로닝 인투 뜨면서 진행 cd..

0. Node.js란? 서버 측 자바스크립트 런타임 환경 확장성 있는 네트워크 애플리케이션 (특히 서버 사이드) 개발에 사용되늰 소프트웨어 플랫폼 브라우저 밖에서도 자바스크립트 사용 가능 자바스크립트 실행 엔진으로 구글 크롬에서 사용하는 V8 엔진 탑재 ▶ 실행 속도 빠름 단일 스레드 이벤트 루프, 비동기 I/O 모델 사용 ▶ 가볍고 효율적 + 높은 처리 성능 내장 HTTP 서버 라이브러리 포함 ▶ 웹 서버에서 별도 소프트웨어(ex. 아파치 등) 없이 동작 가능 NPM 패키지 매니저 : 세계에서 가장 큰 오픈 소스 라이브러리 ★ 런타임 runtime = 실행시간 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 의미 컴퓨터 언어 안에 쓰인 프로그램을 관히라기 위해 특정 컴파일러 혹은 가상 머신이 사용하는 기..

0. Process (프로세스) 컴퓨터에서 연속적으로 실행되고 있는 컴퓨터 프로그램 운영체제로부터 시스템 자원을 할당받는 작업의 단위 즉, 동적인 개념으로는 실행된 프로그램을 의미 각각 독립된 메모리 영역을 할당 / 별도의 주소 공간에서 실행 ▷ 한 프로세스가 다른 프로세스의 변수나 자료구조에 접근 불가 ▷ 다른 프로세스의 자원에 접근하기 위해선는 프로세스 간 통신을 사용해야 함 (ex. 파이프, 소켓, 파일 등을 이용한 통신 방법 사용) 기본적으로 프로세스당 최소 1개의 스레드 (메인 스레드) 가짐 1. Thread (스레드) 프로세스 내에서 실행되는 흐름의 단위 하나의 프로세스에는 n 개의 스레드 존재 한 프로세스 내에서 동작하는 여러 실행의 흐름 ▷ 프로세스 내의 주소 공간이나 자원을 같은 프로세스..

[ IP ] 1. IP란? 인터넷상에서 데이터를 주고 받기 위한 통신 규약 스마트폰, 컴퓨터, 운영체제, 프로그램에 따라 각각 구현된 언어가 다름 ▷ 네트워크에서 통신할 수 있도록 프로토콜 (공통된 통신 규약)이 필요 프로토콜을 국제적으로 표준화하기 위한 ISO 위원회 -> OSI 7계층 中 3계층 ip 2. IP 주소 IP 통신에 필요한 고유 주소 (Adress) 인터넷에 연결되어 있는 모든 장치들 (컴퓨터, 서버 장비, 스마트폰 등)을 식별할 수 있도록 각각의 장비에 부여 데이터를 주고 받기 위해 사용되는 주소 ※ [윈도우 기준] CMD 창에서 ipconfig 라는 cli 명령어를 통해 IPv4 주소 확인 가능 2.1 IPv4 IP version 4 일반적으로 많이 사용하는 IP 주소로, 먼저 등장 ..

[ 서버 ] 1. 서버란? 사전적 의미: 서버 [ Server ] 1. 테니스, 탁구, 배구 등 서브를 하는 쪽, 혹은 그 사람 2. 음식물을 제공하기 위해 사용하는 도구 3. 네트워크에서 다른 컴퓨터나 소프트웨어와 같은 클라이언트에게 서비스를 제공하는 컴퓨터 '제공한다'라는 뜻을 가진 'serve' + 사람이라는 뜻을 가진 'er'을 붙인 단어 웹 서비스는 클라이언트 (Client), 서버 (Server), 데이터베이스 (Database)로 구성 클라이언트 : 사용자가 보는 부분 서버 : 클라이언트에서 사용자가 요청한 자료를 DB에서 가져와서 다시 클라이언트 사용자에게 제공/응답 데이터베이스 : 요청한 자료(리소스)를 저장하고 있는 역할 쉽게 이해하기 위해 실생활에 접목해서 생각을 해본다면, 클라이언트..

0. 미디어 쿼리란? Media Query 반응형 웹을 디자인할 때, 접근하는 기기에 따라 다른 스타일을 적용해주어야 하는데, 이때 활용할 수 있는 스타일 시트 단말기의 유형 (출력물 vs 화면)과, 어떤 특성 혹은 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 각각의 스타일을 설정할 때 유용 미디어 유형과 미디어 특성을 기반으로 동작 1. 미디어쿼리 작성 방식 1.1 link 요소 사용 요소에 사용하게 되면, 특성이 조건에 맞을 때, css 파일을 불러오게 됨 media 속성의 "screen and (max-wodth: 768px)"의 의미 : 미디어 타입 : screen / 화면의 최대 너비 : 768px로 지정 => 화면의 너비가 768px 이하 일 때 적용되는 것 1.2 @medi..

0. JQuery란? 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리 거의 모든 웹 브라우저에 적용이 될 정도로 여러 브라우저에 대한 호환성이 있음 물론 JS 만으로도 충분히 구현이 가능하지만, 코드를 쉽고 간결하게 작성할 수 있도록 도움을 줌 CDN을 불러와야 하기 때문에, 코드가 길어지고 무거워지면 JS와 비교하였을 때 시간이 조금 더 걸릴 수 있다는 특징 사실 JQuery는 점점 입지가 줄어들고 있다고 한다. React나 Vue와 같은 자바스크립트 라이브러리가 많이 사용되며 그만큼 JQuery에 대한 관심도가 줄어드는 것 같다고 생각한다. 실제로 google trend 사이트에 들어가 해당 검색어에 대한 작년 5년간의 관심도 변화를 확인할 수 있는데,..

0. 반응형 웹이란? Responsive Web 같은 웹 페이지를 디바이스의 크기에 따라 알맞은 레이아웃을 보여줌 ▶ 감지된 화면 크기에 따라 자동으로 페이지가 재배열되는 유동적인 방식 웹 페이지의 디자인과 레이아웃이 다양한 화면 크기에 자동적으로 맞춰짐 CSS의 미디어 쿼리 (맞춤형 스타일 시트) 를 사용하여 구현 ▶ 이를 바탕으로 자체적으로 렌더링 하나의 웹 페이지에서 처리할 수 있다는 장점 때문에 많이 사용 ex ) 카카오모빌리티 : https://www.kakaomobility.com/ [ 장점 ] 모든 플랫폼에 대해 일관된 자료와 구조 제공 보편적이지 않은 화면 크기가 아닌 기기에서도 정상적으로 작동 [ 단점 ] 디자인에 대한 더 깊은 전문 지식 요구 요소가 잘못된 순서 혹은 크기로 배치되지 않..