y_flm's Blog

문제:
문자열 my_str과 n이 매개변수로 주어질 때,
my_str을 길이 n씩 잘라서 저장한 배열을 return하도록 solution 함수를 완성해주세요.

문제 풀어보기: https://school.programmers.co.kr/learn/courses/30/lessons/120913

풀이보기

function solution(my_str, n) {
    let result = [];
    
    for(let i = 0; i < my_str.length; i+=n) result.push(my_str.slice(i, n + i));
    
    return result;
}

REST API란?

    자원(Resource)을 정의하고, 그 자원을 처리하는 방식(HTTP Method)을 명확히 구분하여 클라이언트와 서버가

     일관된 규칙으로 소통할 수 있도록 만든 아키텍처 스타일이다.

     * REST = REpresentational State Transfer

     * API = Application Programming Interface

    REST API는 보통 HTTP 프로토콜을 기반으로 만들어지며, 브라우저, 앱, 프론트엔드와 백엔드 간의 데이터 교환에 널리 사용된다.

REST API의 특징

REST API 구성 요소

REST API 설계 시 주의할 점 ⚠️

1. 자원 중심 URI 설계

• URI는 명사로 구성
• ❌  /getUserInfo, /deleteProduct
• ⭕️  /users, /products

2. HTTP 메서드를 의미에 맞게 사용

3. 일관된 응답 포맷 사용

{
  "success": true,
  "data": { ... },
  "message": "요청에 성공했습니다"
}

4. 상태 코드 제대로 쓰기

REST API에 대해 정리하다보니 문득 HTTP를 정리했을 때와 비슷한 느낌을 받았다.

그렇다면 REST API와 HTTP의 차이점은 뭘까?

HTTP와 REST API의 차이 요약

• HTTP = 통신 방법 자체 (전화기)
• REST API = HTTP를 "어떻게" 쓸지에 대한 규칙 (전화 예절)

HTTP와 REST API 비교

[HTTP에 대해서 자세히 알고 싶다면 아래 글 참고!] ⤵️

https://y-flm.tistory.com/81

문제:
알파벳 대소문자로만 이루어진 문자열 my_string이 주어질 때, 
my_string에서 'A'의 개수, ..., my_string에서 'Z'의 개수, my_string에서 'a'의 개수, ..., my_string에서 'z'의 개수를
순서대로 담은 길이 52의 정수 배열을 return 하는 solution 함수를 작성해 주세요.

문제 풀어보기: https://school.programmers.co.kr/learn/courses/30/lessons/181902

풀이보기

function solution(my_string) {
    const alphabet = Array.from({ length: 52 }, (_, i) => String.fromCharCode(i < 26 ? 65 + i : 97 + (i - 26)));
    const str = Object.fromEntries(alphabet.map(char => [char, 0]));
    
    for(let char of [...my_string]) {
        str[char] += 1;
    }
    
    return Object.values(str);
}

MPA(Multi-Page Application)란?

     페이지가 여러 개로 구성되어 있고, 사용자가 어떤 링크를 클릭하면 브라우저가 서버에 새 HTML 페이지를 요청하고,

     전체 페이지를 새로 로드한다. (각 페이지마다 별도의 HTML, CSS, JS 파일이 있음)

[작동 방식 ⚙️]
1) 사용자가 만약 /about을 클릭하면,
2) 브라우저는 서버에 /about 요청을 보내고,
3) 서버는 완전히 새로운 HTML 페이지를 다시 보냄.
4) 기존 페이지는 새로고침되고, 새로운 페이지가 열림.

MPA의 장단점은 뭘까?

SPA(Single Page Application)란?

     하나의 HTML 파일로 구성되어 있고, 최초 로딩 시 모든 JS, CSS, HTML을 로드한다.

     사용자가 이동하는 페이지는 사실 컴포넌트 단위의 동적 화면 전환으로, 페이지 전환처럼 보이지만 실제로는 전체 페이지 리로드가 없다.

[작동 방식 ⚙️]
1) /about을 클릭하면,
2) 브라우저는 서버에 HTML을 요청하지 않음.
3) 자바스크립트가 내부적으로 URL을 변경하고, 필요한 데이터만 비동기로 불러와서 화면을 동적으로 렌더링

SPA의 장단점은 뭘까?

MPA와 SPA 요약 비교 🔍

문제:
순서쌍이란 두 개의 숫자를 순서를 정하여 짝지어 나타낸 쌍으로 (a, b)로 표기합니다.
자연수 n이 매개변수로 주어질 때 두 숫자의 곱이 n인 자연수 순서쌍의 개수를 return하도록 solution 함수를 완성해주세요.

문제 풀어보기: https://school.programmers.co.kr/learn/courses/30/lessons/120836

풀이보기

function solution(n) {
    let result = [];
    
    for(let i = 1; i <= n; i++) {
        if(n % i === 0) {
            result.push([i, n / i]);
        }
    }
    
    return result.length;
}

.js 란?

    .js는 자바스크립트의 파일 확장자이며 일반적으로 사용하는 순수 자바스크립트 코드가 들어간다.

    브라우저가 이해할 수 있는 코드이고, 리액트를 쓰지 않아도 문제 없는 파일 형식이다.

[예시 코드]

function sayHello(name) {
  console.log("Hello, " + name);
}

sayHello("John");

.jsx 란?

    .jsx는 JavaScript XML의 약자이며 자바스크립트 코드 안에 HTML과 비슷한 문법을 쓸 수 있게 해주는 확장자이다.

    주로 React에서 사용되며, JSX 문법을 사용하면 마치 HTML처럼 UI를 구성할 수 있다.

    하지만 브라우저는 JSX를 이해하지 못하므로 컴파일 변환이 필요하다.

      * .js에서도 JSX 문법을 사용할 수는 있음!

[개념 알고가기 💡]
1. XML(eXtensible Markup Language)이란?
    확장 가능한 마크업 언어로, HTML처럼 태그로 데이터를 표현하지만 HTML보다 훨씬 더 유연하고 데이터 중심적이다.
    원래는 데이터 저장/전송용 포맷으로 만들어졌으며, 특징은 다음과 같다.
    1) 사용자가 직접 태그를 정의 가능
    2) 구조적 데이터 표현에 적합
    3) 사람도 읽기 쉽고, 기계도 파싱하기 쉬움
    * 단순히 데이터를 표현하는 방법이며, 실제 동작은 하지않고 데이터를 설명하는 "형식"이다.

    * 따라서 JSX는 JavaScript XML이란 이름이지만, 실제로는 XML이 아니고 XML처럼 생긴 문법을 자바스크립트에 끼워 넣은 것이다.

[예시 코드]

export default function Hello() {
  return <h1>Hello, world!</h1>;
}

.js 확장자에서도 JSX 문법을 사용할 수 있는데, 왜 굳이 .jsx로 사용하면서 컴파일 변환을 해줘야하는거지?

.js에서도 JSX를 사용할 수 있는 이유

    그 이유는 Babel이나 Webpack 같은 빌드 도구가 .js 파일 안에서도 JSX 문법을 인식하고 변환해줄 수 있게 설정되어 있기 때문이다.

    그렇기 때문에 .js 파일에서 JSX 문법을 사용한다해도, 브라우저는 애초에 JSX를 이해하지 못하기 때문에 컴파일 변환은 일어난다.

그렇다면 .jsx로 확장자를 지정해주는 이유는 뭘까?

     1) 가독성: JSX가 들어있다는 걸 파일 이름만 보고 바로 알 수 있다.

     2) 협업: 다른 개발자에게 "이 파일은 리액트 컴포넌트입니다"라는 신호를 준다.

     3) 에디터 지원: .jsx 파일은 대부분의 에디터가 JSX 문법 강조를 더 잘 지원한다.

     => 즉, 기술적으로 꼭 .jsx를 써야 하진 않지만, 명확한 의도를 전달하는 좋은 습관이 될 수 있다!

그렇다면 컴파일 변환은 어떻게 일어나는 걸까?

JSX의 컴파일 흐름

1) JSX 코드 작성

const element = <h1>Hello</h1>;

2) Babel이 JSX 코드를 자바스크립트로 변환

const element = React.createElement("h1", null, "Hello");

3) 변환된 코드는 브라우저에서 실행 가능!

무엇이 컴파일을 해주는 걸까?

[Babel (JS 변환기)]
  - JSX → JavaScript
  - ES6+ → ES5
  - TypeScript → JavaScript

[Webpack (번들러)]
  - 여러 JS 파일들을 하나로 묶고 Babel을 연동해서 변환 과정을 처리하게 함

그렇다면 실제 개발 흐름은 다음과 같다.

[개발 흐름 🔍]
1. 소스 코드 작성 (.jsx, .ts, 최신 문법)
2. Babel이 변환 (JSX → 일반 JS)
3. Webpack이 번들링 (여러 파일 → 하나의 main.js)
4. 브라우저는 변환된 JS만 실행

.js 와 .jsx 차이점 요약

문제:
랜덤으로 서로 다른 k개의 수를 저장한 배열을 만드려고 합니다.
적절한 방법이 떠오르지 않기 때문에 일정한 범위 내에서 무작위로 수를 뽑은 후,
지금까지 나온적이 없는 수이면 배열 맨 뒤에 추가하는 방식으로 만들기로 합니다.
이미 어떤 수가 무작위로 주어질지 알고 있다고 가정하고, 실제 만들어질 길이 k의 배열을 예상해봅시다.

정수 배열 arr가 주어집니다.
문제에서의 무작위의 수는 arr에 저장된 순서대로 주어질 예정이라고 했을 때,
완성될 배열을 return 하는 solution 함수를 완성해 주세요.
단, 완성될 배열의 길이가 k보다 작으면 나머지 값을 전부 -1로 채워서 return 합니다.

문제 풀어보기: https://school.programmers.co.kr/learn/courses/30/lessons/181858

풀이보기

function solution(arr, k) {
    let result = [];
    
    for(let num of arr) {
        if(!result.includes(num)) result.push(num);
        if(result.length === k) break;
    }
    
    while(result.length < k) {
        result.push(-1);
    }
    
    return result;
}

렌더링이란, 웹 페이지의 내용을 눈에 보이게 만들어주는 과정을 말한다.

렌더링 방식은 화면을 만들기 위한 데이터와 구조(HTML)을 누가 언제 준비하냐에 따라 다르다.

각 렌더링 방식에 대한 느낌을 정리해보자면 다음과 같다.

• CSR은 "브라우저야, 이 JS로 페이지를 직접 만들어!"
• SSR은 "서버가 만들어줄게. 브라우저는 그냥 보여줘!"
• SSG는 "미리 만들어둘게. 나중에 그냥 보여줘!"

그렇다면 각 렌더링 방식에 대해 자세히 알아보자!

CSR(Client Side Rendering)이란?

    클라이언트에서 페이지 내용을 만드는 방식으로, 사용자의 브라우저가 서버로부터 데이터를 받아와서 웹 페이지를 직접 생성한다.

[CSR의 동작 과정]
1) 사용자가 웹 사이트에 접속하면 서버는 빈 HTML과 JavaScript 파일을 보냄.
2) 브라우저가 JavaScript를 로드하고 실행
3) JavaScript가 동적으로 HTML을 생성하고, 이를 브라우저에 표시
4) 추가 페이지 요청 시, 전체 페이지를 다시 로드하는 대신에 필요한 데이터만 서버에서 받아와 해당 부분만 업데이트
   → 즉, CSR은 서버로부터 빈 접시(빈 HTML)와 요리 재료(JavaScript)를 받고 요리(렌더링)를 직접 하는 방식

그럼 CSR을 사용했을 때의 장점과 단점은 뭘까?

SSR(Server Side Rendering)이란?

    서버에서 HTML을 완성시킨 후 브라우저로 보내는 방식이다.

[SSR의 동작 과정]
1) 사용자가 웹 사이트에 접속하면 서버에서 해당 페이지에 필요한 HTML 생성
2) 서버는 생성된 HTML을 브라우저로 보낸다.
3) 브라우저는 받은 HTML을 표시
4) 추가 페이지 요청 시, 해당 페이지에 대한 HTML을 다시 서버에서 생성하여 보낸다.
   → 즉, SSR은 서버에서 요리(웹 페이지 렌더링)를 완성시킨 후 접시에 담아서(완성된 HTML) 손님(사용자)에게 제공하는 방식

그럼 SSR을 사용했을 때의 장점과 단점은 뭘까?

SSG(Static Site Generation)란?

    미리 HTML을 만들어두고 요청이 오면 바로 보여주는 방식이다.

[SSG의 동작 과정]
1) 빌드 시 프레임워크는 모든 경로에 대한 HTML 파일을 미리 생성한다.
2) 사용자가 웹 사이트에 접속하면, 서버는 미리 생성해둔 HTML을 보낸다.
3) 브라우저는 받은 HTML을 표시
4) 추가 페이지 요청 시, 미리 생성해둔 해당 페이지의 HTML을 보낸다.
   → 즉, SSG는 미리 요리(웹 페이지 렌더링)를 완성시켜놓고, 동일한 요리를 계속 제공하는 방식

그럼 SSG를 사용했을 때의 장점과 단점은 뭘까?

그렇다면 언제 어떤 방식을 쓰는게 좋을까?

렌더링 방식 비교 요약

[추가적으로 브라우저의 렌더링 과정을 자세히 알고 싶다면 아래 글 참고 !] ⤵️

https://y-flm.tistory.com/79