> ## Content Index
> Fetch the complete content index at: https://blog.everyhelloworld.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# 기본기 익히기 : 주니어 프론트엔드 개발자 / 취준생을 위한 성장 로드맵 제안
- URL: https://blog.everyhelloworld.com/junior-frontend-roadmap/
- Published: 2023-09-07T12:15:22.000Z
- Updated: 2023-09-11T10:13:18.000Z
- Author: Dave Lee
- Tags: frontend, javascript, devlog

웹 프론트엔드 개발은 끊임없이 진화하는 기술 세계에서 중요한 역할을 한다. 사용자와 직접적으로 상호작용하는 사용자 인터페이스를 설계하고 구현하는 데 필요한 지식과 기술이 다양하다. 하지만 초보 개발자들은 종종 어디서부터 시작해야 할지, 무엇을 학습해야 할지에 대한 방향을 잃곤 한다. 

이 문서는 프론트엔드 개발자로 성장하고자 하는 이들을 위한 로드맵을 제시한다. 기본적인 자바스크립트 문법부터 시작하여, DOM 조작, 네트워크 통신, 클라이언트 사이드 스토리지 다루기 등 필수적인 핵심 주제들을 다룬다. 이 로드맵을 따라가며 단계별로 지식과 기술을 습득한다면, 프론트엔드 개발의 깊은 바다에 한 걸음 더 들어갈 준비가 되어 있을 것이다.

## 0\. 개발환경 준비

hello world를 한 것과 하지 않은 것은 많이 다르다. 

브라우저 부분 : vscode + parcel + go live 정도로 빠르게 환경을 세팅해보자.

자바스크립트 공부 부분 : jsfiddle 을 사용하거나 로컬에 nodejs를 설치.

점검사항 : 나는 parcel+go live로 chrome에 helloWorld를 띄울 수 있나? + console.log(1+2); 를 실행시켜 3이라고 어디 출력되게 할 수 있나?

## 1\. 자바스크립트 문법

웹 프론트엔드의 세계에 발을 디디려면 자바스크립트의 기본 문법을 통달하는 것은 첫 번째 필수 과제다. 변수 선언부터 시작해서 조건문, 반복문, 함수 같은 기본 구조는 중요한 학습 지점이다. 그리고 자바스크립트의 본질인 배열과 객체 같은 기본 자료형에도 집중해야 한다.

데이터 처리의 기본 도구로서 `forEach`, `map`, `reduce`와 같은 배열 메서드는 반드시 숙지해야 한다. 특히 `map`은 배열의 각 항목을 변형하는데, `reduce`는 배열의 여러 값을 하나로 결합하는 작업을 진행한다. 자바스크립트의 함수형 패러다임 관련 혜택을 십분 누리려면 꼭 익숙해지자.

데이터 저장과 관리를 위한 `Map`과 `Set` 같은 고급 컨테이너는 데이터를 작은 시간복잡도로 효율적으로 다루는데 도움을 준다.

그리고 모던 웹 개발에서는 비동기 처리가 피할 수 없는데, 이를 위한 `async/await` 문법은 비동기 작업의 복잡함을 줄이고 코드의 가독성을 향상시키는 데 필수적이다. 이 문법을 통해 콜백 지옥을 피하고 프로미스를 더 효과적으로 다룰 수 있다.

참고자료:

mdn : [https://developer.mozilla.org/ko/](https://developer.mozilla.org/ko/?ref=blog.everyhelloworld.com)

모던 자바스크립트 튜토리얼 : [https://ko.javascript.info/](https://ko.javascript.info/?ref=blog.everyhelloworld.com)

점검사항 : 인터넷에서 javascript self test 를 통과하나? [https://javascriptquiz.com/](https://javascriptquiz.com/?ref=blog.everyhelloworld.com)

## 2\. 타입스크립트 문법

타입스크립트는 자바스크립트의 슈퍼셋으로, 정적 타입 검사와 클래스 기반 객체 지향 프로그래밍을 추가한 언어다. 한마디로 자바스크립트 + 타입.

현대의 자바스크립트 개발 환경에서 타입스크립트의 도입은 거의 필수가 되었다. 대부분의 현업에서는 그 장점을 인지하고 적용하고 있다. 타입스크립트의 강점을 활용하면 개발 프로세스가 더욱 견고하고 효율적이 된다. 따라서, 타입스크립트도 반드시 마스터해야 하는 핵심 주제 중 하나다.

```
type Fruit = 'orange' | 'apple' | 'kiwi';

function getFavoriteFruit(name: string): Fruit | null {
    if (name === "John") {
        return "orange";
    } else if (name === "Jane") {
        return "apple";
    } else if (name === "Jack") {
        return "kiwi";
    } else {
        return null;
    }
}

```

## 3\. html & css

HTML과 CSS는 웹 프론트엔드 개발의 기본 기술이다. 특히 CSS의 핵심 속성들을 능숙하게 다룰 수 있어야 웹 페이지의 레이아웃과 디자인을 원하는 대로 구성할 수 있다. Flex는 현대 웹 디자인에서 레이아웃을 구성하는 핵심 기술이므로 꼭 학습해야 한다.

포털 사이트 같은 복잡한 웹 페이지를 스타일링하는 연습은 이러한 능력을 키우는데 중요하다. CSS를 어느정도 연습해 보았다면, 네이버나 다음의 메인 화면을 html과 css로 표현할 수 있는지 스스로 체크해보자.

SCSS는 CSS의 강력한 확장으로, 변수, 중첩, 믹스인과 같은 기능을 제공하여 스타일 작성을 더욱 간결하고 재사용성 있게 만든다. 이를 통해 코드의 유지보수가 쉬워지며, 효율적인 스타일링 작업이 가능하다.

```
// 변수 선언
$primary-color: #3498db;
$secondary-color: #2c3e50;

// 믹스인 생성
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

// 중첩 및 부모 선택자 사용
.container {
  background: $primary-color;
  
  .button {
    background: $secondary-color;
    padding: 10px 15px;
    @include border-radius(5px); // 믹스인 사용
    
    &:hover {  // 상위 요소의 hover 상태를 참조
      background: darken($secondary-color, 10%);
    }
  }
}

```

scss의 예

flex 속성 연습 : [https://flexboxfroggy.com/](https://flexboxfroggy.com/?ref=blog.everyhelloworld.com)

점검사항 : 포털사이트 메인페이지를 외부 문서 도움 없이 클론할 수 있나?

## 4\. DOM에 대한 이해

DOM을 다루는 능력은 웹 개발에서 핵심적인 스킬이다. JavaScript를 통해 웹 페이지의 요소를 동적으로 생성, 선택 및 조작하는 방법을 익혀야 한다. 또한, 요소에 이벤트 핸들러를 연결하여 사용자의 인터랙션에 반응하는 대화형 웹 애플리케이션을 구축할 수 있다. 이러한 기술은 웹사이트가 사용자 경험을 향상시키기 위해 동적으로 콘텐츠를 변경하거나 반응하는 데 필수적이다.

```
// DOM 요소 선택
const ulElement = document.querySelector('ul');

// 새로운 li 요소 생성
const liElement = document.createElement('li');
liElement.textContent = '새로운 아이템';

// ul에 li 요소 추가
ulElement.appendChild(liElement);

```

```
// 버튼 요소 선택
const buttonElement = document.querySelector('button');

// 클릭 이벤트 핸들러 정의
function handleClick() {
  alert('버튼이 클릭되었습니다!');
}

// 버튼에 클릭 이벤트 리스너 추가
buttonElement.addEventListener('click', handleClick);

```

점검사항 : 간단한 모바일 페이지 한 화면 정도를 html태그 없이 element만으로 구성할 수 있나?

## 5\. 네트워크 통신

프론트엔드 개발자는 네트워크 통신과 `fetch` 기능에 대한 이해가 필요하다. 서버와의 통신은 웹 애플리케이션의 중요한 부분이다. REST API를 통해 서버에서 데이터를 받아 화면에 요소를 동적으로 표시할 수 있다. 사용자의 입력 정보를 서버에 전송하는 방법도 중요하다. 이 과정에서 axios 같은 외부 라이브러리를 사용하지 않고 순수한 자바스크립트로 연습하자.

```
fetch('https://example.com/api/resource', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        key1: 'value1',
        key2: 'value2'
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

```

```
const url = new URL('https://example.com/api/resource');
url.searchParams.append('key1', 'value1');
url.searchParams.append('key2', 'value2');

fetch(url)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

```

서버를 직접 구축하는 것은 부담도 되고 신경을 분산시킨다. 공개된 REST API 서버나 npm의 `json-server` 패키지를 사용하여 개발을 시작할 수 있다. 이 방식은 서버 환경을 경험하면서도 설정과 관리의 복잡함을 피할 수 있다.

crud의 형식만을 확인하고 싶다면 JSONPlaceholder를 사용하면 된다. 다만 `JSONPlaceholder`에서 `POST` 요청을 통해 데이터를 보내면, 해당 서비스는 마치 데이터를 추가한 것처럼 응답을 반환하지만, 실제로 데이터베이스에 데이터를 영구적으로 저장하지 않는다. 따라서 `POST`로 보낸 데이터를 나중에 다시 `GET` 요청으로 검색하는 것은 불가능하다. 이를 원한다면 로컬 개발환경 또는 glitch에 json-server를 앉혀서 사용하자.

점검사항 : 혼자서 fetch로 JSONPlaceholder의 어떤 공개된 api에 호출해 결과를 받아올 수 있나? 받아온 것을 화면에 뿌려보자. glitch에 json-server를 설치하고 구동할 수 있나?

## 6\. 클라이언트 스토리지

웹 개발에서 클라이언트 사이드에 정보를 저장하는 기능은 필수적이다. 여기에는 주로 `local storage`, `session storage`, 그리고 `cookie` 세 가지 방법이 사용된다.

**Local Storage**: 웹 페이지의 세션이 종료되어도 정보가 저장되는 키-값 저장소다. 사용자의 설정, 테마, 기타 지속적으로 유지되어야 하는 데이터를 저장하는 데 적합하다.

**Session Storage**: 웹 페이지의 세션이 종료되면 정보도 사라지는 키-값 저장소다. 일회성 로그인이나 임시 설정 등, 일시적인 데이터 저장에 사용된다.

**Cookie**: 웹 서버와 클라이언트 간에 교환되는 작은 데이터 조각들이다. 세션 관리, 사용자 추적, 사이트의 방문 기록 저장 등에 주로 사용된다. 특히, 도메인이나 오리진이 다를 때의 쿠키 처리 방법을 이해하는 것은 중요하다.

```
// 로그인 함수
async function login(username, password) {
    try {
        const response = await fetch('https://your-server.com/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: username,
                password: password
            })
        });

        if (response.ok) {
            const data = await response.json();

            // token은 cookie에 저장되었을 것임

            // 로그인 후 필요한 사용자 정보는 local storage에 저장
            localStorage.setItem('user', JSON.stringify(data.user));
            
            alert('로그인 성공!');
        } else {
            alert('로그인 실패');
        }
    } catch (error) {
        console.error('로그인 중 에러 발생:', error);
    }
}

// 사용 예:
login('exampleUser', 'examplePassword');

```

또한, 현대의 웹 애플리케이션에서는 보안 로그인의 원리와 `JWT (JSON Web Token)`를 이해하는 것이 중요하다. JWT는 클라이언트와 서버 간의 안전한 정보 전송을 위해 설계된 셀프 컨테인된 토큰으로, 권한 부여에 주로 사용된다. JWT의 동작 원리와 그것을 어떻게 안전하게 저장하고 사용하는지를 배우는 것은 현대 웹 개발에서 빠질 수 없는 부분이다.

점검사항 : 쿠키는 사실 서버개발자가 좀 도와주지 않으면 공부가 힘들다. storage에 자료를 쓰고 읽는 것 정도를 해보고 쿠키는 하루정도 nodejs 서버를 구성한 다음 해보자. (서버와 클라이언트 양쪽에 credentials에 관련한 옵션을 켜야한다. )

## 7\. spa & router

spa와 router에 대해 공부하자. 

SPA(Single Page Application)는 웹 애플리케이션의 모든 작업을 단 하나의 웹 페이지 내에서 처리하는 디자인 접근법이다. 전통적인 웹 페이지 로딩을 제거하여 사용자에게 더욱 빠르고 부드러운 경험을 제공한다. (상단 주소줄의 url은 바뀌는데 화면은 번쩍거리지 않음)

이 때 특정 url에 어떤 화면을 대응시켜 주는 것이 router이다. 처음에는 가볍게 hash router에 대해 공부하자. hash router를 간단히 맛만 보자면,

```
window.addEventListener("DOMContentLoaded", () => {
    const app = document.getElementById('app');

    function render(content) {
        app.innerHTML = content;
    }

    function homeRoute() {
        render('<h1>Home</h1><p>Welcome to the homepage!</p>');
    }

    function aboutRoute() {
        render('<h1>About</h1><p>This is the about page!</p>');
    }

    function notFoundRoute() {
        render('<h1>404</h1><p>Page not found!</p>');
    }

    function handleHashChange() {
        const hash = window.location.hash.slice(1); // Remove the '#' character
        switch (hash) {
            case '':
            case '/':
                homeRoute();
                break;
            case '/about':
                aboutRoute();
                break;
            default:
                notFoundRoute();
                break;
        }
    }

    // Initially load the correct page
    handleHashChange();

    // Handle hash changes
    window.addEventListener('hashchange', handleHashChange);

    // You can also add event listeners to any DOM elements to change the hash
    // For example:
    // someButton.addEventListener('click', () => {
    //     window.location.hash = '/about';
    // });
});

```

점검사항 : 위 라우팅을 보지 않고 작성할 수 있는가? 그 결과 화면이 번쩍거리지 않으면서도 url이 바뀌고 화면 내용도 바뀌는걸 확인했는가?

## 8\. 최종점검 - 나는 스스로 blog service를 만들 수 있는가

여기까지 왔으면 블로그 서비스를 만들 수 있어야 한다. 다음과 같은 기능을 가지는 서비스를 간단히 만들어보자.

- 회원가입 (입력 폼 검증)
- 로그인
- 글 리스트 (모든 사람이 쓴 글, 내가 쓴 글 조회 기능)
- 글 쓰기
- 글 보기
- 글 보기 하단에 해당 글의 모든 댓글 표시
- 댓글 쓰기
- 댓글 지우기 (자기것만)
- 글 지우기 (자기것만)

## 결론

프레임워크 (예: React, VueJS)를 학습하기 전에 여기서 언급된 모든 항목에 능숙해지는 것이 중요하다. 이 기초를 확실히 다지지 않고 프레임워크를 접하면, 마치 안정적인 기초 없이 건물을 지으려는 것과 같다. 문제가 생겼을 때 원인을 파악하기 어렵게 되고, 다른 사람의 코드를 이해하지 못한 채로 사용하는 상황에 빠질 수 있다.

급한 마음을 먹지말고 정도를 따라 차근차근 스텝을 밟다 보면 어느새 성장한 자신을 보게 될 것이다. 모두 화이팅!