본문 바로가기

분류 전체보기

(72)
[9주차] 위클리페이퍼 - 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요. Next.js를 사용하는 이유 (기본)리액트의 SPA 및 CSR의 한계리액트의 렌더링 방식리액트는 단일 웹페이지 애플리케이션(SPA)와 클라이언트 사이드 렌더링 방식을 사용리액트 렌더링 방식의 한계초기 로딩 시간 지연: 모든 자바스크립트 파일과 컴포넌트를 클라이언트 측에서 로드해야 하므로, 초기 로딩 시간이 길어질 수 있음SEO 문제: 검색 엔진이 콘텐츠를 제대로 인덱싱하지 못해 SEO에 불리Next.js의 프리렌더링 기능과 이점프리렌더링의 방식서버 사이드 렌더링(SSR): 각 요청마다 서버에서 HTML을 생성하여 브라우저에 전달 → SEO와 초기 로딩 시간을 크게 개선정적 사이트 생성(SSG): 빌드 시 모든 페이지를 미리 생성하여 정적 파일로 저장 → 매우 빠른 로딩 속도와 보안성을 제공프리렌더링의 ..
[8주차] 위클리 페이퍼 - 관계형 데이터베이스를 사용하는 이유를 설명해주세요. 관계형 데이터베이스를 사용하는 이유데이터 무결성과 일관성 유지ACID 속성을 통해 데이터 무결성과 일관성을 유지원자성 (Atomicity): 모든 트랜잭션이 완전히 수행되거나 전혀 수행되지 않아야 함을 보장일관성 (Consistency): 트랜잭션이 데이터베이스를 일관된 상태로 유지하도록 보장고립성 (Isolation): 동시에 실행되는 트랜잭션이 서로 간섭하지 않도록 보장지속성 (Durability): 트랜잭션이 성공적으로 완료되면 결과가 영구적으로 저장됨을 보장동시성 제어: MVCC(Multi-Version Concurrency Control)나 잠금(Locking) 메커니즘을 통해 다수의 사용자가 동시에 안전하게 데이터에 접근 가능데이터 중복 최소화데이터베이스의 저장 공간을 절약하고 데이터 일관성을..
[8주차] 위클리 페이퍼 - 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. CSR (Client-Side Rendering)정의클라이언트 사이드에서 페이지 렌더링 작업을 수행하는 방식초기 로딩 시 HTML 파일과 JavaScript 파일을 받아 브라우저에서 실행 이후, 모든 렌더링과 업데이트는 클라이언트 측에서 이루어짐특징 (장/단점)장점빠른 사용자 상호작용: 한 번 로드 되면 페이지 전환이 빠름동적 콘텐츠: 사용자 상호작용에 따라 동적으로 컨텐츠 업데이트단점초기 로딩 속도: 초기 로딩 속도가 느릴 수 있음SEO 문제: 초기 로딩 시, 빈 HTML 문서를 받아, SEO가 어려울 수 있음보완 사항Prerendering, Dynamic Rendering, Server Components(React 18+) 등을 통해 보완 가능사용 상황대시보드 및 웹 애플리케이션사용자와의 동적인 상..
[7주차] 위클리 페이퍼 - 데이터베이스 정규화에 대해 설명해주세요. 데이터베이스 정규화정규화의 목표데이터를 구조적으로 정리하여 중복을 최소화데이터의 무결성을 유지정규화의 효과데이터베이스 관리가 효율적으로 이루어짐데이터의 일관성이 높아짐장점데이터 중복 최소화: 불필요한 중복을 제거하여 저장 공간을 절약하고 데이터의 일관성을 보장데이터 무결성 보장: 데이터의 일관성을 유지해 오류 발생 가능성을 줄임성능 향상: 데이터 검색 및 수정 작업의 성능을 최적화단점구조의 복잡성: 데이터베이스 구조가 복잡해질 수 있으며, 이를 이해하고 관리하는 데 어려움이 있음Join 연산의 증가: 데이터를 조회할 때 여러 테이블을 Join 연산 수행, 성능이 저하될 가능성 존재정규화 단계제1정규형 (1NF)테이블의 모든 열이 원자값(더 이상 나눌 수 없는 값)을 가져야 한다는 규칙하나의 열에 여러 값..
[7주차] 위클리 페이퍼 - 리액트 생명주기(life cycle)에 대해 설명해 주세요. 컴포넌트 생명주기컴포넌트가 생성되어 화면에 마운트 되는 순간부터, 업데이트, 언마운트 되는 순간까지의 과정을 의미여러 생명주기 메소드를 통해, 각 생명주기의 동작을 정의 및 호출됨주요 생명주기 메서드클래스 컴포넌트constructor()컴포넌트의 생성 시 실행초기 상태를 설정하고, 메서드를 바인딩할 때 사용componentDidMount()컴포넌트가 처음 DOM에 마운트된 직후 호출사이드 이펙트를 발생시킬 때 사용componentDidUpdate()컴포넌트가 업데이트된 후에 호출DOM을 업데이트하거나 새로운 데이터에 반응할 때 사용componentWillUnmount()컴포넌트가 DOM에서 제거될 때 호출정리 작업을 수행할 때 사용함수 컴포넌트useEffect() 를 통해, 생명주기를 통합적으로 관리할 ..
[7주차] 위클리 페이퍼 - React에서 배열을 렌더링할 때 key를 설정해야 하는 이유와 key 설정 시 주의할 점을 설명하세요. Key의 필요성렌더링 과정에서 요소를 식별하는 방법을 제공하며, 배열의 요소가 재정렬되거나 업데이트 될 때 중요Key를 통해 React가 어떤 항목이 변경/추가/제거 되었는지 파악할 수 있음불필요한 요소의 생성과 파괴를 방지, 변경된 요소만을 갱신할 수 있음Key의 역할key는 React의 렌더링 성능 최적화에 크게 기여key를 사용하면 React는 이전 상태와 새로운 상태를 비교하여 변경된 부분만 업데이트DOM 조작을 최소화하여, 성능을 향상 시킬 수 있음Key 설정 주의사항고유한 Key 값 사용Key 값이 중복되면, 어떤 요소를 변경했는지 판단할 수 없어, 의도치 않은 동작이 발생할 수 있음인덱스 값 Key 사용 금지인덱스 값은 변할 수 있는 값이므로, 1번 규칙에 위배 되는 결과를 초래함단, 리스트..
[6주차] 위클리 페이퍼 - useMemo, useCallback 에 대해 설명하고, 어떤 경우에 사용하면 좋을지, 남용할 경우 발생할 수 있는 문제점을 설명해 주세요. 이 Hook은 성능 최적화를 위해 사용하는 Hook으로, 컴포넌트의 불필요한 재렌더링을 방지하는 역할을 수행한다.useMemo 의 기능과 차이점값의 메모이제이션 (연산 결과를 메모리에 저장) 기능을 제공하여, 동일한 연산을 반복하지 않고 계산 결과를 재 사용할 수 있도록 함.// computeExpensiveValue는 a와 b가 변경되지 않는 한, 재계산되지 않고 이전의 계산된 값을 반환const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);useCallback 의 기능과 차이점함수의 메모이제이션 (입력 값에 대한 실행 결과를 메모리에 저장) 기능을 제공, 전달된 함수를 다시 생성하지 않고 재 사용할 수 있도록 함.// doSo..
[6주차] 위클리 페이퍼 - React에서 컴포넌트란 무엇이며, 함수형 컴포넌트와 클래스 컴포넌트의 차이점을 설명하세요. React에서의 컴포넌트란?자체적인 로직이나 디자인을 가진, UI의 일부분을 의미한다. 작게는 버튼에서부터 크게는 전체 페이지가 될 수 있다. 컴포넌트의 이름은 대문자로 시작한다. 이는 HTML 태그가 소문자로 시작하기 때문에, 혼선을 방지하기 위함이다. 아래는 컴포넌트의 정의와 사용에 대한 예시 코드이다.// 컴포넌트의 정의function MyButton() { return ( I'm a button );}export default function MyApp() { return ( Welcome to my app );}함수형 컴포넌트와 클래스 컴포넌트의 차이점함수형 컴포넌트함수형 컴포넌트는 자바스크립트의 함수 형태로 정의된다. 함수형 컴포넌트는..