[WEB] SSR vs CSR (ft. 유행은 돌고 돈다)

웹 개발의 변화jsp의 경우 SSR 방식 (서버에서 html 만들어 보냄) React의 경우 CSR 방식 (브라우저에서 JS로 화면 그림)Next의 경우 SSR 방식 (서버에서 html 만들어 보냄) ??SSR(Server Side Rendering) 이란 ?서버에서 HTML 을 만들어서 클라이언트에게 보내는 방식첫 로딩이 빠름SEO에 유리 (검색 크롤링)페이지 바뀔때마다 새로고침 필요서버 부하(예시 : PHP , JSP , Next.js)CSR(Client Side Rendering) 이란 ?빈 HTML 에 JS 가 DOM 을 만드는 형식 사용자 경험 중심 SPA 처럼 화면 전환이 자연스러움 초기 로딩 느림SEO 불리 (크롤링에서 불리)(예시 : React , Vue , Angular)서로가 불리한..

• format_list_bulleted CS + WEB
• · 2025. 9. 26.
• textsms

http vs https 차이 (ft. 비밀편지)

HTTP란? 개념과 특징 정리일반 연필로 쓴 편지를 생각하면됨HTTP는 HyperText Transfer Protocol의 약자, 웹에서 데이터를 주고받을 때 사용하는 가장 기본적인 통신 규칙.그냥 누구나 읽을 수 있는 구조이며, 중간에 데이터를 가로채는 경우 원문 그대로 가로채지는 문제가 발생합니다(주민등록번호 , 주소지 등등 민감 정보가 그대로 보임)HTTPS란? 개념과 특징 정리양초로 쓴 비밀편지를 생각하면됨HTTPS는 HTTP + Secure, 기존 http 에 보안 개념이 추가되었습니다.즉 그대로 주고 받던 이전과 달리 암호화가 되어있습니다내부적으로는 TLS(Transport Layer Security)라는 보안 프로토콜을 사용당연히 암호화가 되어 있기 때문에 복호화 또한 존재합니다.주민등록번호..

• format_list_bulleted CS + WEB
• · 2025. 9. 1.
• textsms

프로세스(Process) vs 스레드(Thread) 차이

1. 프로세스(Process)란 ? 개념과 특징 정리프로세스(Process)는 실행 중인 프로그램을 의미하며 운영체제에 의해 독립된 메모리 공간(Code, Data, Heap, Stack) 을 가지고 동작합니다.각각은 서로 격리된 구조이기 때문에 다른 프로세스는 직접 접근할 수 없습니다.영역이 따로 존재하기에 동작 또한 기존 프로세스와 별도로 동작한다.2. 스레드(Thread)란? 개념과 특징 정리프로세스 내의 실행되는 흐름이다1개의 프로세스는 1개 이상의 스레드를 가질 수 있고 2개 이상인 경우 멀티스레드라고 부른다. 같은 프로세스의 스레드끼리는 코드, 데이터, 힙 영역을 공유하지만, 스택은 독립적으로 가진다.공유에 대해서 속도가 빠르지만 충돌(동기화)이 발생 할 수도 있다 .3. 프로세스와 스레드 비..

• format_list_bulleted CS + WEB
• · 2025. 6. 16.
• textsms

스택 (Stack) vs 큐 (Queue) 차이

1. 스택(Stack) 이란? 개념과 특징 정리스택(Stack)은 가장 나중에 들어간 데이터가 가장 먼저 나오는 구조로, LIFO(Last In, First Out) 방식입니다.(대학이나 이론 설명에서 접시 설거지에 비유해서 설명을 많이 하는데 가장 마지막에 올린 접시를 가장 먼저 닦을 수 밖에 없는 구조이기 때문에 그렇다)연산의 경우 push (입력), pop (출력), peek (다음 출력으로 나오게 될 값) 을 많이 사용한다 .stack = []stack.append(1)stack.append(2)stack.append(3)stack.append(4)print(f"출력된 값 : {stack.pop()}")2. 큐(Queue) 란? 개념과 특징 정리큐(Queue) 는 입력으로 들어가는 데이터는 뒷부분..

• format_list_bulleted CS + WEB
• · 2025. 6. 15.
• textsms

배열(Array) vs 리스트(List) 차이

1. 배열이란 ? 개념과 특징 정리배열의 경우 처음에 선언 시에 크기까지 같이 선언을 하기 때문에 크기가 고정적이며중간 값에 대한 삭제 수정등이 발생 할 경우 해당 데이터 뒤에 있는 데이터들을 앞으로 당겨야 하는 과정에서 시간이 오래걸림예시 : [1,2,3,4,5] -> (3삭제 시 ) [1,2,x,4,5] -> [1,2,4,5] 앞으로 당겨줘야하므로 시간 걸림동일 자료형 + 메모리 구조가 연속적 공간임 -> 인덱스(0번째 , 1번째)를 통해 빠르게 값을 찾을 수 있음 (그러므로 키 값을 지정할 수 없음)2. 리스트란 ? 개념과 특징 정리리스트의 경우 리스트 선언만 진행 (크기에 대한 선언을 하지 않음 -> 크기가 가변)중간 값이 삭제나 수정 등이 발생해도 해당 값과 연결된 부분만 잘라가기 떄문에 앞으로..

• format_list_bulleted CS + WEB
• · 2025. 6. 14.
• textsms

[WEB] CORS 에러란 ? ..

프로젝트가 끝나고 쉬고있는 와중에백엔드 부분 하시던 부장급 개발자분이 이번에 리액트를 처음 하셔서 공부를 하시다가 이거 어떻게 하냐 질문을 했는데CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.이런 에러가 떠있는걸 보고"어? 이건 리액트가 아니라 백엔드에서 고치셔야 하는데요 ? ..."대충 설명을 드렸는데도 이해를 못 하셔서 그냥 스프링 쪽 코드를 작성해서 보내드렸다..CORS (Cr..

• format_list_bulleted CS + WEB
• · 2025. 2. 27.
• textsms