본문 바로가기

📚

(31)

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란 무엇인가? 💡 같이 보면 좋..

[React] DOM(돔)이란? Virtual DOM(가상 돔)이란? 🔗 DOM(돔)이란? 'Document Object Model'. HTML, XML 문서의 프로그래밍 인터페이스이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법(API)을 제공하여 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. 🔗 DOM에 직접 접근할 때의 문제점 DOM에 직접 접근할 경우 뷰에 변화가 있으면 다시 DOM을 변경해야 하기 때문에 브라우저의 잦은 렌더링을 유발하여 효율성이 떨어지게 된다. 🔗 Virtual DOM(가상 돔)이란? 가상 DOM은 실제 DOM의 변화를 최소화 시켜주는 역할을 한다. 뷰에 변화가 있으면, 그 변화가 실제 DOM에 적용되기 전에 가상 DOM에 적용시켜 최종 결과만 실제 DOM에 전달한다. 예를 들어 뷰에 20개의..

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

함수형 프로그래밍이란? 🔗 함수형 프로그래밍(Fuction Programming) 이란? 순수 함수를 조합하여 함수의 계산을 통해 로직을 구성하는 프로그래밍 방법이다. 🔗 순수함수란? 외부요인에 영향을 받지 않아, 같은 입력에 항상 같은 출력을 반환하기 때문에 부작용이 없다. 📌 객체 지향 프로그래밍 vs 함수형 프로그래밍 객체 지향 프로그래밍에서 함수는 어떻게(How) 해야 하는지를 나타내고, 특정 동작을 수행하는 역할을 담당한다. 함수형 프로그래밍에서 함수는 무엇을(What) 해야 하는지를 나타내고, 계산을 하는 역할을 담당한다. (👩) 함수형 프로그래밍은 사용해 본 적이 없어서 글을 읽어도 이해가 잘 안 됐는데 이 동영상이 많이 도움 됐다 👍 www.youtube.com/watch?v=jVG5jvOzu9Y&t=2s 🔎 참..

이전 1 2 3 4 다음

티스토리툴바