본문 바로가기

Software Engineering

 (41)
[Web Game] 달려라 르탄이 웹 게임 만들기 이번 글에서는 스파르타 코딩클럽에서 무료로 제공하는 르탄이 달리기 게임 개발 과정을 기록해보려고 한다. HTML, CSS, JavaScript를 사용해 간단한 게임을 개발하며 웹 개발의 기본기를 다질 수 있는 좋은 기회가 되었다. 개발 도구로는 VS Code를 사용했으며, 기본적인 웹 기술들을 활용해 게임을 구현해 나가는 실습을 해볼 예정이다.이번 프로젝트는 JavaScript로 게임의 동작을 제어하고, CSS를 통해 게임 화면의 스타일을 꾸미며, HTML로 게임의 구조를 구성하는 방식으로 진행된다. 이 과정에서 화면 요소를 움직이게 만드는 방법, 사용자 입력에 반응하는 방법, 스타일과 애니메이션을 적용하는 기법 등을 학습할 수 있었다. HTMLHTML 파일에서는 페이지의 기본적인 레이아웃을 구성하고, ..
[CSS] 7장: 효과적인 레이아웃을 위한 CSS 속성 다루기 개요이번 글에서는 웹 페이지 디자인에서 중요한 레이아웃 설계를 다루기 위해 CSS의 핵심 속성들을 살펴본다. 플렉스 박스와 그리드 레이아웃 시스템을 활용해 각각 1차원과 2차원 레이아웃을 설계하는 방법을 배울 것이다. 이를 통해 요소들의 배치와 정렬을 보다 직관적이고 유연하게 다룰 수 있다. 또한, 미디어 쿼리를 사용해 다양한 기기에서 반응형 웹을 구현하는 방법도 알아본다. 이러한 CSS 속성들을 통해 다양한 화면 크기와 해상도에서 최적화된 사용자 경험을 제공하는 웹 페이지를 설계할 수 있을 것이다.플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기플렉스 박스 레이아웃 : 1차원 방식으로 효과적으로 레이아웃을 설계할 수 있도록 고안된 스타일 속성. 플렉스 박스 레이아웃 살펴보기구성 요소 : 주축 (수평축)..
[BJ-G4] C++ : 1106번 호텔 지난 알고리즘 풀이 이후로 블로그로 기록하지는 않았지만, 꾸준히 하루에 최소 한 문제씩, 목표 3문제씩 코드카타를 해왔다. 오늘 풀이할 문제는 백준 Gold4의 "호텔"이라는 문제다. 문제 링크: https://www.acmicpc.net/problem/1106문제 분석Input: C : 늘려야 할 고객의 수N : 도시의 개수(비용 , 고객의 수) * N : 각 도시에서의 홍보비 별 구할 수 있는 고객의 수Output: result: 홍보 비용으로 얻을 수 있는 고객의 수문제 풀이더보기#include #include #include constexpr int INF = 1e9; //max Intusing namespace std;int main() { ios::sync_with_stdio(false)..
[JS] 12장: 문서 객체 모델과 이벤트 다루기 (2) 개요이번 장에서는 자바스크립트를 통해 폼을 조작하고, 다양한 이벤트를 다루며, 이벤트 객체와 this의 동작 원리에 대해 배우게 된다. 이를 통해 사용자 입력을 더 효과적으로 처리하고, 페이지 내에서 역동적인 상호작용을 구현할 수 있다. 이벤트 객체의 활용법을 익히면 사용자가 클릭하거나 키를 누르는 순간의 정보를 활용해 더 직관적인 사용자 경험을 제공할 수 있게 될 것이다. 이번 학습을 통해 실무에 가까운 자바스크립트 활용법을 다질 수 있을 것 같다.폼 조작하기form 태그 선택하기#forms 속성 사용하기document 객체의 forms 속성은 form 태그의 노드 정보를 HTMLCollection 객체에 담아 반환한다. 따라서 이 forms 속성을 사용하면 화면에 있는 form 요소 노드를 쉽게 선택..
[학습 리뷰] 길벗 코딩 자율학습단 후기 : HTML + CSS + 자바스크립트 학습단 후기한 달 간의 여정이 끝났다. 아직 책의 모든 내용을 완전히 학습하지는 못했지만, 최종 프로젝트를 다루는 13장을 제외하고는 모든 내용을 학습 완료했다.길벗 자율학습단은 맨날 공부한다고 교재를 구매해서 차일 피일 미루다 결국 책의 반도 보지 못하고 어딘가 구석에 처박혀 버리는 사람들에게 아주 좋은 경험을 줄 수 있다. 왼쪽은 내가 책을 처음 구매했을 때 찍은 사진이고, 오른쪽은 길벗에서 매일매일 보내주는 오늘의 학습 내용과 동기부여 글귀를 담은 카카오톡 알림이다. 커리큘럼을 적정 범위로 설정해주고, 평일 오전 10시마다 알림을 주어서 그나마 밀리지 않고 한달만에 책을 완독에 가깝게 끝낼 수 있었다. 내 컴퓨터 앞 독서대에 항상 진도만큼 책을 펼친 채로 두어 한 달 간 정이 든 책은, 이제 마지막..
[JS] 12장: 문서 객체 모델과 이벤트 다루기 (1) 개요12장은 완전 새로운 내용이 주를 이룬다. 이번 글에서는 문서 객체 모델과 그 노드를 어떻게 다루는지에 대해 설명하고, 이어지는 글에서 폼 조작법과 이벤트를 다루는 법 등에 대해 설명할 예정이다. 함수 자체를 외우는건 어려운 일이 아니지만, 오늘 내용을 제대로 활용하기 위해서는 이제 적극적인 실습이 필요할 것 같다. 마침 13장이 실전 프로젝트이기도 하고, 그동안 각 장의 마무리 파트에 있는 과제를 생략해왔으니 배운 모든 내용을 종합해서 복습해 봐야겠다.문서 객체 모델 이해하기문서 객체 모델 : 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조.문서 객체 모델이 생성되는 방식DOM 트리 : 문서 객체 모델은 트리 구조를 가진다. 루트 노드는 html이며, html은 head와 body를..
[JS] 11장: 자바스크립트 객체 다루기 개요오늘 다룰 내용은 교재의 11장, 자바스크립트의 객체 다루는 방법이다. 딱 저번 내용인 함수부터 슬슬 미묘한 언어 간 차이점 때문에 헷갈리기 시작했는데, 오늘 공부할 내용도 비슷하면서 미세하게 다른 점이 많아 객체를 다루는 많은 연습이 필요해 보인다. 길벗의 커리큘럼 상에는 JS가 어렵다고 판단했는지 4개의 챕터로 이루어진 11장을 2번에 걸쳐 공부하도록 했지만 오히려 CSS보다 JS가 나한테는 쉽고 빠르게 배울 수 있어서 진도가 조금 밀려도 따라잡을 수 있을 것 같다.객체란자바스크립트에서의 객체 : 키와 값으로 구성된 속성의 집합.const person = {}; //리터럴 방식으로 객체 생성const person = new Object(); //객체 생성자를 사용하여 객체 생성이 외에도 funct..
[JS] 10장: 자바스크립트 함수 다루기 개요이번 글에서는 역시나 2일 분량에 해당하는 10장 전문, 자바스크립트 함수에 대해 다룰 예정이다. 이미 다른 언어에서 함수 개념에 익숙한 상태이기 때문에, 처음 절반은 복습하는 차원에서 학습을 진행할 계획이다. C++에서는 함수 오버로딩과 포인터를 활용한 유연한 함수 호출이 가능하다. C#에서는 델리게이트와 람다 표현식을 통해 함수를 더 강력하게 사용할 수 있다. Java는 메서드 오버로딩과 함께 객체 지향적으로 함수를 처리하는 방식이 특징이다. 그렇다면 JS는 어떤 특징을 가지고 있는지 지금부터 배워보자.함수란함수 : 목적을 가지고 작성한 코드를 모아둔 블록문.gugudan(); //함수 선언 전 호출도 가능/* 구구단 함수 정의 */function gugudan() { for (le..
[CSS] 6장: CSS 필수 속성 다루기 (2) 개요이번 글에서는 CSS의 위치 속성을 이용해 HTML 요소를 원하는 위치에 배치하는 방법을 다룬다. 이후, 페이지의 인터랙티브한 요소를 구현하기 위한 전환 효과와 애니메이션 속성을 학습하고, 이를 활용해 부드러운 전환과 애니메이션을 제어하는 법을 배운다. 또한, 변형 효과를 적용해 요소의 모양이나 크기를 변경하는 방법도 살펴본다. 마지막으로, 웹 폰트와 아이콘 폰트를 사용해 텍스트와 아이콘을 보다 세련되게 표현하는 방법을 알아볼 예정이다.위치 속성으로 HTML 요소 배치하기HTML 요소를 기본 흐름에서 벗어나서 원하는 곳에 배치할 수 있도록 해준다.position 속성좌표값에 따라 요소를 배치하도록 한다.position : ;속성값설명static요소를 기본 흐름에 따라 배치relative요소를 기본 흐..
[Firebase] Realtime Database와 Storage 1. Firebase Realtime Database와 Firebase Storage의 차이Firebase Realtime Database와 Firebase Storage는 둘 다 Firebase의 주요 기능이지만, 각각 다르게 설계되었고, 서로 다른 사용 사례에 적합합니다.Firebase Realtime DatabaseFirebase Realtime Database는 실시간 데이터베이스로, JSON 형태의 데이터를 저장하고 여러 클라이언트가 실시간으로 데이터를 동기화할 수 있도록 설계되었습니다.데이터 구조: 계층적 구조(트리 형태)로 데이터를 저장하며, 각 데이터는 키-값 쌍으로 저장됩니다.실시간 동기화: 클라이언트 간의 데이터 변경이 즉각적으로 반영되어, 실시간 협업 도구, 채팅 애플리케이션, 게임 ..
[Firebase] Unity와 Firebase 프로젝트 연동 Firebase - Unity 연동Firebase 프로젝트 생성웹에서 firebase console에 접속한 후, 첫번째 사진과 같이 프로젝트 만들기를 클릭한다.그러면 두 번째 사진과 같이 Google 애널리틱스 기능을 활용할 것인지 물어보는데, 일반적으로는 사용하는 것이 권장된다. (개인용 토이 프로젝트고 배포 예정이 없다면 굳이 선택하지 않아도 된다.)사진에는 없지만 그 후 firebase analytics 계정을 선택한 후 확인 버튼을 누르면 무사히 프로젝트가 생성이 된다. 마지막 사진은 추가할 firebase 기능들인데, 이번에는 Authentication을 사용할 것이므로 해당 항목을 클릭해 활성화한 후 프로젝트에서 사용할 로그인 방법을 추가한다.Unity와 연동연동할 때 플랫폼에 맞는 goog..
[JS] 9장: 자바 스크립트 기초 문법 살펴보기 개요이번 장에서는 프로그래밍 언어의 기초 개념을 다루게 된다. 변수와 상수, 자료형을 통해 데이터를 저장하고 처리하는 방법을 익히며, 다양한 연산자를 사용해 데이터를 조작하는 법을 배울 것이다. 이어서 조건문과 반복문을 통해 프로그램의 흐름을 제어하는 기초적인 논리 구조를 학습하게 된다.이 장은 원래 11일과 12일에 걸쳐 학습하도록 설계되어 있지만, 나는 이미 다른 언어를 통해 어느 정도 프로그래밍에 익숙한 상태다. 또한, CSS 학습 일정이 다소 밀린 관계로 이번에는 2일치 분량을 한 번에 이어서 학습하려 한다. 이번 장에서 다룰 내용은 매우 기본적이지만, 프로그래밍의 핵심 개념을 다시 한 번 정리하는 기회로 삼고, 실전 응용에서 활용할 수 있는 기초를 다지는 것이 목표다.변수와 상수변수var num..
[JS] 8장: 자바 스크립트 시작하기 개요드디어 CSS 과정을 지나 JavaScript 학습을 시작했다. JavaScript는 이전에 가볍게 배운 경험이 있고, 다른 컴퓨터 언어도 다뤄본 적이 있어서 암기 위주였던 디자인 파트에 비해 더 수월하게 공부할 수 있을 것 같다. 이 책을 통해 학습을 시작하기 전에 Unity에서 UI 작업을 하던 것을 떠올리면, 코드로 모든 것을 제어하는 일이 골치 아픈 작업처럼 느껴지기도 했지만, 이제는 디자인을 넘어 웹 동작 구현을 배우게 되어 학습이 더욱 흥미로워질 것 같다.자바스크립트 코드 작성 비법html 파일과 자바스크립트 연결하기내부 스크립트 방법 : 를 통해 파일 경로로 불러오기내부 스크립트를 html 내부에서 사용할 때는 반드시 body 요소의 종료 태그 전에 작성한다. 디자인을 사용자에게 보여야 ..
[CSS] 6장: CSS 필수 속성 다루기 (1) 개요지난 장에서 배운 선택자를 활용하려면 선언부에서 사용할 수 있는 스타일 관련 속성과 속성애서 사용할 수 있는 속성값을 알아야 한다. 그래서 이번에는 두 편에 걸쳐 CSS의 기본적인 특징과 여러 속성을 통해 웹 페이지의 스타일을 효과적으로 제어하는 방법을 살펴본다. 먼저, CSS의 전반적인 특징을 살펴본 후, 텍스트를 꾸미기 위한 다양한 텍스트 속성을 배우게 된다. 이어서, 웹 요소의 레이아웃을 구성하는 핵심 개념인 박스 모델을 이해하고, 이를 활용해 요소의 크기와 배치를 제어하는 방법을 다룬다. 마지막으로, 배경 속성을 통해 웹 요소의 배경을 설정하고, 디자인을 더 다채롭게 만드는 방법을 알아볼 예정이다.CSS의 특징 살펴보기기본 스타일 시트 : 웹 브라우저 자체에 내장되어 있는 스타일이 미리 정의된..
[CSS] 5장: CSS 선택자 다루기 개요이번 글에서는 CSS 선택자에 대해 다룰 예정이다. 선택자는 HTML 요소에 스타일을 적용할 때 어떤 요소를 선택할지 지정하는 기능이다. 이 장에서는 기본 선택자부터 시작해 조합 선택자, 가상 요소 선택자, 가상 클래스 선택자, 그리고 다양한 선택자를 조합해 사용하는 방법까지 배우게 된다. 이를 통해 보다 정교하고 효율적으로 스타일을 적용하는 방법을 익힐 수 있을 것이다. 기본 선택자 사용하기전체 선택자*{ /* CSS 코드 */ }HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법.* 기호를 통해 사용된다.h1, p 태그를 비롯해 html, head, title, style, body 태그 등 모든 요소가 선택된다.태그 선택자tagName{ /* CSS 코드 */ }HTML태그..
[Firebase] Firebase 학습 로드맵 개요유니티로 게임 개발을 학습하다 보니, 로그인, 게임 데이터 저장 및 로드, 그리고 사용자 피드백 같은 부분에서 서버의 필요성을 느끼게 되었. 그래서 여러 튜터님들과 멘토님들께 조언을 구했는데, 뒤끝, Firebase, AWS Amplify 같은 BaaS 플랫폼을 추천받았다. 그중에서도 많은 분들이 Firebase를 가장 많이 추천해 주셔서, 이 플랫폼에 대해 좀 더 깊이 찾아보게 되었다.Firebase는 구글에서 제공하는 클라우드 기반 서비스로, 인증, 데이터베이스, 스토리지, 푸시 알림 같은 기능들을 쉽게 구현할 수 있다. 서버 관리에 대한 부담이 적기 때문에 많은 회사에서 이 플랫폼을 채택하고 있고, 개인적으로도 구글이 제공하는 서비스라 더욱 신뢰가 갔다.이하의 Firebase의 각종 기능들은 학..
[도서 리뷰] 길벗 코딩 자율학습 : HTML + CSS + 자바스크립트 설명나는 평소 즐겨보던 유튜브 채널 **"나도 코딩"**에서 이 책을 처음 접하게 되었다. 이 책은 파이썬, 자바스크립트, C언어, 스프링부트, Vue.js, 리눅스 입문서 등 다양한 주제의 시리즈로 구성되어 있는데, 그중에서도 웹 개발에 관심이 생겨 이 책을 선택하게 되었다.책의 구성은 1~3장이 HTML, 4~7장이 CSS, 8~12장이 JavaScript, 그리고 마지막 장에서는 이 모든 것을 통합하여 프로젝트를 제작하는 방식으로 이루어져 있다.이미 컴퓨터 언어의 기초는 어느 정도 알고 있는 나에게, 자바스크립트만 다루는 입문서보다는 이 책이 더 적합하다고 느껴졌다. 비록 초보자를 위한 책으로 추천되었지만, 나는 최종 프로젝트 장에 가장 기대가 크다. 하나의 언어로는 완성된 결과물을 내기 힘들지만,..
[CSS] 4장: 웹 스타일링을 위한 CSS 기초 배우기 개요이번 장에서는 CSS의 기본 문법과 스타일을 웹 페이지에 적용하는 방법에 대해 다룬다. CSS는 웹 페이지의 디자인을 담당하는 언어로, HTML이 웹 페이지의 구조를 정의한다면, CSS는 그 구조에 시각적 스타일을 입힌다. 초기에는 HTML의 style 속성을 사용해 개별 요소에 스타일을 적용했으나, 구조와 디자인을 분리하여 효율성을 높이고 유지 보수를 용이하게 하기 위해 CSS가 독립된 언어로 발전하게 되었다.이 장에서는 CSS의 기초 문법을 배우고, HTML과 분리된 이유를 설명하며, 실제로 HTML에 스타일을 적용하는 방법을 단계별로 살펴볼 예정이다.CSS 문법 살펴보기선택자 : CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역.선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성..
[HTML] 3장: 실무에서 자주 사용하는 HTML 필수 태그 다루기 (2) 개요이번에 공부해볼 주제는 HTML 태그들이다. 그동안 야매로 HTML을 다뤄봤기 때문에 몇몇 태그는 익숙하지만, 제대로 된 사용법이나 의도까지 완벽하게 이해한 것은 아니었다. 그래서 이번 기회에 정식으로 학습하게 되어 기쁘다. 현재 보고 있는 책에서 3장이 HTML을 다루는 마지막 장인데, 태그 사용법을 모두 익히면 HTML로 웹사이트를 구성하는 기본적인 과정은 마무리된다고 할 수 있다.3장은 두 번에 나누어 공부할 예정인데, 전반부는 기본적인 문서 작성과 관련된 내용을 다루고, 후반부는 표, 형식, 그리고 멀티미디어처럼 조금 더 심화된 주제를 포함하고 있다. 이를 통해 HTML의 기초부터 심화된 활용까지 체계적으로 이해할 수 있을 것으로 기대된다. 폼 구성하기form 태그폼 양식을 의미하는 태그. a..
[HTML] 3장: 실무에서 자주 사용하는 HTML 필수 태그 다루기 (1) 개요이번에 공부해볼 주제는 HTML 태그들이다. 그동안 야매로 HTML을 다뤄봤기 때문에 몇몇 태그는 익숙하지만, 제대로 된 사용법이나 의도까지 완벽하게 이해한 것은 아니었다. 그래서 이번 기회에 정식으로 학습하게 되어 기쁘다. 현재 보고 있는 책에서 3장이 HTML을 다루는 마지막 장인데, 태그 사용법을 모두 익히면 HTML로 웹사이트를 구성하는 기본적인 과정은 마무리된다고 할 수 있다.3장은 두 번에 나누어 공부할 예정인데, 전반부는 기본적인 문서 작성과 관련된 내용을 다루고, 후반부는 표, 형식, 그리고 멀티미디어처럼 조금 더 심화된 주제를 포함하고 있다. 이를 통해 HTML의 기초부터 심화된 활용까지 체계적으로 이해할 수 있을 것으로 기대된다.텍스트 작성하기hn 태그제목이나 주제를 나타내는 텍스트..

티스토리툴바