기본기 익히기 : 주니어 프론트엔드 개발자 / 취준생을 위한 성장 로드맵 제안
웹 프론트엔드 개발은 끊임없이 진화하는 기술 세계에서 중요한 역할을 한다. 사용자와 직접적으로 상호작용하는 사용자 인터페이스를 설계하고 구현하는 데 필요한 지식과 기술이 다양하다. 하지만 초보 개발자들은 종종 어디서부터 시작해야 할지, 무엇을 학습해야 할지에 대한 방향을 잃곤 한다.
이 문서는 프론트엔드 개발자로 성장하고자 하는 이들을 위한 로드맵을 제시한다. 기본적인 자바스크립트 문법부터 시작하여, 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://ko.javascript.info/
점검사항 : 인터넷에서 javascript self test 를 통과하나? https://javascriptquiz.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%);
}
}
}
flex 속성 연습 : https://flexboxfroggy.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)를 학습하기 전에 여기서 언급된 모든 항목에 능숙해지는 것이 중요하다. 이 기초를 확실히 다지지 않고 프레임워크를 접하면, 마치 안정적인 기초 없이 건물을 지으려는 것과 같다. 문제가 생겼을 때 원인을 파악하기 어렵게 되고, 다른 사람의 코드를 이해하지 못한 채로 사용하는 상황에 빠질 수 있다.
급한 마음을 먹지말고 정도를 따라 차근차근 스텝을 밟다 보면 어느새 성장한 자신을 보게 될 것이다. 모두 화이팅!
