분류 전체보기 6

[해설] 간단하지만 위험한 백엔드는 그만! 백엔드 시큐어 코딩 적용기

생성형 AI의 시대... 이젠 보안이 필수다! 생성형 AI로 코딩을 잘 몰라도 쉽게 웹사이트를 만들 수 있고, 생산성을 올려 빠르게 MCP를 구현해 서비스를 운영할 수 있는 시대가 왔습니다. 이 때 주니어 개발자들은 어떤 일들을 해야 할까요?Cursor로 최대한 빠르게 개발해서 배포하기? 이모티콘이 잔뜩 달린 주석을 그대로 사용하기? 우리는 생성형 AI와 멀어질 수 없는 시대에 왔습니다. 우리는 AI가 만든 빠르고 간결한 서비스가 놓친 것들을 체크하고, 일관성 없는 코드를 일관성 있게 만드는 작업이 우선입니다. 대부분의 팀이 짧은 기간동안 서비스를 완성하기 위해 생성형 AI로 요구사항만 충족하는 서비스를 만들 때, 우리는 좀 더 안정적이고 문제없는 서비스를 만들기 위해 시큐어 코딩을 적용하는 방법을 택..

카테고리 없음 2025.11.30

[해설] CSS Grid와 Jinja2로 깔끔한 '리뷰 목록' UI 개발하기

저희 조 오성그룹이 개발한 ‘이화 마켓’은 중고거래 플랫폼의 웹어플리케이션입니다. 이화마켓의 핵심 기능 중 하나는 바로 ‘리뷰 전체 조회’ 페이지인데요, 이 페이지에서 사용자들은 많은 후기들을 쉽고 편하게 볼 수 있습니다. 이번 포스팅에서는 이 많은 정보들을 직관적이고 깔끔하게 정리하여 탐색 경험을 최적화한 프론트엔드 구현 과정을 설명하고자 합니다. 리뷰 페이지, 어떻게 구현할까?리뷰 조회 페이지에서는 리뷰 제목, 이미지, 별점, 작성자 아이디 등 다양한 정보가 한 눈에 들어오는 것이 중요합니다. 또 모든 정보가 똑같은 중요도를 가지는 것은 아닙니다. 사용자들이 주로 많이 신경 쓸 제목과 별점, 이미지를 강조할 수 있어야 했습니다. 따라서 단순히 리스트로 나열하기보다는 카드에 정보를 담아 보여주는 것이..

카테고리 없음 2025.11.30

[가이드] GitHub Desktop 설치와 사용법 (Feat. PyCharm)

개발자라면 필수적으로 사용하는 Git과 Github! 그러나 터미널로만 깃허브를 제어하기엔 불편한 감이 있는데요, 이번 블로그에선 깃허브 사용을 수월하게 도와주는 깃허브 GUI 중 하나인 GitHub Desktop의 설치와 환경설정, 그리고 로컬에 있는 프로젝트를 업로드/클라우드에 있는 프로젝트를 로컬에 가져오기에 대해 알아보겠습니다. 왜 깃허브를 써야할까?먼저 짧게 깃허브의 필요성에 대해 짚고 가겠습니다. 깃허브는 개발자가 코드를 저장, 공유 및 공동 작업할 수 있는 웹 기반 플랫폼으로, 버전 제어, 문제 추적 및 다양한 기능을 제공합니다. 또한 풍부한 오픈소스 프로젝트를 제공하며, 다양한 개발자가 개발에 참여를 할 수 있는 공간을 제공합니다. 왜 Github Desktop을 써야할까?깃허브는 개발자가..

카테고리 없음 2025.11.30

[디버깅] 다중 이미지 업로드와 슬라이드 디버깅

TL;DR프론트는 여러장 업로드가 가능했지만, 백엔드에서는 단일 파일만 처리해서 마지막에 업로드 되는 이미지 한 장만 처리되고 있었다해결은 "이미지를 배열로 받기 -> 파일명 리스트를 JSON으로 저장 -> 조회 시 리스트로 복원 후 슬라이드로 랜더링" 구조로 FE-BE 전체 흐름을 통일하는 방식으로 이룸 문제 상황UI와 DB의 missmatch상품 등록 화면에서 사진을 여러장 선택하여 올리고, 상품 상세보기 페이지에서는 그 사진들을 슬라이드 형태로 넘겨볼 수 있는 형태를 구현하려고 하였습니다. 프론트엔드에서는 multiple이 있는 을 사용하였고, 여러장을 선택하면 미리보기 썸네일까지 잘 뜨는 것 처럼 보였습니다. 하지만 실제로 상품을 등록하고 DB에 저장된 데이터를 확인해본 결과, 여러장을 올려도 마..

카테고리 없음 2025.11.30

[개념] UI는 어떻게 서버 데이터와 연결될까? FE-BE 연결 구조를 중심으로

TL;DRUI는 데이터를 직접 가지지 않는다.백엔드는 라우트 -> DB 조회 -> 템플릿 전달 순서로 테이터를 넘긴다.HTML 템플릿과 JS는 전달받은 데이터를 "렌더링 + 상호작용"으로 표현한다 프론트엔드 개발은 단순히 화면을 배치하는 것에서 끝나지 않습니다. 각 화면이 백엔드에서 전달받은 데이터를 자연스럽게 표현하고, 사용자가 원하는 기능을 직관적으로 수행할 수있도록 하는것이 프론트엔드의 진정한 역할입니다. 이 글에서는 저희 프로젝트에서 사용한 html구조, css레이아웃, js 상호작용, flask와 데이터 연동 방식을 중심으로, 어떤 구조로 서비스를 만들었는지 정리해보고자 합니다! 왜 UI-백엔드 연동 구조가 중요할까?중고거래 플랫폼의 화면은 단순히 예쁘게 보이는 것만으로는 부족합니다. 사용자는 ..

카테고리 없음 2025.11.29