목차(클릭하세요)
클라우드 드라이브에서 작업시 설치와 실행에 오류가 발생할 수 있으니, 로컬 드라이브에서 작업
0. 참고: 이 내용은 ‘커서 AI 트렌드&활용백과’를 참고함
1. 프로젝트 폴더와 파일 만들기
1-1. 웹 사이트의 첫페이지
일반적으로 index.html 또는 index.php 라는 이름을 사용 예를 들어 www.fisrt.com이라는 웹서버 이름(도메인 네임)까지만 입력해도, 웹 서버는 자동으로 index.html 파일을 찾아서 전송해주는 개념1-2. html과 php의 차이
핵심 비교
구분 | index.html | index.php |
페이지 유형 | 정적 웹페이지 (Static) | 동적 웹페이지 (Dynamic) |
서버 코드 실행 | 불가 (프론트엔드만 처리) | 가능 (PHP 코드 실행, DB 연동, 세션 관리 가능) |
로그인 기능 구현 | JS로 API 요청만 가능(직접 처리 불가) | DB 검증, 세션/쿠키 활용해 로그인 처리 가능 |
추천 사용 상황 | 소개 페이지, 포트폴리오, 정적 사이트 | 로그인, 회원가입, 데이터 처리 필요한 경우 |
1-3. 웹사이트 파일들의 일반적 구조: 트리 구조
웹사이트의 트리구조 예시/ (루트 디렉토리)
├── index.html # 메인 페이지
├── about.html # 소개 페이지
├── /css # 스타일시트 폴더
│ └── style.css # 메인 스타일시트
├── /js # 자바스크립트 폴더
│ └── script.js # 주요 동작 스크립트
├── /images # 이미지 폴더
│ └── logo.png # 로고 이미지
├── /assets # 기타 리소스 폴더
│ ├── /fonts # 폰트 파일 보관 폴더
│ │ └── font.ttf # 폰트 파일
│ └── /videos # 동영상 파일 보관 폴더
│ └── intro.mp4 # 소개 영상
- index.html : 브라우저가 가장 먼저 읽는 메인 페이지
•
css/style.css : 웹사이트의 디자인과 레이아웃 담당
•
js/script.js : 사용자 동작 반응 처리 (버튼 클릭, 메뉴 이동 등)
•
images/ : 이미지 파일 저장소
•
assets/fonts, assets/videos : 부가적인 리소스 저장소 (폰트, 영상 등)
[초급]K치킨 소개사이트_by_cursor(Git Hub활용)
목차(클릭하세요)
동적기능을 포함한 웹페이지: 메일전송 기능, 설문조사 자동통계, 데이터 베이스 등
0. 참고: 이 내용은 ‘커서 AI 트렌드&활용백과’를 참고함
1. 온라인 명함 작성을 위한 기초Tip
1-1. 베이스가 될 디자인
•
내 온라인 명함의 기준이 될 디자인 모델이 있다면 더욱 쉽게 만들 수 있음•
특히 화면 캡쳐 기능을 이용한다면 더욱 스마트 하게1-2.index.php를 사용하기 위한 기초
index.html vs index.php 차이점
기본 개념
index.html
정적인(Static) 웹 페이지 서버가 해석 없이 파일 내용을 그대로 브라우저에 전송index.php
동적인(Dynamic) 웹 페이지 서버가 PHP 코드를 먼저 해석하고 결과를 브라우저에 전송 주요 비교
[중급]나만의 온라인 명함 by_AI(Render활용)
목차(클릭하세요)
To Do List를 만들기 위해 웹 사이트의 데이터를 저장하는 방식을 알아야 함
0. 참고: 이 내용은 ‘커서 AI 트렌드&활용백과’를 참고함
1. 기본내용
1-1. 동일한 부분
•
기본적으로 자바스크립트와 php, 테일윈드 css를 사용해 to do리스트 앱을 제작하는 부분이 동일함.
•
파이썬 플라스크를 통해서도 가능하고, 다양한 방식이 존할 수 있음
To do list는 해야 할일을 저장하고 다시 불러올 수 있는 기능이 필요함, 따라서 단순히 모든 사용자에게 동일한 웹페이지를 보여주는 방식이 아님1-2.핵심
웹 애플리케이션 데이터 저장 방식은 크게 2가지로 구분됨•
클라이언트 측 저장 방식 + 서버측 저장방식 클라이언트 측 저장
쿠키 (Cookies)
•
4KB 제한, 매 HTTP 요청마다 자동 서버 전송
• 만료 기간 설정 가능
• 가장 오래된 저장 방식
[중급]To do 리스트 만들기
목차(클릭하세요)
로컬스토리지 저장방식이 아닌 서버에 데이터를 저장하는 방식 활용
[결과물]
0. 참고: 이 내용은 ‘커서 AI 트렌드&활용백과’를 참고함
1. 맞춤형 설문조사 폼&분석
•
Todo list를 로컬 스토리지에 저장하는 방식으로 구현했으니, 이제 서버에 데이터를 저장하고 활용하는 예시를 진행
1-1. 데이터를 서버에 저장하는 방식 중 SQL와 관련성이 없는 세션관리 방식 사용
•
아래 분류는 데이터베이스를 활용하는 방식과 파일 형태로 저장하는 세션방식으로 다시 구분지을 수 있음
구분 | RDBMS | NoSQL | 세션 관리 |
비유 | 체계적으로 분류된 대형 창고 (명확한 구획과 규칙) | 유연한 컨테이너 저장소 (다양한 형태 수용) | 임시 보관함 (단기간 사용 후 정리) |
예시 | MySQL, PostgreSQL | MongoDB, Firebase | PHP Session |
구조 | 테이블-행-열 (고정) | 문서/키-값 (유연) | 키-값 (단순) |
언어 | SQL | 각 DB별 API | 언어별 세션 API |
확장성 | 수직 확장 | 수평 확장 우수 | 제한적 |
지속성 | 영구 저장 | 영구 저장 | 임시 저장 |
용도 | 구조화된 업무 데이터 | 대용량 웹서비스 | 로그인 상태 관리 |
여기서는 생성형 AI로 대략적인 설문을 만들고, 그 결과를 Json형태의 파일로 만들어 서버에 저장한뒤, 그 결과를 분석하는 기능까지 구현하기로 함. 1-2.설문조사 데이터를 Json으로 저장하는 이유?
•
Json: 전화번호 같은 텍스트 기반의 데이터를 쉽게 교환하고 저장하기 위한 형식
•
특징: Json파일은 구조화 되어 있으면, 계층형으로 되어 있음
◦
개발자들이 보다 데이터를 쉽게 이해하고, 활용하도록 만듦
일반 텍스트 기반의 데이터가 서술형 답안지라면, JSON은 디지털 OMR 카드에 가까움[중급] 서버기반 설문조사 폼&분석