📰 전산학 CS 정리
호이스팅
- 함수 및 'var' 선언은 컴파일 단계 중에 포함한 범위의 맨 위로 이동
- 함수나 변수가 선언되기 전에 사용 가능
클로저
- 함수가 어휘 범위 밖에서 실행될 때에도 어휘 범위에 대한 액세스 유지 함수
- 데이터 캡슐화와 팩토리 또는 개인 변수 생성 가능
DOM
- 웹 페이지 콘텐츠를 트리 모양으로 표현
- 브라우저가 HTML 문서를 구문 분석하여 생성
- JavaScript 는 DOM 과 상호작용하여 웹 페이지 동적 변경 가느
CSS
- 상속
- 상위 요소의 일부 css 속성들은 하위 요소에 상속됨
Cors-header
- 웹 페이지의 리소스가 다른 도메인에서 요청되는 것을 허용하거나 제한하는 보안 기능
- Access-Control-Allow-Origin 과 같은 HTTP 헤더를 통해 구현
HTTP 와 HTTPS
- HTTP 는 웹에서의 데이터 통신을 위한 기본 프로토콜
- HTTPS 는 데이터 무결성과 보안을 보호하기 위해 TLS/SSL 로 암호화된 HTTP 보안 버전
RESTFul API
-
웹 서비스 개발에 자주 사용되는 아키텍처 스타일 및 통신 접근 방식인 REST 기술 기반
-
특징
상태 비저장- 클라이언트에서 서버로의 각 HTTP 요청에는 요청을 이해하는데 필요한 모든 정보 포함
클라이언트-서버 아키텍처- 클라이언트는 데이터 저장소와 관련 없지만 서버는 UI 또는 사용자 상태와 관련 X
통일된 인터페이스- 서버와 상호 작용하는 표준 방법 (GET, POST 등과 같은 HTTP 메서드)
계층화된 시스템- 계층으로 구성된 아키텍처
-
장점
- 확장성 (상태 비저장)
- 유연성 (클라이언트-서버 아키텍처)
- 캐시
동기 & 비동기
-
동기- 작업이 순서대로 수행
- 다음 작업으로 수행하기 위해 이전 작업이 완료될 때까지 기다림
-
비동기- 작업이 독립적으로 수행
- Javascript 에서 callback, Promises 및 async-await 사용하여 수행
JWT (Json Web Token)
- 두 당사자 간 전송할 클레임을 나타내는 간결하고 URL 안전 수단
- 인증 및 정보 교환에 자주 사용
- Header.Payload.Signature
- 액세스 토큰과 새로 고침 토큰이 모두 JWT 이지만 별도의 토큰
- 보호된 리소스에 액세스하기 위해 일반적으로 HTTP 헤더에 포함
- 프로세스
- 사용자 인증 (로그인)
- 토큰 생성 (서버는 자격 증명의 유효성을 검사 후 인코딩 및 서명된 JWT 생성)
- 토큰 전송 (서버가 JWT 를 클라이언트로 다시 전송)
- 클라이언트 저장소 (클라이언트는 일반적으로 로컬 저장소 or 쿠키에 JWT 저장됨)
- 후속 요청 (JWT 가 요청 헤더에 포함)
- 확인 (서버는 각 요청에서 JWT 확인, 유효성에 따라 액세스 권한 부여)
- 프로세스 상세히
- 로그인을 통해 토큰 발급
- 토큰은 클라이언트가 Local Storage 혹은 Cookie 로 저장
- 보호된 경로나 리소스에 접근하기 위해 HTTP 요청에 JWT 포함하여 전송
(일반적으로 헤더) - 서버가 JWT 를 확인하며 서명/변조되었는지/발급자/만료되었는지 클레임 확인하여
유효성 검사 - 토큰이 유효하면 리소스 또는 경로에 액세스 허용
- access token
- 리소스에 액세스하는데 사용되는 단기 토큰
- 보안상의 이유로 수명 제한
- refresh token
- 수명이 길고 새 액세스 토큰 요청하는데 사용
- 안전하게 저장되며 액세스 토큰 만료될 때 사용
- 탈취시 액세스 토큰보다 더 위협적
- 보안 고려 사항
- HTTPS : 토큰 탈취 방지
- 민감한 데이터는 JWT 페이로드에 저장 X
브라우저 생성 과정
-
1 ) HTML 파일 응답하는 웹 서버에 HTTP 요청
-
2 ) HTML 구문 분석 및 DOM 생성
-
3 ) 추가 리소스로 CSS, JS 및 이미지 등 연결된 것을 식별
-
4 ) CSS 를 통해 DOM 의 요소에 적용되는 CSSOM 생성
-
5 ) JS 적용하여 실행, DOM 을 조작하여 동적 웹 페이지 실현
-
6 ) DOM 과 CSSOM 결합하여 렌더링 트리 생성
-
7 ) 브라우저에 표시되는 레이아웃 계산 (리플로우)
-
8 ) 텍스트, 색상, 이미지 등 렌더 트리에 지정된 요소를 그리는 작업으로 페이지 페인팅
-
9 ) 동적 변경, 초기 렌더링 후 사용자와 상호 작용하거나 비동기 JS 실행
웹 표준
- W3C 유지하면 브라우저 간 호환성, 접근성 및 SEO 친화적 웹 애프리케이션 보장
- 시멘틱 HTML, 적합한 CSS 및 액세스 가능한 JS 사용 포함
HTML5
- 시멘틱 요소, 멀티미디어 요소 및 오프라인 애플리케이션, 드로잉 그래픽 등을 도입
<article> <section> <nav> <header> <footer> <video> <audio> <canvas>
CSS3
- CSS3에는 둥근 모서리, 그림자, 그라디언트, 전환, 애니메이션과 기능 도입
- Flexbox 및 Grid와 같은 새로운 레이아웃 도입
크로스 브라우징
- 브라우저 간 호환성은 웹 응용 프로그램이 다양한 웹 브라우저에서 작동
- 이전 브라우저에 대한 대체, 공급업체 접두사 및 기능 검색이 포함
SQL & NoSQL
-
SQL(Structured Query Language)- SQL DB 는 관계형 테이블 기반 DB
- 복잡한 쿼리 및 트랜잭션 데이터에 적합
-
NoSQL- NoSQL DB 는 비관계형 DB
- 문서, 키-값, 와이드 열 또는 그래프 기반 등 다양한 방식으로 데이터를 저장
- 유연성과 확장성을 제공
객체 지향 프로그래밍(OOP)
- 데이터와 코드, 즉 필드 형태의 데이터와 프로시저 형태의 코드를 포함할 수 있는 "객체"의 개념을 기반으로 하는 프로그래밍 패러다임
인터프리터 언어 & 컴파일 언어
인터프리터 언어- 인터프리터에 의해 한 줄씩 실행 (JavaScript, Python)
- 인터프리터에 의해 한 줄씩 실행 (JavaScript, Python)
컴파일 언어- 실행 전 기계어 코드로 변환 (C, Java)
쿠키
- 고객의 브라우저에 저장되는 작은 데이터
- 세션 또는 요청 간의 정보를 기억하는 데 사용
이벤트 버블링
- DOM 에서 이벤트는 특정 요소에서 시작하여 외부 요소까지 버블링
'==' 와 '===' 차이
- '==' 값을 형식 강제 변환과 비교
- '===' 값과 형식을 모두 비교
MVC & MVVM
MVC(Model-View-Controller)- 애플리케이션 로직(Model), UI 레이어(View), 제어 흐름(Controller)을 구분하는 패턴
- 애플리케이션 로직(Model), UI 레이어(View), 제어 흐름(Controller)을 구분하는 패턴
MVVM(Model-View-ViewModel)- MVC 와 유사
- ViewModel은 데이터 바인딩 및 명령 패턴을 제공하는 View와 Model 사이에 존재
FLUX & REDUX
Flux- 단방향 데이터 흐름을 적용하는 아키텍처 패턴
- 틀이라기보다는 패턴에 가까움
- 프로세스
- action 전달 (dispatch)
- storage 가 action 을 처리
- state 를 업데이트
- state 변경으로 인해 view 리렌더링
Redux- React 와 함께 자주 사용되는 JavaScript 앱을 위한 예측 가능한 상태 컨테이너
- Flux에서 영감을 얻었지만 구현 및 사용법에 눈에 띄는 차이 존재
- 프로세스
- action 전달
- reducer 가 action 처리
- storage 에 state 를 업데이트
- storage 가 state 변경을 알림으로 view 리렌더링
차이- storage 수
- Flux 여러개, Redux 단일
- state 변이
- Flux 저장소에는 상태 및 변경 논리 포함
- Redux 의 리듀서가 변경사항 관리 (상태는 읽기 전용, 작업 신호가 변경)
- 디버깅
- Redux 는 단일 저장소와 리듀서 덕에 시간이동 디버깅과 같은 강력한 디버깅 도구 제공
- 복잡성
- Redux 는 단일 저장소와 리듀서 덕에 Flux 에 비해 더 이해하고 구현하기 쉬움
- 데이터 흐름
- 둘다 단방향 데이터 흐름이지만 단일저장소와 리듀서를 사용하는 Redux
Flux 에 비해 데이터흐름과 상태 관리가 단순화
- 둘다 단방향 데이터 흐름이지만 단일저장소와 리듀서를 사용하는 Redux
- storage 수
Callback
- 콜백은 다른 함수에 인수로 전달된 함수
- 그 다음 일종의 루틴이나 작업을 완료하기 위해 외부 함수 내에서 호출
function greeting(name) {
alert('Hello ' + name);
}
function processUserInput(callback) {
var name = prompt('Please enter your name.');
callback(name);
}
processUserInput(greeting);- 비동기 콜백
function fetchData(callback) {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => callback(data))
.catch(error => console.error(error));
}
fetchData(data => {
console.log(data);
});- React 콜백
function Child({ onAction }) {
return <button onClick={() => onAction('some data')}>Click me</button>;
}
function Parent() {
const handleAction = (data) => {
console.log('Child says:', data);
};
return <Child onAction={handleAction} />;
}- Event 처리
function MyComponent() {
const handleClick = () => {
console.log('Button clicked');
};
return <button onClick={handleClick}>Click me</button>;
}-
고려 사항
-
콜백 지옥 피하기
- 콜백을 과도하게 중첩하면 (일반적으로 "콜백 지옥" 또는 "파멸의 피라미드"로 알려짐)
- 코드를 읽고 유지 관리하기가 어려움
- 이를 방지하려면 Promises 또는 async-await를 사용
-
인라인 함수
- React에서는 특히 이벤트 핸들러의 경우 인라인 익명 함수가 콜백으로 사용되는 경우가 많음
- 그러나 렌더링할 때마다 새로운 기능이 생성, 올바르게 처리 안되면 성능 문제가 발생 가능
-
useEffect의 종속성
- React의 useEffect 내에서 콜백을 사용할 때 종속성 배열에 유의
- 함수 참조를 변경하면 불필요한 다시 렌더링이나 효과
-
퍼블리싱 과정 (빌드부터 호스팅까지)
-
프로덕션용 응용 프로그램을 빌드하고 적절한 호스팅
-
호스팅 방법- 정적 사이트 호스팅
- 정적 웹 사이트 or 단일 페이지(SPA) 적합
- Netlify, Vercel, Github Pages, AWS S3
- 장점 : 설정하기 쉽고 CDN 을 통한 빠른 배송, 기본 사용의 경우 종종 무료
- 단점 : SSR 또는 백엔드 서버가 있는 APP 에는 부적합
- 클라우드 호스팅
- 동적 컨텐츠, 서버 측 논리 또는 DB 가 있는 APP
- AWS, Google Cloud, Azure
- 장점 : 확장성이 뛰어나고 안정적 유연, 다양한 서비스(DB, AI, ServerLess) 제공
- 단점 : 설정 및 관리가 더 복잡, 비용은 사용량에 따라 증가 가능
- 서버리스 호스팅
- 마이크로서비스 기반 아키텍처, 이벤트 기반 APP
- AWS Lambad, Azure Functions, Google Cloud Functions
- 장점 : 높은 확장성, 사용한 만큼 지불, 서버 관리 없음
- 단점 : 복잡한 응용 분야까지는 까다로울 수 있으며 콜드 스타트 가능성 존재
- 정적 사이트 호스팅
최상의 호스팅 방법을 선택하는 것은 응용 프로그램의 특정 요구 사항에 따라 달라짐
선택한 호스팅 방법에 관계없이 배포하기 전에
응용 프로그램이 적절하게 최적화되고 안전한지 확인
간단한 클라이언트 측 애플리케이션의 경우 Netlify 또는
Vercel과 같은 정적 사이트 호스트는 단순성과 성능 면에서 탁월
백엔드 지원이 필요한 더 복잡한 애플리케이션의 경우 AWS 또는
Google Cloud와 같은 클라우드 호스팅 서비스가 더 큰 유연성과 확장성을 제공
일단 한다