[ASAC 웹풀스택]백준 10699번 백준 2163번 React (Next.js) 의 Hydration 이란 무엇인가? - 서버 사이드 렌더링을 도입함으로 생긴 개념
[ASAC 웹풀스택] 10699번 자바 오늘의 날짜 맞추기
자바 오늘의 날짜 맞추기
import java.time.ZonedDateTime;
import java.time.ZoneId;
import java.time.format.DateTimeFormatter;
public class Main {
public static void main(String[] args) {
// Get the current date and time in Seoul
ZonedDateTime seoulTime = ZonedDateTime.now(ZoneId.of("Asia/Seoul"));
// Format the date as "YYYY-MM-DD"
String formattedDate = seoulTime.format(DateTimeFormatter.ISO_LOCAL_DATE);
System.out.println(formattedDate);
}
}
java.time 패키지의 클래스들을 사용하여 날짜와 시간을 다룰 수 있습니다.
ZonedDateTime, ZoneId
DateTimeFormatter를 이용하여 서울의 현재 날짜를
"YYYY-MM-DD" 형식으로 출력하는 코드는 다음과 같습니다:
Java의 ZoneId 클래스는 특정 지역의 시간대를 나타냅니다.
ZoneId.of(String zoneId) 메소드는
문자열 형태의 시간대 식별자를 받아 해당 시간대를 나타내는 ZoneId 객체를 반환합니다.
시간대 식별자는 일반적으로 "지역/도시" 형식을 가집니다. 예를 들어, "Asia/Seoul"은 서울의 시간대를 나타냅니다.
[ASAC 웹풀스택] 2163번 java 초콜릿 짜르기 NxM 면적 2입력 2출력 = 3선
java 초콜릿 짜르기 NxM 면적 2입력 2출력 = 3선
import java.util.Scanner;
public class Main {
public static void main(String[] args) {
// Scanner 객체를 생성하여 사용자로부터 입력을 받습니다.
Scanner scanner = new Scanner(System.in);
// 첫 번째 숫자를 입력받습니다.
int N = scanner.nextInt();
// 두 번째 숫자를 입력받습니다.
int M = scanner.nextInt();
// 초콜릿을 1x1 크기로 쪼개는 최소 횟수를 계산합니다.
int minSplits = N * M - 1;
System.out.println(minSplits);
}
}
출력 설명
코드에서 int minSplits = N * M - 1; 부분이 주어진 조건에 따라 초콜릿을 가장 효율적으로 나누는 방법, 즉 각 조각이 독립적인 1x1 조각이 되도록 하되, 그러한 분할이 이루어지는 최소한의 회수를 계산하는 부분입니다.
예제 입력 "2 2"에 대해 위 프로그램을 실행하면, 출력값으로 "3"이 출력됩니다.
[ASAC 웹풀스택] for (char c : oxQuizResult.toCharArray())는 Java 프로그래밍 언어
java for each 문
for (char c : oxQuizResult.toCharArray())는 Java 프로그래밍 언어
for (타입 변수명 : 반복 가능한 객체) {
// 반복할 작업 수행
}
기존의 for 문과 다르게 인덱스를 사용하지 않고, 원소를 직접 참조할 수 있습니다. 예를 들어, 다음과 같은 코드가 있습니다.
Java
String[] numbers = {"one", "two", "three"};
for (int i = 0; i < numbers.length; i++) {
System.out.println(numbers[i]);
}
이 코드는 numbers 배열의 각 원소를 출력하는 코드입니다. 이 코드는 for each 문을 사용하면 다음과 같이 간단하게 작성할 수 있습니다.
Java
String[] numbers = {"one", "two", "three"};
for (String number : numbers) {
System.out.println(number);
}
java
import java.util.Scanner;
public class Main {
public static void main(String[] args) {
// Scanner
Scanner scanner = new Scanner(System.in);
int testCaseCount = scanner.nextInt();
for (int i = 0; i < testCaseCount; i++) {
String oxQuizResult = scanner.next();
int score = 0;
int continuousOCount = 0;
for (char c : oxQuizResult.toCharArray()) {
if (c == 'O') {
continuousOCount++;
score += continuousOCount;
} else { // c == 'X'
continuousOCount = 0;
}
}
System.out.println(score);
}
}
}
[ASAC 웹풀스택] React (Next.js) 의 Hydration 이란 무엇인가? - 서버 사이드 렌더링을 도입함으로 생긴 개념
React (Next.js) 의 Hydration 이란 무엇인가? - 서버 사이드 렌더링을 도입함으로 생긴 개념
hydrate가 무엇인가요?
수화물
hydrate 를 사용하면 이전에 React 17 이하에서 react-dom/server에 의해 HTML 콘텐츠가 생성된 브라우저 DOM 노드 내부에 React 구성 요소를 표시할 수 있습니다.
동작 방식
1.서버에서는 Next.js를 사용하여 리액트 애플리케이션을 렌더링하고, 생성된 HTML을 클라이언트로 전송합니다.
2.클라이언트에서는 전송된 HTML을 가져와서 기존 마크업과 일치시킵니다.
3.일치하는 컴포넌트를 찾아 해당 컴포넌트의 이벤트 처리 및 상태 업데이트를 활성화합니다.
4.클라이언트에서는 이제 일반적인 리액트 애플리케이션처럼 동작하며, 상호작용과 상태 변화에 따라 UI를 업데이트할 수 있습니다.
서버에서 렌더링된 HTML 수화
앱의 HTML이 에 의해 생성된 경우 클라이언트에서 이를 하이드레이션react-dom/server 해야 합니다 .
import { hydrateRoot } from 'react-dom/client';
hydrateRoot(document.getElementById('root'), <App />);'
index.js
import { hydrateRoot } from 'react-dom/client';
import './styles.css';
import App from './App.js';
const root = hydrateRoot(
document.getElementById('root'),
<App counter={0} />
);
let i = 0;
setInterval(() => {
root.render(<App counter={i} />);
i++;
}, 1000);
App.js
export default function App({counter}) {
return (
<>
<h1>Hello, world! {counter}</h1>
<input placeholder="Type something here" />
</>
);
}
index.html
<!--
All HTML content inside <div id="root">...</div> was
generated by rendering <App /> with react-dom/server.
-->
<div id="root"><h1>Hello, world! <!-- -->0</h1><input placeholder="Type something here"/></div>
Hydration은 서버의 초기 HTML 스냅샷을 브라우저에서 실행되는 완전한 대화형 앱으로 전환합니다.
전달한 React 트리는 서버에서와 동일한 출력을hydrateRoot 생성해야 합니다 .
hydrateRoot(domNode, reactNode, options?)
hydrateRoot서버 환경에서 React에 의해 이미 렌더링된 기존 HTML에 React를 "첨부"하기 위해 호출합니다 .
import { hydrateRoot } from 'react-dom/client';
const domNode = document.getElementById('root');
const root = hydrateRoot(domNode, reactNode);useEffect 개념익히기
index.html
<!--
HTML content inside <div id="root">...</div>
was generated from App by react-dom/server.
-->
<div id="root"><h1>Is Server</h1></div>
index.js
import './styles.css';
import { hydrateRoot } from 'react-dom/client';
import App from './App.js';
hydrateRoot(document.getElementById('root'), <App />);
App.js
import { useState, useEffect } from "react";
export default function App() {
const [isClient, setIsClient] = useState(false);
useEffect(() => {
setIsClient(true);
}, []);
return (
<h1>
{isClient ? 'Is Client' : 'Is Server'}
</h1>
);
}
useEffect 출력값
[ASAC 웹풀스택] node.js 스트림
스트림은 Node.js에서 스트리밍 데이터 작업을 위한 추상 인터페이스입니다. 이 node:stream모듈은 스트림 인터페이스를 구현하기 위한 API를 제공합니다.
const stream = require('node:stream');
파일 읽는 방식
Constant Octal Description
fs.constants.S_IRUSR 0o400 read by owner
fs.constants.S_IWUSR 0o200 write by owner
fs.constants.S_IXUSR 0o100 execute/search by owner
fs.constants.S_IRGRP 0o40 read by group
fs.constants.S_IWGRP 0o20 write by group
fs.constants.S_IXGRP 0o10 execute/search by group
fs.constants.S_IROTH 0o4 read by others
fs.constants.S_IWOTH 0o2 write by others
fs.constants.S_IXOTH 0o1 execute/search by others
파일 읽는방식
Number Description
7 read, write, and execute
6 read and write
5 read and execute
4 read only
3 write and execute
2 write only
1 execute only
0 no permission
소유자는 파일을 읽고, 쓰고, 실행할 수 있습니다.
그룹은 파일을 읽고 쓸 수 있습니다.
다른 사람들은 파일을 읽고 실행할 수 있습니다.
파일 시스템 플래그#
flag옵션이 문자열을 취할 때마다 다음 플래그를 사용할 수 있습니다 .
'a': 추가할 파일을 엽니다. 파일이 존재하지 않으면 생성됩니다.
'ax': 비슷 'a'하지만 경로가 존재하면 실패합니다.
'a+': 읽기 및 추가를 위해 파일을 엽니다. 파일이 존재하지 않으면 생성됩니다.
'ax+': 비슷 'a+'하지만 경로가 존재하면 실패합니다.
'as': 동기 모드에서 추가하기 위해 파일을 엽니다. 파일이 존재하지 않으면 생성됩니다.
'as+': 동기 모드에서 읽고 추가하기 위해 파일을 엽니다. 파일이 존재하지 않으면 생성됩니다.
'r': 읽기 위해 파일을 엽니다. 파일이 없으면 예외가 발생합니다.
'rs': 동기 모드에서 읽기 위해 파일을 엽니다. 파일이 없으면 예외가 발생합니다.
'r+': 읽고 쓰기 위해 파일을 엽니다. 파일이 없으면 예외가 발생합니다.
'rs+': 동기 모드에서 읽고 쓰기 위해 파일을 엽니다. 운영 체제에 로컬 파일 시스템 캐시를 우회하도록 지시합니다.
이는 잠재적으로 오래된 로컬 캐시를 건너뛸 수 있으므로 NFS 마운트에서 파일을 열 때 주로 유용합니다. 이는 I/O 성능에 매우 실질적인 영향을 미치므로 필요한 경우가 아니면 이 플래그를 사용하지 않는 것이 좋습니다.
이는 동기식 차단 호출로 전환 fs.open()되거나 전환되지 않습니다 . fsPromises.open()동기 작동을 원할 경우 다음과 같은 것을 fs.openSync()사용해야 합니다.
'w': 쓰기 위해 파일을 엽니다. 파일이 생성되거나(존재하지 않는 경우) 잘립니다(존재하는 경우).
'wx': 비슷 'w'하지만 경로가 존재하면 실패합니다.
'w+': 읽고 쓰기 위해 파일을 엽니다. 파일이 생성되거나(존재하지 않는 경우) 잘립니다(존재하는 경우).
'wx+': 비슷 'w+'하지만 경로가 존재하면 실패합니다.
Node.js 스트림
읽기 스트림
const fs = require('fs');
const readableStream = fs.createReadStream('example.txt');
readableStream.on('data', (data) => {
console.log('읽은 데이터:', data.toString());
});
readableStream.on('end', () => {
console.log('파일 읽기 완료');
});
쓰기 스트림
const fs = require('fs');
// Writable stream
const writeStream = fs.createWriteStream('./output.txt'); // (3)
writeStream.write('Hello, '); // (4)
writeStream.write('World!'); // (5)
writeStream.end(); // (6)
const fs = require('fs');
// Writable stream 생성
const writeStream = fs.createWriteStream('./output.txt'); // (3)
writeStream.write('Hello, '); // (4)
writeStream.write('World!'); // (5)
writeStream.end(); // (6)
[ASAC 웹풀스택] Node.js 읽기 가능한 스트림에 HTML로 React 트리 렌더링
Node.js 읽기 가능한 스트림에 HTML로 React 트리 렌더링
서버 응답으로 파이프할 수 있는 Node.js 읽기 가능한 스트림을renderToNodeStream 얻으려면 다음을 호출하세요 .
import { renderToNodeStream } from 'react-dom/server';
// The route handler syntax depends on your backend framework
app.use('/', (request, response) => {
const stream = renderToNodeStream(<App />);
stream.pipe(response);
});
댓글