CH's 개발 공부 일지

Q43. AWS로 웹 서비스를 배포한다면 어떤 구조를 생각하나요?예를 들어 애플리케이션은 EC2나 컨테이너 환경에서 실행하고, 데이터베이스는 RDS, 파일은 S3, 정적 파일 전달은 CloudFront를 고려할 수 있습니다. 로그와 지표는 CloudWatch에서 확인합니다. 처음부터 모든 서비스를 도입하기보다는 트래픽, 운영 부담, 비용에 맞는 구조를 선택하겠습니다. 보안에 관한 꼬리 질문에는 다음과 같이 답할 수 있습니다.애플리케이션의 AWS 접근은 가능한 경우 IAM Role과 임시 자격 증명을 사용하고 필요한 권한만 부여합니다. 비밀값을 소스코드에 넣지 않고, 데이터베이스 접근 범위도 제한합니다.Q44. 데이터베이스 인덱스와 트랜잭션은 왜 필요한가요?인덱스는 조회할 데이터를 빠르게 찾는 데 도움을 ..

Q41. 시맨틱 HTML과 접근성은 왜 중요한가요?요소의 의미가 구조에 드러나면 유지보수뿐 아니라 스크린리더와 키보드 사용에도 도움이 됩니다. 동작을 실행하는 요소에는 button, 이동에는 링크를 사용하고, 입력에는 적절한 label을 연결합니다. 화면을 마우스로 사용할 수 있는지뿐 아니라 키보드와 보조 기술로도 사용할 수 있는지 확인합니다.Q42. CSS 박스 모델과 Flexbox·Grid를 설명해주세요.박스 모델은 content, padding, border, margin으로 구성됩니다. box-sizing: border-box를 사용하면 지정한 너비와 높이에 padding과 border가 포함됩니다. Flexbox는 한 방향의 배치와 정렬에, Grid는 행과 열을 함께 구성하는 배치에 적합하며, ..

Q34. Node.js는 싱글 스레드인데 어떻게 여러 요청을 처리하나요?일반적인 Node.js 프로세스의 JavaScript 실행은 하나의 이벤트 루프 스레드에서 이루어지지만, 비동기 I/O는 운영체제나 작업 종류에 따라 libuv의 워커 풀 등을 활용합니다. I/O 완료를 기다리는 동안 다른 요청을 처리할 수 있습니다. 다만 긴 CPU 연산은 이벤트 루프를 막아 다른 요청의 응답도 늦출 수 있습니다. 꼬리 질문으로 CPU 작업 처리 방법을 물으면 worker_threads, 별도 작업 프로세스, 작업 큐 등을 설명할 수 있습니다.Q35. Express 미들웨어란 무엇인가요?요청과 응답 처리 흐름 사이에서 실행되는 함수입니다. 인증, 요청 로깅, 본문 파싱 같은 공통 처리를 수행하며, 응답을 종료하거나 ..

Q29. React와 Next.js의 차이는 무엇인가요?React는 UI를 구성하는 라이브러리이고, Next.js는 React를 기반으로 라우팅, 서버 렌더링, 서버 측 기능 등 애플리케이션 구성을 제공하는 프레임워크입니다. 프로젝트에서 필요한 렌더링 방식과 서버 기능, 배포 환경을 기준으로 Next.js 사용 여부를 판단합니다.Q30. CSR, SSR, SSG, ISR의 차이는 무엇인가요?CSR은 브라우저에서 JavaScript를 실행해 UI를 구성하는 방식입니다. SSR은 요청 시 서버에서 HTML을 생성하고, SSG는 빌드 시 미리 생성합니다. ISR은 미리 생성한 결과를 재검증 정책에 따라 갱신합니다. 데이터 변경 빈도, 개인화 여부, 초기 로딩 요구에 맞춰 선택합니다. 예를 들어, 공개 소개 페..

Q24. React Query는 왜 사용하나요?서버 데이터는 로컬 UI 상태와 달리 요청 지연, 실패, 재조회, 최신성 관리가 필요합니다. React Query는 조회 결과를 캐시하고 요청 상태와 재조회 등을 관리하는 데 사용합니다. 모달 열림 여부처럼 클라이언트에서만 관리하는 상태까지 모두 React Query에 넣지는 않습니다.Q25. staleTime과 gcTime은 어떻게 다른가요?staleTime은 데이터를 신선하다고 판단하는 기간이고, gcTime은 사용하지 않는 쿼리가 캐시에서 제거되기까지의 시간입니다. 일반적인 클라이언트 기본값은 각각 0과 5분입니다. stale 상태가 되었다고 캐시가 즉시 삭제되거나, 그 순간 요청이 반드시 발생하는 것은 아닙니다.Q26. 쿼리 키는 어떻게 설계하나요?조..

Q16. React 컴포넌트는 언제 다시 렌더링되나요?자신의 상태가 변경되거나, 부모가 다시 렌더링하거나, 구독한 Context 값이 변경되면 다시 렌더링될 수 있습니다. 렌더링은 다음 UI를 계산하는 과정이고, 실제 DOM 변경과는 구분됩니다. 렌더링되었다고 항상 실제 DOM이 바뀌는 것은 아닙니다.Q17. useState로 값을 바꿨는데 바로 출력하면 이전 값이 나오는 이유는 무엇인가요?각 렌더링에서 상태는 하나의 스냅샷처럼 동작하기 때문입니다. 상태 변경 함수는 다음 렌더링을 요청하며, 현재 실행 중인 함수가 참조하는 상태 변수를 즉시 바꾸지는 않습니다. 이전 값을 기준으로 다음 값을 계산할 때는 함수형 업데이트를 사용합니다.setCount(prev => prev + 1);Q18. useEffect..

Q5. var, let, const의 차이는 무엇인가요?var는 함수 스코프이고, let과 const는 블록 스코프입니다. let은 재할당이 가능하고 const는 재할당이 불가능합니다. 다만 const로 선언한 객체의 내부 속성까지 변경할 수 없는 것은 아닙니다. 기본적으로 const를 사용하고 재할당이 필요한 경우에 let을 사용합니다.Q6. 클로저란 무엇이고 어디에 활용하나요?함수가 선언된 환경의 변수를, 그 환경의 실행이 끝난 뒤에도 참조할 수 있는 특성입니다. 외부에 직접 노출하지 않을 상태를 관리하거나, 콜백에서 특정 값을 기억할 때 활용합니다. React에서도 함수가 이전 렌더링의 값을 기억하면서 발생하는 stale closure 문제를 이해하는 데 중요합니다.Q7. 이벤트 루프를 설명해주세요..

Q1. C# 개발을 하다가 JavaScript 기반 풀스택으로 기술을 확장한 이유는 무엇인가요?기존 C# 개발 경험을 바탕으로, 사용자가 접하는 화면부터 서버와 배포까지 서비스 전체 흐름을 이해하고 구현하는 역량을 넓히고 싶었습니다. 약 10개월 동안 JavaScript와 TypeScript, React, Node.js 등을 학습했습니다. 기존 실무 경험에서 얻은 문제 해결 방식과 협업 경험을 새로운 기술 환경에서도 활용하려고 합니다.Q2. 기존 C# 경험이 새로운 기술 스택에서 어떻게 도움이 되나요?언어와 프레임워크가 달라도 책임 분리, 예외 처리, 데이터 모델링, 디버깅 같은 기본 원칙은 이어진다고 생각합니다. 기존에 경험한 설계나 문제 해결 방법을 활용하면서, JavaScript의 비동기 실행 방식..

4. key를 써야 하는 이유(1) key가 없으면 어떻게 될까?function FruitList() { const fruits = ['사과', '바나나', '오렌지']; return ( {fruits.map(fruit => ( {fruit} {/* Warning: Each child should have a unique "key" prop */} ))} );} 개발자 도구 콘솔에 빨간 경고가 뜸. 화면은 일단 그려지긴 하지만 리스트가 변경될 때 문제가 터짐 (2) key가 필요한 진짜 이유key가 없을 때 '딸기'를 맨 앞에 추가:이전: 이후:사과 → 딸기 (사과를 딸기로 변..

1. 프로젝트 개요최애의 포토는 사용자가 직접 포토카드를 생성하고, 마켓플레이스에서 포토카드를 구매하거나 교환할 수 있는 포토카드 거래 플랫폼입니다.주요 기능은 랜딩 페이지, 회원가입/로그인, 마이갤러리, 포토카드 생성, 마켓플레이스, 판매 등록, 구매, 교환 제안, 알림, 랜덤 포인트 획득 등으로 구성되어 있습니다.이번 프로젝트에서는 6명의 팀원이 FE와 BE를 함께 담당하는 풀스택 방식으로 개발을 진행했으며, 저는 주로 마켓플레이스의 구매/판매/교환 흐름과 관련된 API 설계 및 연동, BE 공통 구조 정리, 배포 과정의 문제 해결을 담당했습니다.2. 담당한 작업저는 프로젝트 초반 요구사항 분석 단계에서 유저 스토리, 소프트웨어 요구사항, ERD, Prisma Schema, API 명세서 작성을 함께..