전체 글 (107) 썸네일형 리스트형 CSR과 SSR의 차이는 무엇인가요? 답변CSR은 클라이언트 측에서 JavaScript로 페이지를 렌더링하는 방식이며, 초기 로딩이 느릴 수 있으나 이후 상호작용이 빠릅니다. 반면, SSR은 서버에서 HTML을 미리 렌더링해 보내므로 초기 로딩이 빠르고 SEO에 유리합니다. CSR은 SPA에 적합하고, SSR은 SEO가 중요한 서비스에 주로 사용됩니다. CSR서버에서 인덱스라는 HTML 파일을 클라이언트에 보내주면 클라이언트에서 알아서 처리하는 방식 심플한 CSR 예제 index.html을 보면 body 안은 위와 같이 심플하게 생겼다.따라서 처음에 접속하면 빈 화면만 보이고, 링크된 app.js를 서버로부터 다운로드 받게 된다.이때 해당 js에는 해당 애플리케이션에서 필요한 로직들 뿐만 아니라 애플리케이션을 구동하는 프레임워크와 라이브러리.. 렉시컬 환경(Lexical Environment)에 대해 설명해주세요. 답변렉시컬 환경은 코드가 실행될 때 변수를 저장하고 참조하는 구조를 나타내는 개념입니다.자바스크립트에서 함수나 블록이 실행될 때마다 렉시컬 환경이 생성되고, 그 안에서 변수들이 어떻게 선언되고 참조되는지 정의됩니다. 개념 정리스코프 개념 다시 잡기스코프란, 변수나 함수의 유효 범위를 의미함특정 변수나 함수를 어느 위치에서 참조할 수 있는지를 나타내며, 스코프에서 벗어난 위치에서 참조할 경우 Reference Error가 발생한다.자바스크립트의 스코프는 크게 전역 스코프와 로컬 스코프로 나눌 수 있음이 둘은 렉시컬 스코프 규칙에 따라 결정됨→ 렉시컬 스코프 규칙 : 변수가 선언된 위치에 따라 접근 가능 범위가 결정됨로컬 스코프로컬 스코프는 다시 함수 스코프와 코드 블록 스코프로 나눌 수 있음→ 이때 let.. CORS는 무엇인지, 이를 처리를 해본 경험을 말씀해주세요. 답변CORS(Cross-Origin Resource Sharing)란 웹 브라우저에서 다른 출처(domain, protocol, port)에서 리소스를 요청할 때 발생하는 보안 정책으로, 웹 애플리케이션이 다른 출처의 리소스에 접근할 수 있도록 권한을 제어하는 메커니즘입니다. 이를 통해, 웹 애플리케이션이 악의적으로 다른 도메인의 자원에 접근하지 못하도록 방지할 수 있습니다. 추가 정리CORS란?Cross-Origin Resource Sharing의 약자웹 브라우저가 다른 출처(도메인, 프로토콜, 또는 포트)에서 리소스를 요청할 때 발생하는 보안 기능예를 들어 https://example.com에서 호스팅된 웹 페이지가 https://api.example.com와 같은 곳에서 데이터를 요청하려고 할 때 .. 이벤트 버블링과 캡처링에 대해 설명해주세요. 답변두 개념은 브라우저에서 특정 화면 요소의 이벤트를 감지하는 방식입니다.이벤트 버블링은 이벤트가 가장 깊은 요소에서 시작해 상위 요소로 전파되는 방식입니다. 반대로, 이벤트 캡처링은 상위 요소에서 시작해 하위 요소로 전파됩니다. 기본적으로 브라우저는 이벤트 버블링을 사용하며, 필요 시 addEventListener의 세 번째 인자로 true를 주어 캡처링을 사용할 수 있습니다. 이벤트 전파를 중지하려면 stopPropagation()을 사용할 수 있습니다.이벤트 버블링 (Event Bubbling)이벤트 버블링은 이벤트가 가장 깊은 자식 요소에서 발생하여 부모 요소를 거쳐 최상위 요소로 상향 전파되는 방식입니다. 즉, 이벤트가 발생하면 그 이벤트는 해당 요소에서 처리된 후 부모로 전파되고, 계속해서 상.. React의 생명 주기 메서드에 대해 설명해주세요. 답변React의 생명 주기 메서드는 컴포넌트가 생성되고, 업데이트되고, 소멸되는 과정에서 특정 시점에 실행되는 메서드를 말합니다. 클래스형 컴포넌트에서 주로 사용되며, 함수형 컴포넌트에서는 useEffect 훅으로 대체됩니다. 개념 정리생명 주기의 3단계:마운트(Mounting): 컴포넌트가 처음 DOM에 삽입될 때 실행되는 과정입니다.주요 메서드: constructor(), componentDidMount()업데이트(Updating): 컴포넌트가 상태(state)나 props가 변경되어 리렌더링될 때 실행됩니다.주요 메서드: shouldComponentUpdate(), componentDidUpdate()언마운트(Unmounting): 컴포넌트가 DOM에서 제거될 때 실행되는 과정입니다.주요 메서드: .. Context API와 Redux를 비교해주세요. 답변Context API는 React에 내장된 상태 관리 도구로, 간단한 전역 상태 관리에 적합하며 추가 라이브러리 설치가 필요하지 않습니다. 하지만 성능 최적화가 어렵고 대규모 애플리케이션에는 부적합할 수 있습니다. 반면 Redux는 복잡한 상태 관리와 비동기 처리가 필요한 대규모 애플리케이션에 적합합니다. 단일 스토어에서 상태를 예측 가능하게 관리하며, Redux Thunk나 Saga를 사용해 비동기 로직을 처리할 수 있습니다. 하지만 보일러플레이트 코드가 많고 소규모 프로젝트에서는 복잡도가 증가할 수 있습니다. Context API 특징Context API는 React에 내장되어있어 추가 라이브러리 설치가 필요하지 않음단순한 전역 상태 관리 기법으로 간단하게 사용하기 좋음컨텍스트가 변경되면 해당 컨.. 클로져(Closure)에 대해 설명해주세요. 답변클로저란 함수가 생성될 때 외부 스코프(lexical scope)에 있는 변수들을 기억하고, 그 함수가 해당 스코프 밖에서 실행되더라도 그 변수들에 접근할 수 있게 하는 특성을 말합니다.자바스크립트는 함수가 생성될 때 외부 스코프에 있는 변수들을 함께 저장하는데, 이를 통해 함수가 외부에서 호출되더라도 외부 변수에 접근할 수 있습니다. 클로저를 사용하는 상황 및 이유데이터 은닉외부에서 접근할 수 없는 변수로 만들어 클로저를 통해 보호합니다.이를 통해 내부 함수만이 그 변수에 접근하고 변경할 수 있도록 합니다.function outerFunction() { let count = 0; return function innerFunction() { count++; .. Next.js에서 유니티 빌드 파일 접근 수정 Next.js에서 iframe을 활용해 유니티 빌드 파일을 렌더링하던 중 배포 환경인 gitlab에 유니티 빌드 파일을 저장할 수 없는 문제가 발생했다.(파일 크기 문제)물론 lfs와 같이 대용량 파일을 gitlab에 저장하는 방식도 있겠으나, 시간이 없었던 관계로 빠르게 해결할 수 있는 방안을 찾아야했다.결론(시도한 방법)1. Next.js를 일종의 proxy 서버로 활용하여 s3에 접근 : 속도가 매우 느려짐2. Docker 이미지 생성시 S3에 저장된 유니티 빌드 파일을 public에 끼워 넣기 : 채택 1번 방식iframe을 통해 S3에 있는 유니티 빌드 파일에 직접 접근시 CORS 오류 발생nity WebGL 빌드 파일은 index.html이 S3에 저장되어 있고, 브라우저가 이를 직접 요청하.. 이전 1 2 3 4 5 ··· 14 다음
