전체 글53 웹 개발 #4 글 조회 및 작성 기틀 이제 게시판에 대한 기능을 구현해보려고 한다.전에 flask와 php 등으로 이미 구현해 본 적이 있어서 그렇게 어렵진 않았지만 React (vite)를 사용해서 새로고침 없이 페이지 이동을 하려다가Board_view 부분과 write 페이지 간의 이동 관련 구현이 꽤나 헷갈렸다.그리고 이전에는 백엔드와 프론트 엔드를 사용해서 구현할 때 포트 관련한 이슈도 없었지만이번에 개발해보며 프론트와 백이 개별의 아키텍처처럼 각각의 서버로 작동하는 게 최근 트렌드인가 생각도 해보기 시작했다. 그리고 지금 구현해보며 디자인과 효용성은 생각하지 않고 단순히 기술 구현만 신경 쓰고 있는데 기술 대충 다 구현하고 나면 사용자 편의성 기능과 디자인 관련해서도 공부해 볼 것이다.아마도 내가 게으름만 피우지 않는다면 아무리 길.. 2025. 8. 11. 웹 개발 #3 로그인 환경 구축 (+ DB 연결) 웹을 개발해보면서 생각해보니 웹을 개발할 때 기술은 큰 장애물은 안되는 것 같다.언어도 그렇고, 다른 기술도 그렇고그래서 아이디어가 중요한 것 같은데어쨌든 일단 이번 프로젝트는 실습용이기 때문에 게시판을 만들 것이고다음 프로젝트는 웹으로 내가 만들고 싶은 것을 만들 듯 하다. (아마도 게임?) 서론은 여기까지.우선 DB 연결부터 설명하겠다. DB 연결DB는 sqlite나 mysql로 로컬에서 개발할려고 했는데이 프로젝트가 호스팅도 해볼 것이고DB를 내 로컬 서버로 돌리기엔 부담이 커서 DB를 제공해주는 서비스를 찾아보니supabase라는 사이트가 눈에 들어왔다. https://supabase.com/ Supabase | The Postgres Development Platform.Build pro.. 2025. 8. 8. 웹 개발 #2 (Node.js, React + vite 연결하기) react를 하다가 뭐 오류가 났는지 고쳐보다가 포기해서 vite로 갈아탔다. 이번에 한 것은 간단하게 로컬에서 로그인 환경 구축하기였다. 프론트엔드 (React + vite) 프론트부터 보자. React를 처음 해보면서 컴포넌트에 알게 되었는데원래는 정적 페이지별로 각각 나눠서 코드를 짰었고로그인 폼이나 회원가입 폼같이 재사용해도 될 코드들을 나눠서 짜야해서 자원 소모가 있었는데이를 함수처럼 나눠서 재사용할 수 있게 하는 것이라고 한다. 아무튼 Login 폼부터 보자면 import { useState } from "react";function Login() { const [username, setUsername] = useState(""); const [password, setPassword.. 2025. 8. 3. 웹 개발 #1 (Node.js, react, mysql 환경 구축하기) 갑자기 웹 서비스를 만들어 보고 싶어서 구축해보려고 한다. 이번에는 안 써본 언어들로 해볼 것이다. 우선 백엔드부터 환경 구축을 해보자. Node.js 설치하기https://nodejs.org/ko/download Node.js — Node.js® 다운로드Node.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.nodejs.org이 링크로 들어가서 대충 LTS 버전 하나 골라서 다운로드해준다. Windows 환경이기에 .msi를 다운로드한다. Node.js runtime : Nod.. 2025. 7. 27. 이전 1 2 3 4 ··· 14 다음
