더듬이의 헬로월드

레퍼런스https://www.youtube.com/watch?v=FQHNg9gCWpghttps://youtu.be/z1Jj7Xg-TkU?si=ayDJy4iWGqkKnPrP1. URL 입력사용자가 브라우저의 주소창에 www.naver.com과 같은 URL을 입력하면, 브라우저는 이를 기반으로 서버와 통신하기 위해 준비를 시작합니다.2. DNS 요청 및 IP 주소 확인브라우저는 DNS 서버에 해당 도메인 이름(www.naver.com)에 대한 IP 주소를 요청합니다.DNS 서버는 요청에 응답하여 IP 주소(예: 223.130.195.200)를 반환합니다.3. TCP 연결 (3-Way Handshake)브라우저는 서버와 데이터 전송을 위해 안정적인 연결을 설정합니다.TCP 3-Way Handshake는 다음 ..

내가 만들 페이지는 다음과 같다  웹 페이지를 만들 때, 가장 중요한 단계 중 하나는 페이지의 전체 구조를 시각적으로 잡는 것단순히 디자인만 복제하는 것이 아니라, 실제로 HTML 요소들을 어떻게 배치하고 나눌지 미리 생각하는 필요하다.특히 각 섹션을 네모네모로 나누어 DIV 요소의 영역을 가늠하는 것이 중요하다피그마를 통해 네모네모 DIV 구조 잡기그래서 이번 프로젝트에서는 Figma와 같은 도구를 사용해 페이지의 DIV 구조를 시각적으로 구상할 예정이다Figma를 통해 각 섹션이 어떻게 나눠질지, 각 영역에 어떤 HTML 태그를 사용할지 미리 정리하도록 하겠다.예를 들어:헤더 영역: 상단에 고정될 header와 그 안에 들어갈 nav 태그, 로고와 메뉴를 배치할 div 등을 구상메인 콘텐츠 영역: 클..

1. 프로젝트 생성더프텔 프로젝트의 첫걸음을 내딛기 위해 Rider를 사용해 프로젝트를 생성했다.사실 Rider는 원래 유니티 개발할 때 주로 사용했던 IDE이지만, 익숙한 환경에서 새 프로젝트를 시작하는 것이 더 빠르게 작업을 진행할 수 있다고 판단했다.Rider는 다양한 언어와 프로젝트를 지원하므로, HTML/CSS 프로젝트에도 문제없이 활용 가능하다.Tip: Rider가 없다면 VS Code나 WebStorm 같은 다른 IDE를 사용해도 좋다. 중요한 것은 본인이 편하게 사용할 수 있는 도구를 선택하는 것이다.프로젝트 생성 과정Rider 실행 → 새 프로젝트 생성.프로젝트 폴더를 지정한 후, HTML/CSS로 기본 틀을 잡고 index.html과 style.css 파일을 생성했다.이제 HTML과 C..

깃허브 : https://github.com/Thedum2/Theftel웹 개발 공부를 시작하면서 HTML과 CSS의 기초를 익혔다. 처음에는 수많은 HTML 태그와 CSS 속성을 외우려 했지만, 현실적으로 모든 것을 기억하는 것은 불가능하다는 걸 느꼈다. 그래서 중요한 것은  모든 걸 다 외우는 것보다 기본기를 이해하고 직접 구현해보는 것임을 깨달았다. 그래서 선택한 방법은 바로 클론 코딩이었다. 내가 좋아하는 웹사이트를 직접 따라 만들어보면서 실제 적용되는 HTML/CSS 구조와 스타일링을 익히는 것이 목표였다. 그 첫 번째 프로젝트로 라프텔 페이지를 클론하기로 했다. 왜 클론 코딩을 선택했나? 직접 안만들고?디자인 할 줄 몰 라 / 바빠 임마완벽하게 똑같이 만들 필요는 없었고, 내가 구현하면서 부족..

1. normalize.css / reset.css을 사용하는 이유 내가 공부하다가 흥미로운 사실을 발견했다!최근 공부하다가 box-sizing 문제에 대해 흥미로운 사실을 발견했다.box-sizing: content-box;기본적으로 content-box가 적용된다는 사실을 알게 되었는데, 이 설정에서는 padding과 border가 요소의 크기에 포함되지 않아 레이아웃을 예측하기 어려웠다. 하지만 box-sizing: border-box;로 설정하면 padding과 border가 포함된 총 너비와 높이를 정확히 계산할 수 있어, 레이아웃을 만들 때 훨씬 더 예측 가능해진다는 것을 알았다.과연 이런 부분들이 하나만 있을까?너무나도 궁금했다!크롬파이어폭스엣지 웹 개발 초기에는, 브라우저마다 HTML 요소..

2024.10.25 - [컴퓨터 공학 기초 지식/웹] - [웹 기본] 인터넷은 어떻게 동작하는가? [웹 기본] 인터넷은 어떻게 동작하는가?그냥 귀여워서 넣어본,,,,인터넷과 데이터(패킷)의 전달 인터넷,,,,인터넷 말만 했지,,, 자세히는 모르잖아? 인터넷은 전 세계의 컴퓨터와 장치들이 서로 연결되어 정보를 주고받는 거대한 네트ddecode.tistory.com2024.10.25 - [컴퓨터 공학 기초 지식/웹] - [웹 기본] 클라이언트와 서버 [웹 기본] 클라이언트와 서버2024.10.25 - [컴퓨터 공학 기초 지식/웹] - [웹 기본] 인터넷은 어떻게 동작하는가? [웹 기본] 인터넷은 어떻게 동작하는가?그냥 귀여워서 넣어본,,,,인터넷과 데이터(패킷)의 전달 인터넷,,,,인터넷ddecode.tis..

2024.10.25 - [컴퓨터 공학 기초 지식/웹] - [웹 기본] 인터넷은 어떻게 동작하는가? [웹 기본] 인터넷은 어떻게 동작하는가?그냥 귀여워서 넣어본,,,,인터넷과 데이터(패킷)의 전달 인터넷,,,,인터넷 말만 했지,,, 자세히는 모르잖아? 인터넷은 전 세계의 컴퓨터와 장치들이 서로 연결되어 정보를 주고받는 거대한 네트ddecode.tistory.com 지난 포스팅에서는 인터넷이 무엇인지와 우리가 몰랐던 여러 중요한 키워드들을 통해 데이터가 인터넷에서 어떻게 전달되는지를 알아봤다.여기서 다뤘던 주요 개념들은 TCP/IP 프로토콜, 데이터 패킷, 분산형 네트워크, IP 주소, DNS, 라우터였다.이제, 이번 포스팅에서는 인터넷 상에서 정보를 주고받는 두 가지 중요한 주체인 클라이언트와 서버에 대해..

그냥 귀여워서 넣어본,,,,인터넷과 데이터(패킷)의 전달 인터넷,,,,인터넷 말만 했지,,, 자세히는 모르잖아? 인터넷은 전 세계의 컴퓨터와 장치들이 서로 연결되어 정보를 주고받는 거대한 네트워크이건 당연히 아는 거잖아 ㅋㅋ우리가 원하는 답변은 이런 추상적인 내용이 아니라 기술적인 내용일 것이다GPT는 뭐라고 답변할까?인터넷은 TCP/IP 프로토콜을 기반으로 한 글로벌 네트워크로, 수많은 컴퓨터와 서버가 서로 연결되어 데이터 패킷을 주고받는 분산형 네트워크입니다. IP 주소와 DNS를 통해 장치들이 식별되고, 라우터를 통해 패킷이 최적의 경로로 전달됩니다.여기서 우리는 여러 키워드를 만나볼 수 있다.TCP/IP 프로토콜데이터 패킷을 주고받는(데이터 패킷)분산형 네트워크IP주소DNS라우터다들 한번쯤 들어본..

시작하는 이야기나는 유니티 개발자로 2년간 경력을 쌓았지만, 최근 들어 직무 전환에 대한 고민이 많았다.게임업계에 진출할 기회도 있었지만, 사실 나는 게임 개발에는 큰 열정이 없었다.유니티의 전망이 불확실하다고 느껴졌고, UI에 대한 관심이 더 컸기 때문에 플랫폼 독립적인 웹이나 크로스 플랫폼 앱 개발에 눈을 돌리게 되었다.특히, React와 React-Native는 플랫폼에 구애받지 않고 웹과 앱을 모두 아우를 수 있는 기술이기에 매력적이었다.고민의 시간직무 변경을 고려하면서 나는 두 가지 선택지에서 고민했다 Main: React 웹 개발 / Sub: React-Native 어플리케이션 개발Main: Android Native / Sub: React-Native/Flutter 크로스 플랫폼 개발첫 번째..

using UnityEngine; [System.Serializable] public class PlayerData { public string playerName; public int playerLevel; public float playerHealth; } public class JSONParser : MonoBehaviour { public TextAsset jsonFile; void Start() { PlayerData player = JsonUtility.FromJson(jsonFile.text); Debug.Log("Player Name: " + player.playerName); Debug.Log("Player Level: " + player.playerLevel); Debug.Log("Pl..