티스토리

생각보다 실천을
검색하기

블로그 홈

생각보다 실천을

yjym33.tistory.com/m

yjym33 님의 블로그입니다.

구독자
1
방명록 방문하기
공지 개발 블로그 입니다. 모두보기

주요 글 목록

  • ReactQuery - useQuery Using React Query install react-query먼저 react-query를 설치하기 위해서 아래 명령어를 터미널에 입력해야 합니다.npm install @tanstack/react-query Create queryClient & QueryClientProvider QueryClient 생성자로 쿼리와 캐시를 관리하는 Query Client를 생성하고  컴포넌트를 통해 생성한 Query Client를 하위 컴포넌트들이 접근할 수 있도록 최상위 컴포넌트로 감싸주어야 합니다.모든 하위 컴포넌트들은 Query Client가 갖고 있는 캐시와 모든 기본 옵션을 사용할 수 있게 됩니다.참고로 은 React의 Context API를 사용하여 생성된 queryClient를 제공합니다.import {.. 공감수 0 댓글수 3 2024. 7. 24.
  • ReactQuery - Client State vs Server State Client State vs Server State Client State란 클라이언트가 자체적으로 생성한 상태로 사용자의 input 값이나 UI 변경을 담당하는 부분으로 볼 수 있습니다. 예를 들어, 모달창을 열고 닫는 상태나 사용자가 입력한 값 같은 것들을 의미합니다.즉, 서버에서 일어나는 일과는 아무 관련이 없는 상태들을 의미합니다. 반면 Server State란 클라이언트에 표시하는 데 필요한 서버 데이터를 의미합니다. 예를 들어, DB에 존재하는 데이터들을 의미합니다. React Query는 React 애플리케이션에서 서버 응답에 대한 상태인 fetch, caching, update와 같은 동작을 쉽게 다룰 수 있도록 하며, Client State와 Server State를 명확하게 분리하여 관.. 공감수 0 댓글수 1 2024. 7. 24.
  • Next JS의 등장배경 Next.js는 SSR(Server Side Rendering)을 쉽게 구현할 수 있는 개발 환경을 제공하는 React의 프레임워크이다.  NextJS가 등장한 이유는 이전 브라우저의 동작방식을 보면 알수있다. 과거의 대부분 웹사이트들은 SSR과 MPA(Multi Page Application) 방식으로 동작해왔었다  하지만  페이지 이동 시에 깜빡거리는 현상과 같은 문제들로 인해 사용자 경험이 좋지 못했고 스마트폰의 시대가 도래하면서 앱과 같은 사용성 측면에서 수요가 커져갔다. 이런 시기에 AJAX와 jQuery가 등장했고 커뮤니티에서도 많이 사용되면서 클라이언트에서 비동기적으로 JSON 형태의 데이터만을 서버에 요청하고 받아와서 사용자에게 데이터와 함께 웹 페이지를 보여주는 방식이 대세가 되었다. 하.. 공감수 0 댓글수 0 2024. 6. 26.
  • Next13 vs Next14 (차이점, 개념) Next 13 이후에 바뀐 점app router / pages router 두 가지로 구성되어 있다.app router 도입 이유pages router의 구조상 기존 문제를 개선할 수 없었기에 새로 도입디렉토리 기능공통 레이아웃 기능페이지별 권한 체크 (어드민/로그인 유저 등) → app router 미들 웨어로 가능react 18 버전 사용 → 서버 컴포넌트 적극 활용 서버 컴포넌트란?next 서버에서 리액트를 미리 렌더링해서 프론트 혹은 브라우저, 클라언트로 데이터를 보내줄 때 완성된 HTML을 미리 보내주는 것 장점 HTML 로딩 시간, JS 용량 감소단점 Next 서버 자체의 부담 증가 → 이에 따라 ‘캐시’ 적극 활용 Nextjs란?React 위에서 돌아가는 프레임워크React는 라이브러리로써 .. 공감수 0 댓글수 0 2024. 6. 16.
  • ReactNative 시작 - 환경설정 (MAC-IOS) ReactNative를 시작하기에 앞서 환경설정을 진행해야 합니다. MACOS를 기준으로 설명을 진행하려고 합니다.  1. mac terminal 실행2. "brew install node" :  node 설치3. "brew install watchman" : watchman 설치 4.  https://apps.apple.com/us/app/xcode/id497799835?mt=12 다음의 링크에서 xcode를 설치5. https://cocoapods.org/ 해당 경로로 접속후 "sudo gem install cocoapods" 를 터미널에 입력하여 설치 공감수 0 댓글수 0 2024. 6. 14.
  • 시맨틱 웹 (Semantic Web) 시맨틱 웹(Semantic Web)이 뭔가요? 시멘틱 웹에 대해서 알기 이전에 시맨틱 웹이 등장한 배경에 대해 이해하면 좋습니다. 인터넷이 등장하고 인터넷이 활성화 되기 시작하면서 웹의 사용이 폭발적으로 늘어나게 되었습니다. 그에 따라 웹상에 축정된 정보가 지나치게 많아짐에 따라 여러 문제에 봉착하게 되었습니다. 웹 기술은 축적된 방대한 데이터에 대하여 키워드(Keyword)에 의한 정보접근만을 허용하고 있어, 정보 검색 시 무수히 많은 불필요한 정보가 처리되어 정보의 홍수를 가중시켰습니다. 또한 검색 시 컴퓨터가 필요한 정보를 추출, 해석, 가공 할수 있는 방법이 없어, 모든 정보를 사용자가 직접 개입해서 처리해야하는 문제가 생겼습니다. 위와 같은 문제를 해결하기 위해 웹 기술의 비전으로 시맨틱 웹(S.. 공감수 0 댓글수 0 2023. 10. 26.
  • 대규모 트래픽으로 인한 서버 과부화 해결방법 #1 ★★★ 서버과부화란? 서버 과부화 (Server Overload)는 서버가 처리할 수 있는 트래픽 또는 부하보다 더 많은 요청이 들어오는 상황을 가리킵니다. 이러한 상황은 서버의 성능 저하, 응답 지연, 서비스 중단 또는 서버 다운의 원인이 될 수 있으며, 이로 인해 사용자 경험에 부정적인 영향을 미칠 수 있습니다. 대규모 트래픽으로 인한 서버 과부하를 해결하기 위한 방법은 다음과 같습니다: 1. 부하 분산 (Load Balancing): 부하 분산은 서버 과부하를 완화하는 핵심적인 방법 중 하나입니다. 로드 밸런서를 사용하여 트래픽을 여러 서버로 분산시키고 각 서버에 동등하게 분배합니다. 이를 통해 각 서버에 가해지는 부하를 분산시키고 서버 응답 시간을 최적화할 수 있습니다. 2. 자동 확장 (Auto Sca.. 공감수 0 댓글수 0 2023. 10. 11.
  • 네트워크를 이루는 장치 [데이터링크계층 - L2스위치, 브리지] ★★★ L2 스위치 (Layer 2 Switch): 역할: L2 스위치는 데이터 링크 계층에서 동작하며, 주로 이더넷 프레임을 스위칭하여 로컬 네트워크 내에서 데이터를 전달하는 역할을 합니다. 이더넷 스위치라고도 불립니다. MAC 주소 기반 스위칭: L2 스위치는 MAC 주소를 기반으로 프레임을 전달합니다. 스위치가 각 포트에 연결된 디바이스의 MAC 주소를 학습하고, 이 정보를 사용하여 프레임을 해당 디바이스로 전달합니다. 스위칭 테이블: L2 스위치는 스위칭 테이블을 유지하여 MAC 주소와 해당 포트를 매핑합니다. 이를 통해 프레임이 목적지로 직접 전달되므로 네트워크 트래픽을 효율적으로 관리합니다. 로컬 영역 네트워크: L2 스위치는 주로 로컬 네트워크 내에서 사용되며, LAN에서 서로 다른 디바이스 간의 .. 공감수 0 댓글수 1 2023. 10. 11.
  • 네트워크를 이루는 장치 [인터넷 계층 - 라우터] ★★★ 인터넷 계층(Internet Layer)에서 네트워크를 이루는 장치 중 가장 중요한 역할을 하는 것 중 하나는 라우터(Router)입니다. 라우터는 데이터 패킷을 받아서 최적의 경로를 선택하여 목적지로 전달하는 장치로, 인터넷과 다양한 네트워크 간의 연결을 관리하며 데이터 흐름을 제어합니다. 라우터의 주요 특징과 역할: 패킷 전달 및 라우팅: 라우터는 패킷(데이터 단위)을 받아서 목적지 IP 주소를 기반으로 최적의 경로를 선택하고 패킷을 전달합니다. 이로써 데이터는 출발지에서 목적지까지 안정적으로 전달됩니다. 다중 네트워크 연결: 라우터는 여러 네트워크 간의 연결을 관리하며, 다양한 종류의 네트워크를 연결하는 역할을 합니다. 예를 들어, 로컬 네트워크(LAN)와 외부 인터넷 간의 연결을 제공합니다. 패킷.. 공감수 0 댓글수 0 2023. 10. 11.
  • 네트워크를 이루는 장치 [어플리케이션 계층 : L7 스위치] ★★★ L7 스위치는 애플리케이션 계층(Application Layer)에서 네트워크를 이루는 장치 중 하나로, 네트워크 트래픽을 애플리케이션 수준에서 관리하고 제어하는 역할을 합니다. 이 장치는 레이어 7로 부터 데이터를 해석하고, 트래픽을 분석하여 다양한 기능을 수행합니다. L7 스위치의 주요 특징 및 기능: 애플리케이션 수준 로드 밸런싱: L7 스위치는 클라이언트 요청을 여러 서버로 분산시키는 로드 밸런싱 기능을 제공합니다. 이 때, 스위치는 애플리케이션 프로토콜을 이해하고 트래픽 패턴을 분석하여 최적의 서버로 요청을 전달합니다. 예를 들어, 웹 트래픽의 경우 HTTP 헤더 및 URL 정보를 기반으로 로드 밸런싱을 수행할 수 있습니다. 인증과 보안: L7 스위치는 클라이언트의 인증 및 보안 요구 사항을 처.. 공감수 0 댓글수 0 2023. 10. 10.
  • PUT과 PATCH의 차이 ★★★ 1. PUT 메서드: 특징: 역할: PUT 메서드는 클라이언트에서 서버로 데이터를 업데이트 또는 수정할 때 사용됩니다. 즉, 해당 리소스를 완전히 교체하는 데 사용됩니다. 데이터 전송 방식: PUT 요청은 클라이언트가 업데이트하려는 리소스의 전체 데이터를 제공합니다. 이전 데이터는 완전히 대체됩니다. 멱등성: PUT은 멱등성(idempotent)을 가집니다. 동일한 PUT 요청을 여러 번 보내더라도 동일한 상태로 변경됩니다. 예시: 파일 업로드, 레코드의 전체 업데이트 등에 사용될 수 있습니다. 2. PATCH 메서드: 특징: 역할: PATCH 메서드는 클라이언트에서 서버로 데이터의 부분적인 수정을 요청할 때 사용됩니다. 리소스의 일부를 변경하고자 할 때 유용합니다. 데이터 전송 방식: PATCH 요청은.. 공감수 0 댓글수 0 2023. 10. 10.
  • GET과 POST의 차이 ★★★ 1. GET 메서드: 특징: 데이터 전송 방식: GET 메서드는 클라이언트(웹 브라우저)에서 서버로 데이터를 요청할 때 사용됩니다. 이 때, 데이터는 URL의 쿼리 문자열(query string)에 포함되어 전송됩니다. 데이터 노출: GET은 URL에 데이터를 노출시키므로, 전송하는 데이터가 URL에 노출됩니다. 이로 인해 보안에 취약할 수 있습니다. 또한 URL의 길이에 제한이 있으므로 큰 양의 데이터를 전송하기에는 적합하지 않습니다. 캐싱 가능: GET 요청은 캐싱이 가능하며, 동일한 요청이 반복되어도 서버에 동일한 요청을 보내지 않고 캐시된 응답을 사용할 수 있습니다. 멱등성: GET 요청은 멱등성(idempotent)을 가집니다. 즉, 동일한 요청을 여러 번 보내도 항상 동일한 결과를 얻을 수 있.. 공감수 0 댓글수 0 2023. 10. 10.
  • HTTP 상태코드(status code) ★★★ HTTP 상태 코드(Status Code)는 웹 서버가 클라이언트로부터 받은 HTTP 요청의 결과를 나타내는 3자리 숫자입니다. 이 코드는 서버에서 요청을 처리한 결과를 클라이언트에게 전달하며, 클라이언트는 이를 기반으로 요청에 대한 적절한 조치를 취합니다. HTTP 상태 코드는 다양한 상황과 오류를 식별하고, 다양한 범주로 나뉩니다. 1xx (Informational - 정보) 100 (Continue): 클라이언트가 요청을 계속해도 괜찮다는 의미로, 일반적으로 POST 요청에서 사용됩니다. 101 (Switching Protocols): 클라이언트의 요청에 대한 응답으로 서버가 프로토콜을 변경하고자 할 때 사용됩니다. 2xx (Successful - 성공) 200 (OK): 요청이 성공적으로 처리되었.. 공감수 0 댓글수 0 2023. 10. 8.
  • 로그인 #토큰기반인증방식(access토큰, refresh토큰) 개념 ★★★ 토큰 기반 인증 방식(Token-Based Authentication)은 모던 웹 애플리케이션에서 사용되는 효율적이고 보안성이 높은 인증 방법 중 하나입니다. 이 방식은 사용자가 로그인하면 서버에서 발급하는 토큰을 사용하여 인증을 관리합니다. 주로 액세스 토큰(Access Token)과 리프레시 토큰(Refresh Token) 두 가지 종류의 토큰을 사용합니다. 1. 액세스 토큰 (Access Token): 액세스 토큰은 사용자가 웹 애플리케이션에 로그인할 때 발급되는 짧은 수명의 토큰입니다. 이 토큰은 사용자를 인증하고 웹 애플리케이션의 보호된 리소스 또는 API에 접근할 때 사용됩니다. 동작 방식: 1. 사용자가 로그인하면 서버는 액세스 토큰을 생성하고 사용자에게 반환합니다. 2. 사용자의 HTTP .. 공감수 0 댓글수 0 2023. 10. 8.
  • 로그인 #세션기반인증방식 : 개념 ★★★ 세션 기반 인증 방식(Session-Based Authentication)은 웹 애플리케이션에서 사용자 인증을 관리하는 데 사용되는 일반적인 방법 중 하나입니다. 이 방식은 사용자가 웹 애플리케이션에 로그인할 때 세션을 생성하고, 이 세션을 사용하여 사용자의 인증 상태를 유지합니다. 세션 기반 인증 방식의 동작 과정: 로그인 프로세스: 사용자가 웹 애플리케이션에 로그인하면, 일반적으로 아이디와 비밀번호를 입력합니다. 서버는 입력된 아이디와 비밀번호를 검증하고, 인증이 성공하면 사용자를 식별할 수 있는 고유한 식별자(일반적으로 세션 ID)를 생성합니다. 세션 생성: 서버는 사용자의 브라우저로 세션 ID를 쿠키나 URL 매개변수 등을 통해 전송합니다. 브라우저는 이 세션 ID를 저장하고 나중에 서버로부터의 .. 공감수 0 댓글수 0 2023. 10. 8.
  • 신입 프론트엔드 개발자 기술면접 답변 (React, TS, 프론트엔드 전반) React React에 대해 설명해주세요. React는 Facebook에서 개발한 UI 라이브러리로, 사용자 인터페이스를 구축하기 위한 도구입니다. 컴포넌트 기반 아키텍처를 사용하며, 가상 DOM을 활용하여 성능을 최적화합니다. React의 원리, 특징, 장단점이 무엇인가요? 원리: React는 컴포넌트 기반 아키텍처와 가상 DOM을 사용하여 UI를 효율적으로 렌더링하고 업데이트합니다. 특징: JSX 문법을 사용해 선언적으로 UI를 표현하며, 단방향 데이터 흐름과 가상 DOM을 통한 효율적인 렌더링이 주요 특징입니다. 장점: 높은 생산성, 컴포넌트 재사용성, 성능 최적화, 커뮤니티 지원이 뛰어납니다. 단점: 초기 학습 곡선, 프레임워크와 라이브러리 선택의 어려움이 있을 수 있습니다. Virtual DOM.. 공감수 0 댓글수 1 2023. 10. 7.
  • 신입 프론트엔드 개발자 기술면접 답변 정리 (Javascript) 프론트엔드 개발자에게 질문할만한 기술면접 질문 및 답변들을 정리하여 지속적으로 업데이트 하려고 해당 글을 작성하였습니다. 해당 글은 지속적으로 업데이트 예정입니다. JavaScript: 자바스크립트는 무슨 언어인가요? 자바스크립트는 웹 브라우저에서 실행되는 스크립트 언어로, 웹 페이지를 동적으로 제어하고 상호 작용할 수 있게 해주는 언어입니다. 변수 선언, 초기화, 할당의 차이점에 대해 설명해주세요. 변수 선언: 변수를 정의하고 이름을 부여하는 단계입니다. var, let, const 등의 키워드를 사용하여 선언합니다. 변수 초기화: 변수에 값을 처음으로 할당하는 단계입니다. 초기화하지 않으면 변수는 undefined가 됩니다. 변수 할당: 변수에 값을 다시 대입하는 것을 말합니다. 데이터 타입에 대해 .. 공감수 0 댓글수 1 2023. 10. 7.
  • 신입 프론트엔드 개발자 기술면접 답변 정리 (HTML/CSS) 프론트엔드 개발자에게 질문할만한 기술면접 질문 및 답변들을 정리하여 지속적으로 업데이트 하려고 해당 글을 작성하였습니다. 해당 글은 지속적으로 업데이트 예정입니다. HTML/CSS Flexbox와 Grid Layout의 차이점은 무엇인가요? Flexbox는 1차원 레이아웃을 다루는데 사용되며, 주로 요소 간의 정렬과 분포를 다룹니다. Grid Layout은 2차원 그리드를 사용하여 요소의 행과 열을 정렬하고 배치합니다. Flexbox는 주로 요소 간의 정렬에 사용되고, Grid Layout은 전체 페이지나 큰 영역의 레이아웃을 다룰 때 사용됩니다. CSS 그리드(Grid)를 사용하여 복잡한 레이아웃을 만드는 방법에 대해 설명해주세요. CSS 그리드를 사용하여 레이아웃을 만들려면 부모 요소에 display.. 공감수 0 댓글수 1 2023. 10. 7.
  • Vue.js 개념정리 1. 데이터 바인딩 데이터 바인딩(Data Binding)이란 무엇인가요? *데이터 바인딩(Data Binding)**은 사용자 인터페이스(UI) 요소와 데이터 모델 간의 동기화를 의미합니다. 즉, 데이터 바인딩은 UI 요소에 데이터를 표시하고 사용자 입력을 데이터 모델에 반영하는 프로세스를 자동화하는 기술입니다. Vue.js에서는 데이터 바인딩이 매우 쉽고 강력하게 구현되어 있으며, 개발자가 UI와 데이터 간의 관계를 간단하게 관리할 수 있게 해줍니다. Vue.js의 주요 데이터 바인딩 유형: 1. 단방향 데이터 바인딩(One-Way Data Binding): 데이터의 변경이 UI에 반영되는 방향으로만 동작합니다. Vue.js에서는 {{ }} 또는 v-bind 디렉티브를 사용하여 구현할 수 있습니다. .. 공감수 0 댓글수 0 2023. 10. 6.
  • 자바스크립트 필수개념들 정리 (함수, 객체, 비동기, 프로토타입 등) 자바스크립트 함수 1. 함수의 정의 자바스크립트의 함수는 다음과 같이 정의 된다. function functionName(parameters) { // 함수 내용 return result; // (선택적) 반환 값 } function: 함수 키워드로 함수를 정의한다. functionName: 함수의 이름으로, 고유한 이름을 부여할 수 있다. parameters: (선택적) 함수에 전달되는 매개변수(인자) 목록으로, 함수 내부에서 사용할 수 있습니다. {}: 중괄호 내부에 함수의 코드 블록을 작성합니다. return: (선택적) 함수가 값을 반환할 때 사용하는 키워드입니다. 2. 함수의 호출 함수는 다음과 같이 호출된다. result = functionName(arguments); functionName:.. 공감수 0 댓글수 0 2023. 10. 6.
  • 기술면접 답변 정리 (알고리즘, 자료구조) 1. 빅오 표기법에 대해서 설명해주세요. 빅오 표기법은 알고리즘의 성능을 분석하고 표현하는 데 사용되는 표기법으로, 알고리즘의 실행 시간 또는 공간 복잡도를 입력 크기에 대한 상한을 나타냅니다. 빅오(O)는 알고리즘의 최악의 실행 시간 또는 공간 복잡도를 나타내며, 입력 크기에 대한 함수의 상한을 표현합니다. 예를 들어, O(n)은 선형 시간 복잡도를 나타내며, 입력 크기에 비례하여 선형적으로 증가합니다. 2. 팩토리얼(factorial)을 구현해 보세요(손코딩). def factorial(n): if n == 0: return 1 else: return n * factorial(n-1) 3. 피보나치 수열 구현 방식 세 가지를 말해보시고, 시간복잡도와 공간복잡도를 설명해 주세요. 재귀함수: def fi.. 공감수 0 댓글수 0 2023. 10. 6.
  • 기술면접 답변 정리 (데이터베이스) ** 데이터베이스 1. JOIN에 대해서 설명해 주세요. JOIN은 데이터베이스에서 여러 테이블을 결합하여 하나의 결과 집합을 생성하는 작업입니다. 주로 관련 데이터를 연결하고 쿼리에서 필요한 정보를 검색하기 위해 사용됩니다. 일반적으로 INNER JOIN, LEFT JOIN, RIGHT JOIN, FULL OUTER JOIN 등 다양한 JOIN 유형이 있으며, 각각 다른 방식으로 테이블을 결합합니다. 2. 내부 조인과 외부 조인의 차이는 무엇인가요? 내부 조인(Inner Join): 두 테이블 간에 매칭되는 행만을 반환합니다. 즉, 두 테이블에서 공통된 값이 있는 경우에만 결과에 포함됩니다. 외부 조인(Outer Join): 외부 조인은 두 테이블 간에 매칭되는 행뿐만 아니라 하나의 테이블에만 존재하는.. 공감수 0 댓글수 0 2023. 10. 5.
  • 기술면접 답변 정리 (네트워크) OSI 7계층에 대해서 설명해주세요. OSI(Open Systems Interconnection) 모델은 컴퓨터 네트워크 프로토콜과 통신을 일곱 개의 계층으로 나눈 모델입니다. 이 계층은 아래에서 위로 다음과 같이 나뉩니다: 물리 계층 (Physical Layer): 전기적, 기계적 특성을 다루며 비트 스트림을 전송합니다. 데이터 링크 계층 (Data Link Layer): 물리 계층과 네트워크 계층 사이에서 프레임을 전송하고 오류 검사와 수정을 수행합니다. 네트워크 계층 (Network Layer): 경로 선택 및 라우팅을 다루며 패킷을 목적지까지 전달합니다. 전송 계층 (Transport Layer): 종단 시스템 간 연결, 흐름 제어, 오류 복구를 제공합니다. 세션 계층 (Session Layer).. 공감수 0 댓글수 0 2023. 10. 5.
  • 기술면접 질문 답변 정리 (운영체제) **운영체제 프로세스 프로세스와 스레드의 차이는 무엇인가요? 프로세스는 독립적인 실행 단위로, 자신만의 메모리와 자원을 가지며, 각각 별도의 주소 공간을 가집니다. 스레드는 프로세스 내에서 실행되는 작은 실행 단위로, 프로세스 내의 자원을 공유합니다. 교착상태란 무엇이며, 교착상태가 발생하기 위해서는 어떤 조건이 있어야 하나요? 교착상태(Deadlock)는 둘 이상의 프로세스가 서로 필요한 자원을 가지고 대기하며 진행하지 못하는 상태를 의미합니다. 교착상태 발생 조건에는 상호배제, 점유대기, 비선점, 순환대기 네 가지 조건이 있습니다. 교착상태의 해결법은 무엇인가요? 교착상태 해결법으로는 예방, 회피, 발견, 회복이 있습니다. 주로 회피와 발견을 사용하는데, 회피는 교착상태가 발생하지 않도록 자원 할당을.. 공감수 0 댓글수 1 2023. 10. 5.
  • 기본 CS 및 Java 기술면접 질문 모음 기술면접 질문 모음 **운영체제 프로세스 프로세스와 스레드의 차이는 무엇인가요? 교착상태란 무엇이며, 교착상태가 발생하기 위해서는 어떤 조건이 있어야 하나요? 교착상태의 해결법은 무엇인가요? 뮤텍스와 세마포어에 대해서 설명해 보시오. 컨텍스트 스위칭이란 무엇인가요? 경쟁 상태란 무엇인가요? 프로세스 혹은 스레드의 동기화란 무엇인가요? 사용자 수준의 스레드와 커널 수준의 스레드의 차이는 무엇인가요? CPU 스케줄링이란 무엇인가요? CPU 스케줄링 방법에는 대표적으로 어떤 것들이 있나요? 동기와 비동기, 블로킹과 넌블로킹의 차이는 무엇인가요? 메모리 프로세스에 할당되는 메모리의 각 영역에 대해서 설명해 주세요. 메모리 구조의 순서가 어떻게 되는가? CPU에서 가까운 순으로 말해보시오. 페이지와 세그멘테이션에.. 공감수 0 댓글수 0 2023. 10. 5.
  • 신입 프론트엔드 개발자 기술면접 질문 모음 프론트엔드 개발자에게 질문할만한 기술면접 질문 및 답변들을 정리하여 지속적으로 업데이트 하려고 해당 글을 작성하였습니다. 해당 글은 지속적으로 업데이트 예정입니다. HTML/CSS Flexbox와 Grid Layout의 차이점은 무엇인가요? CSS 그리드(Grid)를 사용하여 복잡한 레이아웃을 만드는 방법에 대해 설명해주세요. 미디어 쿼리(Media Queries)를 사용하여 반응형 웹 디자인을 구현한 경험이 있나요? 모바일 우선 디자인(Mobile-First Design)의 이점에 대해 설명해보세요. SASS 또는 LESS와 같은 CSS 전처리기를 사용한 경험이 있나요? 이들의 주요 기능에 대해서 언급해주세요. px, em, rem 의 차이에 대해 설명해주세요. 반응형 웹을 구현할 때는 이 단위 중에서.. 공감수 0 댓글수 0 2023. 10. 5.
  • 로컬스토리지, 세션스토리지, 쿠키의 공통점과 차이점 ★★★ 로컬 스토리지, 세션 스토리지, 쿠키는 클라이언트 측 웹 스토리지 메커니즘으로 데이터를 저장하고 관리하는 데 사용됩니다. 이들 간에는 공통점과 차이점이 있습니다. 공통점: 클라이언트 측 스토리지: 로컬 스토리지, 세션 스토리지, 쿠키는 모두 클라이언트 측에서 데이터를 저장하고 관리하는 데 사용됩니다. 이는 서버에서 데이터를 저장하는 서버 측 스토리지와 대조됩니다. 도메인 별로 격리: 이러한 스토리지 메커니즘들은 도메인 별로 격리되어 있습니다. 즉, 한 도메인에서 생성한 스토리지는 다른 도메인의 페이지에서 접근할 수 없습니다. 용량 제한: 모든 스토리지 메커니즘은 용량 제한을 가지고 있으며, 일반적으로 5MB 정도의 용량을 가집니다. 차이점: 데이터 수명: 로컬 스토리지(Local Storage): 로컬 .. 공감수 0 댓글수 0 2023. 10. 5.
  • 쿠키(Cookie) ★★★ 쿠키(Cookie)는 웹 브라우저에 저장되는 작은 데이터 조각으로, 웹 애플리케이션과 브라우저 간의 상태 정보를 유지하고 사용자 경험을 개선하는 데 사용됩니다. 쿠키는 HTTP 통신에서 서버와 클라이언트 간의 정보 교환을 위해 설계되었으며, 웹 애플리케이션의 여러 측면에서 다양한 목적으로 활용됩니다. 쿠키의 주요 특징: 유지 기간: 쿠키는 설정된 만료 날짜 또는 세션의 끝까지 유지됩니다. 만료 날짜가 설정된 경우 해당 날짜까지 쿠키가 유지되며, 만료 날짜를 설정하지 않은 경우 브라우저 세션이 종료될 때 쿠키가 삭제됩니다. 도메인 별로 지정: 쿠키는 특정 도메인과 연관되며, 해당 도메인 내에서만 사용됩니다. 이것은 쿠키의 범위를 제한하는 데 도움이 됩니다. 용량 제한: 각 브라우저는 쿠키의 크기를 제한합니.. 공감수 0 댓글수 0 2023. 10. 5.
  • 세션스토리지, 로컬스토리지와 세션스토리지의 차이점 ★★★ 세션 스토리지(Session Storage)는 클라이언트 측 웹 스토리지 메커니즘 중 하나로, 웹 애플리케이션에서 데이터를 임시로 저장하고 관리하는 데 사용됩니다. 세션 스토리지는 로컬 스토리지와 유사하지만 중요한 차이점이 있습니다. 세션 스토리지의 특징: 임시 저장소: 세션 스토리지에 저장된 데이터는 현재 세션(session) 동안만 유지됩니다. 즉, 사용자가 브라우저를 닫거나 탭을 닫을 때, 또는 브라우저를 재시작할 때 데이터가 삭제됩니다. 따라서 데이터는 임시적으로 사용되는 용도로 적합합니다. 도메인 별로 격리: 세션 스토리지는 도메인 별로 격리되어 있습니다. 동일한 도메인의 다른 페이지에서는 세션 스토리지에 저장된 데이터에 접근할 수 있지만, 다른 도메인에서는 접근할 수 없습니다. 용량 제한: 세.. 공감수 0 댓글수 0 2023. 10. 5.
  • 로컬스토리지의 활용사례 : 캐싱 ★★★ 로컬 스토리지(Local Storage)를 활용한 캐싱은 웹 애플리케이션에서 데이터를 저장하고 재사용함으로써 성능을 향상시키는 데 사용되는 중요한 기술입니다. 이를 통해 웹 페이지의 로딩 속도를 높이고 네트워크 요청을 줄일 수 있으며, 사용자 경험을 개선할 수 있습니다. 로컬 스토리지와 캐싱: 로컬 스토리지는 웹 브라우저에서 클라이언트 측 데이터 저장소로 사용됩니다. 이것은 브라우저에 데이터를 저장하고 검색할 수 있는 메커니즘으로, 주로 키-값(key-value) 쌍으로 데이터를 저장합니다. 웹 페이지가 로드될 때 데이터를 로컬 스토리지에 저장하고, 이후에 같은 데이터를 필요로 할 때 네트워크 요청 없이 로컬 스토리지에서 데이터를 검색하여 사용합니다. 이것이 캐싱의 핵심 아이디어입니다. 로컬 스토리지를 .. 공감수 0 댓글수 0 2023. 10. 5.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.