내 여정에 대한 반성: 초급 부동산 목록 풀스택 앱 구축

처음 Python을 배우기 시작했을 때 그 여정이 어디로 갈지 전혀 몰랐습니다. 루프, 함수, 객체 지향 프로그래밍과 같은 기본 개념을 다루며 Python 튜토리얼에 뛰어들었던 기억이 납니다. 오늘은 백엔드용 Flask와 프런트엔드용 React를 조합하여 풀스택 부동산 목록 앱을 구축했습니다. 이 프로젝트는 도전이었을 뿐만 아니라 제가 개발자로서 성장하는 데 도움이 된 놀라운 학습 경험이었습니다. 이 여정을 안내하고 이 앱을 구축하면서 배운 몇 가지 주요 측면을 강조하겠습니다.

시작: Python의 기초 학습

Python을 시작했을 때 Python이 다재다능하고 초보자에게 친숙한 언어라는 것을 알았습니다. 그러나 대부분의 초보자와 마찬가지로 나 역시 많은 어려움에 직면했습니다. 구문을 이해하고, 디버깅하는 방법을 배우고, Python 라이브러리에 익숙해지는 것이 제가 극복해야 할 장애물이었습니다. 기본을 파악하기 위해 간단한 계산기, 할 일 목록 CLI 앱 등 소규모 프로젝트를 진행하면서 수많은 시간을 보냈습니다.

부동산 목록 앱 작업을 시작하면서 이러한 기초 연습이 효과를 발휘했습니다. Python의 기본은 깔끔하고 효율적인 코드를 작성하는 데 필수적이었습니다. 특히 모델을 만들고 앱의 데이터를 처리할 때 더욱 그렇습니다.

저는 경량 웹 프레임워크인 Flask를 사용하여 백엔드 구축부터 시작했습니다. Flask는 사용하기 간단하지만 Python 기본 사항에 대한 이해가 필요합니다. 초기 단계에는 가상 환경을 설정하고 프로젝트를 구성하여 데이터베이스 상호 작용을 단순화하는 ORM(Object Relational Mapping)용 SQLAlchemy와 같은 필요한 모든 라이브러리가 설치되었는지 확인하는 작업이 포함되었습니다.

Flask로 백엔드 구축

부동산 목록 앱의 백엔드는 사용자 인증, 부동산 목록, 애플리케이션 및 위시리스트를 처리하도록 설계되었습니다. 이를 위해서는 사용자, 속성 및 애플리케이션을 포함하여 각각 고유한 필드 및 관계 집합이 있는 여러 모델을 만들어야 했습니다.

다음은 SQLAlchemy를 사용하여 사용자 모델을 정의한 방법에 대한 스니펫입니다.

from flask_sqlalchemy import SQLAlchemy

db = SQLAlchemy()

class User(db.Model):
    __tablename__ = 'users'

    id = db.Column(db.Integer, primary_key=True)
    username = db.Column(db.String(50), unique=True, nullable=False)
    email = db.Column(db.String(100), unique=True, nullable=False)
    password = db.Column(db.String(100), nullable=False)
    # Relationships
    properties = db.relationship('Property', backref='owner', lazy=True)

이 코드 조각은 사용자 이름, 이메일, 비밀번호와 같은 필드가 포함된 사용자 모델 생성을 보여줍니다. 또한 속성 모델과 일대다 관계를 설정했는데, 이는 사용자(에이전트)를 나열된 속성에 연결하는 데 매우 중요했습니다.

React로 프런트엔드 문제 해결

Python에 익숙하기 때문에 백엔드는 대부분 간단했지만 프런트엔드는 완전히 새로운 도전이었습니다. 저는 컴포넌트 기반 아키텍처와 활발한 생태계 때문에 React를 선택했습니다. 하지만 React를 배운다는 것은 나에게는 덜 익숙했던 언어인 JavaScript에 뛰어드는 것을 의미했습니다.

저는 부동산 목록 페이지, 사용자 등록 페이지, 애플리케이션 관리 페이지 등 애플리케이션의 다양한 부분에 대해 재사용 가능한 구성 요소를 만드는 것부터 시작했습니다. 예를 들어 PropertyAgent 구성 요소를 사용하면 에이전트가 부동산 목록을 생성, 편집 및 삭제할 수 있습니다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './PropertyAgent.css';

const PropertiesAgent = () => {
    const [properties, setProperties] = useState([]);
    const [newProperty, setNewProperty] = useState({ title: '', description: '', price: '', location: '', property_type: 'Apartment' });
    const [error, setError] = useState('');
    const [success, setSuccess] = useState('');

    useEffect(() => {
        fetchProperties();
    }, []);

    const fetchProperties = async () => {
        try {
            const response = await axios.get('/properties', {
                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
            });
            setProperties(response.data || []);
        } catch (error) {
            setError('Error fetching properties');
        }
    };

    const handleCreateProperty = async (event) => {
        event.preventDefault();
        try {
            await axios.post('/properties', newProperty, {
                headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
            });
            setSuccess('Property created successfully!');
            fetchProperties();
        } catch (error) {
            setError('Error creating property');
        }
    };

    return (
        <div>
            {/* JSX for rendering the properties and the form to create a new property */}
        </div>
    );
};

export default PropertiesAgent;

이 코드 조각은 React 후크(useState 및 useEffect)를 사용하여 상태를 관리하고 백엔드 API에서 데이터 가져오기와 같은 부작용을 처리하는 방법을 보여줍니다.

유용한 기술적 측면: JavaScript의 비동기 특성 이해

React와 JavaScript를 사용하면서 배운 가장 중요한 측면 중 하나는 비동기 작업을 처리하는 방법이었습니다. JavaScript의 비차단 비동기 특성은 특히 API 호출을 처리할 때 초보자에게 다소 어려울 수 있습니다.

예를 들어 백엔드에서 데이터를 가져오려면 async/await 구문이 포함된 비동기 함수를 사용해야 합니다.

const fetchProperties = async () => {
    try {
        const response = await axios.get('/properties', {
            headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        });
        setProperties(response.data || []);
    } catch (error) {
        setError('Error fetching properties');
    }
};

async/await를 사용하면 Promise를 사용하는 것보다 코드를 더 읽기 쉽고 디버깅하기가 더 쉽습니다. 또한 해당 데이터에 의존하는 작업이 실행되기 전에 데이터를 가져오도록 보장하는데, 이는 원활한 사용자 경험을 유지하는 데 중요합니다.

되돌아보기: Python 기초부터 풀 스택 개발까지의 성장

돌이켜보면 Python 기본을 배우는 것부터 풀 스택 애플리케이션을 구축하는 것까지의 여정은 믿을 수 없을 만큼 보람 있었습니다. 저는 코딩 기술을 향상했을 뿐만 아니라 다양한 기술과 프레임워크를 사용해 작업하면서 귀중한 경험을 얻었습니다.

이 부동산 목록 앱을 구축하면서 프로그래밍 기본 사항에 대한 탄탄한 기초를 갖추는 것이 중요하다는 사실을 배웠습니다. 또한 소프트웨어 개발에서는 학습이 멈추지 않는다는 생각을 강화했습니다. 마스터해야 할 새로운 프레임워크, 라이브러리 또는 도구는 항상 존재하며 각 프로젝트는 고유한 과제를 제시합니다.

이 여정에서 가장 만족스러운 측면 중 하나는 앱이 실제로 구현되는 모습을 본 것입니다. 백엔드 설정부터 사용자 인증 처리, 동적이고 반응성이 뛰어난 프런트엔드 구성 요소 구축에 이르기까지 모든 단계가 학습 기회였습니다.

결론

결론적으로 이 부동산 목록 앱 작업은 인내, 지속적인 학습, 새로운 도전에 대한 개방성의 중요성을 강조한 귀중한 경험이었습니다. 개발자로서 계속 성장하면서 미래가 어떻게 될지, 그 과정에서 얻게 될 새로운 기술과 지식이 기대됩니다.

이제 막 시작했다면 계속 코딩하고, 계속 배우고, 자신이 익숙한 영역에서 벗어나게 만드는 프로젝트에 참여하는 것을 두려워하지 말라는 조언이 있습니다. 수정하는 모든 버그, 배우는 모든 새로운 기술, 완료하는 모든 프로젝트는 능숙한 개발자가 되는 데 한 걸음 더 다가가는 것입니다.

https://github.com/migsldev/real_estate_listing_app

위 내용은 내 여정에 대한 반성: 초급 부동산 목록 풀스택 앱 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!