Next.js 로 프로젝트를 생성하기 전 폴더 구조는 어떤식으로 구성 해야할까요? 폴더구조는 프로젝트의 상황에 따라 달라지겠지만 폴더들의 사용목적, 방식에 대해 알아보겠습니다.

✅ 폴더 구조

Nextjs 공식문서 - 애플리케이션 구축

1) public 폴더

Next.js 공식문서에서 말하는 public

• public 폴더는 이미지, 글꼴 등과 같은 정적 자산을 저장할 폴더를 만듭니다.
• public 그런 다음 기본 URL( )에서 시작하는 코드에서 디렉터리 내의 파일을 참조할 수 있습니다.

2) src 폴더

• 모든 코드는 이 폴더를 root로 가지고 있기 때문에 폴더를 아래처럼 분리하게 되면 src는 거의 필수

3) app 폴더

• Next 14 버전 부터 App router를 사용합니다.

• Next가 app폴더 내의 pages.tsx를 라우트 정의 파일로 판단하여 그에 맞게 작업을 실행한다.

3) style 폴더

• src 폴더 하위, src가 없다면 root 하위에 style폴더를 만들어서 스타일과 관련된 파일을 관리한다.

• global.css : src/app/layout.tsx에서 import하여 전체 프로젝트 적용하여 사용
• animation.css : animation에서 사용하는 keyframe을 모아둔 파일

4) container 폴더

• 데이터 로직과 상태 관리를 처리하는 컨테이너 컴포넌트를 담는 곳

• 데이터 로딩 및 가공: 외부 API로부터 데이터를 가져오거나, 데이터를 가공하여 UI 컴포넌트에 전달하는 역할
• 상태 관리: 상태 관리 라이브러리와 통합하여 전역 상태를 관리하는 컴포넌트들이 위치할 수 있습니다. 이러한 컴포넌트들은 전역 상태를 유지하고, 필요한 경우 상태를 변경하여 UI에 반영하는 역할을 수행
• 비즈니스 로직 처리: UI에 관련된 비즈니스 로직을 처리하는 컴포넌트들이 위치(사용자 인증, 권한 관리, 데이터 유효성 검사 등의 작업을 수행하는 컴포넌트)

5) component 폴더

• container 가 좀 큰 단위였다면 component는 기복적인 UI가 들어가는 폴더

• 각 컴포넌트는 작고 독립적이어야 합니다. 주로 다음과 같은 종류의 컴포넌트가 이 폴더에 위치할 수 있다.
• UI 요소: 버튼, 입력 필드, 체크박스, 라디오 버튼 등과 같은 일반적인 UI 요소
• 레이아웃 컴포넌트: 페이지의 레이아웃을 구성하는 컴포넌트들이 위치(헤더, 푸터, 사이드바, 네비게이션 바)
• 페이지 섹션: 여러 페이지에서 공통적으로 사용되는 섹션들을 컴포넌트로 분리하여 재사용가능 (제품 목록, 블로그 게시물 목록, 사용자 프로필 등의 섹션)

6) data 폴더

• 여러 컴포넌트에서 사용되는 공통된 데이터를 관리할 때 사용하는 폴더

7) utils 폴더

• 하나의 페이지만이 아닌 프로젝트에 전반적으로 사용되는 기능과 관련된 코드를 관리하는 폴더

• 자주 사용되는 함수들을 모듈화하여 중복을 피하고 재사용성을 높이는데 유용
• Helper함수 : 프로젝트에서 자주 사용되는 작은 기능을 포함하는 함수들이 위치(날짜형식 변환, 문자열조작, 데이터변환들)
• 유틸리티 함수: 다양한 유틸리티 함수들이 위치 (파일 조작, 네트워크 요청, 데이터 유효성 검사 등을 수행하는 함수들)
• 상수 정의: 프로젝트 전반에서 사용되는 상수 값들을 정의하는 파일이 위치할 수 있습니다.

9) middleware

https://nextjs.org/docs/app/building-your-application/routing/middleware

• Next.js에서 페이지를 렌더링 하기 전 서버 측에서 실행되는 함수로 아주 중요하다.
• 페이지 렌더링 전 인증요청, 확인 할 때
• 요청 데이터를 사전에 처리, 특정 API요청을 수행하거나 캐시관리

✅ Default Props가 뭐지?

먼저 정의를 내려보자면 아래와 같다.

defaultProps : 따로 값을 지정하지 않아도 기본값으로 props를 전달 해주는 것

그럼 모무 프로젝트에서는 이 부분을 어디에 사용했는지 설명하기 앞서 우선 모무 프로젝트의 게시물 업로드 모달 구조에 대해 설명해 보자면

• 아래 사진과 같이 Upload.tsx 컴포넌트 안에 이미지를 불러오는 Preview컴포넌트와 그 외 제목,문구 등등 글 내용을 불러오는 그 외 컴포넌트로 구성되어 있습니다.

Preview.tsx는 게시물 업로드, 게시물 수정업로드 2가지 컴포넌트에서 재사용을 하고 있었습니다. 그래서 기존 이미지를 기억한 상태에서 작업을 이어가도록 아래와 같이 defaultProps를 사용하고 있었습니다.

Preview.defaultProps = {
  imgUrlList: [],
};

✅ Default Props로 인해 발생한 경고

defaultProps는 class 컴포넌트에서 유용했지만, 함수형 컴포넌트에서는 ES6의 default parameters로 대체가 가능하게 되었다. 그런고로 위와 같은 오류 메세지 "Warning: App: Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead." 를 뿜고 있던 것이었다.

✅ 그래서 이부분은 어떻게 해결?

• defaultProps를 삭제하고 매개변수에서 imageList를 Optional로 바꾸고 기본값 설정으로 해결하였습니다. (자세한 코드가 궁금하다면 깃허브 코드보러 가기)

✅ 프로젝트를 진행할 때 스타일도구를 선정해야 한다.

기존에 진행했던 사이드 프로젝트에서는 styled-components를 사용했었다. 사용한 이유는 여러가지가 있지만

• 유니크한 클래스를 자동으로 생성한다.
• CSS의 컴포넌트화로 스타일시트의 파일을 유지보수 할 필요가 없다.
• 🌟참여하는 팀원들에게 가장 익숙하여 러닝커브 문제가 없다.

✅ 그럼 이번엔 뭘쓸건데?

기술을 학습 / 사용할 때 겁부터 먹고 시작하기 때문에 어렵게 느껴지는 것이다. 라는 개x 멘토님의 명언대로 가볍게 여러 기술을 사용해 본 경험이 나의 쫄보 마인드를 개선해 줄 거라는 생각이 들었다. 그래서 이번 프로젝트 스타일도구로 TailwindCSS를 써보기로 했는데 선택한 이유는

• 사용 경험이 없는 기술
• 파일을 왔다 갔다 움직이면서 마크업해야 하지 않음으로 시간낭비 줄일 수 있음
• 네이밍의 고통에서 벗어나기

• CSS-in-JS 라이브러리도 결국 클래스명 네이밍이 변수명 네이밍으로 바뀌었을 뿐 네이밍에 고민해야 하는 시간은 존재한다.

✅ TailwindCSS 가 뭔데?

tailwind란 마크업에 직접적으로 모든 디자인을 구축할 수 있는 클래스들로 구성된 유틸리티 우선 CSS 프레임워크

📍 먼저 좀 더 짚고 넘어갈 내용은

1) 그럼 왜 Bootstap이 아니라 tailwind인가? tailwind는 Bootstrap과 유사하다고 느낄 수 있지만 이미 스타일링된 클래스를 제공하는 Bootstrap은 UI 컴포넌트 라이브러리에 가깝지만 TailwindCSS는 스타일링을 사용자가 컨트롤 할 수 있기 때문에 자유도가 훨씬 높다.

2)인라인 스타일링과의 다른점은? tailwind는 디자인 시스템을 구축할 수 있고, 반응형 디자인, hover 시 스타일링 등을 쉽게 다룰 수 있는 점에서 인라인 스타일과 차별점을 두고 있다.

✅ TailwindCSS 그럼 단점은 없는거야?

1) 미묘한 러닝커브 TailwindCSS 의 클래스 네이밍은 CSS를 다뤄본 사람이라면 쉽게 이해할 수 있다. 그렇지만 종종 공식문서에서 확인이 필요한 외우기 어려운(아리까리한) 애들이 있다. (예를 들면 align-items: center => items-center 혹은 display: none → hidden)

간단하네? 라고 생각할 수 있지만 한 페이지 스타일링에 34개 클래스 네이밍만 찾아도 시간 소요가 꽤 크더라...~~

2) 가독성을 지키는거니 해치는거니 분명 사용전 읽어본 사용후기 블로그, 공식문서에서는 가독성이 좋아진다. 라는 글이 종종 있었는데

여러 스타일에, hover에 따른 동적 스타일링까지 포함하니 클래스명이 놀라울 정도로 길어진 경우도 있었다. 그래서 리팩토링을 통해

1) 클래스명을 _변수로 분리_해 가독성 문제를 해결한 적도 있고, 2) TailwindCSS에서 제공하는 _@apply_로 클래스를 분리해서 문제를 해결한 적도 있다.

_하지만 이 방식들은 유틸리티 클래스의 장점을 무효화시킨다. _

✅ 마치며 적는 글

😦 아직 여러명과 협업시 사용해 본적은 없지만,,,

개인으로 진행한 프로젝트에서 사용해본 경험으로는 만족도가 높은 라이브러리였으나 이게 과연 다인원 협업에서 효율적인가? 라는 궁금증은 여전했다.

그러다 카카오FE 기술 블로그에서 FE개발그룹에서는 Tailwind CSS를 왜 도입했고, 어떻게 사용했을까? 라는 글을 읽게 되었다.

글을 요약하자면 대략 이정도 방법을 적용했다고 볼 수 있다.

• 1)커스텀 플러그인을 적극 사용하여 협업하기,
• 2)Twin.Macro 라이브러리를 활용하여 tailwind와 Emotion CSS를 함께 사용할 수 있는 방법을 제공 => 개발자가 상황에 따라 최적의 방법을 선택해 디자인 코드를 작성할 수 있도록 도와줌

가지고 있는 가장 문제가 되는 부분을 해결할 수 있는 라이브러리에 보조도구를 잘 활용한다면 협업 어려운거 아니겠구나 이래서 _기술의사결정_이 정말 중요하구나,,라는걸 느끼며 마무리

📚 Refernce

• TailwindCSS 공식문서
• 카카오FE 기술블로그
• Tailwind CSS의 장점과 단점

최근 useEffect의 호락호락하지 않음을 경험하고 좀 더 자세히 공부해야겠다 라는 생각이 들었습니다. 무슨일이었냐면 제가 작업 중이던 프로젝트에서 useEffect 의존성 배열인자가 계속 호출되어 무한루프가 발생했습니다. 그 결과로 파이어베이스에서 무료로 사용할 수 있도록 할당된 읽기 50000건을 하루만에 사용해 버렸습니다.🧔🏻‍♀️

=> useGetFeedData.tsx

import { getDoc, doc } from 'firebase/firestore';
import { appFireStore } from '@/firebase/config';
import useAuthContext from '@/hook/useAuthContext';  
import useAuthContext from '@/hook/useAuthContext';

export default function useGetFeedData() {
  const { user } = useAuthContext();

  const getFeedData = async (feedId: string) => {
    if (user === null) {
      return;
    }

    try {
      const docSnap = await getDoc(doc(appFireStore, 'feed', feedId));

      return docSnap.data();
    } catch (error) {
      console.log(error);
    }
  };

  return getFeedData;
}

문제 발생 이유

• 1. 기존에 게시물을 그려주는 FeedInfo라는 컴포넌트에서 사용중인 useEffct의 의존성배열에 getFeedData를 추가하라는 경고문 발생 (경고문 발생하면 고민없이 수정하는 잘못된 습관의 쓴맛을 보았습니다..)
• 2. 의존성배열에 feed.id와 getFeedData 추가
• 3. FeedInfo에서 setFeedData를 통해서 feedData를 업데이트하고 있음 이 때 상태값이 업데이트 되면서 FeedInfo 컴포넌트가 리렌더링 됨
• 4. useGetFeedData 훅스에서 재호출로 인한 이전 렌더링 됐을 당시 주소값 참조와 달라짐
• 5. 의존성 배열 요소로 지정한 getFeedData함수의 참조값 변화 발생
• 6. useEffect 다시 실행
• 7. 무한 반복해서 하루에 5만개의 읽기 값이 찍힘 실제 출시한 서비스였으면 돈방석 앉았다고 기뻐했을 듯

해결방법

• useCallback을 사용해서 한번만 호출하도록 useGetFeedData 훅 수정 FeedInfo에서 의존성배열에 있는 getFeedData가 더이상 반복 호출하지 않음

이 과정을 겪으며 나 너무 useEffect라는 훅을 띄엄띄엄 보고 있었구나 공부해야 겠다는 마음을 많이 느꼈습니다.

1. 리액트의 생명주기

useEffct의 실행순서는 컴포넌트의 생명주기와 밀접한 관계가 있습니다. 그래서 먼저 리액트의 생명주기에 대해 이해하고 있는게 중요합니다.

📍 클래스 컴포넌트의 생명 주기 (Life Cycle)

컴포넌트의 생애주기는 크게 세 가지로 나눌 수 있습니다. 컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)

이미지 출처: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

(1) 마운트 : 처음 컴포넌트가 나타났을 때 처음 state와 props를 가지고 컴포넌트를 생성합니다.

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

(2) 업데이트 : 컴포넌트 상태값이 바뀔 때 마운트 완료 후 상태값이나 prop의 변화가 생겼을 때 리액트가 감지하고 컴포넌트에 업데이트해줍니다.

• getDerivedStateFromProps
• shouldComponentUpdate
• render
• componentWillUpdate
• componentDidUpdate

(3) 언마운트 : 컴포넌트가 사라질 때 언마운트에서는 componentWillUnmount가 실행됩니다. 컴포넌트를 완전히 DOM에서 제거하는 시점 componentWillUnmount : 컴포넌트가 사라지기 바로 직전에 호출

2. useEffect의 실행순서

useEffect(setup, dependencies) useEffect 의 실행 순서에 대해 간단한 예제로 살펴보겠습니다. (예제는 멋사5기 교안을 참고했습니다.)

📍useEffect가 실행 되는 시점

// 1.컴포넌트가 업데이트 될 때마다 매번 실행
useEffect(()=>{
    console.log('hello world');
})

// 2.처음에만 실행
useEffect(()=>{
    console.log('hello world');
}, [])

// 3.변수들의 변화가 일어날 때마다 실행
useEffect(()=>{
    console.log('hello world');
}, [변수1, 변수2...])

📍useEffect 뒷정리하기

• 컴포넌트가 언마운트되기 전이나 업데이트 되기 직전에 어떤한 작업을 수행하고 싶다면 useEffect에서 뒷정리 함수를 반환해야한다. ( 뒷정리 함수 == cleanup 함수 )
• cleanup함수가 호출되면 어떤 값을 을 보여줄까? => 업데이트 되기 직전의 값을 보여줌
• 언마운트 될 때만 ! cleanup 함수를 호출하고 싶다? => useEffect의 두번째 파라미터에 빈배열을 넣어주라

📍코드로 보는 cleanup 함수

- 성능이슈 발생 코드

import React, { useState, useEffect } from 'react';

function Time(props) {
  const [today, setToday] = useState(new Date());
  const [hour, setHour] = useState(today.getHours());
  const [min, setMin] = useState(today.getMinutes());
  const [sec, setSec] = useState(today.getSeconds());
  console.log("렌더링이 됩니다..?")//렌더링이 잘 되는지 확인용! 꼭 넣고 진행해주세요.

  // 성능이슈가 발생되는 공간
  setInterval(() => {
     const t = new Date();
     setToday(t);
     setHour(t.getHours());
     setMin(t.getMinutes());
     setSec(t.getSeconds());
  }, 1000);

  return (
    <div>
      <h1>
        시간 : {hour}시 {min}분 {sec}초
      </h1>
    </div>
  );
}

function App() {
  return (
    <div>
      <Time/>
    </div>
  );
}

export default App;

- 클린업 함수 사용 코드

import { useState, useEffect } from "react";

function Time(props) {
  const [today, setToday] = useState(new Date());
  const hour = today.getHours();
  const min = today.getMinutes();
  const sec = today.getSeconds();

    console.log("렌더링이 됩니다..?")
  useEffect(() => {
    let time = setInterval(() => {
      const t = new Date();
      setToday(t);
    }, 1000);
    return () => {
      clearInterval(time);
    };
  }, [today]);

  return (
    <div>
      <h1>
        시간 : {hour}시 {min}분 {sec}초
      </h1>
    </div>
  );
}

export default Time;

Reference

• 리액트를 다루는 기술(개정판)
• 멋쟁이 사자처럼 5기 교안
• https://react-ko.dev/reference/react/useEffect

■ 상태란, State란?

가장 먼저 상태의 개념에 대해 짚고 넘어가자. 리액트 공식 문서에서는 웹 어플리케이션을 렌더하는데 있어 영향을 미칠 수 있는 값 이라고 정의한다. (React Component에서 변경가능한 데이터를 state라고 부릅니다.) 그럼 상태의 종류는 어떤게 있을까?

■ 상태의 종류

상태는 범위의 개념에서 전역상태, 컴포넌트간 상태, 지역상태 로 나눌 수 있다.

• 전역상태는 프로젝트 전체에 영향을 끼치는 상태 : 유저기능등등
• 컴포넌트간 상태는 여러가지 컴포넌트에서 관리되는 상태 : 모달(상위 컴포넌트에서 prop을 넘겨받아 해당 컴포넌트까지 전달되도록 하는 Props Drilling)
• 지역상태는 특정 컴포넌트 안에서만 관리되는 상태 : input, selectbox 등등

■ 상태관리 필요이유

서로 다른 컴포넌트가 같은 데이터가 필요하다고 할 때, 컴포넌트가 부모 자식 관계가 아닌이상 직접적인 데이터 전달이 어렵다. Prop Drilling으로 해결할 수 있으나, 복잡해지고 상태가 많아질 수록 prop이 어디에서 왔는지 찾기 어려워진다.(안복잡해도 잘 헤매는 나에요..) 즉 컴포넌트간의 불필요한 리렌더링을 방지하여 웹 성능 저하를 막기 위해 필요합니다.

■ 상태관리 Tool의 종류

위와 같은 이유로 각 프로젝트에 맞는 상태관리 툴을 선택해서 상태를 관리하는 것이 중요하다. 그럼 상태관리를 위한 Tool에는 어떤게 있느냐,, ContextAPI, Redux,zustand, Recoil, MobX, React Query 등이 있다.

■ ContextAPI

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 텀포넌트 트리 전체에 데이터를 제공할 수 있다.

ContextAPI는 리액트 자체에서 상태를 관리할 수 있도록 제공하는 훌륭한 Tool 중 하나입니다. Context, Provider, Consumer로 설명할 수 있습니다.

ContextAPI는 성능적인 이슈가 여전히 존재합니다. 값에 변화가 발생했을 때 Context를 구독하고 있는 모든 컴포넌트들이 전체적으로 모두 리렌더링 되거나, 범위를 제대로 지정하지 않았을 때 불필요한 리랜더를 일으키기도 합니다. 만약 반복적이고 복잡한 업데이트와 관련된 부분에서는 비효율적일 수 있다. 라는 뜻

■ Redux

redux 공식문서 : https://ko.redux.js.org/introduction/getting-started/

Redux는 전역 상태관리를 위한 라이브러리로, 현재 React에서 가장 많이 사용되는 State관리 라이브러리입니다. 프로젝트 전체에 대한 중앙 저장소 역할을 합니다. 즉 Vue, Vanilla JS등에서도 사용 가능한 모든 자바스크립트앱을 위한 상태관리 도구 입니다. (리액트만을 위한 도구가 아니다.)

Redux는 Flux 아키텍처의 구현체로 Store, Reducer, Action 구조로 구성되어 있습니다.

Store 는 저장소, 즉 전역상태를 저장하는 공간이며 오직 reducer를 통해서만 접근 가능하다. 여러개의 Context를 만들 수 있는 Context API와는 다르게 Redux에서 Store는 1개만 존재한다.

Action은 Reducer에게 보내는 Store에 대한 행동을 정의하는 자바스크립트 객체로 상태에 어떤 변화가 필요할 때 액션을 발생시킨다. 이 때 전달하기 위해 dispatch 메소드를 사용해야한다. Store의 내장 함수 중 하나인 dispatch는 액션객체를 넘겨줘서 상태를 업데이트 한다. 즉, 이벤트를 일어나게 하는 이벤트 트리거의 역할~

Reducer는 이전 상태와 액션을 받아 다음상태를 반환하는 역할을 하는 순수함수로 Reducer를 통해서만 전역 상태를 변경하고 업데이트 할 수 있다.

• 순수함수란? 다른 외부의 상태를 변경하지 않으면서도, 어떤 동일한 인자에 대해 항상 동일한 값을 리턴하는 함수

누가 왜 Reduc를 쓰냐고 묻거든 규모가 큰 애플리케이션의 Props drilling을 최소화하여 불필요한 리렌더링을 방지하고 상태를 보다 더 효율적으로 관리하여 성능 최적화하기 위해 사용한다고 대답하자.

■ Recoil

rocoil 공식문서 : https://recoiljs.org/ko/docs/introduction/getting-started/ 2020년 facebook에서 발표한 리액트 전용 상태관리 라이브러리로 2015년 만들어진 redux에 비해 역사는 오래되지 않았지만 React hook Api와 밀접하게 통합되어 있어서 React개발자들에게 더 친숙한 패턴을 제공합니다.

🎤Redux와 recoil 의 차이점은?

1) Redux는 단일 스토어를 사용하여 애플리케이션의 상태를 관리하는 반면, Recoil은 여러개의 "atom", "selector"를 사용하여 상태를 관리합니다. 2) Redux는 오랜 기간 동안 사용되어 왔으며, 강력한 개발 도구 방대한 생태계를 자랑합니다. 반면, Recoil은 비교적 새로운 라이브러리입니다. Redux만큼 방대한 개발 도구와 생태계를 갖추고 있지는 않지만, Recoil은 지속적으로 성장하고 있으며, 커뮤니티의 관심과 기여도 빠르게 증가하고 있습니다.

결론적으로, Recoil은 React의 최신 기능과 밀접하게 통합되어 있는 모던한 상태 관리 라이브러리로, 상태 관리를 더 직관적이고 모듈화된 방식으로 접근하려는 개발자에게 적합할 수 있습니다. 그리고 Redux는 검증된 안정성, 강력한 개발 도구, 그리고 방대한 생태계를 필요로 하는 대규모 애플리케이션에 더 적합할 수 있습니다.

📚 Reference

• https://ko.redux.js.org/introduction/getting-started/
• https://recoiljs.org/ko/docs/introduction/getting-started/
• https://mingule.tistory.com/74
• https://velog.io/@longroadhome/FE-%EB%A6%AC%EC%95%A1%ED%8A%B8-%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC-1%EB%B6%80
• https://www.youtube.com/watch?v=AT1b0jxmiRY

• 연속된 노드의 연결체

2) 노드(Node)란?

• 연결리스트에서 사용되는 하나의 데이터 덩어리이며, 데이터 & 링크 2가지 필드를 담고 있는 구조
• 그럼 노드의 구조는?
  • data : 노드가 담고 있는 데이터, 값
  • next : 링크 , 포인터 역활, 다음 노드의 주소를 저장

• 연결리스트의 구조는?
  • 연결리스트의 시작점에 있는 노드: head
  • 연결리스트의 마지막에 있는 노드: tail

3) 배열과 연결리스트의 차이

• random access 가능 ⇒ 배열의 n번째 원소 방문시 O(1) 시간으로 가능 예) arr[3]

• random access 불가능 ⇒ 리스트의 n번째 노드 방문시 O(n)시간소요 예) head 노드부터 n번째 노드까지 순회

• 원소 삽입 & 삭제 일반적으로 O(n) 시간 소요

• 배열보다 빨라질 수 있는 노드 삽입 & 삭제

4) 연결리스트의 종류는?

• 1) 단일 연결 리스트 (Singly Linked List)

• 2) 이중 연결 리스트 (Doubly Linked List) ⇒ 다음 노드, 이전노드를 가리키는 모든 포인터가 있어서 빠르지만 데이터의 구조와 흐름이 오히려 복잡해 질 수 있음

• 3) 원형 연결 리스트 (Circular Linked List) ⇒ 마지막 노드가 처음 노드를 카리키면서 원형 연결 노드가 완성된다.

5) 연결리스트 구현

const list = {
  head : {
    value : 90,
    next : {
      value : 10,
      next : {
        value : 89,
        next : {
          value : 100,
          next : null
        }
      }
    }
  }
}

class Node {
  constructor(data){
    this.data = data;
    this.next = null;
  }
}

class LinkedList {
  constructor() {
    let init = new Node("init")
    this.head = init;
    this.next = init;

    this.현재노드 = undefined;
    this.데이터수 = 0;
  }

  length() {
    return this.데이터수
  }

  append(date) {
    let 새로운노드 = new Node(data);
    this.tail.next = 새로운노드;
    this.tail = 새로운노드;
    this.데이터수 += 1; 
  }

  toString() {
    let 순회용현재노드 = this.head;
    순회용현재노드 = 순회용현재노드.next;

    let s ="";
    for (let i = 0; i < this.데이터수; i++){
      s += `${순회용현재노드.data}, `
      순회용현재노드 = 순회용현재노드.next;
    }
    return `[${s.slice(0, -2)}]`;
  }

    get fullData(){
      let 순회용현재노드 = this.head;
      순회용현재노드 = 순회용현재노드.next;

      let s ="";
      for (let i = 0; i < this.데이터수; i++){
        s += `${순회용현재노드.data}, `
        순회용현재노드 = 순회용현재노드.next;
      }
      return JSON.parse(`[${s.slice(0, -2)}]`);
    }

   inset(index, data) {
    let 순회용현재노드 = this.head;
    순회용현재노드 = 순회용현재노드.next;

    for (let i = 0; i < index - 1; i++){
      순회용현재노드 = 순회용현재노드.next;
    }

    let 새로운노드 = new Node(data);

    새로운노드.next = 순회용현재노드.next;
    순회용현재노드.next = 새로운노드;

    this.데이터수 += 1;
  }

}

a = new LinkedList();
a.append(1);
a.append(2);
a.append(3);
a.append(10);
a.append(30);
a.append(20);
console.log(a.length())
console.log(1)

📚 Reference

• 코딩문

이전 글에서 언급했듯이 MOMOO 프로젝트 팀은 사용자의 편의를 위해 함께 고심하고 고려한 부분들이 있습니다. 그 중 첫번째였던 브래드크럼에 이어, 두번째 명도대비 입니다. 첫번째 글을 아직 안 읽으셨다면 읽는 것을 추천 드립니다. 이유는 딱히 없습니다.

👩🏻‍💻 시작하기 앞서 MOMOO 프로젝트에는 디자이너가 따로 없습니다.

하지만 디자인에 관심과 열정있는 프론트엔드들이 있죠 후후 그렇다고 쉽게 후딱후딱 해치웠느냐? 그건 아닙니다 후후

그래도 저희 중에 디자이너분과 협업해본 경험이 있는 팀원분이 계셔서 덕분에 디자인 구조를 짜고 효율적인 작업방식을 적용해서 진행할 수 있었습니다. (사랑해 김팀원💕)

디자인 작업을 진행하며 서비스 컨셉과 어울리는 메인컬러와 서브컬러를 선정하고
바로 이 부분에서 웹 접근성을 준수하기 위한 명도대비를 고려하여 팀원들과 작업을 진행했습니다.

✅ 1. 웹 접근성 - 명도대비

1.3.3 (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상이어야 한다.

• 웹 접근성은 신체적, 정신적 불편을 겪는 사람들이 비장애인들과 동일하게 서비스를 이용할 수 있어야 한다. 라는 개념에서 시작 되었습니다. 그래서 텍스트의 인식성, 가독성을 보장하기 위해 콘텐츠의 전경색과 배경색의 명도 대비를 신경써서 작업해야 합니다. 웹 접근성 지침 2.1

  1️⃣ 콘텐츠의 명도 대비 : 웹 페이지가 제공하는 텍스트 콘텐츠(텍스트 및 텍스트 이미 지)와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다. 2️⃣ 폰트 크기에 따른 명도 대비 : 텍스트 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14pt 이상의 굵은 폰트를 사용하는 경우에는 명도 대비를 3대 1까지 낮출 수 있다. 3️⃣ 화면 확대가 가능한 콘텐츠 : 화면 확대가 가능하도록 구현한 텍스트 콘텐츠(텍스 트 및 텍스트 이미지)의 명도 대비는 3 대 1까지 낮출 수 있다.

• 아래 예시를 통해 자세히 살펴볼까요? (예시 자료는 NULI사이트 이미지를 사용했습니다. )

• 예시처럼 콘텐츠 컬러와 배경간 명도 대비가 4.5 : 1 이상이 되지 않으면 미준수 체크가 됩니다.
  하지만 폰트사이즈를 14pt의 BOLD 체를 사용하면 3 : 1 까지 낮출 수 있기 때문에 3.6 : 1 에서도 준수로 통과되는 모습을 볼 수 있습니다.

✅ 2. MOMOO의 명도대비

MOMOO 디자인 작업전 디자인팔레트를 구성하여 폰트크기와, 컬러 변수화를 시켰습니다. 그리고 메인컬러와 명도 대비를 체크하여 최종 결정했습니다.

• 모무의 스타일 가이드 중 컬러 부분입니다. 팀원들과 명도대비를 체크 부분을 공유하고 리마인드 하기 위해 배경색과 함께 사용할시 가능한 명도대비 컬러를 체크해 두었습니다.
• 👩🏻‍💻 팀원들과 명도대비 관련 나눈내용*

✅ 3. 명도대비 체크

이렇게 심사숙고 해도 예상치 못한 부분에서 검사를 통과하지 못할 수 있다. (모무가 그랬습니다.)

✍🏻 명도대비 체크 사이트

• 명도대비를 쉽게 확인할 수 있는 사이트가 많습니다~ 디자인 작업 중, 배포 전 확인해 보시면 좋을 것 같습니다. 명도대비 체크 사이트 - contrast-finder 명도대비 체크 사이트 - sitero

🥲 MOMOO의 명도대비 체크

• 배포 후 CatchPoint 라는 성능 체크 사이트에서 확인하다 보니 웹 접근성 부분에서 94점이 나왔다. 그 이유로 명도대비가 충분하지 못한 부분이 있다는 것이었다 (엥?????)

• 이유는 비활성화 구분을 주기 위해 login, signup의 활성화 구분을 위해 설정했던 폰트 컬러가 배경색과의 명도대비가 부족했기 때문이었다. (아래 이미지의 화살표 부분)

• 디자인을 위해 이유있는 선택이라고 생각해도 웹 접근성이 고려되지 않은 모두 사용하는데 불편함 없는 서비스가 정말 잘 만든 서비스 일 수 있을까? 라고 생각했을 때 대답은 당연하다. 그러므로 지금 바로 수정하러 가겠습니다.꺄아 (+다음은 MOMOO의 이미지 최적화관련 내용으로 찾아뵙겠습니다..)

📚 Reference

• NULI 웹 접근성 명도대비

Frontend developer Project 스터디(FnP) 에서 다음 스터디 주제를 고민하다가 webpack, vite, babel 삼형제에 대해 공부해 보고 그 과정에서 프로젝트에 적용할 수 있는 부분을 나누기로 했다. 그 중 마지막 babel이올시다.

1. babel이란 무엇인가

Babel은 최신 ES6+ 버전을 구버전인 ES5로 변환해주는 JS 컴파일러 이다.

2. babel을 왜 사용할까?

• 크로스 브라우징
  • 최신 버전의 자스를 구현버전의 자스로 변환
  • • 각 브라우저마다 JavaScript 엔진이 다르지만, 모든 브라우저에서 동작하도록 호환성을 지켜준다.
• 폴리필
  • 폴리필은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 의미함.
  • 폴리필은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다.

📚 Reference

• babel 공식문서
• 현수세상님 개발블로그

Frontend developer Project 스터디(FnP) 에서 다음 스터디 주제를 고민하다가 webpack, vite, babel 삼형제에 대해 공부해 보고 그 과정에서 프로젝트에 적용할 수 있는 부분을 나누기로 했다. 그 중 두번째 vite이올시다.

1. vite는 무엇인가?

이름의 뜻 그대로 "빠른" 자바스크립트 번들링 툴입니다. 뭔가 "바이트"라고 읽고 싶지만 불어로 빠른이라는 단어 vite는 "비트"라고 읽습니다. (공식문서 발음을 들어보면 비힛흐 라고 합니다..)

👉 Vite는 네이티브 자바스크립트 모듈 (ES Module)을 기반으로 한 데브 서버입니다. 브라우저가 곧 번들러라는 것, 비트는 그저 브라우저의 판단 아래 특정 모듈에 대한 소스 코드를 요청하면 이를 전달함

2. vite의 특징

• 비트는 로컬에서 개발할 때 번들링을 하지 않고 ESM 방식을 사용하기 때문에 로컬 서버 구동 속도가 매우 빠름
• 비트는 번들링을 하지 않고 바로 서버를 실행하기 때문에 명령어를 실행함과 동시에 서버가 바로 구동

3. CRA 와 Vite의 차이점

그렇다면 리액트를 처음 배우면서 최근까지도 창창쓰던 CRA(Create React App)과는 무엇이 다르고 무엇이 같을까?

• 공통점 1) 둘 다 JavaScript 프레임워크인 React를 사용하는 프로젝트를 빠르게 시작할 수 있게 도와주는 도구 2) 둘 다 프로덕션 환경에서 사용하기 위한 빌드 및 번들링 기능을 제공 3) CRA와 Vite는 개발 서버를 제공하여 빠르게 애플리케이션을 개발하고 테스트할 수 있도록 도와줌 4) 도구는 모듈 시스템을 사용하여 코드를 구조화하고 관리
• 차이점 1) CRA는 기본적으로 Webpack을 사용하여 애플리케이션을 번들링하는 반면, Vite는 ES 모듈을 기반으로 하는 Rollup을 사용 2) CRA는 간단하고 추상화된 설정을 제공하여 초기 설정이 더 쉽습니다. 반면, Vite는 좀 더 세밀한 설정을 허용하며, 개발자가 더 많은 제어를 가질 수 있음 3) Vite의 플러그인 생태계는 CRA 보다 다양하고 활발함

4. Vite는 어떻게 사용할까

npm init vite@latest my-vite 를 통해 프로젝트 생성 후 사용할 수 있습니다. (💡 vite는 Node.js 버전 12 이상에서 정상적으로 동작합니다.)

👍🏻 온라인에서 vite 체험하기 (https://stackblitz.com/edit/vitejs-vite-3aroq5?file=index.html&terminal=dev)

📚 Reference

• vite 공식문서
• 지나가는 21세기 개발자의 이야기

Frontend developer Project 스터디(FnP) 에서 다음 스터디 주제를 고민하다 webpack, vite, babel 삼형제에 대해 공부해 보고 그 과정에서 프로젝트에 적용할 수 있는 부분을 나누기로 했다. 그 중 첫번째 webpack이올시다. (아직 겉할기 공부라 내용이 빈약합니다. 추후 더 공부해서 추가할 예정입니다.)

1. 웹팩의 정의

webpack은 모던 JavaScript 애플리케이션을 위한 모듈 번들러입니다.

💡모듈: 웹 애플리케이션을 구성하는 HTML, CSS, JavaScript, Images 등 자원 하나하나가 모듈 💡모듈번들링: 웹 애플리케이션을 구성하는 수많은 자원들을 하나의 파일로 병합 및 압축 해주는 동작을 모듈 번들링이라고 합니다.

2. webpack 핵심 개념

• Entry (엔트리) : 모듈의 시작점
• Output (출력) : 모든 모듈을 하나로 합쳐서 저장하는 경로를 설정
• Loaders (로더) : 모듈의 소스 코드에 변경 사항을 적용하는 역할 자바스크립트 뿐만 아니라 다른 포멧의 파일도 처리할 수 있습니다.
• Plugins (플러그인) : 로더가 수행할 수 없는 다양한 기능을 수행

3. webpack이 필요한 이유

• 1) 파일 단위의 자바스크립트 모듈 관리의 필요성
• 2) 웹 개발을 도와주는 자동화 도구
• 3) 웹 어플리케이션의 빠른 로딩 속도와 높은 퍼포먼스

📚 Reference

• webpack 공식문서

MOOMO 라는 사진과 일기를 저장할 수 있는 프로젝트를 진행하고 있습니다. 프로젝트 진행 중 브래드 크럼을 만들 때 알게 된 지식을 기록하려합니다.

❓브레드크럼(breadcrumb) 이란

헨젤과 그레텔에서 작은 빵가루로 길안내?와 지금까지 온 길을 기록했던 편리성을 가졌던 것 처럼 웹사이트 사용자에게도 현재 위치 안내를 해 줄 수 있는 편리성을 가질 수 있습니다.

🍞브레드 크럼은 평상시 웹 사이트에 방문했을 때 자주 볼 수 있습니다. 주로 페이지 상단에 위치해 있으며 웹사이트 내 내가 어디에 있는지 알려줄 수 있는 네비게이션 같은 역할을 하는 텍스트 입니다.

(🔼 무신사 내 브레드 크럼 이미지 입니다.)

✅ 브레드크럼(breadcrumb)의 역할은?

그럼 브레드크럼은 왜 필요하고 사용자에게 어떤 기능을 제공하는 역할을 할까요?

1) 사용자경험(UX), 고객경험(CX) 개선

depth가 깊은 페이지로 들어왔을 때 현재 위치나, 어떤 단계를 통해 현재 페이지에 도달했는지 알 수 있도록 브레드크럼은 네비게이션의 역할로 사용자들에게 매우 중요합니다.

2) SERP 노출

사용자 뿐만 아니라 구글이 웹사이트 구조를 이해하는데 도움을 줍니다. 구글봇은 브레드 크럼을 이용하여 콘텐츠를 파악하고 분류하기 때문에 SEO 측면에서도 중요하게 작용합니다.

3) 고객 이탈 방지

*사용자가 웹사이트에 더욱 도래 머물게 하는데도 도움을 줍니다. * 예를 들어 위에서 예시로 사용한 무신사 이미지에서 데님팬츠가 아닌 다른 팬츠 혹은 그 상위카테고리를 보기 위해 뒤로 버튼을 2~3번씩 눌러서 이동한다면 사용자에게 명료한 편의성을 제공하기 어려울 것입니다. 실수로 다른 카테고리 혹은 상품으로 이동이라도 했다면 저라면 바로 이탈했을 겁니다.

✅ MOMOO의 브레드크럼(breadcrumb)

🎨 위 이미지는 모무의 피그마 디자인입니다.

• ** 모무의 페이지 진행 방향은** Home 에서 -> 사용자 uid에 따라 만든 앨범들이 뜨고 -> 그 앨범들 중 하나의 앨범에 들어갔 을때 -> 위 화면처럼 게시물 상세페이지로 넘어가게 됩니다.

• ** 하나의 게시물을 확인하기 위해 기본 2~3개의 depth를 들어가야 하는 구조입니다.**

• 💡모무 서비스가 익숙하지 않거나 💡동일한 사진이 다중앨범에 들어갈 수 있도록 설정해 놓은 모무 서비스의 특성상

• 브레드크럼은 사용자를 위해 필수적으로 필요하다고 생각했습니다.*

✅ MOMOO의 브레드크럼 구현

그럼 저희가 프로젝트에서 브레드 크럼을 어떻게 사용했는지 코드를 통해 알아 보겠습니다. (+ 코드를 가져오다 보니 제가 쓰는 에디터 vsc에도 브레드크럼이 있었네요)

export default function Breadcrumb({ navList }: Props) {
  return (
    <StyledBreadcrumb $arrow={Arrow} $arrowGray={ArrowGray}>
      <ol>
        {navList.map((v, i) => {
          return (
            <li key={i} className={i === navList.length - 1 ? 'current' : ''}>
              <Link to={`/${v.path}`}>{v.text}</Link>
            </li>
          );
        })}
      </ol>
    </StyledBreadcrumb>
  );
}

1️⃣ Breadcrumb 이라는 컴포넌트를 사용하여 navList에 map을 사용합니다. 2️⃣ 디자인 구분이 필요한 부분을 위해 'current'라는 class가 있는 부분에만 스타일을 적용합니다. 3️⃣ 렌더링 부분에 link 와 text로 현재 위치를 구분해 줍니다.

<>
  <StyledH2>{albumName}</StyledH2>
  <Breadcrumb
  navList={[
         { path: 'home', text: 'Home' },
         { path: `album/${albumName}`, text: albumName || '/' },
         ]}/>
</>

1️⃣ Album.tsx에서 실제로 사용 하는 부분입니다. 2️⃣ Breadcrumb의 navList에서 path와 text를 렌더링하여 화면에 그려줍니다.

👩🏻‍💻결과

왼쪽의 양갈래 머리한 제 사진과^^ 오른쪽 상단 브레드 크럼을 확일 할 수 있습니다. 위 코드를 적용하여 앨범에 들어갔을 경우 현재 어느 앨범에 들어와 있는지 위치를 잘 구분해주는 것을 볼 수 있습니다.

✍🏻 마치며

MOMOO 라는 서비스를 만들며 접근성과 편의성에 대해 많은 생각을 하며 만들었습니다. 그 중 하나가 브레드크럼입니다. 여러 앨범을 생성하여 하나의 일기를 여러 앨범에 넣을 수 있는 우리 서비스를 사용자가 사용할 때 조금의 불편함도 없었으면 좋겠습니다.

이 외에도 접근성과 사용성 개선을 위해 팀원들과 회의를 통해 결정한 부분들이 있는데 그 부분들도 곧 블로그에 정리해 보도록 하겠습니다.(제발)

마지막으로 내새끼 우리 MOMOO 주소입니다. 💕 https://momoo-e22ab.web.app 💕 현재(12/4) 리팩토링 중이며 사용시 불편했던 점, 개선점 피드백 주시면 감사히 받아 적용해 보도록 하겠습니다.

콜백 함수 는 자바스크립트로 작성된 코드에서 아주 자주 만나게 된다. 이번엔 콜백함수 에 대한 정의 위주로 먼저 공부해 보고 예제를 통해 다시 깔끔하게 정리해보려 합니다 그럼 레츠고 ,

✅ 콜백함수란?

👉 MDN의 정의 콜백 함수는 전달인자로 다른 함수에 전달되는 함수입니다. 이는 일종의 루틴이나 동작을 완료하기 위해 외부 함수 내부에서 호출됩니다. 라고 적혀 있습니다. 이게 먼말인가요? 👀

조금 더 쉽게 정의해보자면~ 함수를 등록만 하고 어떤 이벤트가 발생했거나, 특정 시점에 도달했을 때 호출하는 함수 입니다.

• 콜백 함수는 고차 함수에 의해 호출되며, 이때 고차함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있습니다.

function dessert(count, eat, good) {
        count < 3 ? eatDessert() : goodDessert();
}

function eatDessert() {
    console.log('오늘 먹어야 할 간식을 먹어주세요');
}

function goodDessert() {
    console.log('오늘 먹어야할 간식을 모두 먹었습니다');
}

dessert(4, eatDessert, goodDessert);

정의된 내용을 기억하며 코드를 예시로 콜백함수에 대해 살펴보겠습니다~

1) dessert, eatDessert, goodDessert 3가지 함수를 선언합니다 2) dessert 함수를 호출할 때 매개변수로 count에 숫자 값을, eat과 good에 각각 eatDessert 함수와 goodDessert 함수를 전달합니다. 3) eatDessert와 goodDessert 함수가 콜백함수인 것입니다! 4) dessert 함수가 먼저 호출되고, 매개변수로 들어온 count의 값에 따라 eatDessert와 goodDessert 함수 둘 중 하나가 나중에 호출되었습니다.

👉 위에서는 count 값이 4니까 goodDessert '오늘 먹어야할 간식을 모두 먹었습니다'가 출력되겠죠?

(예시출처: 📚 알잘딱깔센 JavaScript 핵심개념)

✅ 콜백함수가 필요한 이유!

자바스크립트는 동기식 언어로 한번에 하나의 작업을 수행합니다. 이 말은 즉! 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 차례를 기다리는 것을 말합니다. (빨리빨리 한국인과 어울리지 않는 시스템)

• 자바스크립트 V8 엔진은 싱글 스레드로 동시에 여러개의 명령을 수행할 수 없습니다.
• 그렇기 때문에 만약 응답이 오래걸리는 작업이 있다면 ?
• 속도가 아주아주 느려지겠죠 🐢

💡 콜백함수를 비동기적 프로그래밍 방식으로 사용하면 자바스크립트 엔진이 브라우저나 node.js에서 제공하는 Web API에게 작업을 맡기고 다음 명령들을 수행해 속도를 빠르게 할 수 있습니다~

✅ 콜백함수를 활용하는 메서드

콜백함수를 활용하는 함수에는 forEach(), map(), filter() 가 있습니다. 각 함수에서의 사용법에 대해 살펴보겠습니다.

1. forEach() : 배열이 갖고 있는 함수로 배열 내부의 요소를 활용해 콜백 함수를 호출합니다. 2. map() : map() 메서드는 콜백 함수에서 리턴한 값들을 기반으로 새로운 배열을 만듭니다. 3. filter() : 콜백함수에서 리턴하는 값이 true인 것들만 모아서 새로운 배열을 만드는 함수로, function(value, index, array) {} 형태의 콜백함수를 사용하는 것이 기본입니다

✅ 콜백지옥

콜백지옥은 콜백함수를 익명 함수로 전달하는 과정에서 또 다시 콜백 안에 함수 호출이 반복되어 코드의 뎁스(Depts)가 깊어지는 현상입니다. -> 코드의 가독성이 떨어지니 수정하기도 어렵습니다.

// 에러 처리까지 포함된 콜백 지옥 예시입니다
step1(function (err, value1) {
    if (err) {
        console.log(err);
        return;
    }
    step2(function (err, value2) {
        if (err) {
            console.log(err);
            return;
        }
        step3(function (err, value3) {
            if (err) {
                console.log(err);
                return;
            }
            step4(function (err, value4) {
                // ...
            });
        });
    });
});

콜백지옥으로부터 탈출하기 위해 promise, async, await을 사용하여 callback 지옥을 벗어날 수 있습니다.

이 부분에 대해서는 다음 블로그글에서 자세하게 다뤄보겠습니다😎

📝 Reference

• MDN 콜백함수
• 📚 알아서 잘 딱 깔끔하고 센스있게 정리하는 JavaScript 핵심 개념

💡 핵심 -> this의 값은 함수를 호출한 방법에 의해 결정되는 자기 참조 변수! 입니다. 그럼 각 상황별로 this가 어디에 바인딩되는지 알아보러 가보죠! 👉 바인딩? -> 식별자와 값을 연결하는 과정으로, this와 this가 가리킬 객체를 바인딩쓰

✅ This의 특징

📍 1. 전역공간에서의 this

🚗 car 라는 객체에 name과 getName이라는 정보를 담아 줍니다. 그리고 🚙 globalCar 라는 전역 변수를 생성해 준뒤, car.getName이라는 함수를 할당해 줘볼게요

 const car = {
      name: "KIA",
      getName: function () {
        console.log("car getName", this);
      },
    };

const globalCar = car.getName;
    globalCar();

이때 globalCar()을 호출하면 어떤 값이 찍힐까요? car 의 이름인 "KIA" 라는 값이 찍힐까요? 그렇지 않습니다. 두둥 아래처럼 this에 window객체가 찍힙니다.

이유는 globalCar(); 는 누가 불렀는지 멘션없이 밖에서 호출되었으므로 최상단 window 객체가 부른것입니다.
💡 핵심 -> this의 값은 함수를 호출한 방법에 의해 결정된다.

📍2. 메소드안에서 this

🚗 car 라는 객체에 name과 getName이라는 정보를 담아 줍니다.

 const car = {
      name: "KIA",
      getName: function () {
        console.log("car getName", this);
      },
    };

    car.getName();
}

car의 getName은 어떤 값을 print 할까요? 이곳에서 this는 car 그 자체를 가리키므로 예상대로 아래와 같이 name:"KIA" , getName 함수가 나옵니다.

그럼 car의 name만 결과값으로 받고 싶다면? 아래처럼 this.name을 적어주면 "KIA" 만 출력됩니다

 const car = {
      name: "KIA",
      getName: function () {
        console.log("car getName", this.name);
      },
    };

    car.getName();
}

📍3. 함수안에서 this

💡 함수안에서 this는 함수 주인에게 바인딩 됩니다.

function exFunction() {
  return this;
}
console.log(exFunction());

그럼 위 예시는 어떤 값을 print 할까요? 아래처럼 window가 나옵니다 왜냐? 함수의 주인이 window객체이기 때문입니다.

👉 하지만 엄격모드 "use strict" 에서는 함수 내의 this에 디폴트 바인딩이 없어서 undefined가 print됩니다.

"use strict";

function exFunction() {
  return this;
}
console.log(exFunction());

📍4. 이벤트 핸들러 안에서 this

👉 id가 btn이라는 값을 가진 버튼을 만들었습니다. 그리고 이 버튼을 누를 때 cargetName함수를 호출하겠습니다~

 <button id="btn">who are you</button>

이 상황에서 this는 어떤 값이 나올까요? car.getName이니까 car가 나올까요? 결과는

 const car = {
        name: "KIA",
        getName: function () {
          console.log("car getName", this);
        },
      };

      const button = document.getElementById("btn");
      button.addEventListener("click", car.getName);

아래와 같이 버튼을 누르면 버튼 태그 자체가 print됩니다. 왜? 이벤트리스너를 통해서 get.Name을 button이 호출했기 때문에 this는 button 태그 그 자체가 됩니다. 다시 한번 짚고 넘어갈게요 💡 핵심 -> this의 값은 함수를 호출한 방법에 의해 결정된다.

📍5. 화살표 함수로 쓴 this

화살표 함수에서의 this는 전역 컨텍스트에서 실행되더라도 this를 새로 정의하지 않고, 함수가 속해있는 곳의 상위 this를 계승 받습니다. -> 이게 먼말이고 ? 즉, *화살표 함수에서의 this는 바깥 함수나 클래스의 this를 받아서 씁니다. *

coolCar 안에 innderFunc 함수를 화살표 함수로 만들어 줌으로 써 속해있는 상위 범위의 this를 상속 받습니다. 상위에 있는 getName의 this를 상속 받는거죠~

     const coolCar = {
        name: "benz",
        getName: function () {
          console.log("getName", this);
          const innderFunc = () => {
            console.log("innerFunc", this);
          };
          innerFunc();
        },
      };
      coolCar.getName();

그래서 아래와 같이 둘다 동일한 값이 print되는걸 알 수 있습니다.

✅ This 값을 사용자의 의도대로 조작하기

👉 this 값을 사용자 의도대로 정해주기 위해선 명시적으로 짝을 지어주면 (바인딩 하면) 됩니다. 이 때 call, apply, bind를 사용할 수 있습니다.

📍call() 과 apply()

💡 여기서 call()과 apply() 메서드는 Function Object에 기본적으로 정의된 메서드입니다 💡 call() -> 인수 목록 , apply() -> 인수 배열을 받는다는 점이 중요한 차이점입니다.

call과 apply는 함수를 호출하는 함수입니다. 뭐 그냥 실행하는게 아니라~ 첫 번째 인자에 this로 세팅하고 싶은 객체를 넘겨주어 this를 바꾸고나서 실행합니다. 아래 예시를 살펴보겠습니다~

      const obj = {name: "Yona"};

      const greeting = function (city) {
        console.log(`Hi! my name is ${this.name}, I live in ${city}`);
      };

      greeting("seoul");
      greeting.call(obj, "seoul");
      greeting.apply(obj, ["seoul"]);

print된 값은 아래와 같습니다~

1) 처음 greeting("soeul")의 경우에 greeting이 실행 될 때 this에 아무런 세팅이 되어있지 않으므로 this는 window객체입니다~

2) 두 번째, 세번째 경우는 greeting.call(obj, "seoul");와 greeting.apply(obj, "seoul")은 this를 obj로 변경시켰으므로 원하는값이 나옵니다~

다시한번 짚고 넘어가자면

👉 call과 apply의 다른점은, 첫 번째 인자(this를 대체할 값)를 제외하고, 실제 greeting에 필요한 파라미터를 입력하는 방식입니다. call과는 다르게 apply함수는 두 번째 인자부터 모두 배열에 넣어야 한다는 점 ~

📍bind()

bind 함수가 call, apply와 다른점은 함수를 실행하지 않는다는 점입니다. 대신 bound함수를 리턴합니다. 이 bound함수(someoneGreeting)은 이제 this를 obj로 갖고 있기 때문에 나중에 사용해도 됩니다.

      const obj = {name: "Yona"};

      const greeting = function (city) {
        console.log(`Hi! my name is ${this.name}, I live in ${city}`);
      };

      const someoneGreeting = greeting.bind(obj);
      someoneGreeting("seoul");

print된 값은 아래와 같습니다~

📝 Reference

• MDN this

• MDN Function.prototype.call()

• JavaScript 개발자라면 꼭 알아야 할 this

• 자바스크립트에서 사용되는 this에 대한 설명 1

• 코딩알려주는누나 this 에서 예시를 가져와 사용했습니다~

• 생성자란 객체를 만들 때 new 연산자와 함께 사용하는 함수입니다.

• 생성자 함수에 의해 생성된 객체를 인스턴스 라고 부릅니다.
• 생성자 함수 는 new 키워드를 사용하지 않으면 일반함수와 동일하게 동작, 새로운 객체를 반환하지 않습니다. -> 그래서 함수명 첫글자는 대문자로 구분!

✅ 생성자 함수 생성하기

생성자 함수 문법은 아래와 같습니다~ (생성자 함수명 대문자로 시작하는 거 잊지 않으셨죠😎)

      function 생성자함수명(매개변수) {
        this.속성 = 값;
      }

      let 변수명 = new 생성자함수명();

👉 색과 특정 악세사리만 바뀌고 모양은 그대로인 핸드백(Bag)이 있다고 가정해볼게요 그리고 그 핸드백(Bag)을 생성자 함수로 만들어 보겠습니다 !

    function Bag(color, size, jewelry) {
        this.brand = "Yona Special";
        this.price = 1000;
        this.handle = 2;
        this.color = color;
        this.size = size;
        this.jewelry = jewelry;
      }

      this.staring = function (x) {
        if (x == "start") {
          alert(this.color + "인" + this.brnad + "가 출시되었습니다.");
        } else if (x == "stop") {
          if (x == "start") {
            alert(this.color + "인" + this.brnad + "의 재고가 없습니다.");
          }
        }
      };

      let no1Bag = new Bag("Red", "L", "Pearl");
      let no2Bag = new Bag("Green", "S", "Diamond");

이렇게 생성자 함수가 생성되었는데요 매서드를 활용해서 가방을 출시해 보겠습니다. ~

      no1Bag.staring("start");
      no2Bag.staring("start");

👉 이렇게 되면 비슷한듯 몇가지 옵션이 다른 핸드백(Bag)이 잘 출시되는걸(Alert 되는걸) 확인할 수 있습니다. 이렇게 몇개의 옵션만 다를 때 생성하여 사용하는 것이 생성자 함수입니다.

✅ Prototype의 두두둥장

prototype이란 생성자 함수로 생성한 객체들이 속성(properties)과 매서드(method)를 공유하기 위해 사용하는 객체입니다.!

그런데 우리는 손쉽게 객체를 생산할 수 있음과 동시에, 객체의 메서드를 등록 할때마다 새로운 함수를 생성하고 있습니다.

        this.sayYourName = function(){
            console.log(`안녕하세요 제 이름은 ${this.name}입니다.`);
        }

라는 코드가 있다면 1000개의 객체를 생성할때마다 1000개의 함수를 새로 만들고 있는것 입니다.🤨 자원낭비가 상당하겠죠? 이 부분을 보완하기 위해 나온게 바로 Prototype 입니다.

💡 prototype은 특정 객체에 대한 참조로, 어떠한 공간을 가르키고 있습니다.

👉 생성자 함수가 인스턴스를 생성하게 되면 그 안에는 숨겨진 프로퍼티인 [Prototype] 이 존재합니다.

코드상에서는 __proto__로 표현됩니다. __proto__ 프로퍼티는 자신을 만든 생성자 함수의 prototype을 참조하는 역할을 합니다. 즉, new 키워드를 통해 생성자 함수의 prototype과 인스턴스의 __proto__ 가 연결됩니다.

( __proto__ 는 던더프로토(dunder) 라고 읽습니다. )

비슷하게 생긴 애들이 알짱거리니까 잘 이해가 안된다면 코드를 보면서 좀 더 살펴보겠습니다~

✅ Prototype 사용하기

위에서 작성한 Bag 생성자 함수를 다시 살펴보면 새롭게 객체를 생성할 때 Function Bag 안의 내용을 처음부터 끝까지 다 읽습니다.. no1Bag, no2Bag 밖에 없지만 만약 ~no10000Bag 까지 있다면? 메모리를 정말 많이 차지하게 됩니다.

💡그래서 공통으로 사용하고 있는 값을 밖으로 빼주는 겁니다. brand, price, handle 은 생성자 함수의 매개변수가 아니라 변하지 않는 값이죠? 그럼 기존에 작성한 Bag() 을 메모리 절감을 위해 프로토타입으로 아래와 같이 수정해 보겠습니다.

      function Bag(color, size, jewelry) {
        this.color = color;
        this.size = size;
        this.jewelry = jewelry;
      }

      Bag.prototype.brand = "Yona Special";
      Bag.prototype.price = 1000;
      Bag.prototype.handle = 2;
      Bag.prototype.staring = function (x) {
        if (x == "start") {
          alert(this.color + "인" + this.brnad + "가 출시되었습니다.");
        } else if (x == "stop") {
          if (x == "start") {
            alert(this.color + "인" + this.brnad + "의 재고가 없습니다.");
          }
        }
      };

      let no1Bag = new Bag("Red", "L", "Pearl");
      let no2Bag = new Bag("Green", "S", "Diamond");

      no1Bag.staring("start");
      no2Bag.staring("start");

👉 매개변수가 아닌 brand, price, handle 값을 Bag.prototype.XXX 형식으로 밖으로 빼주었습니다. 👉 this.staring = function (x) 매서드도 인스턴트를 생성할 때 변화하지 공통적으로 변화하지 않고 사용하는 부분이라 위와 동일하게 Bag.prototype.staring 형식으로 프로토 타입으로 수정해주었습니다. 위 사진처럼 [[Prototype]] 에 데이터들이 잘 들어가 있는 모습을 확인 할 수 있씁니다. (유용해..!)

📝 Refernece

• JAVASCRIPT.Info
• 오쌤의 니가스터디-JS 객체와 생성자 함수

자바스크립가 데이터를 처리하는 과정을 알기 위해 데이터 타입에 대해서 알아보자

1. 데이터타입? & JavaScript의 데이터타입?

✅ data type이란 프로그램에서 다룰 수 있는 값의 종류를 의미한다. 변수에 대해 연산을 수행하려면 타입에 대해 알고 있어야한다. ✅ 자바스크립트의 데이터타입에는 기본형(원시형)과 참조형으로 나뉜다.

2. 원시타입 (Primitive type)

✅ immutable(불변성)하면서 새로운 값을 다시 할당할 수 있지만 이미 생성된 원시값을 변경할 수는 없다. ✅ 값을 저장하고 있는 위치가 메모리의 주소값이 가리키는 곳에 직접 할당되어 있다. ✅ 원시형 데이터 타입에는 6가지가 있다.

1) 숫자(number): 64비트 부동소수점 형식으로, 모든 숫자를 실수로 처리한다.

1-1) 숫자 변수에 담기 (아래 코드는 num이라는 변수를 생성하고, 10이라는 값을 할당하는 코드이다.)

 var num = 1;

 1-2) 숫자 연산하기
 `모든 숫자는 +, -, /, *, %를 할 수 있다.`

>```js
let num2 = num * 2;    
console.log(num2);    // num과 2를 곱한 값, 2
var remainder1 = 30 % 4;
console.log(remainder);  // 30을 4로 나눈 나머지, 2
var remainder2 = 100 % 5;
console.log(remainder2); // 100을 5로 나눈 나머지, 0

1-3) 같은 수 판별 일치연산자(===)를 이용하여 같은 수인지에 대한 정보를 확인할 수 있다. (===) , (!==) 을 사용하는 습관을 갖자

1-4) 증가시키기

a += 1;  // a = a + 1
a += 2;  // a = a + 2
a -= 1;  // a = a - 1
a *= 3;  // a = a * 3
a /= 2;  // a = a / 2 
a++;     // a = a + 1
a--;     // a = a - 1
a**      // 유효하지 않은 코드
a//      // 유효하지 않은 코드

  ### 2) 문자열(string) : 텍스트 데이터를 나타내는데 사용
  2-1) 문자열 붙이기
  `숫자들을 더할 때처럼 +를 사용하여 아래와 같이 문자열을 이을 수 있다.`
 > ```js
  let a1 = "yona";
  let a2 = "haeun";
  let result = a1 + a2;
  console.log(result); // "yonahaeun"

2-2) 문자열 길이 .length를 이용하여 문자열의 길이에 대한 정보를 얻을 수 있다.

  ```js
let str1 = "abcde";  // 5개의 텍스트를 포함하고 있는 문자열
console.log(str1.length); // 5

var str2 = "   ";  // 공백 3개
console.log(str2.length); // 3

2-3)문자열 인덱스(index)
`문자열 종류의 값들은 인덱스 정보를 이용할 수 있다. 인덱스는 항상 0 부터 시작된다.`

  ```js
    var str = "abcdef";
    console.log(str[0]); // "a"

    console.log("cde"[2]); // "e"

3) 불린값(boolean)

논리적 참, 거짓을 나타내는 true 와 false 뿐이다.

4) null

의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다.

타입을 나타내는 문자열을 반환하는 typeOf 연산자로 null 값을 출력해보면 자바스크립트 설계상의 오류이다. null이 아닌 object가 나온다.

let foo = null;
console.log(typeof foo); // object
따라서 null타입을 확인할 때는 typeOf 연산자 대신 일치 연산자(===)를 사용하여야 한다.

let foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

5) undefined

선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다.

let undef;
console.log(undef); // undefined
console.log(typeof undef); // undefined

6) 심벌(symbol)

이름의 충돌 위험이 없는 유일한 객체의 Property Key를 만들기 위해 사용한다.

var key = Symbol('key');
console.log(typeof key);     // symbol

var obj = {};
obj[key] = 'value';
console.log(obj[key]);      // value

3. 참조타입 (Reference type)

✅ mutable(가변성)하면서 내부 프로퍼티를 변경할 때 성립합니다. ✅ 주로 key-value 쌍의 데이터를 저장하며, 하나의 값만 저장되는 기본 데이터 타입과는 다르게 여러 개의 프로퍼티를 저장할 수 있다. ✅ 값이 저장된 주소값을 할당(참조)한다 ✅ 자바스크립트에서 기본 타입을 제외한 모든 값

1) 객체

2) 배열

3) 함수

4) 정규 표현식

5) ES6에서는 Map, Set, WeakMap, WeakSet 추가

4. 기본형 vs 참조형의 데이터 할당 차이점은?

기본형에는 값을 그대로 할당 한다 그리고 참조형에는 값이 저장된 주소값을 할당(참조)한다는 차이가 있다.

1) 변수 선언, 초기화, 할당

✅ 단어에 대한 개념을 먼저 정확하게 정리하고 넘어가 보자

1) 변수의 이름을 정의하는 변수선언 2) 메모리에 변수 저장을 위하 공간을 확보하는 변수 초기화 3) 이미 선언된 변수의 값을 변경하거나 새로운 값을 할당하는 변수 할당

2) 변수 선언과 데이터 할당

✅ 변수 선언의 동작 원리에 대해 살펴보자

var = a;

![](https://velog.velcdn.com/images/yona_inthe_fish/post/1d690845-b234-4956-a297-a96591ce07ab/image.png)

1) 변할 수 있는 데이터를 만들고 이 데이터의 식별자는 a 입니다 
2) 메모리 영역에서는 아래와 같이 비어있는 공간을 확보합니다. 
3) 이 공간의 이름을 a라고 지정합니다. 


<br>

✅ 데이터 할당의 흐름

> ```js
var = a;
a = 'yona';
var a = 'yona'; // 변수 선언과 할당을 한 문장으로 표현했습니다. 

1) 데이터 영역의 빈 공간(@5004 )에 문자열 "yona"를 저장합니다. 2) 변수영역에서 a라는 식별자를 검색합니다. 3) 앞서 저장한 문자열의 주소(@5004)를 @1003의 공간에 대입합니다.

선언 : 공간을 확보하고 변수명과 주소를 매칭시키는 과정 할당 : 해당 변수가 가리키는 주소의 공간에 데이터를 저장하는 과정

3) 참조형의 데이터 할당

var obj1 = {
    a : 1,
    b : 'b'
};

1) 메모리 공간을 확보하고 주소를 변수명과 매칭시키는 과정은 동일합니다. 2) 참조형 데이터들은 key : value로 묶인 쌍들로 이루어져 있습니다. -> 각 프로퍼티명과 value가 담길 주소를 매칭하기 위해서 공간을 새로 확보합니다. 3) 별도의 변수 영역 @7103 ~ ? 을 마련하고 그 영역의 주소를 @5001에 저장합니다. 4) @7103 와 @7104에 각각 a, b 프로퍼티 이름을 지정합니다. 5) 데이터 영역에서 숫자1을 검색합니다. 검색 후 결과가 없으니 @5003에 저장합니다. 6) @5003 값을 7103에 저장합니다. 7) 문자열 'b'역시 동일하게 진행합니다. 데이터영역 @5004에 저장 후 이 주소를 변수영역 @7104에 저장합니다.

📝 Reference

• 코어 자바스크립트
• MDN JavaScript의 타입과 자료구조
• [기본형과 자료형의 차이] (https://webclub.tistory.com/638)
• [surim's develog] (https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part.2#2-string-%EB%AC%B8%EC%9E%90%EC%97%B4)

자바스크립트는 명령형, 함수형, 프로토타입 기반의 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어입니다. 책과 블로그에서 많이 볼 수 있는 정의이다. 그런데 이 짧은 문장에 정확히 이해하고 있지 않은 수 많은 개념이 있다. 그래서 이 한 문장을 잘 뜯고 맛보고 즐겨보는 글을 정리해 보려 한다.

📍 1. 패러다임?

자바스크립트는 명령형, 함수형, 프로토타입 기반의 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어입니다.

💡 프로그래밍 언어는 설계 될때 각자 지향하는 패러다임을 설정한다. 💡 다중 패러다임 프로그래밍 언어란 하나 이상의 프로그래밍 패러다임을 지원하는 프로그래밍 언어이다.

💡 개발자가 프로그래밍을 위해 어떠한 '관점'을 가지고 개발을 할지에 대해서 결정을 하는데 도움을 주는 것을 의미합니다.

📍 2. 명령형과 함수형 ?

자바스크립트는 명령형, 함수형, 프로토타입 기반의 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어입니다.

1) 명령형(Imperative) 프로그래밍 -> 컴퓨터가 수행할 명령들을 순서대로 써 놓는 수행 기법 (HOW)

• 쉬운예시

  👉 아파트 1 단지 정문 앞 사거리에서 우회전해서 있는 CU에 가서 하이볼 1캔 집어서 계산대로 가. 그리고 5000원 지폐 내고 800원 잔돈 받아와.

• 코드예시

  function double (arr) {
  let results = [];
  for (let i = 0; i < arr.length; i++){
    results.push(arr[i] * 2);
  }
  return results;
  }

2) 선언형 (Declarative) 프로그래밍 -> 수행할 명령들을 순서대로 적어두는것이 아닌 무엇을 나타낼지에 대해서 관점을 두어서 프로그래밍을 수행하는 기법 (WHAT)

• 쉬운예시

  👉 하이볼 사와

• 코드예시

  function double(arr) {
  return arr.map((item) => item * 2);
  }

❓근데 JS의 내장함수인 map을 쓰면 선언형이 되는가? -> 내장형 함수로 바꿔쓰며 무엇이 바뀌었는가?를 생각해보면 정답은 추상화이다. 이미 하이볼을 사본 경험이 있다 라던가 지도어플이 있다라는 가정하에 결과에 집중한 언어

3) 함수형 프로그래밍의 장점

• 여러 가지 연산 처리 작업이 동시에 일어나는 프로그램을 만들기 쉽다.
• 멀티 코어 혹은 여러 개 연산 프로세서를 사용하는 시스템에서 효율적인 프로그램을 만들기 쉽다.
• 상태변화에 따른 부작용에서 자유로워지기 때문에 순수하게 기능 구현에 초점을 맞추어 설계할 수 있다.

4) 선언형(함수형) 프로그래밍의 단점

• 순수함수를 구현하기 위해 코드의 가독성이 좋지 않을 수 있다.
• 재귀적 코드 스타일은 무한루프에 빠질 수 있다.
• 순수함수를 쓰는건 쉬울 수 있지만, 그것들을 조합하는 것은 쉽지 않다.

📍 3. 프로토타입 기반의 객체지향 언어?

자바스크립트는 명령형, 함수형, 프로토타입 기반의 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어입니다.

1) 프로토타입 (prototype)

prototype은 특정 객체에 대한 참조입니다. 즉 어떠한 공간을 가르키고 있습니다.

• 생성자 함수가 인스턴스를 생성하게 되면 그 안에는 숨겨진 프로퍼티인 [[Prototype]] 이 존재하게 됩니다. 코드상에서는 __proto__로 표현됩니다. __proto__ 프로퍼티는 자신을 만든 생성자 함수의 prototype을 참조하는 역할을 합니다. 즉, new 키워드를 통해 생성자 함수의 prototype과 인스턴스의 __proto__ 가 연결됩니다.

(2) 객체지향 프로그래밍?

💡 프로그래밍 방법론중에 하나로, 프로그램을 작성할 때 객체들을 만들어 객체와 객체가 서로 메소드를 통해 상호작용하게 만드는 것 💡 객체 지향 프로그래밍을 사용하는 대표적인 언어로는 C++, JAVA, C#이 있습니다.

📝 Reference

• [이미지출처] (https://adjh54.tistory.com/)

❓px, em, rem의 차이에 대해 설명해주세요

▶ CSS에서 폰트 사이즈를 줄 때 설정할 수 있는 단위입니다. 각 단위의 차이점은 px은 고정적인 단위입니다. 그렇기 때문에 반응형에 적합하지 않습니다. em과 rem은 가변적인 단위입니다. em단위는 부모요소의 폰트 사이즈를 상속받습니다. 그래서 px보다는 반응형에 맞지만 중간요소가 바뀌거나, depth가 많아질 수록 관리가 어려운 단점이 있습니다. 마지막으로 rem단위는 가변적이면서도 관리가 수월한 폰트 사이즈입니다. 상위 요소에 영향을 받지 않고, 최상위요소를 기준으로 변합니다.

❓반응형 웹을 구현할 때는 이 단위 중 어떤 단위를 주로 사용하시나요

▶ 저는 주로 rem단위를 사용했습니다. 최상위요소를 기준으로 변하기 때문에 관리가 쉽고, html 폰트 사이즈를 10px로 사용했을 때 바로 계산하여 사용하기에도 편리했습니다.

❓vw,vh에 대해 설명해주세요

▶ 뷰포트(Viewport)의 너비와 높이를 기준으로 동작하는 상대적인 CSS 단위입니다. 100vw, 100vh가 전체화면의 기준이 되며 vw는 뷰포트의 1%를 vh는 뷰포트 높이의 1%를 나타냅니다.

❓반응형 브레이크 포인트는 보통 어떻게 잡으시나요?

▶ 해상도 사용 비율을 정리해두는 사이트에서 참고하여 브레이크 포인트를 잡습니다. 데스크탑 사이즈는 1280px, 테블릿사이즈로 768px 그리고 모바일사이즈에 대응하기 위해 가장 작은 사이즈로 360px로 작업을 진행합니다.

❓CSS 선택자의 우선순위에 대해 설명해 주세요

▶ CSS 선택자 우선순위란 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선적으로 적용할 것인지를 결정하는 방법입니다. 점수가 높은 선언을 우선으로 하는데 점수가 높은 순서는 !important(1000점), id선택자(100점), class 선택자(10점), 태그선택자(1점), 전체선택자(0점) 순 입니다. 그렇기 때문에 이 순서가 반영되어 우선순위가 설정됩니다.

❓페이지 크기가 변해도 항상 같은 비율을 유지하는 요소를 만들려면 css를 어떻게 설정해야 할까요?

▶ css 속성인 aspect-ratio , padding-top 혹은 calc()을 사용하여 유연하게 같은 비율을 유지하는 요소를 만들 수 있습니다. 먼저 aspect-ratio 는 요소의 크기를 가로 세로 비율대로 조정이 가능한 속성입니다. 부모 요소의 width 값을 기준으로 padding-top 속성에 % 값을 주어 비율 조정이 가능합니다. 마지막으로 calc() 함수로 비율을 조정할 수 있다.

❓Flexbox에 대해 설명해 주세요

▶ flexbox는 요소들을 유연하게 배치하기 위한 레이아웃 모델입니다. 컨테이너 내의 요소들을 행과열로 유연하게 배열하여 반응형 레이아웃을 만들 수 있습니다.

❓float의 동작에 대해 설명해 주세요

▶ Float는 CSS 위치지정 속성입니다. float는 블랙 레벨의 요소를 인라인 요소와 같이 좌우로 배치할 수 있게 하는 CSS 속성입니다. float는 element는 페이지 흐름의 일부가 되어 다른요소의 위치에 영향을 줍니다. 그래서 컨테이너가 닫히기 전에 float clear 하면 해결할 수 있습니다.

❓CSS에서 Cascading에 대해 설명해 주세요

▶ HTML element는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 합니다. 캐스캐이팅과정은 html 속성을 사용하여 직접 정의한 스타일, 더 구체적인 선택자, 동일한 중요도와 선택자를 가진다면 뒤에 나오는 규칙이 우선합니다.

❓position 속성에 대해 설명해주세요

▶ CSS에서 position 속성은 HTML 문서 상에서 요소가 배치되는 방식을 결정합니다. 많은 경우, position 속성은 요소의 정확한 위치 지정을 위해서 top, left, bottom, right 속성과 함께 사용됩니다.예로 relatice, absoulte, static, fixed, sticky이 있습니다.

❓margin과 padding에 대해 설명해주세요

▶ margin은 바깥쪽 여백, padding은 안쪽 여백을 의미합니다. 그 경계는 border를 기준으로 나눕니다.

❓HTML 렌더링 도중 JavaScript가 실행되면 렌더링이 멈추는 이유는 뭔가요?

▶ 렌더링 엔진은 HTML 한 줄씩 순차적으로 파싱하며 DOM을 생성해 나가다가 Javascript를 만나면 DOM 생성을 임시 중단합니다. DOM 생성을 임시 중단하고, 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘기게 되는데, 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성합니다.

❓BOXMODEL에 대해 설명해주세요

▶ HTML 요소를 감싸는 상자입니다. 요소, 패딩, 보더, 마진으로 구성되어 있습니다. box model은 블록박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용합니다.

❓Attribute와 Property의 차이에 대해 설명해주세요.

▶ attribute는 html document/file 안에서 property 는 html DOM tree안에서 존재합니다. 이것이 뜻하는 것은 attribute는 정적으로 변하지 않고 property는 동적으로 그 값이 변할 수 있다는 것을 내포하고 있습니다. (예를 들어 체크박스 태그가 있을 때 유저가 체크박스에 체크를 하면 attribute의 상태는 변하지 않지만 property의 상태는 checked로 변하게 됩니다.)

❓display 속성에 어떤 것들이 있는지 설명해 주세요.

▶ display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다. 이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다. 대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다.

1. 블록(block), 2. 인라인(inline)

❓CSS 애니메이션과 JS 애니메이션의 차이에 대해서 설명해 주세요.

▶ CSS 애니메이션은 외부라이브러리를 필요로 하지 않습니다, 어떤 요소가 애니메이션을 가져야 한다는 직관적인 표현이 가능합니다. 메인 쓰레드가 아닌 별도의 컴포지터 쓰레드에서 그려지기 때문에 쓰레드에서 작업하는 JS뵤다 효율적입니다.

JS애니메이션은 좀 더 정교하고 복잡한 애니메이션을 사용할 때 유리하고, 크로스 브라우징 측면에서도 JS 애니메이션을 사용하는 것이 유리합니다. 또한 브라우저 호환성도 좋습니다.

❓CSS in JS의 장단점에 대해 설명해주세요.

▶ CSS in JS 의 장점으로는 지역 스코프 스타일을 적용하기 쉽다는 것입니다. 스타일을 사용하는 리액트 컴포넌트 내부에 직접 스타일을 작성할 수 있습니다! 올바르게 사용한다면 앱의 유지보수가 크게 편해집니다. 단점은 CSS-in-JS는 런타임 오버헤드를 더합니다. ,또한 번들 크기를 늘립니다. 또한 React DevTools를 어지럽힙니다.

❓시맨틱 마크업에 대해 설명해주세요.

▶ 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말합니다. 시멘틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용하여야 합니다. 시맨틱 태그은 SEO, 웹 접근성 측면을 위해서도 고려되어야 하는 부분입니다.

❓HTML5의 태그에 대해 설명해주세요.

▶ 이전 버전보다 정보 구조를 작성하는데 유리해졌으며, div태그를 대신해서 header,nav,section,article,aside, footer등을 이용해서 좀 더 시멘틱한 구조를 만들 수 있습니다. 엑티브 x나 별도 플러그인 없이 오디오, 비디오를 실행할 수 있으며, 숫자 날짜 시간 범위와 같은 양식 요소가 추가되었습니다. 그래픽 요소로 svg, canvas 기능이 추가 되었습니다.

❓script 태그에서 Async와 Defer의 차이에 대해 설명해주세요.

▶ async는 스크립트를 다운로드 됐을 때 곧바로 실행하고 defer은 문서(HTML)을 완전히 다 읽은 후에 실행합니다. async는 먼저 다운로드된 순서대로 실행하고 defer는 정의 된 순서대로 실행합니다.

❓가상 클래스에 대해 설명해주세요.

▶ CSS선택자에 추가하는 키워드로, 우리가 선택한 요소의 조건에 따라 스타일을 입힐 수 있게 해줍니다. 종류로는, hover, active, focus 등이 있습니다.

❓margin 병합 현상에 대해 설명해주세요.

▶ 상하단 레이아웃이 맞닿는 부분에 margin 값을 부여하면 병합이 되어 동시 적용되지 않는 현상입니다. 해결방법으로는 flow-root 를 통해 block format context 를 생성하여 해결할 수 있습니다.

✅ 면접 전에 내가 한번 훑고 들어가려고 정리해본 면접대비 질문 &답변들

❓ 1. margin collapsing 이란? (마진병합)

▶ 상하단 레이아웃이 맞닿는 부분에 margin 값을 부여하면 병합이 되어 동시 적용되지 않는 현상입니다. 해결방법으로는 flow-root 를 통해 block format context 를 생성하여 해결할 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

❓ 2. button 태그와 input type=“button” 의 차이에 대해 설명하세요

▶ button 태그는 폼 태그 안에서 사용하면 기본 속성인 submit이 적용되어 클릭 시 폼이 제출됩니다. 또한 button 태그는 닫는 태그가 있어 하위 태그를 넣을 수 있고 input 태그는 그렇지 않습니다.

❓ 3. 브라우저가 웹 페이지를 랜더링하는 과정을 설명해주세요.

▶ 브라우저는 리소스를 서버에 요청하고 응답을 받아옵니다. 그 후 렌더링 엔진이 렌더트리를 생성합니다. JS 엔진은 받아온 JS를 파싱해 AST 를 생성하고 바이트코드로 변환해 실행합니다. 그 후 렌더트리를 기반으로 HTML 요소의 레이아웃을 계산한 뒤 화면에 html 요소를 페인팅 합니다. 처음 파싱과정을 거쳐서 스타일 계산을 진행합니다. 돔트리, CSSOM 을 합쳐서 레이아웃트리를 생성합니다 패인트 과정을 생성합니다. 여러가지 정보들을 화면에 그려줍니다. 시각적 부분을 그리는 작업이 진행됩니다. 마지막 컴포지팅 과정을 거쳐 레이아웃을 합쳐 줍니다.

❓ 4. 브라우저 리플로우 현상에 대해 설명해 주세요.

▶ 브라우저 랜더링의 각 단계는 반드시 전 단계의 데이터가 필요하며, html의 레이아웃이 변경될 경우 레이아웃 단계에서 랜더 트리가 재생성되며 이를 리플로우라고 합니다. 레이아웃에 변화를 주는 거의 모든 속성이 리플로우를 유발합니다. 이를 피하기 위해 GPU를 이용하는 transform 속성을 이용하여 레이아웃을 제어하는게 좋습니다.

❓ 5. 클로져(Closure)는 무엇이며, 어떻게/왜 사용하는지 설명해주세요.

▶클로저는 중첩된 함수를 이용해 사용하는 방법이며 실행 컨택스트가 끝나도 변수에 접근 가능하게 해주는 기능입니다. 은닉이나 캡슐화로 정보를 보호할 때 그리고 비동기에서 사용됩니다.

❓ 6. 호이스팅(hoisting)이란 무엇인가요?

▶변수와 함수를 선언하는 위치에 관계없이 JavaScript 엔진은 변수와 함수 선언을 스코프의 최상단으로 이동시키는 것처럼 작동합니다. 그러나 할당은 실제 코드 흐름에 따라 이루어집니다.

그러나 변수와 함수 선언에 let과 const가 사용된 경우에 이들은 TDZ(Temporal Dead Zone)라는 곳에 위치하게 되며, 실제 선언 위치 이전에는 접근할 수 없게됩니다. 변수가 선언된 시점과 초기화(첫 번째 할당)가 발생한 시점 사이의 공간을 의미합니다.

❓ 7. 이벤트 캡쳐링과 버블링에 대해 설명해주세요.

▶브라우저 화면에서 이벤트가 발생했을때 브라우저는 이벤트 대상을 찾아갑니다.

이때 상위의 window 객체부터 document, body 순으로 DOM 트리를 따라 내려갑니다. 이를 캡처링 단계라고 하며 중간에 만나는 모든 캡처링 이벤트 리스너를 실행시킵니다. 그리고 이벤트 대상을 찾고 캡처링이 끝나면 이제 다시 DOM 트리를 따라 올라가며 만나는 모든 버블링 이벤트 리스너를 실행합니다. 이를 이벤트 버블링 단계라고 합니다. 이러한 과정에서 이벤트 리스너가 차례로 실행되는것을 이벤트 전파(event propagation)라고 합니다.

❓ 8. setTimeout과 promise의 콜백함수가 있을 때 어떤게 먼저 실행되는가?

▶promise입니다.

일단, 자바스크립트는 싱글쓰레드 런타임 언어입니다. 이 말은 즉 자바스크립트는 실행될때 한 번에 한 가지 일만 할 수 있다는 의미입니다. (Single call stack) 우리가 내리는 모든 자바스크립트 명령은 메인쓰레드에 차근 차근 쌓여서 순서대로 실행됩니다. 이때 비동기적으로 실행되는 코드( setTimeout)가 있다면 그 코드는 메인쓰레드에서 task queue 라는곳으로 이동하여 대기하게 됩니다. 그리고 메인쓰레드에 있던 모든 명령들이 실행되어 텅비게 되면, 메인쓰레드를 감시하던 이벤트 루프가 테스크 큐에 있던 비동기 코드를 메인쓰레드로 이동시켜 실행하게 합니다. 순서는 명령이 메인쓰레드로 이동합니다. 메인쓰레드에 쌓인 순서대로 명령이 실행됩니다. 메인쓰레드가 clear 되면 이벤트 루프는 task queue 를 확인해서 실행 시킬것이 있는지 확인합니다.

이런 이유로 만약 timeout 의 타이머를 0으로 맞췄다 하더라도 우선 메인쓰레드에 있던 명령들이 전부 실행되고 나서 timeout 콜백 함수가 실행됩니다. 이때 만약 우리가 promise 를 사용하게 되면 콜백함수가 대기하는 곳은 테스크 큐가 아니라 마이크로 테스크 큐라는 곳에 추가됩니다. 마이크로 테스크 큐는 메인쓰레드가 클리어 되고 이벤트 루프가 테스크 큐를 확인 하기 전에 실행됩니다. 즉 앞에서 본 순서를 살짝 변경하면

순서는 명령이 메인쓰레드로 이동합니다. 메인쓰레드에 쌓인 순서대로 명령이 실행됩니다. 메인쓰레드가 clear 되면 마이크로 테스크 큐안에 있던 코드들이 실행됩니다. 이벤트 루프는 메크로 task queue 를 확인해서 실행 시킬것이 있는지 확인합니다.

이런 식으로 코드가 실행되기 때문에 promise 는 늘 timeout 보다 먼저 실행됩니다.

❓ 9. 점진적 향상 기법이란?

▶ 예전 브라우저 버전에서도 잘 동작하도록 구현하고, 최신 브라우저에는 최신 기술 제공하는 것을 말합니다.

❓ 10. 우아한 성능저하란(graceful degradation)?

▶ 최신 브라우저에서 최신 기술의 사용자 경험을 제공하지만 이전 브라우저에서는 더 낮은 수준의 사용자 경험으로 단계적으로 저하될 수 있도록 하는 방법입니다. 예로 크롬에 최적화된 페이지 입니다. 라는 안내 문구를 띄울 수 있습니다.

❓ 11. script의 async 속성과 defer 속성의 차이에 대해 설명해주세요.

▶ 돔을 사용하고 순차적으로 실행되야 한다면 defer (병렬로 다운하긴 하지만 실행은 선언 순서대로 )돔을 사용하지 않고, 실행 순서에 상관없이 스크립트를 병렬로 빠르게 로드하고 싶다면 async (Async 는 궁극적으로 코드를 실행하는데 빠르게 모든 준비를 마치기 위해서 만들어 졌습니다.)

🙄 버튼디자인

우리팀이 제작하는 페이지에는 9가지 상황에 맞춰 바뀐 아래와 같은 버튼이 필요했다.

🤯 문제시작

버튼 컴포넌트를 만들기 앞서 나는 props에 대한 이해가 아주 낮은 상태였다. 그래서 노가다 스타일이긴하나 작동되는게 중요하지! 라는 생각으로 함수이름 하나하나 나름 컨벤션을 적용해서 버튼을 만들었다.( 버튼이 500개면 500개를 만들려고 했을까..? 나는 왜 그랬을까 )

import styled from "styled-components"; 

const GreenBigBtn = styled.button`
  width: 32.2rem;
  height: 4.4rem;
  border-radius: 1rem;
  border: none;
  color: var(--white-color);
  font-size: var(--font-md-size);
  background-color: var(--main-color);
  text-align: center;
`;

const GreenMdBtn = styled.button`
  width: 12rem;
  height: 3.4rem;
  border-radius: 1rem;
  border: none;
  color: var(--white-color);
  font-size: var(--font-md-size);
  background-color: var(--main-color);
  text-align: center;
`;

const GreenSmBtn = styled.button`
  width: 9rem;
  height: 3.2rem;
  border-radius: 1rem;
  border: none;
  color: var(--white-color);
  font-size: var(--font-md-size);
  background-color: var(--main-color);
  text-align: center;
`;

const GreenSsBtn = styled.button`
  width: 5.6rem;
  height: 2.8rem;
  border-radius: 1rem;
  border: none;
  color: var(--white-color);
  font-size: var(--font-sm-size);
  background-color: var(--main-color);
  text-align: center;
`;

const WhiteBigBtn = styled(GreenBigBtn)`
  background-color: var(--white-color);
  color: var(--font-black-color);
  border:1px solid var( --gray-color);
`;

const WhiteMdBtn = styled(GreenMdBtn)`
  background-color: var(--white-color);
  color: var(--font-black-color);
  border:1px solid var( --gray-color);
`;

const WhiteSsBtn = styled(GreenSsBtn)`
  background-color: var(--white-color);
  color: var(--font-black-color);
  border:1px solid var( --gray-color);
`;

const UnactiveBigBtn = styled(GreenBigBtn)`
  background-color: var(--unactive-color);
  color: var(--white-color);
`;

const UnactiveMdBtn = styled(GreenMdBtn)`
  background-color: var(--unactive-color);
  color: var(--white-color);
`;

const UnactiveSmBtn = styled(GreenSmBtn)`
  background-color: var(--unactive-color);
  color: var(--white-color);
`;

export { GreenBigBtn, GreenMdBtn, GreenSmBtn, GreenSsBtn, WhiteBigBtn, WhiteMdBtn, WhiteSsBtn, UnactiveBigBtn, UnactiveMdBtn, UnactiveSmBtn };

🤯 문제발생

노가다 작업이 끝난 버튼을 멘토님이 보시더니 어떻게든 만들어낸 도전하는 태도가 중요하다 그 부분에선 잘했다 라고 하셨지만 손을 대기도 어렵다고 생각하셔서 일까 코드는 할말이 없다고 하시며 가셨다.

그리고 문제는 수정요청이 들어왔을 때 발생한다.. 각 버튼에 onClick 함수를 추가해 달라는 요청이 왔다. 하나 하나 찾아 들어가 수정을 했다. (500개면 500번?)

🤯 문제발생2

이 효율적이지 못한 코드로 만든 버튼을 사용하는건 아닌 것 같다는 결론으로 결국 props에 children으로 받도록 코드를 수정해 달라는 팀원들의 요청을 최종적으로 받게 되었다.

결국 공부를 해서 버튼 컴포넌트를 다시 짜게 되었다. 변경된 코드는 아래와 같다.

import styled, { css } from 'styled-components';

const BtnStyle = styled.button`
  width: ${(props) => props.width || '32.2rem'};
  height: ${(props) => props.height || '4.4rem'};
  margin: ${(props) => props.margin || '0px auto'};
  color: ${(props) => props.color || 'var(--white-color)'};
  background: ${(props) => props.bgColor || 'var(--main-color)'};
  font-size: ${(props) => props.fontSize || '1.4rem'};
  font-weight: ${(props) => props.fontWeight || '500'};
  border-radius: ${(props) => props.borderRadius || '1rem'};
  border: ${(props) => props.border || 'none'};
  cursor: pointer;
  ${(props) =>
    props.disabled &&
    css`
      background-color: var(--unactive-color);
      cursor: default;
    `};
  ${(props) =>
    props.active &&
    css`
      background-color: var(--white-color);
      color: var(--gray-color);
      border: 1px solid var(--gray-color);
      cursor: pointer;
    `};
`;

export default BtnStyle;

아주 세세하게 나눠져 변경할 수 있도록 코드를 짰다. 그리고 disabled일때와, active 되었을 때 2가지 경우도 나누어 추가시켰다.

🤗 버튼 컴포넌트를 사용한 코드

📍 html

{name && id && introduce? (
  <BtnStyle onClick={handleForm} type='submit'>입9팔9 즐기러 가기</BtnStyle>) : 
(<BtnStyle onClick={handleForm} type='submit' disabled>입9팔9 즐기러 가기</BtnStyle>)}

📍 css

  위에서 작성한 BtnStyle 버튼 컴포넌트 적용

📍 js

onst handleForm = async (e) => {
  e.preventDefault();
  if (name && id && introduce && idValid) {
    await join(); // 이미지 업로드 및 회원가입 API 요청
    navigate("/homefeed"); // 페이지 이동
  }

📍 결과물 조건부 랜더링에 따라 기존 비활성화 되어 있던 상태에서 이름, 아이디, 소개가 모두 기입 되면 활성화 버튼으로 변경될 수 있도록 제작하였다.  

😎 돌고돌아 순정

처음부터 중복 사용되는 컴포넌트의 재사용성에 대해 이해하고 진행했으면 좋았겠지만... ^^ 수정 뒤 코드는 이후 보수하기에도, 사용하기에도 아주 편리해졌다! 이런 우당탕탕 시간을 거쳐서 더 기억에 남는 효율적인 코드진행을 몸으로 경험했다.