전체 글

드디어 백엔드 파트 시작! 오늘은 백엔드의 구조와 Node.js, HTTP 템플릿 등 백엔드 입문을 위한 기초 개념을 배우고 코드를 작성해보았다.🧮백엔드의 기본 구조백엔드는 사용자에게 보이지 않는 서버 측 로직을 담당하는 웹 애플리케이션의 핵심 파트이다. 클라이언트-서버 아키텍처 관점에서 보면 백엔드는 크게 세 가지 주요 구성 요소로 이루어져 있다. 웹 서버, 웹 어플리케이션 서버, 데이터베이스1. 웹 서버클라이언트로부터 HTTP 요청을 받아서 처리정적 리소스 처리: HTML, CSS, 이미지 파일과 같은 정적 콘텐츠를 직접 클라이언트에게 제공한다.요청 라우팅: 동적 컨텐츠에 대한 요처을 웹 애플리케이션 서버로 전달한다.로드 밸런싱: 여러 서버에 트래픽을 분산하여 시스템 안정성을 보장한다.보안: SSL..

지금까지 배운 HTML, CSS를 활용하여 간단한 웹 페이지를 만들고 배포해보았다. 오랜만에 순수 HTML, CSS로만 작업하는데 너무 재밌었다.🎫테이블HTML을 배울 땐 테이블을 다루지 않았는데, 이번 실습에서 테이블을 적용해보았다.테이블은 행과 열로 구성된 데이터를 표현하기에 적합한 요소이다. 테이블은 다음과 같이 구성한다. No Product 1 product1 2 product2 3 product3 ..

어제는 HTML를 사용하여 웹 페이지의 구조를 작성하는 방법을 알아보았다. 하지만 HTML만으로는 완성된 웹 페이지를 만들 수 없다. 구성 요소들을 보기 좋게 만들고, 사용자 입력에 따른 동작을 정의해야 비로소 웹 페이지/사이트로 기능할 수 있기 때문이다. 오늘은 CSS와 Javascript를 사용하여 웹 페이지에 활력을 불어넣는 방법을 정리해보았다.🎨CSScascading Style Sheet, HTML을 꾸며주는 언어CSS를 사용하여, HTML의 각 요소(element)에 대한 스타일을 지정할 수 있다. 여기서 요소란, 텍스트 또는 형태를 말한다.HTML에 CSS 연결하기1. 인라인HTML 태그 안에 직접 스타일을 작성하는 방식이다. 가장 간단하지만, 복잡해지면 유지보수가 어렵다. 로그인더보기..

🗂️웹의 구조웹은 정보를 주고받는 거대한 네트워크 시스템이다. 서비스를 요청하는 쪽과 제공하는 쪽으로 나뉘는데, 이를 클라이언트와 서버라고 부른다. 클라이언트요청을 보내는 주체웹 브라우저를 통해 서버에 정보를 요청받은 정보를 화면에 표시하는 역할서버정보와 서비스를 제공하는 주체클라이언트의 요청을 처리데이터베이스 관리 및 중요 정보를 저장웹 통신과 프로토콜클라이언트와 서버는 정해진 규칙에 따라서 대화를 나누는데, 이러한 규칙을 프로토콜이라고 한다.웹에서는 HTTP(HyperText Transfer Protocol)을 주로 사용한다. HTTP의 특징은 다음과 같다.요청(Request)와 응답(Response) 구조데이터 전송을 위한 표준화된 규칙보안을 강화한 HTTPS 버전 존재📚웹 개발의 3요소, HT..

🍎브랜치 만들기효율적인 협업을 위해서는 일관된 브랜치 네이밍 규칙을 지키는 것이 좋다. 팀마다 정해진 방식이 있겠지만, 다음같은 네이밍 컨벤션을 사용하는 것이 보편적이다. main 브랜치👉 정상적으로 동작하는 버전이 저장되는 기본 브랜치 브랜치 분기작업의 목적과 성격에 따라 브랜치를 분류하고 네이밍한다. 주로 다음과 같은 규칙을 사용한다.기능 개발: feature/기능명 형태로 명명출시 준비: release-x.x 형식으로 명명긴급 수정: hotfix-x.x.x 형식으로 명명브랜치 병렬 작업 이해하기브랜치를 사용하는 주된 이유는 병렬 작업을 위해서이다. 브랜치는 독립된 작업 공간이므로, 서로 다른 작업을 동시에 진행할 수 있다. 브랜치 실험feature/signup 브랜치에서 test.txt 파일을 ..

오늘 수강한 파트는 깃허브 레포지토리 생성과 브랜치 실습. 주요 명령어들을 정리해보았다.😺Gihub 레포지토리 생성1. Github 계정에 로그인한 후, 우측 상단의 "+" 아이콘을 클릭하고 "New Repository"를 선택한다.2. 레포지토리 생성 페이지에서 다음 정보를 입력한다.Repository name: 레포지토리 명(필수)Description: 레포지토리에 대한 설명(선택)Public/Private: 레포지토리 공개 여부 선택Add a README file: 리드미 파일 자동 생성 여부3. 모든 정보를 입력한 후 "Create Repository" 버튼을 클릭하면 레포지토리가 생성된다.  레포지토리를 생성하면 로컬 프로젝트 연동 방법을 안내하는 페이지가 뜬다. 두 가지 케이스가 있다. 1...

항상 배워보고 싶었던 프론트엔드 스택 1순위는 electron이다. PWA를 사용하면 PC에서도 어플리케이션처럼 접속 가능하지만, 그보다도 더 근본적으로 "PC 앱"인 것을 만들어 보고 싶었기 때문이다. Cursor IDE를 사용하여 뽀모도로 앱을 개발하면서 일렉트론을 체험해보았다.0️⃣Electron.js웹 기술(HTML, CSS, Javascript)을 사용하여 크로스 플랫폼 데스크톱 애플리케이션을 개발할 수 있는 오픈 소스 프레임워크 일렉트론의 핵심은 Chromium(Google Chrome 오픈 소스)와 Node.js를 하나의 런타임으로 통합했다는 것이다. Chromium은 웹 콘텐츠를 렌더링하고, Node.js는 파일 시스템, 네트워크 등 시스템 리소스에 접근할 수 있는 API를 제공한다. 이 ..

LMS 시스템의 최고 장점! 주말에도 수강할 수 있다.🔴Git이란 무엇인가?Git은 프로그래머들의 필수 도구인 버전 관리 시스템이다. 우리가 문서를 작성할 때, "최종", "진짜최종", "진짜진짜최종"과 같은 파일명을 붙이는 것처럼, 프로그래밍 작업에서도 변경사항을 저장하고 관리할 필요가 있다. Git은 버전 관리를 체계적으로 할 수 있게 해주는 도구이다. Git과 Github의 관계Git와 Github은 컴퓨터와 클라우드 저장소 관계와 비슷하다. Git은 내 컴퓨터에서 직접 실행되는 버전 관리 시스템이고, Github은 이 Git으로 관리하는 프로젝트를 온라인 상에서 저장하고 공유할 수 있는 플랫폼이다. 팀 프로젝트 하는 경우를 생각해보자. 각자 컴퓨터에서 Git으로 작업을 하고, 이 작업물을 Git..

대학에서 C와 C++로 몇 번 프로젝트를 해본 경험이 있긴 하지만, 3/4학년과 졸업 후엔 주로 웹 개발에 집중해왔습니다. 러스트(Rust)란 이름은 여러 기술 블로그나 개발자 커뮤니티에서 자주 보았고, 스택오버플로우에서 가장 사랑받는 언어로 몇 년째 1위를 차지했다는 것 정도로만 알고 있었습니다. 익숙한 이름이긴 하지만, 제가 관심 있는 분야와는 거리가 멀어, 딱히 배워볼 생각은 하지 않았습니다. 시스템 프로그래밍 언어, 메모리 안정성, 소유권 등등...이런 용어들은 제가 주로 다루는 자바스크립트와 리액트 등과는 꽤 동떨어진 느낌이었습니다. 그래서 러스트는 앞으로도 "이름만 아는 언어"일 뿐, 공부하게 될 것이라고는 전혀 생각 못했습니다. 그런데 한빛미디어 도서 서평단 활동을 하면서 신청한 책 2권 중..