본문 바로가기

📚/Computer Science

(14)

[Web] 웹 표준, 웹 접근성, 웹 호환성이란? 🔗 웹 표준 (Web Standards) 이란? 웹 표준이란 '웹에서 표준적으로 사용되는 기술이나 규칙'을 의미한다. 표준화 단체인 W3C가 권고한 표준안에 따라 웹 사이트를 작성할 때 이용하는 HTML, CSS, JavaScript 등에 대한 규정이 담겨 있다. 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다. 🔗 웹 접근성 (Web Accessibility) 이란? 웹 접근성이란 장애인, 고령자 등 모든 사용자가 어떠한 기술이나 환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보를 동등하게 접근하고 이해할 수 있는 권리를 의미한다. 웹 표준을 준수함으로써 다양한 브라우저 환경에 대응이 가능하며 휴대폰, PDA..

[Web] 반응형 웹이란? / 반응형 vs 적응형 🔗 반응형 웹 (Responsive Web) 이란? 순서대로 PC - Tablet - Mobile 화면 반응형 웹이란 각종 디바이스 또는 모니터 해상도에 따라 컨텐츠들의 사이즈, 레이아웃 등이 유동적으로 바뀌는 웹을 말한다. 일반적으로 float, flex, % 등을 사용하여 유동적으로 반응할 수 있도록 한다. 1 2 3 4 5 @media screen and (max-width: 767px){ .container{ width: 50%; } } Colored by Color Scripter cs 미디어 쿼리를 사용하여 디바이스를 지정하여 화면 크기에 따라 바뀌는 웹을 제작한다. 📌 반응형 웹 (Responsive Web) vs 적응형 웹 (Adaptive Web) 차이점 반응형 웹은 디바이스에 따라 화면..

SPA란? SSR vs CSR 차이점 🔗 SPA(Single Page Application)란? 기존 어플리케이션은 화면 이동 시 화면에 필요한 HTML을 서버로부터 받아서 처음부터 다시 로딩하기 때문에 속도가 느리다. 반면 SPA는 최초 한 번 페이지 전체를 로딩한 후 이후부터는 일부 데이터만 변경하여 화면을 구성하기 때문에 속도가 빠르다. SPA 프레임워크로는 React, Vue, Angular 등이 있다. 📌 SSR(Server Side Rendering) vs CSR(Client Side Rendering) ▪ SSR ① 서버 - 브라우저에게 HTML 응답 ② 브라우저 - 브라우저 렌더링 -> 페이지 보여짐 ③ 브라우저 - JS 다운 ④ 브라우저 - 리액트 실행 ⑤ 페이지 상호작용 가능 ▪ CSR ① 서버 - 브라우저에게 응답 ② 브..

[보안] CORS란? 🔗 CORS(Cross-Origin Resource Sharing)란? CORS는 추가적인 HTTP 요청 헤더를 사용하여 서로 다른 도메인의 웹 브라우저와 서버가 리소스 요청과 응답을 주고 받을 수 있게 하는 방법을 말한다. 🔗 CORS는 왜 필요할까? 웹 브라우저가 다른 도메인의 서버로 리소스 요청을 할 때 개인정보 유출, 피싱 사이트와 같은 보안상의 위험이 있을 수 있기 때문에 허용한 웹 브라우저만 서버에 요청할 수 있도록 하기 위해 사용한다. 🔗 CORS는 어떻게 동작할까? 웹 브라우저에서는 요청 헤더에 CORS 관련 옵션을 넣어주고, 서버에서는 요청 헤더에 해당 웹 브라우저의 요청을 허용한다는 내용을 넣어준다. 🔎 참고 자료 CORS이 나오게 된 배경 이야기 CORS란 무엇인가? 💡 같이 보면 좋..

라이브러리(Library) vs 프레임워크(Framework) 차이점 라이브러리가 각각 개별적인 기능을 하는 코드라고 하면, 프레임워크는 이것들이 연결되어 기초적인 형태를 갖춘 코드 '틀'이다. 둘 다 누군가가 짜놓은 코드를 사용한다는 점에서 비슷하다. 라이브러리는 누군가가 짜놓은 코드를 가져다 쓰는 것이고, 프레임워크는 프레임워크에서 제공하는 기본 틀 안에서 내가 코드를 덧붙여 쓰는 것이다. 라이브러리 : 내가 컨트롤하여 코딩한다. (내가 갑) 프레임워크 : 프레임워크의 규칙을 따라 코딩한다. (프레임워크가 갑) 🔎 참고 자료 라이브러리? 프레임워크? 차이점 MVC 웹 프레임워크가 뭔가요?

[패키지매니저] package.json이란? 🔗 package.json이란? 프로젝트 정보를 관리하는 파일이다. 어느 곳에서도 동일한 개발환경을 구축할 수 있게 해준다. 📌 dependencies vs devDependencies dependencies는 패키지의 배포 시 포함될 의존성 모듈을 지정한다. devDependencies는 패키지의 개발 시 사용될 의존성 모듈을 지정한다. 🔎 참고 자료 처음 시작하는 Node.js 개발 💡 같이 보면 좋을 Post [패키지매니저] npm이란? 🔗 npm(Node Package Manager)이란? 말 그대로 '노드 패키지 매니저'로, 특정 기능을 하는 자바 스크립트 패키지가 필요하면 npm에서 찾아 설치하면 된다. 패키지가 다른 패키지를 사용할 수도 있는데 devjindev.tistory.com

[패키지매니저] npm이란? 🔗 npm(Node Package Manager)이란? 말 그대로 '노드 패키지 매니저'로, 특정 기능을 하는 자바 스크립트 패키지가 필요하면 npm에서 찾아 설치하면 된다. 패키지가 다른 패키지를 사용할 수도 있는데 이를 '의존 관계'라고 한다. 📌 npm vs yarn yarn은 페이스북에서 만든 패키지 매니저이다. npm의 일관성, 보안, 빌드시 성능 등의 문제를 해결하기 위해 yarn을 만들었다. npm은 패키지들이 코드를 자동적으로 즉시 실행하는 것을 허용할 뿐만 아니라 의존성들도 즉시 자동적으로 실행되어 편리함을 제공하기도 하지만, 보안에 위험이 있을 수 있다. 이와 다르게 yarn은 오직 yarn.lock 혹은 package.json로 부터 설치되어 yarn.lock은 모든 장치들이 같은 패..

프로세스(Process) vs 스레드(Thread) 차이점 프로세스는 완전히 독립적이기 때문에 자원(코드, 데이터, 힙, 스택)을 다른 프로세스와 공유하지 않는다. 스레드는 별도의 실행 흐름을 유지하기 위해 스택만 독립적으로 유지하고, 그 이외의 자원을 다른 스레드와 공유한다. 프로세스는 운영체제 관점에서의 실행 흐름을 구성하고, 스레드는 프로세스 내에서의 실행 흐름을 구성한다.

이전 1 2 다음

티스토리툴바