나디아 성장 일기

렌더링(Rendering) : React 컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환하는 작업    CSR (Client-Side Rendering) : 모든 렌더링이 클라이언트(브라우저) 측에서 발생하는 방식 클라이언트는 자바스크립트를 로드하고, 자바스크립트가 UI를 빌드한다. 초기 페이지 로드 시, HTML 파일은 간단히 구성 요소만 담고 있다. 특징 초기 로딩이 빠르지만, 콘텐츠가 모두 표시될 때까지는 시간이 걸릴 수 있다.SEO(검색 엔진 최적화)에 불리할 수 있다. 작동 방식사용자가 페이지 요청 → 서버가 기본 HTML + 자바스크립트 파일 전달 → 브라우저가 자바스크립트 실행, 데이터를 서버에서 받아옴 → React가 클라이언트에서 UI를 완성하여 페이지 렌더링   SSR (Serve..

1. 경로 정의 & 생성하기 (Defining & Creating Routes)Next.js는 폴더를 사용하여 경로를 정의하는 파일 시스템 기반 라우터를 사용한다. 각 폴더는 URL 세그먼트에 매핑되는 경로 세그먼트를 나타내며, 폴더 이름이 URL의 세그먼트(경로 일부)로 매핑된다.중첩된 폴더를 사용하여 중첩 경로를 쉽게 만들 수 있다.폴더 구조가 곧 URL 경로가 된다.ex) app/about-us/page.tsx 파일의 경로 ➡ /about-us    2. UI 생성하기 (Creating UI) Next.js는 특수 파일 규칙을 사용하여 경로마다 고유한 UI를 만들거나, 여러 경로에서 공유할 UI를 정의할 수 있다.  페이지 (page.tsx): 특정 경로 별로 고유한 UI를 담당하는 개별 화면pag..

⭐️ DNSDNS(도메인 네임 시스템): 도메인 이름(www.example.com)을 IP 주소(192.0.2.1)로 변환해주는 시스템사람이 이해하기 쉬운 도메인 이름을 컴퓨터가 이해할 수 있는 IP 주소로 바꾸어, 사용자가 웹사이트에 쉽게 접근할 수 있게 도와준다. DNS 작동 방식사용자가 도메인 입력사용자가 브라우저에 도메인 이름(ex. example.com)을 입력한다.로컬 DNS 서버 조회먼저, 사용자의 컴퓨터는 캐시에서 IP 주소를 찾고, 없다면 인터넷 서비스 제공업체(ISP)의 로컬 DNS 서버에 질의한다.루트 네임 서버로 요청 전달로컬 DNS 서버가 IP 주소를 모르면, 최상위의 루트 네임 서버에 요청을 전달한다. → 루트 네임 서버는 요청을 다음 단계로 안내한다.TLD 네임 서버로 요청 전..

HTTPS HTTPS (HyperText Transfer Protocol Secure): HTTP에 보안 계층을 추가한 프로토콜로, 웹에서 안전하게 데이터를 주고받기 위해 사용된다.주로 금융 거래, 로그인 정보 전송 등 민감한 데이터를 보호하기 위해 사용되며, HTTP와 달리 통신이 암호화된다.SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security)라는 암호화 프로토콜을 사용하여 데이터의 기밀성과 무결성을 보장한다. SSL/TLSSSL과 TLS는 네트워크 통신 보안을 위한 암호화 프로토콜이다.  SSL (Secure Sockets Layer): 초기 보안 프로토콜로, 데이터 전송 시 암호화를 통해 보안을 강화했다.SSL은 여러 버전을 거쳐 발전했지만, 보안..

⭐️ HTTP 프로토콜HTTP(HyperText Transfer Protocol): 웹에서 클라이언트와 서버 간 데이터를 주고받기 위한 통신 규칙주로 텍스트, 이미지, 비디오 등 다양한 리소스를 전송하는 데 사용된다.HTTP는 비상태적(stateless) 프로토콜로, 요청 간의 상태를 저장하지 않으며 각 요청이 독립적으로 처리된다. HTTP의 요청/응답 모델HTTP는 요청(request)과 응답(response) 모델로 동작한다.클라이언트가 요청을 보내면 서버가 응답을 반환하는 구조이다.  1. 클라이언트의 요청(Request) 구조요청 메서드: 작업의 종류를 지정하며, 대표적으로 GET(조회), POST(생성), PUT(수정), DELETE(삭제) 등이 있다.헤더(Header): 요청에 대한 메타 정보..

CRA (Create React App): React 프로젝트의 기본 설정을 쉽게 커스터마이즈할 수 있게 해주는 도구 프로젝트 설정(ex. Webpack, Babel)을 자동으로 관리해 준다. 👉  복잡한 설정 없이 바로 기본 리액트 프로젝트를 만들 수 있다. 그러나 CRA는 기본적으로 설정 파일이 감춰져 있어  Webpack, Babel 등의 세부 설정을 변경하고자 할 때는 제한이 있다. 👉 CRACO를 사용하면 CRA의 설정 파일을 직접 수정하지 않고도 프로젝트의 설정을 커스터마이즈할 수 있다.   CRACO (Create React App Configuration Override): CRA의 한계를 보완하기 위해 사용되는 도구CRA의 설정을 수정하고 싶을 때 CRACO를 사용하면, CRA의 기본..

컴퓨터 네트워크(Network): 두 대 이상의 컴퓨터나 장치들이 서로 연결되어 데이터를 주고받을 수 있는 시스템물리적인 연결뿐만 아니라 데이터의 전송 방법, 프로토콜 등 다양한 요소들이 결합된 구조이다.네트워크를 통해 사용자들은 파일 전송, 이메일 전송, 웹 브라우징 등 다양한 작업을 수행할 수 있다.일반적으로 네트워크는 로컬 네트워크(LAN)와 광역 네트워크(WAN)로 구분된다. 컴퓨터 네트워크의 데이터 전송 방식데이터 전송 방식은 크게 점대점 전송과 다중 전송으로 나눌 수 있다.  점대점 전송 (Point-to-Point): 두 장치 간의 직접적인 연결로 이루어지는 데이터 전송 방식  다중 전송 (Multi-point transmission): 하나의 송신 장치가 여러 수신 장치에 동시에 데이터를 ..

🛠️ 문제 2661번: 좋은 수열  💡 풀이const fs = require('fs');const path = require('path');const input = fs.readFileSync(path.join(__dirname, 'input.txt')).toString().trim();const n = parseInt(input, 10); function isValid(sequence) { const len = sequence.length; // 같은 숫자가 3번 이상 연속인지 확인 if (len >= 3 && sequence[len - 1] === sequence[len - 2] && sequence[len - 2] === sequence[len - 3]) { retu..

🛠️ 문제 1759번: 암호 만들기  💡 풀이const fs = require('fs');const path = require('path');const input = fs.readFileSync(path.join(__dirname, 'input.txt')).toString().trim().split('\n');const [L, C] = input[0].split(' ').map(Number);const letters = input[1].split(' ').sort();const vowels = ['a', 'e', 'i', 'o', 'u'];const result = [];function isValid(combination) { let vowelCount = 0; let consonantCo..

🛠️ 문제 1182번: 부분 수열의 합  💡 풀이const fs = require('fs');const path = require('path');const input = fs.readFileSync(path.join(__dirname, 'input.txt')).toString().trim().split('\n');const [n, S] = input[0].split(' ').map(Number);const arr = input[1].split(' ').map(Number);let count = 0;function dfs(index, sum) { if (index === n) return; sum += arr[index]; // 부분수열의 합이 S와 같은지 확인 if (sum === S) c..