비전공자 개발자 이야기

[비전공자 개발자 도전기 3] 프론트엔드에서 백엔드까지 - 웹 개발 학습 여정

dev_bambi 2024. 11. 13.

728x90

SMALL

비전공자 개발자 도전기 세 번째 이야기입니다.

이 글에서는 웹 개발을 시작하면서 익힌 프론트엔드와 백엔드의 기초 기술에 대해 소개합니다.

HTML, CSS, 자바스크립트를 활용한 프론트엔드 기초와 Java, JSP로 데이터베이스와 연결해 백엔드 기초를 배워가며 느낀 점을 공유합니다.

프론트엔드 기초 로드맵

프론트엔드 개발을 시작하면서 가장 먼저 HTML과 CSS, 그리고 바닐라 자바스크립트를 배우며 웹 페이지의 기초를 이해하는 데 집중했습니다. 초보자를 위한 프론트엔드 로드맵을 간단히 정리해보면 다음과 같습니다:

HTML: 웹 페이지의 구조를 구성하는 기본 언어로, 각 요소의 배치를 정의합니다.
CSS: HTML 요소에 스타일을 적용하여 레이아웃과 디자인을 꾸미는 역할을 합니다.
JavaScript: 웹 페이지에 동적 기능을 추가하여 사용자와의 상호작용을 구현합니다.

프론트엔드 기술의 기본은 HTML과 CSS, JavaScript로 이루어져 있으며,

이러한 기초가 탄탄해야 추후에 프레임워크를 사용하더라도 그 활용도를 높일 수 있습니다.

HTML, CSS, JavaScript 학습 경험

HTML과 CSS로 웹 페이지 만들기

HTML과 CSS는 웹 개발의 시작점으로, 시각적 요소를 배치하고 스타일을 적용할 수 있습니다. 예를 들어, 간단한 HTML과 CSS 코드로 페이지의 기본 구조와 스타일을 설정해 봤습니다:

<!-- HTML 예시 -->
<!DOCTYPE html>
<html>
<head>
    <title>비전공자 개발자 도전기</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header><h1>웹 개발 기초 학습</h1></header>
    <section>
        <p>HTML과 CSS는 웹 페이지의 기본입니다.</p>
    </section>
</body>
</html>

/* CSS 예시 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
header h1 {
    color: #4CAF50;
}
section p {
    font-size: 1.2em;
    color: #333;
}

이렇게 HTML로 구조를 만들고 CSS로 스타일을 더하면서 웹 페이지의 기초를 배울 수 있었습니다.

자바스크립트로 인터랙션 추가

JavaScript는 웹 페이지에 동적 요소를 추가하는 데 사용됩니다. 예를 들어, 버튼 클릭 시 메시지를 표시하는 간단한 기능을 자바스크립트로 구현해보았습니다:

<button onclick="showMessage()">메시지 보기</button>
<script>
function showMessage() {
    alert('비전공자의 웹 개발 여정 시작!');
}
</script>

이처럼 JavaScript는 사용자의 행동에 반응하는 웹 페이지를 만드는데 필수적인 도구입니다.

백엔드 기초 로드맵

백엔드는 서버에서 데이터를 처리하고, 클라이언트와의 통신을 관리하며, 사용자 요청에 응답하는 역할을 담당합니다.

백엔드를 학습하기 위해 익혀야 하는 주요 기술은 다음과 같습니다:

서버 언어: 백엔드 로직을 구현하는 언어로, Java, Python, Node.js 등이 있습니다.
이 글에서는 Java를 사용하여 서버 로직을 배웠습니다.
서버 프레임워크:
서버 언어의 기능을 확장하고 편리하게 사용하는 도구로, Java의 경우 Spring, Python의 경우 Django 등이 있습니다.
데이터베이스:
클라이언트 데이터를 저장하고 관리하는 시스템
MySQL, PostgreSQL, MongoDB와 같은 관계형 및 비관계형 데이터베이스가 있습니다.
RESTful API:
서버와 클라이언트 간의 통신을 규격화하여 데이터를 주고받는 방식
HTTP 메서드(GET, POST, PUT, DELETE)를 통해 데이터를 전달합니다.
보안:
사용자 데이터 보호를 위한 보안 요소로, 인증(Authentication), 인가(Authorization) 및 데이터 암호화 등이 중요합니다.

백엔드 기초는 서버와 데이터베이스, 그리고 클라이언트와의 통신에 대한 기본 이해를 바탕으로 점차 확장될 수 있습니다.

이 로드맵을 통해 필요한 기술을 순차적으로 학습하면서 백엔드 개발의 구조와 흐름을 이해할 수 있었습니다.

백엔드 학습과 데이터베이스 기초

Java와 JSP로 서버 로직 구현

백엔드는 서버 측의 로직을 관리하며, Java와 JSP를 사용하여 간단한 서버 로직을 구현했습니다.

예를 들어, JSP로 데이터베이스의 회원 정보를 출력하는 코드를 작성할 수 있었습니다:

<%@ page import="java.sql.*" %>
<html>
<body>
<h2>회원 정보</h2>
<% 
    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "username", "password");
    Statement stmt = conn.createStatement();
    ResultSet rs = stmt.executeQuery("SELECT * FROM members");
    while(rs.next()) {
        out.println("ID: " + rs.getInt("id") + " Name: " + rs.getString("name") + "<br>");
    }
    conn.close();
%>
</body>
</html>

데이터베이스와 기본 쿼리

데이터베이스 학습의 첫 단계로, 기본적인 SQL 쿼리를 활용해 데이터를 추가하고 조회하는 방법을 배웠습니다:

INSERT 쿼리: 데이터를 테이블에 삽입합니다.
예: INSERT INTO members (name, age) VALUES ('홍길동', 25);
SELECT 쿼리: 테이블에서 데이터를 조회합니다.
예: SELECT * FROM members;

데이터베이스와 연결하여 정보를 조회하고 관리하는 방법을 배우면서 백엔드의 중요성과 기능을 체험할 수 있었습니다.

💡 다음 글 예고:
다음 글에서는 프로젝트 경험과 팀 프로젝트에서 성장한 이야기를 공유하겠습니다.

비전공자로서 팀을 이끌며 겪었던 다양한 상황을 솔직하게 전달할 예정입니다.

시리즈: 비전공자 개발자 성공 스토리 [3/8]

이전 글: 학습의 길에 오르다 - 이젠아카데미에서의 도전

다음 글: 첫 팀 프로젝트 리더 경험 – 어려움과 성장을 함께한 개발 여정