햄직의 비상지식 저장소

[구글 스터디잼] App Engine: Qwik Start - Python

hamzgi — Mon, 4 May 2026 03:09:08 +0900

학습할 내용

이 실습에서는 Python 앱으로 다음 작업을 수행하는 방법을 알아봅니다.

클론/다운로드
테스트
업데이트
테스트
배포

작업 1. Google App Engine Admin API 사용 설정

App Engine Admin API를 사용하면 개발자가 App Engine 애플리케이션을 프로비저닝하고 관리할 수 있습니다.

왼쪽 탐색 메뉴에서 API 및 서비스 > 라이브러리를 클릭합니다.
검색창에 'App Engine Admin API'를 입력합니다.
App Engine Admin API 카드를 클릭합니다.
사용 설정을 클릭합니다. API 사용 설정 메시지가 표시되지 않으면 이미 사용 설정되어 있으므로 추가 작업이 필요하지 않습니다.

작업 2. Hello World 앱 다운로드

간단한 Python용 Hello World 앱을 사용하면 Google Cloud에 앱을 배포하는 방법을 빠르게 익힐 수 있습니다. 다음 단계를 따라 Google Cloud 인스턴스에 Hello World를 다운로드합니다.

1. 다음 명령어를 입력하여 Hello World 샘플 앱 저장소를 Google Cloud 인스턴스에 복사합니다.

git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git

깃 클론이 잘 되었네요!

2.샘플 코드가 있는 디렉터리로 이동합니다.

cd python-docs-samples/appengine/standard_python3/hello_world

기본적인 명령어는 리눅스와 거의 같습니다!

3. Python 환경 설정

sudo apt update
sudo apt install -y python3-venv
python3 -m venv myenv
source myenv/bin/activate

가상환경을 설치해주고 활성화 시켜줍니다!

작업 3. 애플리케이션 테스트

사전 설치된 App Engine SDK에 포함된 Google Cloud 개발 서버(dev_appserver.py)를 사용하여 애플리케이션을 테스트합니다.

앱의 app.yaml 구성 파일이 있는 helloworld 디렉터리에서 다음 명령어를 사용하여 Google Cloud 개발 서버를 시작합니다.

flask --app main run

Ctrl + C를 누르면 종료할 수 있습니다~

이제 개발 서버가 실행되고 포트 5000에서 요청을 수신 대기합니다.

웹 미리보기() > 포트 변경을 클릭하여 결과를 확인합니다.
포트 번호를 5000으로 변경하고 변경 및 미리보기를 클릭합니다.
새 브라우저 창에 다음이 표시됩니다.
Ctrl+C를 눌러 서버를 중단합니다.

작업 4. 변경하기

이 작업에서는 main.py를 편집하여 'Hello World!'를 'Hello, Cruel World!'로 변경합니다.

다음 명령어를 입력하여 nano에서 main.py를 열고 콘텐츠를 수정합니다.

nano main.py

'Hello World!'를 'Hello, Cruel World!'로 업데이트합니다.

Ctrl + S를 눌러 파일을 저장하고 Ctrl + X를 눌러 종료합니다.
다음 명령어를 사용하여 Google Cloud 개발 서버를 다시 시작합니다.

flask --app main run

Hello World! 브라우저를 새로고침하거나 웹 미리보기() > 5000 포트에서 미리보기를 클릭하여 결과를 확인합니다.
Ctrl+C를 눌러 서버를 중단합니다.

작업 5. 앱 배포

App Engine에 앱을 배포하려면 app.yaml 파일이 있는 애플리케이션의 루트 디렉터리에서 다음 명령어를 실행합니다.

gcloud app deploy

해당 지역을 나타내는 숫자를 입력합니다. <REGION>

그러면 App Engine 애플리케이션이 생성됩니다.

출력 예시:

Creating App Engine application in project [qwiklabs-gcp-233dca09c0ab577b] and region ["REGION"]....done.
Services to deploy:

descriptor:      [/home/gcpstaging8134_student/python-docs-samples/appengine/standard/hello_world/app.yaml]
source:          [/home/gcpstaging8134_student/python-docs-samples/appengine/standard/hello_world]
target project:  [qwiklabs-gcp-233dca09c0ab577b]
target service:  [default]
target version:  [20171117t072143]
target url:      [https://qwiklabs-gcp-233dca09c0ab577b.appspot.com]

Do you want to continue (Y/n)?

세부정보를 확인하고 서비스 배포를 시작하라는 메시지가 표시되면 Y를 입력합니다.

출력 예시:

Beginning deployment of service [default]...
Some files were skipped. Pass `--verbosity=info` to see which ones.
You may also view the gcloud log file, found at
[/tmp/tmp.dYC7xGu3oZ/logs/2017.11.17/07.18.27.372768.log].
╔════════════════════════════════════════════════════════════╗
╠═ Uploading 5 files to Google Cloud Storage                ═╣
╚════════════════════════════════════════════════════════════
File upload done.
Updating service [default]...done.
Waiting for operation [apps/qwiklabs-gcp-233dca09c0ab577b/operations/2e88ab76-33dc-4aed-93c4-fdd944a95ccf] to complete...done.
Updating service [default]...done.
Deployed service [default] to [https://qwiklabs-gcp-233dca09c0ab577b.appspot.com]

You can stream logs from the command line by running:
  $ gcloud app logs tail -s default

To view your application in the web browser run:
  $ gcloud app browse

참고: 앱을 배포하는 동안 'Unable to retrieve P4SA'라는 오류가 표시되면 위의 명령어를 다시 실행합니다.

작업 6. 애플리케이션 보기

브라우저를 실행하려면 다음 명령어를 입력한 후 제공된 링크를 클릭합니다.

gcloud app browse

출력 예시(링크는 사용자마다 다름):

Did not detect your browser. Go to this link to view your app:
https://qwiklabs-gcp-233dca09c0ab577b.appspot.com

애플리케이션이 배포되었으며 브라우저에서 짧은 메시지를 읽을 수 있습니다.

수고하셨습니다.

이 실습에서는 기본 Python 앱을 App Engine에 배포하는 방법을 배웠습니다.

GCP를 이용하여 파이썬 앱을 배포해봤는데 서버구축 및 운영실습 수업시간 때 배웠던 리눅스 명령어나 깃 공부했던게 여기서도 쓰이는 걸 보고 역시 기초 공부는 어딘가에선 써먹을 곳이 많구나라는 것을 느꼈습니다!

[구글 스터디잼] Cloud Storage: Qwik Start - Google Cloud 콘솔

hamzgi — Tue, 28 Apr 2026 17:27:12 +0900

중급 난이도 실습을 해보다가 너무 복잡해서 GCP의 기초부터 배우기위해서 Standard-Infra 부터 공부를 시작했습니다.

작업 1. 버킷 만들기

버킷은 Cloud Storage에서 데이터를 보관하는 기본 컨테이너입니다.

버킷을 만드는 방법은 다음과 같습니다.

Cloud 콘솔에서 탐색 메뉴(
) > Cloud Storage > 버킷으로 이동합니다.
+ 만들기를 클릭합니다.

각 단계를 완료하려면 버킷 정보를 입력하고 계속을 클릭합니다.

간단하게 버킷 만들기 부터 시작해봅시다.

버킷 탭에서 버킷 만들기 버튼을 누르면 새로운 버킷을 만들 수 있습니다.

버킷도 생성하는데 많은 옵션들이 있기 때문에 상황에 맞게 생성해야합니다.

이 문제에서는 조건이 주어져있습니다.

- 버킷 이름 지정: 버킷의 고유한 이름을 입력합니다. 프로젝트 ID가 항상 고유하므로 이 실습에서는 프로젝트 ID를 버킷 이름으로 사용하면 됩니다.
버킷 이름 지정 규칙:
- 버킷 네임스페이스는 전역적이며 전체 공개로 표시되기 때문에 버킷 이름에 민감한 정보를 포함해서는 안 됩니다.
- 버킷 이름에는 소문자, 숫자, 대시(-), 밑줄(_), 점(.)만 포함해야 합니다. 점이 포함된 이름은 확인이 필요합니다.
- 버킷 이름은 숫자 또는 문자로 시작하고 끝나야 합니다.
- 버킷 이름은 3자~63자까지 포함할 수 있습니다. 점을 포함하는 이름은 최대 222자를 포함할 수 있으나, 점으로 구분된 각 부분은 63자 이하여야 합니다.
- 버킷 이름은 점 십진 표기법 형식의 IP 주소로 표시할 수 없습니다(예: 192.168.5.4).
- 버킷 이름은 프리픽스 'goog'로 시작할 수 없습니다. 또한 버킷 이름에 'google' 또는 'google'의 철자를 약간 변경한 문자열을 포함할 수 없습니다.*
- DNS 규정 준수와 향후 호환성을 위해 밑줄(_)을 사용하지 말아야 하며 마침표를 다른 마침표 혹은 대시 옆에 연달아 사용해서는 안 됩니다. 예를 들어 '..'이나 '-.' 또는 '.-'는 DNS 이름으로 유효하지 않습니다.
- 위치 유형으로 리전을 선택하고 위치로 us-central1을(를) 선택합니다.
- 기본 클래스 설정에 표준을 선택합니다.
- 액세스 제어로 균일을 선택하고 이 버킷에 공개 액세스 방지 적용을 선택 해제하여 설정을 해제합니다.
나머지 필드는 기본값으로 두고 만들기를 클릭합니다.

위와 같은 조건에 맞춰 버킷을 만들어봤습니다.

작업 2. 버킷에 객체 업로드

위의 이미지를 새 버킷으로 업로드하려면 다음을 수행합니다.

위 이미지를 마우스 오른쪽 버튼으로 클릭하고 컴퓨터로 다운로드합니다. 다운로드 시 이미지 이름을 kitten.png로 변경하여 저장합니다.
Cloud Storage 브라우저 페이지에서 앞서 만든 버킷의 이름을 클릭합니다.
객체 탭에서 업로드 > 파일 업로드를 클릭합니다.
파일 대화상자에서 다운로드한 파일로 이동하여 선택합니다.
파일 이름이 kitten.png인지 확인합니다. 이름이 다르다면 파일의 점 3개 아이콘을 클릭하고 드롭다운에서 이름 바꾸기를 선택한 후 파일 이름을 kitten.png로 변경합니다.

업로드가 완료되면 파일 이름과 함께 파일의 크기, 형식 등의 정보가 표시됩니다.

작업 3. 공개적으로 버킷 공유

버킷에 대한 공개 액세스를 허용하고 이미지에 공개적으로 액세스할 수 있는 URL을 만들려면 다음을 수행합니다.

파일 목록 위에 있는 권한 탭을 클릭합니다.
보기가 보안 주체별로 보기 탭으로 설정되어 있는지 확인합니다. 액세스 권한 부여를 클릭하면 보안 주체 추가 창이 표시됩니다.
새 보안 주체 상자에 모든 사용자를 입력합니다.
역할 선택 드롭다운에서 Cloud Storage > 스토리지 객체 뷰어를 선택합니다.
저장을 클릭합니다.
이 리소스를 공개로 설정하시겠어요? 창에서 공개 액세스 허용을 클릭합니다.

저 이미지 객체에 접근할 권한을 부여할 수 있습니다.

대상은 모든 유저, 역할은 저장소 개체 뷰어(Storage object viewer)로 지정해주고, 팝업 창에서 공개 엑세스 허용을 해주면

이렇게 해당 이미지가 버킷의 스토리지 객체로 공개 엑세스가 가능해지는 모습입니다.

작업 4. 폴더 만들기

객체 탭에서 폴더 만들기를 클릭합니다.
이름에 folder1을 입력하고 만들기를 클릭합니다.

버킷의 폴더가 객체와의 구분을 위한 폴더 이미지 아이콘으로 표시됩니다.

하위 폴더를 만들고 여기에 파일을 업로드합니다.

folder1을 클릭합니다.
폴더 만들기를 클릭합니다.
이름에 folder2를 입력하고 만들기를 클릭합니다.
folder2를 클릭합니다.
업로드 > 파일 업로드를 클릭합니다.
파일 대화상자에서 다운로드한 스크린샷을 탐색하여 선택합니다.

업로드가 완료되면 파일 이름과 함께 파일의 크기, 형식 등의 정보가 표시됩니다.

이번엔 폴더를 만들어 봅시다.

업로드 버튼 왼쪽 폴더 만들기를 누르면 폴더명을 지정하여 폴더를 만들 수 있으며 폴더를 클릭하여 그 안에서 또 하위 폴더를 만들 수도 있습니다.

작업 5. 폴더 삭제

버킷 세부정보 옆에 있는 화살표를 클릭하여 버킷 수준으로 돌아갑니다.
버킷을 선택합니다.
삭제 버튼을 클릭합니다.
창이 열리면 삭제를 입력하여 폴더 삭제를 확인합니다.
삭제를 클릭하여 폴더와 그 안의 모든 객체, 하위 폴더를 영구 삭제합니다.

마지막으로 폴더 삭제인데 폴더를 체크하고 폴더를 삭제하면 됩니다. 삭제할 때 정말 삭제할 거면 DELETE를 입력하라는 확인 팝업창도 뜨게 됩니다.

이렇게 첫 번째 실습을 마쳤습니다.

수고하셨습니다

Cloud Storage 버킷을 만들고, 버킷에 객체를 추가하고, 폴더로 애셋을 정리하며, 객체에 대한 공개 액세스를 허용하는 방법을 배웠습니다.

라고 하네요 감사합니다 구글!!

개인 포트폴리오 프로젝트 - JS를 사용한 V.2 반응형 포트폴리오

hamzgi — Sun, 26 Apr 2026 02:10:29 +0900

발표에 사용할 포트폴리오는 수업중에 배웠던 개념과 디자인을 중심적으로 만들어보았다.

하지만 멋쟁이사자처럼 동아리에서 배웠던 JS를 조금 더 공부해서 JS 또한 사용해보고 싶었다.

또한 멀티 페이지 사이트가 아닌 원 페이지를 만들어보고 싶었다.

그리하여 V.2 포트폴리오를 만들게 되었다.

이 사이트는 nav바의 홈, 소개, 기술 등의 글씨를 눌러도 다른 페이지로 넘어가는 것이 아닌 한 페이지에서 스크롤이 움직이면서

해당하는 부분을 화면에 보여주는 식의 원 페이지 사이트이다.

홈 페이지

위 이미지는 V.2 포트폴리오 사이트 (앞으로는 줄여서 V.2라고 하겠다)의 랜딩 홈페이지이다.

이미지라 보이진 않지만 아바타 이미지는 상하로 조금씩 움직이며 파랗게 빛나는 기능을 구현해봤다.

소개 페이지

다음은 소개 영역이다.

간단한 자기소개와 중부대학교 2학년(Sophomore의 So.), 동아리 정보, 열정 % 카드를 추가해서 간단하게 내가 누구인지 보여주는 영역을 만들어보았다.

기술 스택

위는 기술 스택을 보여주는 영역이다.

각 카드는 마우스를 올릴경우 파란빛이 나오며 살짝 위로 뜨고 아이콘이 한바퀴 도는 애니메이션을 넣어 마이크로 리액션처럼 구현해봤다. 또한 카드 하단에 Skill bar를 배치하여 몇 %정도 해당 기술 스택을 공부했는지를 표현해봤다.

위 이미지는 팀 프로젝트 & 팀원을 나타내는 영역이다.

각 카드는 팀플, 팀원 소개, 깃허브, 과제 페이지로 이동되는 링크가 있다.

이 카드 또한 마우스를 올리면 반응을 하도록 디자인하였다.

홈 페이지 하단 연락처

위 이미지는 연락처 영역이다.

이메일, 깃헙, 블로그, 전화번호를 보여주는 카드를 배치했으며 이 또한 마찬가지로 마우스를 올리면 파랗게 강조되고 아이콘이 한바퀴 돈다.(이미지 속 이메일 아이콘이 세로로 납작해보이는 이유)

여기까지가 홈 페이지의 요소들이였다. 이 밑은 상단 nav바에 있는 과제소개 버튼을 누르면 이동되는 과제소개 페이지 부분이다.

원 페이지를 구현하려 했지만 한 페이지에 너무 많은 정보가 있는 것은 꽤나 불편했기에 UX를 생각하여 과제 부분은 따로 페이지를 만들어보았다.

과제 소개

과제 소개 페이지로 이동하면 가장 먼저 보이는 모습이다.

홈 페이지의 아바타 이미지처럼 저 파일 아이콘이 있는 둥근 푸른 구체도 상하로 움직이며 빛난다. 디자인 통일성을 주기위해 저렇게 만들었다.

과제 레포 소개

이 페이지를 어떤 레포를 기반으로 만들었는지 소개하는 영역이다. 사실 아직 만들고 있는 페이지이기에 저 중에서 구현하지 못한 구조가 많다. 임시로 채워둔 문구라고 생각해도 좋다.

과제 핵심 요소

예전 수업중에 배웠던 내용들을 카드로 정리해봤다. 클릭하면 예전에 수업중에 배포했던 연습사이트로 이동된다.

아래 이미지는 카드 중에서 list.html 카드를 눌렀을 때 이동되는 페이지이다.

list.html

과제 상세 설명

각 카드에는 해당되는 페이지로 이동되는 "배포 사이트 보기 ->" 링크가 있으며 마우스를 올리면 반응한다.

연결 링크

과제 소개 페이지 하단에도 깃허브와 티스토리 블로그로 이동되는 카드를 추가했다.

푸터 아이콘 링크

홈 페이지, 과제소개 페이지 모두 풋바에 깃허브, 링크드인으로 이동할 수 있는 아이콘과 저작권 문구가 있다.

다크/라이트 모드 토글 전환 버튼

V.2 페이지에서 먼저 만들어보고 제출한 포트폴리오 사이트에도 가져온 기능이 다크모드와 라이트모드를 전환하는 토글 기능이였다. 항상 다크/라이트 모드 기능을 우선으로 찾는 나에겐 꼭 구현해보고 싶은 기능이였다.

라이트 모드 홈페이지

위는 화면 우측 하단에 있는 모드 변경 토글 버튼을 눌러 라이트모드로 전환됐을 때의 홈페이지 화면이다.

전체적으로 푸른 테마는 남겨두고 어두운 부분만 반전시켜 다크/라이트 모드를 만들어봤다. 한 번 누르면 다른 페이지로 이동해도 유지되며 이 기능에도 JS가 사용된다.

라이트 소개

위는 라이트 모드에서의 소개 영역이다.

라이트 팀플 & 팀원

위는 라이트 모드에서의 팀 프로젝트 & 팀원 영역이다.

추후에 더 많은 기능과 구조를 추가해보고 싶은 V.2 포트폴리오 사이트였다.

간단히 소개하기 위해 만든 글이라서 상세한 코드는 글에 넣지 않았으며 나중에 따로 각 기능에 맞춰 나눠서 글을 써볼까 한다.

아래는 영상 녹화본이다. 용량이 커서 유튜브 링크로 업로드했다.

https://youtu.be/pxqRtJPzJmQ

[ 멋사 보너스 과제] localStorage와 sessionStorage 취약점

hamzgi — Wed, 15 Apr 2026 22:00:58 +0900

저번 실습 때 js에 대해서 공부하면서 배웠던 개념이 필요합니다!

멋사 실습 과제 웹페이지를 들어가서 우선 F12를 눌러 DevTools에 진입합니다!

웬만하면 HTML,CSS에는 권한이나 로직코드가 들어가지 않으므로 우선 Sources탭에서 JS부터 확인해봤습니다.

그냥 하나씩 훑어 보기에는 너무 긴 코드이기에 Ctrl + F로 원하는 문자열을 찾아보았습니다.

우선은 "계정의 역할을 admin으로 변경하면 숨겨진 페이지를 찾을 수 있다"는 힌트를 바탕으로 role과 admin을 검색해봤습니다.

role부터 쳤을때 role에 해당하는 문자열이 여러개 나왔습니다. (19개가 있었습니다.)

그 중에서 뭔가 이 부분이 힌트지 않을까? 싶은 코드가 몇가지 나왔습니다.

여기서 vn에 likelion_client_role이, or에는 likelion_bonus_gate가 들어간다는 const 선언 코드를 확인했습니다.
그래서 '아 뭔가 저 변수와 role, bonus_gate가 연관이 있겠구나' 하는 생각을 먼저 했습니다.

그리고 밑에

sessionStorage.setItem(or, e.role === "admin" ? "admin" : "participant")라는 코드도 무슨의미인가 싶어 찾아본 결과

e.role이 admin이면 admin을 저장, 그렇지 않으면 participant를 저장한다는 내용인 걸 알게 되었습니다.

이걸 보고 어? 혹시 그러면 내가 직접 sessionStorage나 localStorage에 .setItem으로 직접 admin이라는 값을 넣으면 admin으로 인식되는거 아닐까? 라는 생각을 하게 되었습니다.

하지만 코드를 조금 더 찾아보자 하고 더 둘러봤습니다. 그러다가 코드 바로 아래에서 아래 이미지에 있는 코드를 발견했습니다.

솔직히 아직 JS 입문자로서 완벽하게 코드를 이해하는데는 어려움이 있었지만 일단 핵심적인 부분이 무엇일까 검색해보며 생각해봤습니다.

중요한 포인트만 정리해보자면

const o = 
    n ||                      // 1순위
    t ||                      // 2순위
    (e?.role) ||              // 3순위
    "participant";            // 4순위 (기본값)

변수 "o" 에 우선순위대로 값을 넣는 코드였습니다. 만약 "n"이 "admin"이라면 "o"에 "admin"이 들어가고 그 뒤는 무시한다는 얘기죠.

그리고 가장 중요한 부분이 아래 코드인데요

canAccessBonus: o === "admin" || r === "admin" || l === "admin" || r === "bonus" || l === "bonus"

권한 판단을 "o" (사용자의 역할,role), "r" (localStorage의 bonus 값), "l" (sessionStorage의 bonus 값)의 값들로 수행하는 코드인데, 해당 부분에서 취약점이 존재함을 확인할 수 있었습니다.

"o", "r", "l" 중에 뭐든 "admin"이나 "bonus"가 있으면 보너스 페이지에 접근을 허용한다는 내용입니다.
근데 저 값들은 전부 서버가 아닌 브라우저의 local,sessionStorage에 저장되므로 사용자가 DevTools의 Console을 통해"admin"이나 "bonus"를 .setItem하게 되면 접근이 가능해지게 됩니다.

그래서 결론적으로 확실한 접근을 위해 다음과 같은 코드를 Console에 입력했습니다

localStorage.setItem("likelion_client_role", "admin")
sessionStorage.setItem("likelion_client_role", "admin")

localStorage.setItem("likelion_bonus_gate", "admin")
sessionStorage.setItem("likelion_bonus_gate", "admin")

그러자 다음과 같은 화면이 나왔습니다.

성공적으로 admin 페이지에 진입을 성공했습니다. 조금 더 확실하게 확인하기 위해 Application탭에서 local, sessionStorage를 확인해본 결과 아래와 같이

제가 아까 콘솔에서 입력한 값들이 들어있는 것을 확인할 수 있었습니다.

조금 더 자세히 보면 localStorage에는 제가 추가한 admin 값들 이외에도 다른 것들이 있었습니다.

likelion_bonus_entries	[{"username":"yamajaki","enteredAt":1776252290804,"rank":1}]
likelion_bonus_gate	admin
likelion_client_role	admin
likelion_session	{"username":"yamajaki","role":"participant"}
likelion_user_state_yamajaki	{"isOnline":true,"currentScreen":"bonus","currentStep":0,"currentMission":0,"completedSteps":[]}
likelion_users	{"yamajaki":{"username":"yamajaki","password":"cprPrhk1!","role":"participant","solvedMissionIds":[]}}

row 1번째 likelion_bonus_entries 에는 유저명과 언제 접근했는지, 순위가 몇위인지 확인할 수 있습니다. (1등 야르~!!!)

2,3번째 row에는 제가 직접 넣었던 값이 있습니다.

4번째 likelion_session 에는 사용자 정보(세션)이 있는데 잘 보면 role에는 여전히 participant가 들어있습니다. 즉 서버 기준에선 여전히 user(=paricipant)라는 거죠. 제가 프론트만 속였다는 의미입니다.

5번째 likelion_user_state_yamajaki 에는 온라인인가, 현재 화면이 어딘가(보너스 화면), 진행 단계와 완료한 단계가 나와있는데 제가 어디까지 진행했는지 기억하는 용도로 보입니다.

6번째 likelion_users 에는 전체적인 유저의 DB가 있습니다. 문제는 유저명, 역할, 해결한 문제 ID외에도 비밀번호가 무엇인지도 나와있습니다. 이런 경우를 예상하고 군대에서 사용하던 임시 비밀번호로 계정을 만들길 잘한 것 같습니다. (체계과1!입니다.)

이로써 만약 실제 서비스에서 localStorage에 직접 저장하는 방식을 사용하거나, 비밀번호를 그냥 평문으로 저장하면 얼마나 큰일이 발생할지를 깨달았습니다.

그리고 갑자기 궁금해져서 만약 제가 순진한척 제 브라우저로 친구한테 회원가입과 로그인을 시키면 그 계정의 비밀번호와 id를 알 수 있을까? 싶어서 테스트를 해봤습니다.

역시 예상대로 test와 test1의 계정의 비밀번호와 유저명이 남아있는 것을 확인할 수 있었고, clear all을 하게되면 해당 계정이 사라지는 것도 확인했습니다.

어찌저찌 문제를 풀긴 했지만 여전히 JS코드가 전부 이해된 것은 아니라서 나중에 시간이 나면 임원분들께 더 자세한 설명을 들어야 할 것 같습니다 ㅎㅎ...

단순 HTML, CSS, JS 공부 뿐만 아니라, 이런 취약점까지 실제로 공부시켜주는 멋쟁이사자처럼 임원진분들의 노력에 감사하는 마음을 갖게 된 보너스문제였던 것 같습니다!!

웹의 기본 HTML,CSS,Javascript 3형제에 대하여 간단히 소개

hamzgi — Fri, 20 Mar 2026 22:19:04 +0900

대학에서 웹프로그래밍 강의를 듣다보면, 아니 사실 어디서든 웹을 배운다면 무조건 배우는 3형제가 있다. 바로....

HTML , CSS , Javascript

이 3가지는 사실상 우리가 일반적으로 이용하는 대부분의 웹에서 필수적으로 사용되는 친구들이기 때문에 당~~~연히 기초 공부를

하게되면 웹의 역사 이후에 가장 먼저 배운다.

그렇다면 이 3가지가 각각 무엇을 하는 친구인지 간단하게 알아볼 필요가 있다.

첫 번째.

"나는 웹 페이지의 '기본적인 뼈대'가 될 것이다. " - HTML

이 친구는 사실 프로그래밍언어라고 하기엔 눈치껏 빠져야하는 친구이다. 애초에 이름 약자부터가

Hyper Text "Markup Language" 즉 마크업 언어이다.

여기서 마크업 언어가 무엇인가?

마크업 언어란? (예: HTML, XML, Markdown)

목적: 데이터가 어떻게 보일지(서식) 또는 어떤 구조인지(분류)를 기술합니다.
특징: 브라우저나 문서 처리 프로그램에 정보를 전달하며, 자체적인 연산이나 로직을 수행하지 않습니다.
구성: <h1>제목</h1>, <p>내용</p>처럼 태그를 통해 태그와 데이터를 묶습니다.

쉽게 말하면 이 친구는 프로그래밍 언어와 달리 if문, for문 같은 연산이나 로직을 수행하지 않는게 가장 큰 차이라고 생각하면 좋다.

또한 페이지의 기본적인 구성을 작성하는 언어이기에 대부분 웹의 뼈대를 맡는다고 표현한다.

내가 지금 수업에서 간단하게 만들고 있는

이런 식의 코드가 바로 HTML이다.

두 번째.

"나는 웹 페이지의 '아름다운 옷'이 될 것이다. " - CSS

이 친구는 Cascading Style Sheets라는 친구인데 굳이 약자 의미를 번역기 돌려서 찾아볼 필요는 없고

HTML과 같은 마크업 언어의 구조화된 문서에 스타일과 레이아웃을 입혀 글꼴, 배경색, 크기, 위치 등을 꾸미는 선언적 스타일 시트 언어이다. (선언적 스타일 시트라는 추상적인 표현에 굳이 꽂히지 말고 그냥 HTML같은 친구에게 스킨을 입힌다고 생각하면 좋다.)

* {
  box-sizing: border-box;
  /* 위아래로 떠있는 부분 붙이기 */
  padding: 0;
  margin: 0;
}

body {
  color: #333;
  background-color: rgb(253, 240, 245);
  font-size: 18px;
  line-height: 1.5;
}

ul {
  list-style-type: none;
}

/* class를 지정할 때에는 앞에 . 붙이기 */
.container {
  max-width: 1100px;
  margin: 0 auto;
  /* 위아래는 0, 좌우로 30픽셀 띄우기 */
  padding: 30px 30px;
}

이런 식으로 우리가 HTML에 썼던 친구들을 가져와서 { } 안에 원하는 꾸미기 옵션들을 추가해주는 식으로 코딩한다.

내 나이 04년생, 내 동년배들이라면 아마 어릴적 윈도우XP 시절 네이버나 야후, 다음같은 웹사이트를 들어갔다가 종종 헐벗은 흰색 배경에 파란 글씨나 검은 글씨만 보이는 경우가 있었을 수도 있는데 그게 바로 아래 이미지와 같이 CSS가 적용되지 않은 HTML

페이지이다.

이미지 출처: 코드스테이트 https://www.codestates.com/blog/content/html-css

나는 어렸을때 저렇게 CSS 없는 화면 뜬 걸 보고 해킹당한줄 알고 벌벌 떨었는데 커서 정보보호학과에 오니 그 어릴적 내 모습이 참 순수하고 귀여웠던 것 같다.

본론으로 돌아오자면 저런식으로 웹을 꾸며줄 수 있는 친구가 바로 CSS이다.

세 번째.

"나는 웹 페이지를 원하는대로 '움직이게' 만들 것이다. " - Javascript

우리는 뼈대와 옷은 어떤 친구들이 만들어주는지 알게되었지만 뭔가 부족한 느낌이 들 수 있다.

'아니 예쁘게 생긴 페이지를 만들었는데 정작 뭔가 상호작용하고 움직이지 못하는 건 그냥 예쁜 사진이나 마찬가지 아닌가?'

그렇다. 우리가 비싼 돈 주고 산 마우스와 키보드를 섭섭하게 만드는 그런 사이트는 진정한 Web-Site라고 할 수 없다.

우리가 클릭하고, ID를 입력하고, 마우스를 올리면 미리보기가 뜨고, 이런것이 진정한 Web-Site이다.

그것을 위해 존재하는 친구가 바로 "Javascript" 이다.(줄여서 js)

마우스를 올리면 Working from home이라는 전체 메세지가 뜬다.

위 사진처럼 우리가 어느 사이트를 들어가던 마우스를 댔을때 상호작용이 가능한 경우가 많은데 그 동작들이 거의 대부분 js 덕분에 가능한 것이다. 특정 애니메이션이 동작하는 것도 js를 통해서 구현하는 경우도 있다.

Josh.js의 애니메이션

이런식으로 애니메이션이 동작하게 만들 수도 있고,

Babylon.js를 이용한 게임 제작

종종 이런식으로 웹으로 게임을 제작하는 경우도 있는데 이럴때도 js를 이용한다.

자 그럼 여기서 문제. Javascript는 프로그래밍언어일까요???

정답은 "요즘 기준에선 자바스크립트 = 그냥 프로그래밍 언어"라고 보면 된다.

사실 이름에서도 알겠지만 js의 근본은 스크립트언어이다. 옛날 개발자들은

프로그래밍 언어 (전통적)

C, Java
컴파일 필요
실행파일(.exe) 만들어서 실행

스크립트 언어

JavaScript, Python (초기)
인터프리터로 바로 실행
비교적 가벼움

이런식으로 구분을 하는 경우가 있었다. 하지만...

자바스크립트도 엄청 복잡한 프로그램 작성 가능
서버, 앱, 게임 다 만듦
구조도 완전 프로그래밍 언어 수준

사실상 요즘 js의 위상은 더 이상 옛날의 그것이 아니기에 충분히 웹을 위한 프로그래밍언어라고 생각해도 크게 지장은 없을 것이다.

이렇게 해서 오늘은 웹의 가장 기본적인 3형제인 HTML,CSS,JS에 대하여 간단하게 알아보았다.

추후에는 이 3가지를 이용하여 웹페이지를 직접 만들어보고 만드는 과정들을 올려보도록 하겠다.

이 글을 읽게 된 독자분들이 쉽게 이해할 수 있다면 좋겠다.

[입문] 파이썬으로 문자열 뒤집기!

hamzgi — Mon, 27 Oct 2025 15:16:11 +0900

파이썬으로 문자열 뒤집기

프로그래밍을 하다 보면 문자열을 뒤집어야 할 때가 있다.
이번 글에서는 파이썬에서 문자열을 뒤집는 방법을 간단하게 정리해보려 한다.

1️⃣ 슬라이싱으로 뒤집기 (가장 간단한 방법)

파이썬에서는 문자열도 리스트처럼 시퀀스 자료형이기 때문에 슬라이싱으로 쉽게 뒤집을 수 있다.
한 줄로 간단하게 뒤집는 방법을 먼저 살펴보자.

s = "hello"
reversed_s = s[::-1]
print(reversed_s)  # 출력: "olleh"

[::-1] 의미: 처음부터 끝까지 -1씩 이동 → 뒤에서 앞으로 읽는다는 뜻
가장 직관적이고 간단하게 사용할 수 있다

2️⃣ 리스트로 바꿔서 뒤집기

문자열을 리스트로 바꾼 뒤 뒤집고 다시 합치는 방법도 있다.
이 방법도 알아두면 좋다.

s = "hello"
lst = list(s)        # ['h', 'e', 'l', 'l', 'o']
lst.reverse()        # ['o', 'l', 'l', 'e', 'h']
reversed_s = ''.join(lst)
print(reversed_s)    # 출력: "olleh"

슬라이싱을 활용해서 이렇게도 만들 수 있다.

reversed_s = ''.join(list(s)[::-1])

3️⃣ 내가 했던 실수

def solution(my_string):
    list = my_string[::-1]
    return = list  # ❌ 이렇게 하면 오류가 난다

return = list → return은 예약어라 변수처럼 쓸 수 없다
list → 파이썬 내장 타입 이름이라 변수로 쓰면 헷갈릴 수 있다

올바른 방법은 이렇게 하면 된다.

def solution(my_string):
    reversed_str = my_string[::-1]
    return reversed_str

4️⃣ 정리 팁

간단한 문자열(혹은 배열) 뒤집기는 s[::-1]만 기억하면 충분하다
리스트로 바꿔서 뒤집는 방법도 있지만 꼭 필요한 경우에만 사용
내장 타입 이름(list, str 등)은 변수로 쓰지 않는다

이렇게 정리하면 코딩 테스트에서도 바로 활용할 수 있고, 실수도 줄일 수 있다.
문자열 뒤집기는 파이썬에서 자주 나오는 문제라서 익혀두면 좋다.

무엇을 하는 곳인고?

hamzgi — Mon, 27 Oct 2025 15:09:15 +0900

프로그래머스 입문 다시 시작

오랜만에 프로그래머스에서 코딩 공부 시작

백준 문제를 풀다가, 주변 지인의 소개로 예전에 잠깐 구경만 했던 프로그래머스에 오랜만에 다시 들어와서 문제를 풀어봤다.

확실히 웹에서 직접 코드를 실행해보며 오답인지 정답인지 바로 확인할 수 있고, 코드 중에서 어떤 건 맞고 어떤 건 틀렸는지도 알 수 있어서 좋았다.

나처럼 오랜만에 입문 단계부터 코딩 공부를 시작한다면, 백준도 좋지만 프로그래머스도 좋은 선택지가 되겠구나 하는 생각이 들었다. 입문 문제를 풀다 보니 역시 오랜만이라 헷갈리는 개념들도 있고, 다른 유저들의 더 좋은 코드들을 보면서 배울 점이 많았다.

그래서 아, 여기서 공부했던 내용들도 블로그에 기록해둬야겠다는 생각이 들어 새로 카테고리를 만들어 보았다. 앞으로는 "기초부터 시작하는 백준풀이!" 카테고리와 결이 거의 똑같도록 글을 올릴 계획이다.

그리고 HTML 양식으로도 글을 써보려고 한다. 뭔가 더 개발자스럽기도 하고, 양식 자체가 복붙할 때 내가 원하는 모양이 그대로 복사되다 보니 편하다고 생각했다.

글을 올리는 오늘 기준으로 전역일이 딱 2주, 14일 남았다. 앞으로도 열심히 공부해야겠다!

백준 10430 나머지

hamzgi — Wed, 22 Oct 2025 14:26:05 +0900

Python 입출력 연습: 나머지 계산 문제

문제

(A+B)%C는 ((A%C) + (B%C))%C 와 같을까?

(A×B)%C는 ((A%C) × (B%C))%C 와 같을까?

세 수 A, B, C가 주어졌을 때, 위의 네 가지 값을 구하는 프로그램을 작성하시오.

입력

첫째 줄에 A, B, C가 순서대로 주어진다. (2 ≤ A, B, C ≤ 10000)

출력

첫째 줄에 (A+B)%C, 둘째 줄에 ((A%C) + (B%C))%C, 셋째 줄에 (A×B)%C, 넷째 줄에 ((A%C) × (B%C))%C를 출력한다.

예제 입력 1

5 8 4

예제 출력 1

처음 시도한 코드

A, B, C = map(int, input().split())
print( (A+B)%C )
print( ((A%C) + (B%C)) % C )
print( (A*B)%C )
print( ((A%C) * (B%C)) % C )

✅ 결과: 정답

문제 자체는 정답이 주어진 형태라서 비교적 쉽게 풀 수 있었다.
하지만 단순히 푸는 데서 그치지 않고, 입력 방식을 조금 더 효율적으로 만들어 보기 위해
map()과 split()을 함께 사용해보았다.

다른 입력 방식들

문제를 풀고 나서, “다른 방법으로는 어떻게 입력을 받을 수 있을까?”
라는 생각이 들어 여러 예제를 정리해보았다.

1️⃣ List Comprehension (같은 동작, 다른 표현)

A, B, C = [int(x) for x in input().split()]

map()과 기능적으로 같지만, 리스트 형태로 변환이 명확히 보이므로
가독성을 선호하는 경우 유용하다.

2️⃣ Split 후 인덱스로 접근 (명시적 방법)

s = input().split()
A = int(s[0]); B = int(s[1]); C = int(s[2])

입력을 명시적으로 제어하고 싶을 때 쓰기 좋다.
특히 초보자에게는 코드 흐름이 직관적으로 보인다.

3️⃣ sys.stdin.readline() 사용 (백준용 고속 입력)

import sys
A, B, C = map(int, sys.stdin.readline().split())

input()보다 약간 더 빠르다.
반복문에서 많은 입력을 받을 때 백준, 프로그래머스 등에서 주로 사용된다.

4️⃣ 입력 검증이 필요한 경우

tokens = input().split()
if len(tokens) != 3:
    raise ValueError("세 개의 값이 필요합니다")
A, B, C = [int(x) for x in tokens]

예상치 못한 입력에 대비해야 할 때 유용하다.
실무나 안정성을 요구하는 상황에서 자주 사용되는 방식이다.

⚙️ 정리

간결함과 성능이 중요할 때 → map()
가독성이 중요할 때 → 리스트 컴프리헨션
대량 입력일 때 → sys.stdin.readline()
입력 검증이 필요할 때 → 조건문 처리

✨ 이번 문제를 통해 배운 점

같은 정답이라도, 코드를 구성하는 방법은 다양하다.
단순히 ‘맞았다’에서 끝내지 말고,
“다른 접근법은 없을까?”라는 연구적인 습관을 가지는 게 중요하다.

오늘의 교훈:

“문제를 푼 이후가 진짜 공부의 시작이다.”

백준 2739번 - 구구단

hamzgi — Wed, 15 Oct 2025 18:39:02 +0900

문제

N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다.

입력

첫째 줄에 N이 주어진다. N은 1보다 크거나 같고, 9보다 작거나 같다.

출력

출력형식과 같게 N*1부터 N*9까지 출력한다.

예제 입력 1

예제 출력 1

문제 요약

입력받은 N 숫자로 구구단을 만드는 간단한 문제다.
예시:

"2를 입력받은 경우"

2 * 1 = 2
2 * 2 = 4
2 * 3 = 6
2 * 4 = 8
2 * 5 = 10
2 * 6 = 12
2 * 7 = 14
2 * 8 = 16
2 * 9 = 18

뭐가 문제였을까?

N = int(input())

for i in range(1,9):
    i += 1
    print(N*i)

결과: 오답 ❌

for문을 쓰는 데 굳이 i += 1식을 쓴 것.
예제 출력과 다른 형식으로 출력값이 나옴 (단순 구구단 연산 결괏값만 나옴)

처음엔 출력 형식만 문제라고 생각해서 아래와 같이 재작성 했다.

N = int(input())

for i in range(1,9):
    i += 1
    print(N, "*", i, "=", N*i)

결과: 오답 ❌

이건 그냥 코딩을 너무 안해서 기본 개념을 까먹었다는 증거이다.

일단 구구단이 1단부터 출력 되어야 하는데, print 윗 줄에 i += 1을 작성하면 당연히 1이 아닌 2부터 출력이 되게 된다.

그래서 그 부분을 아래와 같이 수정했다.

N = int(input())

for i in range(0,9):
    i += 1
    print(N, "*", i, "=", N*i)

결과: 정답 ✅

다행히 정답이였다. 근데 뭔가 찜찜한 정답이였다.

for문을 쓰는데 굳이 i += 1식을 쓴 게 정답이 나오고서야 보였다.

아직 코딩 초보지만 코드는 필요 없는 부분을 최대한 없애고 최적화 시키는 게 중요하다고 들었던 기억이 있어서

1줄이라도 줄여보기 위해 아래와 같이 최종 정답 코드를 제출했다.

N = int(input())

for i in range(1,10):
    print(N, "*", i, "=", N*i)

결과: 정답 ✅

이 코드를 제출하니 군대에서 코딩을 안 하던 기간동안 뇌가 많이 굳었다는 걸 체감했다.

copilot에게 물어보니

"이 방식은 코드의 가독성과 안정성 측면에서 좋지 않아요. 반복문 안에서 반복 변수 i를 직접 수정하는 것은 예기치 않은 버그를 유발할 수 있기 때문입니다." 라고 알려줬다..

이번 문제의 교훈

코드를 자주 작성해보되, 항상 능동적으로 내가 왜 이 방식으로 코드를 작성했는지 스스로 질문하는 습관을 가질 것.
어려운 문제를 풀고 싶다는 욕심에 분수에 맞지 않는 문제에 매달리기보다는, 기초부터 차근차근 다지고 여유를 가지는 자세를 유지할 것.
문제의 성공 여부와 관계없이, 조금 더 최적화할 수 있는 방법이 무엇일지 항상 고민해볼 것.

백준 10926번 - ??!

hamzgi — Tue, 14 Oct 2025 20:44:36 +0900

문제

준하는 사이트에 회원가입을 하다가 joonas라는 아이디가 이미 존재하는 것을 보고 놀랐다. 준하는 놀람을 ??!로 표현한다. 준하가 가입하려고 하는 사이트에 이미 존재하는 아이디가 주어졌을 때, 놀람을 표현하는 프로그램을 작성하시오.

입력

첫째 줄에 준하가 가입하려고 하는 사이트에 이미 존재하는 아이디가 주어진다. 아이디는 알파벳 소문자로만 이루어져 있으며, 길이는 50자를 넘지 않는다.

출력

첫째 줄에 준하의 놀람을 출력한다. 놀람은 아이디 뒤에 ??!를 붙여서 나타낸다.

문제 요약

사용자가 입력한 아이디 뒤에 "??!"를 붙여 출력하는 아주 간단한 문제다.
예시:
입력 → joonas
출력 → joonas??!

처음 시도한 코드

user_id = input("ID를 입력하시오:")
print(user_id +"??!")

결과: 오답 ❌

뭐가 문제였을까?

처음엔 코드 자체는 맞다고 생각했지만, 백준에서는 입력과 출력 형식이 매우 중요하다는 사실을 다시금 깨달았다.

❗ 입력에 프롬프트 문구가 있으면 안 됨
백준은 테스트 케이스를 자동으로 채점하기 때문에, input() 안에 "ID를 입력하시오:" 같은 문구가 들어가면 오답 처리된다.
❗ 출력 형식도 정확히 맞춰야 함
공백 하나, 느낌표 하나까지도 문제에서 요구한 그대로 출력해야 정답으로 인정된다.

✅ 정답 코드

user_id = input()
print(user_id +"??!")

결과: 정답 ✅

이번 문제의 교훈

기초 문제라고 방심하면 안 된다.
백준에서는 형식이 생명이다.
따라 쓰는 받아쓰기식 공부보다, 직접 고민하고 시행착오를 겪는 과정이 훨씬 도움이 된다.