3. Backend

[C#] React와 개념 차이

C# vs JS1. 기본 문법 차이// 변수 선언let name = '홍길동;const age = 25// 함수function greet(name:string){ return 'Hello, ${name}' }// 변수 선언 (타입명시)string name = '홍길동'int age = 25// var키워드 (타입추론)var name = '홍길동' // 컴파일러가 string으로 추론// 함수string Greet(string name){ return $"Hello, {name}" }2. React 함수형 컴포넌트 VS C#클래스function UserProfile ({name, age}:Props){ const [isActive, setIsActive] = useState(false) return (..

2026. 6. 25. 14:35
3. Backend

[JUMP TO JAVA] 02. 자바 시작하기

02-01. 자바 코드의 구조 살펴보기// 클래스 블록public class 클래스명 { // 메서드 블록 [public | private | protected] [static] (반환자료형|void) 메서드명1 (입력자료형 매개변수, …) { 명령문(statement); … } // 메서드 블록 [public | private | protected] [static] (반환자료형|void) 메서드명2 (입력자료형 매개변수, …) { 명령문(statement); … } …}자바 코드의 가장 바깥쪽 영역은 클래스 블록이다.클래스명은 사용자 마음대로 지을 수 있다. 단, 클래스명은 소스파일의 이름(예: 클래스명.java)와 반드시 일치해야 한다. 클래스블록은 여러 메서드 블록을 포함할 수 있다[publ..

2025. 10. 20. 16:39
3. Backend

[JUMP TO JAVA] 01. 자바란 무엇인가?

참고하면 좋을 곳들 = JAVA 홈페이지 / 난 정말 자바를 공부한 적이 없어요 강의 듣기 / 소설자바 / 점프 투 자바자바는 1995년 발표된 객체 지향 프로그래밍 언어썬 마이크로시스템즈의 제임스 고슬링과 연구원들이 개발함처음에는 가전제품에 탑재해 동작하는 프로그램을 만들기 위해 탄생했으나, 지금은 웹과 모바일 앱 개발에서 가장 많이 사용하는 언어로 성장함(객체 지향 프로그래밍은 객체를 중심으로 프로그램을 작성하는 방법을 의미함. 자세한 내용은 5장에 할 계획)자바는 특히 우리나라에서 사용되는 프로그래밍 언어 중 사용 빈도가 매우 높다기업에서 사용하는 프로그램의 80%이상은 자바로 만들어짐또한 오랜 시간 굳건히 생태계를 구축하고 유지해왔기에, 자바를 기반으로 한 수많은 라이브러리들이 존재한다따라서 백엔..

2025. 10. 20. 15:32
2. FrontEnd/Javascript

[ JS ] webpack, rollup 과 같은 번들러는 왜 필요한가

번들러는 다양한 파일과 모듈을 하나의 배포 가능한 번들로 묶는 역할1. 네티워크 요청 성능을 개선다수의 개별 파일에 대해 모두 네트워크 요청을 수행할 경우, 성능에 부정적인 영행이 있을 수 있다번들러는 다수의 파일을 하나 또는 소수의 파일로 묶어 네트워크 요청을 최적화 함예를 들어, 애플리케이션이 수백개의 JS, CSS, 이미지 파일을 사용한다면 HTTP요청 수가 증가해 로딩 속도가 느려질 수 있지만 이때 번들러는 이들을 효율적으로 묶어 소수의 파일로 만듦으로 써 네트워크 요청 수를 줄여준다2. 번들러는 트랜스 파일링을 통해 더 효율적이고 호환성 있는 애플리케이션을 맏느는데 기여함먼저 트랜스파일링을 통해 코드를 최적화한다예를 들어, Dead Code Elimination과 Tree Shaking과 같은 ..

2025. 9. 22. 15:25
2. FrontEnd/React

[ React18 ] Streaming SSR이란?

Streaming SSR은서버에서 렌더링 된 HTMl을 한번에 완성해서 보내는 방식이 아니라, 준비된 부분부터 점진적으로 스트리밍해서 클라이언트에 전달하는 기술이다이를 통해 사용자는 페이지의 중요한 콘텐츠를 더 빠르게 확인할 수 있다기존 SSR은 서버에서 모든 데이터를 처리한 뒤 완전한 HTML을 전송하는 반면,Streaming SSR은 서버가 데이터를 준비하는 즉시 HTML조각을 스트림 형태로 보내고, 클라이언트는 이를 실시간으로 렌더링합니다React18에서는 renderToPipeableStream API를 통해 구현할 수 있으며, 이 API는 서버에서 HTML을조각 단위로 스트리밍 할 수 있도록 지원합니다예를 들어, onShellReady옵션을 사용해 스트림을 응답으로 바로 전송할 수 있다rende..

2025. 9. 19. 14:26
카테고리 없음

[SWR] 옵션들

useSWR을 사용하면서 API요청이 두번가고 중복으로 가는 현상이 있었다API하면서 옵션들을 넣으니 요청 중복으로 가는거를 막을 수 있었다옵션은 swr의 동작을 제어하는 설정 값으로 대표적으로 5가지가 기본동작 관련 옵션이다SWR은 아래와 같이 사용한다const { data, error, isLoading, mutate } = useSWR(key, fetcher, options);const { data, error, isLoading, mutate } = useSWR({ url : `/api/getSession`, fetcher, options);기본 동작 관련 옵션 revalidateOnFocus : 창이 다시 활성화될 때 자동으로 다시 요청 (기본값 true)revalidateOnReconnect ..

2025. 9. 19. 13:48
2. FrontEnd/Dart

[Dart] Why Dart?

dart 는 두 개의 컴파일러를 가지고 있다(JIT, AOT)AOT 컴파일러네이티브(arm, x86, x64), 웹(js)시스템에 맞게 최적화된 바이너리를 생성하므로 컴파일에 많은 시간이 걸린다.최종 배포시 사용.JIT(Just In Time) 컴파일러dart VM 사용코드의 결과를 바로 보여준다. (ms 단위?)가상머신에서 동작중이라 조금 느리지만 많은 디버깅 옵션도 지원.개발중에만 사용하며 배포에는 사용하지 않음.null safety 특성을 가진다.c나 java에서 null 참조하면 오류 발생.Dart에서는 null safety를 도입했고, 프로그램을 더 안전하게 만들어줌flutter, dart 둘 다 google 에서 개발 한 것이다 즉 flutter 의 성능 향상을 위해 dart 를 변경 하는 것..

2025. 5. 18. 16:02
2. FrontEnd/Javascript

[JS] JSON.stringify(…) 스프레드 연산자를 사용하면?

[문제] 프로젝트를 하면서, 배열을 stringify를 하면 마지막값만 저장되는 현상이 있음localStorage.setItem(‘history’, JSON.stringify(…curHistory))return […curHistory][원인]스프레드 연산지 오용 사용JSON.stringify(…curHistory) = 잘못된 문법- …curHistory는 배열을 해체하는 문법인데, JSON.stringify는 하나의 값만 받을 수 있음- 스프레드 연산자는 배열을 개별요소로 해체하기에 올바른 형태가 아님2. 마지막 값만 저장되는 이유- 잘못된 스프레드 사용으로 직렬화가 실패하거나, localStorage.setItem이 유효한 데이터를 받지 못해 덮어쓰기가 발생한 것[해결]배열 자체를 JSON.string..

2025. 2. 27. 15:43
2. FrontEnd/Javascript

[ JS ] 실행 컨텍스트

실행 컨텍스트는 JS에서 코드가 실행되는 환경이다JS엔진이 코드를 실행할때, 그 코드가 실행될 때의 환경을 정의하고 관리하기 위해 존재하는 것이 실행 컨텍스트이다 실행컨텍스트는 크게 전역과 함수 실행 컨텍스트로 나눌 수 있다1. 전역 실행컨텍스트JS가 처음 실행될 때, 생성되는 컨텍스트이다. 이 전역 컨텍스트는 프로그램이 종료될 때까지 유지되며 전역에 선언된 변수나 함수가 모두 포함된다. 전역 컨텍스트에서 선언된 변수와 함수는 프로그램 내 어디서든 접근이 가능하다기본적으로 JS는 싱글 스레드이기에 전역 실행컨텍스트는 1개만 존재2. 함수 실행 컨텍스트함수가 호출될 때마다 생성되는 컨텍스트이다. 각 함수는 자신만의 실행 컨텍스트를 가지며, 이컨텍스트 내에서 선언된 변수와 함수는 해당 함수 내에서만 유효함...

2025. 1. 17. 11:47
2. FrontEnd/React

[ React ] Controlled Component, Uncontrolled Component의 차이점

Controlled Component리액트 상태(state)를 통해 입력값을 제어하는 컴포넌트이다이 방식에서는 입력요소의 값(value)을 리액트 상태와 동기화하고, 사용자가 입력을 변경할 때마다 onChange이벤트 핸들러를 통해 상태를 업데이트합니다useState를 활용한 input valye를 제어하는 상황을 예시로 들 수 있습니다value는 리액트상태로 관리되며, onChange이벤트가 발생할 때마다 상태가 업데이트 됩니다장점은 입력값이 리액트 상태로 관리되므로, 입력값을 쉽게 검증하고 변경할 수 있으며, 복잡한 폼 로직을 처리하는데 유리하다Uncontrolled Component리액트의 상태가 아닌 DOM자체가 입력값을 제어하는 방식이다즉, 입력요소의 값은 DOM에서 직접관리되며, 리액트는 이를..

2025. 1. 17. 11:24
2. FrontEnd/React

[ React ] 리액트의 render phase와 commit phase

리액트의 렌더링 과정은 render phase, commit phase로 나눌 수 있다먼저 render phase는 리액트가 변화된 상태나 props에 따라 어떤 UI가 변경되어야 할지를 결정하는단계이다.이 과정에선 실제로 DOM을 업데이트 하지 않고, 변경사항을 가상 DOM에서 계산하여 비교합니다이 단계는 순수하게 계산과정이기에 성능에 영향을 주지 않도록 중단되거나 다시 실행될 수 있으며 React18에서 도입된 Concurrent Mode를 통해 비동기적으로 처리될 수도 있다다음으로 commit phase는 실제로 변화된 UI를 DOM에 반영하는 단계이다이때 리액트는 가상 DOM에서 계산된 결과를 실제 DOM에 적용하고, 변화된 UI를 브라우저에 렌더링 합니다DOM업데이트 이후는 useEffect와 ..

2025. 1. 17. 11:16
2. FrontEnd/React

[ React ] useEffect와 useLayoutEffect의 차이점

useEffect와 useLayoutEffect는 모두 렌더링된 후에 특정 작업을 수행하기 위해 사용됩니다. 하지만 실행되는 타이밍과 용도가 다릅니다먼저, useEffect는 렌더링이 완료되는 시점에 비동기적으로 실행됩니다즉, 화면이 실제로 사용자에게 그려진 후에 useEffect가 실행되는 방식그래서 useEffect는 보통 데이터를 가져오는 작업이나 이벤트 리스너 추가 등 렌더링 후에 화면에 직접적인 영향을 주지 않는 작업에 주로 사용됩니다.반면에 useLayoutEffect는 렌더링 후 DOM이 업데이트되기 직전의 시점에 동기적으로 실행됩니다. 여기서 동기적이라는 것은 화면에 내용이 그려지기 전에 모든 레이아웃 관련 작업이 완료된다는 의미입니다. 예를 들어, DOM의 크기를 측정하거나 위치를 조정해..

2025. 1. 16. 23:31
2. FrontEnd/React

[ React ] 다국어 처리를 구현할 때, 발생가능성이 있는 이슈들과 해결법

1. 텍스트 번역 관련 이슈(1) 번역 품질문제문제 설명해결방법문맥의 부재단어 단위 또는 문장 단위 번역 시 문맥을 고려하지 않아 부자연스러운 번역이 발생번역 시 전체문맥을 전달하도록 문맥 번역 옵션 지원전문 번역사나 번역 관리시스템 사용전문 용어 관리기술적 용어나 도메인 특화된 용어가 잘못 번역될 가능성용어집과 번역메모리(TM)을 사용해 일관성 유지다의어 처리동일한 단어가 다양한 의미를 가질 때 적절한 번역 선택이 어려움번역 전, 텍스트에 주석을 추가하거나 문맥을 명확히 작성(2) 번역 관리문제문제 설명해결방법번역 누락신규 콘텐츠를 추가했을 때 번역 문자열을 누락하는 문제i18n라이브러리 사용 시, 기본언어와 모든 언어 파일을 비교하는 자동검증도구 사용(i18next-parser, Lokalise)중복..

2025. 1. 16. 22:41
1. Computer Science

[CS] PubSub구조 (발행-구독 모델)

발행-구독 모델은 비동기 메시징 페러다임이다. 발행-구독 모델에서 발신자의 메세지는 특별한 수신자가 정해져 있지 않다.대신 발행된 메세지는 정해진 범주에 따라, 각 범주에 대한 구독을 신청한 수신자에게 전달된다수신자는 발행자에 대한 지식이 없어도 원하는 메세지만을 수신할 수 있다이러한 발행자와 구독자의 디커플링은 더 나이나믹한 네트워크 토폴로지와 높은 확장성을 허용한다1. pub-sub구조에서 수신자는 발행자에 대한 지식 없이 원하는 메세지만을 수신할 수 있다유튜브 개발체널을 구독하고 새로 올릴때마다 정보를 받고싶어하는 수신자가 있다고 가정하자. 이 수신자의 관심사는 '구독한 유튜브 개발체널'이다. 오로지 그것만 필요하다.발행자가 누구인지, 어디에 있는지는 관심이 없다. 그저 유튜브 체널에 새로운 소식이..

2025. 1. 14. 16:52
2. FrontEnd/React

[ React ] 다국어 처리 i18next

다국어 처리(i18n)를 통해 다국적 사용자를 지원합니다.핵심적인 기능은 선택된 언어에 따라 텍스트를 동적으로 변경하는 것입니다.이 기능은 i18next 라이브러리를 사용하여 구현되었습니다. 1. i18next 라이브러리 설치 • i18next는 다국어 처리를 간편하게 지원하는 라이브러리입니다. • React 프로젝트에서는 보통 react-i18next를 함께 사용합니다.npm install i18next react-i18next 2. 번역 파일 준비 • 언어별 JSON 파일로 텍스트 리소스를 준비합니다. • 예: /locales/ko/translation.json (한국어), /locales/en/translation.json (영어).// ko/translation.json{ "welcome": "..

2024. 11. 22. 16:28
2. FrontEnd/React

[ React ] 다국어 코드 중복 제거하는 리팩토링 후기

다국어 할 때, 중복되는 코드를 단순화하는 작업을 했다 {termsSelectedLanguage === 'ko' ? ( !termsContent ? ( ) : ( ) ) : termsSelectedLanguage === 'en' ? ( !termsEnglishContent ? ( ) : ( ) ) : termsSelectedLanguage === 'ja' ? ( !termsJapaneseContent ? ( ) : ( ) ) : null};이 코드를 1차적으로 아래와 같이 리팩토링 했다// 언어 타입을 명시적으로 정의type Language = 'ko' | 'en' | 'ja';cons..

2024. 11. 20. 11:25
2. FrontEnd/React

[ React ] useState 초기값 설정 에러

에러문구Warning: A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components이 에러는 “Controlled input이 Uncontrolled로 바뀌었다”는 경고이는 컴포넌트가 처음에는 입력 필드에..

2024. 10. 11. 13:59