🖥️Tailwind CSS

Utility-First컨셉을 가진 CSS 프레임워크. Tailwind CSS경우 이러한 클래스명 고민을 하지않아도 되고 유틸리티 클래스명을 사용할수 있음.

Utility-First란 Tailwind CSS 메인컨셉으로써 클래스명을 별도로 정의하지않고 제공하는 유틸리티 클래스를 사용 하는게 특징

🤔사용법

html 태그에 class 혹은 react 라면 className이라고 적고 여기에 사용하고 싶은 CSS 속성을 적어주면 된다. 예를 들어 가장 많이 사용하는 가운데 정렬을 하고 싶다면 다음과 같이 적으면 된다.

<div class="flex justify-center items-center">
  <h1>Tailwind!!</h1>
</div>

1. Tailwind CSS IntelliSense 익스텐션

테일윈드 공식 익스텐션을 사용하면 자동 완성, 클래스명 호버 시 해당 클래스 명의 대한 클래스 속성 확인, 린팅 등의 기능을 제공하여 좀 더 편리하게 코드를 작성할 수 있다.

2. Prettier 플러그인

테일윈드 공식 prettier 플러그인을 사용하면 권장 순서에 따라 클래스를 자동 정렬할 수 있다.

3. Custom Styles

테일윈드는 다양한 색상과 px을 지원하고 있다. 하지만 프로젝트를 진행하다 보면 해당 컨셉에 맞는 디자인 가이드가 정해져 여러 컴포넌트에서 필요한 경우가 있다. 이럴 때 tailwind.config.js의 theme에 추가하여 사용할 수 있다. theme.extend.colors가 아닌 theme.colors에 추가하게 되면 기존 색상을 덮어쓰게 된다. (font-size의 경우 text-sm: 14px, text-base: 16px, text-lg: 18px을 제공)

💡tailwind 설정

• 패키지 설정

  $ npm install -D tailwindcss postcss autoprefixer style-loader css-loader postcss-loader

• tailwind 초기화

  $ npx tailwindcss init

명령어를 입력하면 tailwind 설정 파일인 tailwind.config.js 파일이 생성되는 것을 확인할 수 있다.

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [],
    theme: {
        extend: {},
    },
    plugins: [],
};

• content 설정

생성된 tailwind.config.js 파일을 보면 content 라는 설정 값이 보인다. content에는 tailwind를 적용할 파일 경로를 넣어주면 되고 일반적으로 다음과 같이 넣어주면 모든 파일에 적용이 된다.

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,ts,jsx,tsx}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

• postcss 설정

root 경로에 postcss.config.js 파일을 생성한 뒤 다음과 같이 코드를 작성하면 된다.

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

• main.css

/src 경로에 main.css 파일을 생성한 뒤 다음과 같이 코드를 작성하여 tailwind 지시문을 추가하면 된다.

@tailwind base;
@tailwind components;
@tailwind utilities;

그리고 해당 파일을 index 파일 등에 추가하여 전역적으로 적용될 수 있도록 한다.

// index.tsx

import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
import './main.css';

ReactDom.render(<App />, document.querySelector('#root'));

Next.js 🕶️

🖥️Project Setup

1. 프로젝트 시작

• npm init -y 명령어를 통해 프로젝트를 시작하고 -y의 의미는 기본값으로 모든 질문에 'yes'를 자동으로 응답하여 초기화 프로세스를 자동화한다. 따라서 위 명령어를 터미널에 입력하면 기본값을 사용하여 프로젝트를 초기화하고 package.json파일이 생성된다.

  2. 패키지 설치

• npm install react@latest next@latest react-dom@latest 해당 명령어로 패키지를 최신버전으로 다운로드 한다.

• 다운로드가 완료되면package.json파일로 이동 후 scripts의 {}안을 지운 후 "dev": "next dev" 라고 작성해준다.

  3. 실행하기

• 제대로 실행되고 있는지 확인 용 테스트 코드 작성(메세지는 원하는대로)

• npm run dev 명령어를 터미널에 작성 후 샬라샬라 Next.js의 버전, 로컬서버주소 및 필요한 패키지가 설치되지 않았으니 사용하지 않으면 해당 파일을 제거하라는 안내 등등 샬라샬라 나온다(파일을 만들 때 .tsx로 만들어서 그러는듯)

• Next.js의 버전 밑에 http://localhost:3000를 클릭하면 hello라는 컴포넌트가 렌더링 된걸 확인하면 테스트는 끄읕

내일부터는 본격적으로 next.js를 파봐야지! 컴퓨터가 병원에 가서 일주일만에 공부를 하니까 뭔가 다시 시작하는기분이라 새로움!! 취업할때까지 아쟈아쟈!!!!!!!!!!!!!!!

📌HTML과 HTML5의 차이

고등학교 때 배운 HTML로 홈페이지 만들기는 초중고 시절 가장 기억에 남아있다! 흑... 그렇게 재밌어했는데 왜 갑자기 직종을 틀어서는!!!!...시간이 흐르고 흘러 이제야 다시 날밤을 새면서 코딩을 배워보니 더 빨리 할걸하는 후회가 남지만!! 어째뜬 시작했다는게 중요하고 나는 이제 개발자를 업으로 삼고 전진에 또 전진을 해보려고 한다. TMI였지만 결론적으로는 어렸을 때 사용해봤던 HTML과 HTML5의 차이는 아주아주 간단히 얘기해서 버전차이인듯 하다!

HTML

• 웹 페이지 개발을 위한 기본 언어
• 멀티미디어 미지원(비디오/오디오)
• 사이트를 방문하는 사용자 위치를 추적하는 기능을 지원하지만 프로세스가 번거롭고 모바일 장치에서 로그인할 때 사용자 위치를 찾기 어려움
• 브라우저 캐시 메모리를 임시 저장소로 사용
• 클라이언트와 서버 간의 통신 소켓 지원 불가
• 실버라이트(Silverlight), 어도비플래시(Adobe Flash), VML 등과 같은 다른 도구를 사용하여 벡터 그래픽 지원 가능
• 부정확한 구문 및 기타 오류 처리 불가

HTML5

• 콘텐츠를 구조화하고 표현하기 위해 인터넷 기술과 상호 작용하기위한 핵심 기술인 마크업 언어와 함께 새로운 기능을 가진 새로운 버전
• 멀티미디어 지원(비디오/오디오)
• JavaScript Geolocation API를 사용하여 웹 사이트에 엑세스하는 모든 사용자의 위치를 식별하는데 사용
• 응용 프로그램 캐시, SQL 데이터베이스 및 웹 저장소와 같은 여러 저장소 옵션
• 클라이언트와 서버간의 통신을 허용하는 웹 소켓을 지원
• 캔버스와 SVG가 내장되어 있으므로 벡터 그래픽을 기본적으로 지원
• 부정확한 구문 및 기타 오류 처리 가능

Next.js시작하기

Next.js는 웹 앱을 제작하고 배포하는 데 강력한 도구로 웹 앱을 빠르고 효율적으로 구축할 수 있게 하는 Next.js는 현재 넷플릭스, 나이키, 틱톡 등의 기업에서도 활발히 사용되고 있다.

• 리액트에 익숙해지기
  • Next.js는 리액트 베이스 어플리케이션을 만드는 프레임 워크이므로 리액트에 대한 이해가 필수!
• Server-side rendering(SSR) 에 대해 공부
  • Next.js 는 SSR 을 쉽고 직관적으로 만들 수 있게 디자인 되어 있습니다. 그래서 SSR의 기본을 이해하는 것이 중요

Server-side rendering은 서버에서 렌더링 된 html을 넘겨줘서 화면에 나타내는 방식이다 서버에서 index.html을 렌더링/클라이언트는 index.html을 다운로드하여 화면에 띄움/bundle.js를 다운로드하여 앱을 살아있는 상태로 만듬

App Router

Next는 줄곧 Pages Router를 사용해왔는데, Next가 13 버전으로 업데이트 됨에 따라 App Router라는 새로운 패러다임을 제시하게 되었다. 공식문서에 따르면, Next.js 개발자들은 새로운 앱을 만들 때에는 App Router를 쓰기를 권장하는 바. 다만 아래와 같은 이유로 Pages Router와 App Router를 둘 다 배우는 것을 목표하기.

• 기존 코드의 수정을 위함: 현재 existing applications, 즉 상용화된 대부분의 앱은 Pages Router를 따르고 있고 이는 마치 React에서 Class Component에서 Function Component로 넘어가는 시점, 과도기인 2~3년간 리액트 개발자는 Function Component 뿐 아니라 Class Component도 알아야 하는 것과 비슷하다.
• 아직은 불안정한 App Router와 부족한 정보들: Next.js는 6년간 Pages Router로 구축되어 왔고, 아직은 App Router의 정보를 쉽게 찾기 힘들며 정적 사이트 배포의 경우 에러가 나는 등 알려지지 않은 문제들도 많다. 그럼에도 불구하고 App Router는 앞으로 점점 중요해지리라는 것도 사실.
  • 예시: [NEXT-1030] output: 'export' with use client in dynamic routes doesn't work

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌Redux가 무엇인가요, 왜 Redux를 사용하시나요?

답변▶️ 리덕스(Redux)란 리액트에서 가장 사용률이 높은 상태관리 라이브러리입니다. 리액트 컴포넌트들의 상태 로직들이나 글로벌 상태 관리를 손쉽게 해줄 수 있으며. 리덕스는 Action, Reducer, Store, View로 구성된 하나의 패턴입니다.

Redux 기본 개념  💡 액션 (Action) 상태를 업데이트하는데 필요한 정보를 담은 객체로 action 객체는 반드시 고유한 type 프로퍼티를 가져야하며, 이 값은 action 의 이름입니다.    💡 액션 생성 함수 (Action Creator) 액션 객체를 반환하는 함수이며 액션 객체는 함수로 관리하고, 화살표 함수로도 표현 가능합니다.    💡 리듀서 (Reducer) 현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환 (state 업데이트)하는 함수이며 현재 상태를 받는 첫번째 인자에 초기 상태를 기본 인자로 설정합니다.   💡 스토어 (Store) 상태가 들어있으며, 하나의 프로젝트는 하나의 스토어만 가질수 있고 컴포넌트에서 상태 정보가 필요할 때 접근합니다.    💡 디스패치 (Dispatch) 스토어의 내장함수로 상태를 업데이트하기 위해서는 꼭 디스패치 함수를 사용해야 하며 액션 객체를 인자로 받아 리듀서 함수로 전달합니다.    💡 구독 (Subscribe) 스토어의 내장함수이고 리스너 함수를 파라미터로 넣어 호출하면 액션이 디스패치 되어 상태가 업데이트 될 때 마다 리스너 함수가 호출되며 이벤트 리스너의 일종입니다.

Redux를 사용하는 이유 평소 상태관리는 redux를 사용합니다. 그 이유는 컴포넌트 코드와 상태 관리 코드의 분리가 가능하며, 효율적인 렌더링이 가능하며 데이터를 저장하고 불러오는 코드를 쉽게 작성 할 수 있습니다. 또한 상태를 더욱 쉽게 예측 가능하게 하여 유지보수 측면에 긍정적인 효과가 있습니다.

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?

답변▶️

📌상태(state)란?

- 리액트에서 이벤트에 의해 변경되는 동적인 값

• 웹 애플리케이션을 렌더(render)하는데 있어서 영향을 미칠 수 있는 값
• 어떤 시스템이나 프로그램의 현재 상황이나 정보를 나타내는 것 ⇒ 값이 변하면 상태가 변하는 값

📌상태의 종류

전역상태 (Global State)

• 프로젝트 전체에 영향을 끼치는 상태
• Props Drilling 방식을 통해서 부모에서 자식으로 데이터를 전달함.

  컴포넌트 간 상태 (Cross Component State)

• 여러 가지 컴포넌트에서 관리되는 상태
• 프로젝트 군데군데에서 쓰이는 모달
• Props Drilling을 필요로 함.

  지역상태 (Local State)

• 특정 컴포넌트 안에서만 관리되는 상태
• 다른 컴포넌트들과 데이터를 공유하지 않는다.
• input , selectbox 등 사용자의 입력값을 받는 경우

중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면 컴포넌트가 어디에 위치하든 상관없이 State를 불러와 사용할 수 있습니다.이렇게 특적 컴포넌트에 종속된 것이아닌, 중앙 State관리소에서 생성된 State를 Global State라고 합니다. 그리고 이런 값을 관리하는 것을 전역 상태 관리라고 합니다. 우리가 직접 전역상태관리를 구현하기는 어려우니 이러한 라이브러리를 사용해 그것을 구현합니다.

📌상태 관리 라이브러리들

☑️useState

• state를 관리하여 DOM을 업데이트하는 react hook

  ☑️Context API

• React 컴포넌트 트리 안에서 전역 상태를 공유할 수 있도록 만들어진 방법
• 전역적인 상태 관리를 위한 방법
  • 프로바이더와 컨슈머를 활용
  • 앱 전체의 관점 / 컴포넌트 관점에서 상태를 관리 할 수 있게 함
  • 불필요한 리렌더가 일어나기도 함.

☑️리덕스 (Redux)

• 컴포넌트 간 상태 전달을 위한 효율적인 방법!
• 어플리케이션 전체에 대한 중앙 저장소 역할
• 중앙 상태 관리 방식으로 동작 ⇒ Store에 상태를 저장해 앱 내 어디서든지 접근 가능
• 단 하나만 존재하는 Store가 전역 상태를 저장
• Action을 통해서 Store에 대한 행동을 정의하여 상태 변경에 대한 이벤트 트리거의 역할
• Reducer를 통해서만 전역 상태를 변경하고 업데이트할 수 있으며 어떤 액션이 들어오는지에 대한 이벤트를 처리하는 이벤트 리스너

☑️React Query

• 서버와 클라이언트 간 비동기 작업을 쉽게 다룰 수 있게 도와주는 라이브러리로 서버 상태를 관리하는 라이브러리
• 비동기를 통해 서버 상태를 가져오고 관리하기 쉽게 도움

평소의 state관리 방법 평소 상태관리는 redux를 사용합니다. 그 이유는 컴포넌트 코드와 상태 관리 코드의 분리가 가능하며, 효율적인 렌더링이 가능하며 데이터를 저장하고 불러오는 코드를 쉽게 작성 할 수 있습니다.

📌Cloudcraft란

• https://www.cloudcraft.co/

  Cloudcraft란 웹, 앱 참조 아키텍처를 만들수 있는, 만들어 주는 사이트로 무료로 사용가능하다. Cloudcraft를 이용중 모르겠는 기능이 많아서(영어를 못해서😭) 이것 저것 눌러보다가 시간을 많이 잡아먹었다^^.. 한국어 번역으로 볼 수는 있지만 번역으로 봐도 뭐라는건지 통 모르겠고... 구글링을 해봐도 자세하게 알려주는 사이트가 없어서 작성 해 본다!

😽 시작하기

• 처음 들어가면 무료로 시작하기 데모 예약하기가 나오는데 무조건 무료로 누르고 들어간다~ 그 후에 구글 로그인을 하면 빠르게 접속되고 뭐를 다운받고 적으라고 샬라샬라 나오지만 전부 스킵을 눌러준다.
  
  

  😽 기능 둘러보기

• 그 후에는 왼쪽 화면에 아이콘을 선택할 수 있는 탭이 보이고 하얀색 바탕화면이 보인다. 오른쪽 상단에 레이어 전환하는 네모난 이모티콘이 보이는데 클릭하면 그리드, 텍스트, 이미지, 아이콘 등 표시하거나 표시안되게 할 수도 있다.
  
  

  😽 배치해보기

• 동그라미친 곳에 검색해서 필요한 아이콘을 찾을 수 있다(영어로 검색해야 한다😭). 화살표 표시된 곳을 클릭하면 원하는 이미지로 바꿀 수 있다.
  
  

  😽 꾸미기

• 위에서 바꾼 이미지를 블럭에 위에 합쳐서 사용할 수 있으며, 이미지를 세워서도 사용가능하다. 블럭을 클릭하면 넓이 높이 깊이를 원하는대로 지정할 수 있고 블럭이나 이미지를 클릭하면 오른쪽으로 세가지의 아이콘이 나오는데 화살표나, 일직선의 선으로 이어주는것도 가능하며 연필표시를 누르면 블럭앞에 텍스트를 입력할 수 있다. 영역을 지정 후 더블 클릭하면 삭제하거나 변형하는 것도 가능하다.
  
  

그렇게 장장 2두시간 동안 고생하면서 만든 아키텍처이다. 고생하면서 만들어서 그런지 사랑스러워보인다😍

☑️다음에 아키텍처를 그릴 때 참고하려고 작성하였지만 지나가다가 들려주신 분에게 작은 도움이라도 되었으면 좋겠다고 생각하며 글을 마칩니다👍

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌Redux가 무엇인가요, 왜 Redux를 사용하시나요?

답변▶️ 리덕스(Redux)란 리액트에서 가장 사용률이 높은 상태관리 라이브러리입니다. 리액트 컴포넌트들의 상태 로직들이나 글로벌 상태 관리를 손쉽게 해줄 수 있습니다.

• 액션은 액션 type과 전송할 데이터(payload)로 이루어진 객체 형태입니다.
• Action Creator는 액션을 반환하는(만드는) 함수입니다. 이를 통해 액션을 dispatch 합니다.
• dispatch는 액션값을 매개변수로, Reducer를 호출하는 것입니다.
• 리듀서는 현재(이전)의 state와 받은 action에 따라 그 state를 변화시킨 다음 새로운 state를 반환합니다.
• 리듀서에서는 상태를 변화시킬 때 반드시 이전 객체와는 다른 새로운 state 객체를 반환해야 합니다. 이렇게 되면 데이터(상태)가 변화하기 이전과 이후의 객체는 서로 다른 객체가 됩니다. 따라서 이전 상태 객체는 유지하였으므로 불변성을 지킨 것이며, 리덕스는 데이터가 변경되었다는 사실을 shallow equality checking 을 통해 상태가 변화했음을 알 수 있습니다.

리덕스를 사용하는 이유

리액트로 프로젝트를 진행한다면 App 컴포넌트를 거쳐서 필요한 값을 업데이트하고 리렌더링 하는 방식으로 프로젝트가 개발되는데 위의 구조는 부모 컴포넌트에서 모든 걸 관리하고 아래로 내려주는 것이기 때문에 직관적이고 관리하는 것이 편하다는 장점이 있습니다.

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌-

20. 라이프사이클 메소드에 대해 설명해주세요.

답변▶️ Rract의 component선언 방식은 두 가지로 나뉩니다. 첫번째는 클래스형 컴포넌트, 두번째는 함수형 컴포넌트로 현재 많은 사람들이 함수형 컴포넌트로 개발을 진행하지만 기존에 클래스형 컴포넌트를 개발중이던 곳도 많을 수 있기 때문에 그 프로젝트의 유지보수를 위해서라도 클래스형 컴포넌트에 대한 개념을 알고 있으면 많은 도움이 될거라고 생각합니다.

클래스형 컴포넌트

• state와 lifecycleAPI의 사용 가능
• 임의 메서드 정의
• 선언 시 class 키워드 필요
• render()메서드 필요
• component 상속 필요
• 객체형식

함수형 컴포넌트

• state와 lifecycleAPI의 사용 가능
• 클래스형 컴포넌트 보다 수월한 선언 가능
• 메모리 자원을 클래스형 컴포넌트에 비해 덜 사용
• 발드한 결과물의 크기 역시 클래스형 컴포넌트 보다 작음
• 함수 자체가 렌더 함수이기 때문에 render()메서드 불필요
• component 상속 불필요

☑️사용이유 코드가 복잡하지 않고 가독성이 좋습니다. useState와 useEffect 를 이용해 함수형 컴포넌트 내부에서도 상태 및 컴포넌트 생애 주기도 관리도 가능합니다

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌라이프사이클이 의미하는 바에 대해서 설명해주세요.

답변▶️리액트는 컴포넌트 기반의 view를 중심으로 한 라이브러리로 그러다보니 각각의 컴포넌트에는 라이프 사이클 즉, 컴포넌트의 생명주기가 존재합니다. 컴포넌트의 수명은 보통 페이지에서 랜더링되기 전인 준비 과정에서 시작하며 페이지에서 사라질 때 끝이납니다

‘Mount(탄생) > Update, Re-render(변화) > Unmount(Mount

Mount

1. constructor() 컴포넌트를 새로 만들때마다 호출되는 클래스 생성자 메서드 컴포넌트가 마운트되기 전에 호출

2. getDerivedStateFromProps(nextProps, prevState) props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트가 마운트될 때와 업데이트 될 때 호출

3. render() 우리가 준비한 UI를 렌더링하는 메서드 컴포넌트를 DOM에 마운트하기 위해 호출

4. componentDidMount 컴포넌트 상태가 변하는 경우는 다음과 같은 상황에서 발생 props가 바뀔 때 state가 바뀔 때 부모 컴포넌트가 리렌더링 될 때 this.forceUpdate로 강제로 렌더링을 트리거할 때

Update, Re-render

컴포넌트 상태가 변하는 경우는 다음과 같은 상황에서 발생

1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때

Unmount

DOM에서 제거되어 화면에서 사라지는 시점 componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드 ‘예를 들어 로그아웃시 주 구성 Component를 해제하기전에 사용자 세부정보와 모든 인증 토큰을 지운다거나 setInterval을 clear한다거나 할 수 있습니다’

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌http, https 차이점에 대해 설명해주세요

답변▶️ HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규칙 세트 또는 프로토콜입니다. 사용자가 웹 사이트를 방문하면 사용자 브라우저가 웹 서버에 HTTP 요청을 전송하고 웹 서버는 HTTP 응답으로 응답합니다. 웹 서버와 사용자 브라우저는 데이터를 일반 텍스트로 교환합니다. 간단히 말해 HTTP 프로토콜은 네트워크 통신을 작동하게 하는 기본 기술입니다. 이름에서 알 수 있듯이 HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전 또는 더 안전한 버전입니다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정합니다.

*프로토콜 이란 컴퓨터 내부에서나 컴퓨터 사이에서 데이터의 교환 방식을 정의하는 규칙 체계. 기기 간 통신은 교환되는 데이터의 형식에 대해 상호 합의를 요구하는데 프로토콜이란 이런 형식을 정의하는 규칙의 집합.

1.보안

HTTP 메시지는 일반 텍스트이므로, 권한이 없는 당사자가 인터넷을 통해 쉽게 액세스하고 읽을 수 있습니다. 반면, HTTPS는 모든 데이터를 암호화된 형태로 전송합니다. 사용자가 민감한 데이터를 제출할 때 제3자가 네트워크를 통해 해당 데이터를 가로챌 수 없음을 확신할 수 있습니다. 신용카드 세부 정보 또는 고객 개인 정보와 같은 잠재적으로 민감한 정보를 보호하려면 HTTPS를 선택하는 것이 좋습니다.

2.성능

HTTPS 웹 애플리케이션은 HTTP 애플리케이션보다 로드 속도가 더 빠릅니다. 마찬가지로, HTTPS는 참조 링크도 더 잘 추적합니다. 추천 트래픽은 광고 또는 소셜 미디어 백링크와 같은 서드 파티 소스에서 생성되는 웹 사이트 트래픽입니다. 분석 소프트웨어가 신뢰할 수 있는 트래픽 소스를 정확하게 식별하도록 하려면 HTTPS를 활성화해야 합니다.

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌쿠키, 세션, 웹스토리지의 차이를 설명해보세요

답변▶️ 웹 애플리케이션을 제작하거나 사용하면서 가장 중요한 부분 중 하나는 데이터의 저장 및 관리입니다. 이를 위해 쿠키, 세션, 웹 스토리지와 같은 기술들이 널리 사용되고 있으며 이들은 각 각 은 고유한 특징과 장,단점을 가지고 있습니다.

쿠키의 구성 요소

웹 브라우저에 저장되는 클라이언트 측에 저장되는 key와 value로 이루어진 작은 텍스트 파일로 일반적으로 쿠키는 만료일을 가지고 있으며 만료일이 지나면 자동으로 삭제되는 구조입니다. 사용자가 웹 사이트에 로그인하면 사용자의 로그인 정보를 쿠키에 저장하여 사용자가 다시 방문할때마다 로그인을 유지할 수 있습니다.

• 이름(name): 각각의 쿠키를 구별하는데 사용되는 이름
• 값(value): 쿠키의 이름과 관련된 값
• 유효 시간(expires): 쿠키의 유지 시간
• 도메인(Domain):쿠키를 전송할 도메인
• 경로(Path): 쿠키를 전송할 요청 경로

쿠키의 동작 방식

• 클라이언트가 페이지 요청
• 서버가 HTTP 응답 시 set-cookie를 통해 쿠키 생성하여 전달
• 클라이언트는 이제부터 매 HTTP Request시 HTTP Header에 쿠키를 담아서 전송
• 만료 기간 전이라면 쿠키는 브라우저에 저장되어 있으며, 항상 요청 시 사용 가능
• 만료가 됬다면 클라이언트가 새로 서버에 요청하여 쿠키 새로 발급

  웹 스토리지

• 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 나온 새로운 방식의 데이터 저장소
• 종류는 로컬 스토리지, 세션 스토리지
• key, value 쌍의 형태로 데이터 저장
• window객체의 property로 존재

  세션

  클라이언트가 처음 서버에 접속하면 서버는 고유한 세션 id를 생성하고 이를 클라이언트에게 전달합니다.
• 로컬 스토리지와 세션 스토리지 차이점*
• 로컬 스토리지는 데이터 영구 저장이 가능, 세션 스토리지는 브라우저 탭/윈도우가 닫히면 스토리지가 초기화
• 로컬 스토리지는 window.localStorage, 세션 스토리지는 window.sessionStorage 객체 사용

  쿠키, 로컬 스토리지, 세션 스토리지 사용처

• 쿠키 : 일시적으로 필요한 가벼운 데이터 저장이 필요할 때
  • 다시 보지 않음 쿠키 팝업 창 , 로그인 자동 완성
• 로컬 스토리지 : 지속적으로 필요한 데이터 저장이 필요할 때
  • 자동 로그인
• 세션 스토리지 : 일시적으로 필요한 데이터 저장이 필요할 때
  • 일회성 로그인, 입력 폼 저장, 비 로그인 장바구니

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌GET, POST 방식의 차이점에 대해서 설명해주세요.

답변▶️ Get은 가져온다는 개념이고, Post는 수행한다는 개념입니다. GET이 Idempotent하도록 설계되었다는 것은 GET으로 서버에 동일한 요청을 여러 번 전송해도, 동일한 응답이 돌아온다는 것을 의미합니다. 그래서 GET은 서버의 데이터나 상태를 변경시키지 않아야 하기 때문에, 주로 데이터를 조회할 때 사용해야 합니다. 예를 들어, 브라우저에서 웹 페이지를 열거나, 게시글을 읽는 등 조회를 하는 행위는 GET으로 요청합니다. POST는 Non-idempotent하기 때문에, 서버에 동일한 요청을 여러 번 전송해도 각기 다른 응답을 받을 수 있으며 POST는 서버의 상태나 데이터를 변경시킬 때 사용됩니다. 게시글을 쓰면 서버에 게시글이 저장되고, 게시글을 삭제하면 해당 데이터가 삭제되는 등 서버에 변화를 일으키는데 됩니다. 이처럼 POST는 생성, 수정, 삭제에 사용할 수 있지만, 생성에는 POST, 수정은 PUT, 삭제는 DELETE가 용도에 맞는 메소드라고 할 수 있습니다.

Get방식

• 캐싱 가능
• 데이터를 Header(헤더)에 포함하여 전송
• URL에 변수(데이터)를 포함시켜 요청
• 파라미터에 내용이 노출되기 때문에 보안 취약
• 브라우저 기록 생성
• 북마크 추가 가능
• 데이터 길이 제한

POST방식

• 캐싱 불가
• URL에 변수(데이터)를 노출하지 않아 기본적인 보안 보장
• 데이터를 Body(바디)에 포함하여 전송
• 브라우저 기록 생성 불가
• 북마크 추가 불가
• 데이터 길이 대한 제한 무

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌브라우저의 작동방식에 대해서 설명해주세요.

답변▶️ 브라우저의 작동 방식은 다음과 같은 단계로 이루어집니다.

• URL 입력 및 요청: 사용자가 URL을 입력하면 브라우저는 해당 주소의 웹 서버에 HTTP 요청을 보냅니다.
• 서버 응답 및 데이터 수신: 서버는 요청을 처리하고 HTML, CSS, JavaScript 파일 등을 브라우저에게 응답으로 보냅니다.
• HTML 파싱 및 DOM 생성: 브라우저는 HTML을 파싱하여 Document Object Model (DOM) 트리를 만듭니다. 이 트리는 웹 페이지의 구조를 나타냅니다.
• CSS 파싱 및 CSSOM 생성: CSS 파일도 파싱되어 CSS Object Model (CSSOM) 트리가 생성됩니다. 이것은 페이지의 스타일을 정의합니다.
• 렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 이 트리는 페이지의 시각적 표현을 나타내며, 각 요소의 크기와 위치를 포함합니다.
• 레이아웃 단계: 렌더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산합니다.
• 페인팅: 계산된 스타일과 레이아웃 정보를 사용하여 화면에 페이지를 그립니다. 여기에는 텍스트, 이미지, 다른 시각적 요소들이 포함됩니다.
• JavaScript 실행: 필요한 경우 JavaScript가 실행되어 동적인 기능을 추가하거나 페이지를 변경합니다.
• 로드 완료: 모든 요소와 스크립트가 로드되고 실행되면 페이지 로딩이 완료됩니다. 사용자는 이제 페이지와 상호 작용할 수 있습니다. 이러한 과정은 빠르게 일어나며 사용자에게는 매끄럽게 보이게 됩니다. 동적인 웹 페이지의 경우 추가적인 비동기 요청과 작업이 있을 수 있어, 사용자와의 상호 작용에 따라 계속 업데이트될 수 있습니다.

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.

답변▶️ 동기는 '직렬적'으로 작동하는 방식이고 하나의 태스크가 끝날 때 까지 기다렸다가 다음 태스크가 실행됩니다. 총 실행 시간으로 따지자면 '동기' 방식이 더 느립니다.비동기는 '병렬적'으로 작동하는 방식입니다. 즉, 비동기란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미하며 비동기 처리를 예로 Web API, Ajax, setTimeout 등이 있습니다. 비동기 프로그래밍은 동시에 여러 작업을 수행할 수 있으므로 하나의 작업이 완료되는 동안 다른 작업을 실행할 수 있습니다. 이로 인해 전체 작업의 처리 시간을 단축 및 동시다발적인 요청에 응하기 위해 싱글쓰레드에서 할 수 있는 최선의 방식이라고 할 수 있습니다.

회의(디자이너님)

🖥️오픈 페이지

• 헤더 필요/헤더가 없으면 사람들이 무슨 사이트인지 잘 몰라서 나가는 경우가 많음
• 헤더를 만들면, 카테고리 카드는 조금 더 우선순위가 되는 하위 카테고리 (shorts나 지도) 같은 페이지로 바로 이동하게끔 만들기

🖥️마이페이지

• 게시글 펼치기 접기 보다는 탭 클릭시 나오게끔 만들기

🖥️커뮤니티 페이지

• shorts 클릭시 모달창으로 띄우는데, shorts 크기에 맞게 모달창 크기를 조정할 것인지, 아니면 전체 페이지로 별도의 디자인이 필요한지 회의 필요

🖥️커머스 페이지

• 상품칸 사이의 여백을 고려해서 몇개씩 전시 할 건지 회의 필요

📌그 외

• 브랜드 로고

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌var, let, const의 차이에 대해 알려주세요.

답변▶️ var로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하나 코드량이 많아 졌을 때 같은 이름의 변수명이 여러 번 선언되었다면 어디 부분에서 문제가 발생했는지 파악하기 힘들고 값이 바뀔 우려가 있습니다. let은 중복선언이 불가능하나 초기화 이후 반복해서 다른 값을 재할당 할 수는 있습니다. const는 중복 선언 불가능 및 재할당이 불가능하나 배열 오브젝트의 값을 변경하는 것은 가능합니다. 변수 선언에는 기본적으로 const를 사용하고, 재할당이 필요한 경우에 한정해 let 을 사용하는 것이 좋습니다. 그리고 객체를 재할당하는 경우는 생각보다 흔하지 않기 때문에 const 를 사용하면 의도치 않은 재할당을 방지해 주어 안전합니다.

📌Async/Await와 Promise의 차이에 대해 설명해주세요.

답변▶️ Promise 는 자바스크립트에서 비동기 처리에 사용되는 객체로 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 이해하고 있습니다. Promise 에는 3가지 상태가 있는데 Pending (대기),Fulfilled (이행),Rejected (실패)입니다. 비동기 처리가 완료 되지 않았다면 Pending, 완료 되었다면 Fulfilled, 실패하거나 오류가 발생하였다면 Rejected 상태가 됩니다. async / await은 callback 이나 Promise 의 단점을 해소하고자 만들어졌다고 하며 await 는 async 은 함수 안에서만 동작합니다. 하지만 async/await 은 Promise 와 는 다르게 에러를 핸들링 할 수 있는 기능이 없어 try-catch() 문을 활용하여 에러를 핸들링 하여 주어야 합니다

회의(튜터님)

🖥️맵 페이지

• 위치 정보 제공에 동의 하지 않는 사람들에 대해 대처가 필요
• 기획적인 측면이 아니라 기술적인 측면 고려 필요

🖥️로그인 및 회원가입 페이지

• 마이페이지 내 추가 될 내용이 많을 수 도 있음
• 다른 페이지와 연계가 되기 때문에 미리 정하고 작업하는 것이 좋음

🖥️커뮤니티 페이지

• shorts의 특성(계속해서 넘기기)을 좀 더 활용해봐도 좋을 것, 무한스크롤
• 게시판식 커뮤니티는 간단한 CRUD기 때문에 좀 더 다양한 방법을 모색해도 됨

🖥️커머스 페이지

• 물품 게시보다 싸이클(장바구니-구매-다시 물품 페이지)가 중요
• 파이어베이스 활용에 따라 제품 상세 페이지 내용이 줄어들 수 있음

📌그 외

• 개발을 하면서 내가 막힘을 느껴서 시도해 본 것, 생각해 본 변수등을 그때그때 모아둘 것.(저장)
• 후에 포트폴리오가 될 수도 있고, 이력서 쓸 때 유리하게 작용 할 수 있음

회의(디자인)

🖥️메인페이지

• 헤더 네비게이션 바 제거
• 카테고리별 카드의 길이를 늘리고, 아래에 간단한 설명을 추가하여 가시성 높이기
• 메인 배너를 조금 키우고, 홈페이지 안내 문장은 오른쪽으로

🖥️맵 페이지

• 헤드 네비게이션 바 추가
• 색깔, 아이콘 별 마크 추가(지도 색상에 따라 아이콘 및 포스트잇 색 변경)

🖥️로그인 및 회원가입 페이지

• 로그인 창은 수정 x (레퍼런스 확인)
• 마이페이지 화면중 등록 게시글, 좋아요, 팔로우 글들은 무한 스크롤을 통해 추가 구현, 구현 실패시 새로운 페이지로 이동
• 이메일과 같은 인증 여부 확인 구현 시도

🖥️커뮤니티 페이지

• 게시글 우측 끝에 고양이 발만 있다가, 호버시 고양이 얼굴이 같이 올라오게끔
• 글쓰기 페이지 추가

🖥️건강 페이지

• 상품별 카테고리 추가, 우측에 띄우는 개수 변경 키
• 상품 상세 페이지에서 스크롤 다운시 상품 이름과 설명은 고정된 상태로 상품 이미지만 스크롤 다운 (레퍼런스 확인)

[Frontend] 기술면접 top30

해당 질문에 면접에서 답변할 수 있을 정도의 길이(3~4줄)로 답변을 달아보세요. 특히 면접 답변의 핵심은 두괄식(핵심을 먼저 말하는 것)입니다. 완성 후, 면접 하루 전날 족보처럼 훑어보고 면접을 보러갑시다!

📌Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요

답변▶️ Recoil은 직관적이며 간단한 구조를 가지고 있으나 안정적인 devtool이 없으며 redux는 검증된 라이브러리로 상태값의 변경 사항을 Redux Devtools를 이용해 직관적으로 볼 수 있으며 이로 인해 전역으로 관리해야 하는 상태값이 많아질 경우 디버깅이 상대적으로 유리하다. 그렇지만 상태를 변경하려면 보일러플레이트 코드를 많이 작성해야하는 번거로움이 있다.

📌버츄얼 돔과 리얼 돔의 차이를 설명해주세요.

답변▶️ 돔은 문서객체로 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델이고 가상돔은 실제 돔에 접근하여 조작하는것이 아닌 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다.