2일차(컴퓨터와 프로그래밍, 웹개발의 기초, 서버와 클라이언트)

Rina's·2023년 4월 12일

코드스테이츠

목록 보기
2/96

🦑컴퓨터와 프로그래밍의 이해

컴퓨터란 무엇인가?

무언가의 개념에 대하 말하고자 한다면 그것에 대한 시초를 생각해보자 
오래전에 최초의 컴퓨터는 분명 에니악이라고 배웠다 
그렇게 알고 검색했더니 웬걸 안티키티라 기계라는 아날로그 기계가 있네? 
이미 기원전에 기어와 동력이 있었고 최초의 기계는 기원전 3세기에 처음 나홨다고 한다
일차적인 계산을 위한 거대한 기계덩어리, 버그가 실제 '벌레'였던 시대의 컴퓨터란 분명 
거대한 계산을 하기 위한 기계덩어리였다.

결국 컴퓨터의 기본 근원은 결과를 얻기위한 계산기
입력 - 논리연산 - 저장 과 출력의 틀에 있다.

그렇다면 프로그래밍이란 무엇인가?

대충 자연어를 중개어인 프로그래밍 언어화를 거쳐 기계어로 만든다 될 것이다

🦐웹개발의 기초

이 부분에선 어느정도 기본지식이 있어 자세히 정리하지는 않았다.
벨로그의 사용법은 꽤나 자바스크립트와 유사하거나 같은 부분이 많은것 같다.

HTML : 마크어, 테그어(식별자의 개념), 트리구조

CSS : style sheet 모음

javascript : 수업에선 '상호작용'이라고 표현했다

마지막 자가수업으로 chat GPT활용을 통한 웹개발이 과제로 나왔다
인터페이스가 불편해서 vscode로 코드를 옮겨와 실행했으나 스크립트부분에서 데이터가 추출되지 않았다
GPT로 몇번 수정을 해봤는데 코드를 통 째로 짜주는건 시도할 때마다 오류가 점점 늘어나는 것 같아 포기하고 
처음으로 돌아와 조금씩 수정하는 방법으로 바꿨다.
후반엔 자바스크립트로 추출한 데이터에 css를 입히는 부분이 있어서 골머리가 아팠다.
js부분이 문제인건지 내 수준으론 알수가 없어서 포기하고 
그 부분만 빼고 과제를 수행했다
프론트엔드 수업이라면 좀더 매달렸겠지만 수업 방향성이 이게 아닌 것 같아 자체 마무리했다.
이쪽도 기회가 된다면 좀더 공부해 보고싶다

🦞서버와 클라이언트

chat GPT의 질의응답

웹 페이지의 렌더링이 뭐야?

_웹 페이지 렌더링(Rendering)은 웹 브라우저가 HTML, CSS 및 JavaScript와 같은 웹 페이지 리소스를 가져와서 웹 페이지를 시각적으로 표시하는 과정입니다.

렌더링 프로세스는 크게 두 단계로 나눌 수 있습니다.
DOM(Document Object Model) 생성

브라우저가 HTML 문서를 로드하고 파싱하여 DOM 트리를 생성합니다.
DOM은 웹 페이지의 구조를 나타내는 계층적인 트리 구조입니다.

렌더링 트리(Rendering Tree) 생성 및 렌더링
브라우저는 CSS 파일을 로드하고 파싱하여 스타일 규칙을 적용합니다.
브라우저는 JavaScript를 실행하고 DOM 트리를 수정합니다.
이후 브라우저는 렌더링 트리를 생성하여 각 요소의 레이아웃 및 스타일 정보를 담습니다.
마지막으로, 브라우저는 렌더링 트리를 사용하여 브라우저 창에 픽셀 단위로 웹 페이지를 그립니다.

이러한 과정을 통해 사용자가 요청한 웹 페이지가 브라우저에 표시됩니다. 렌더링 프로세스는 매우 복잡하며, 웹 페이지의 구조, 스타일, 자바스크립트 등 다양한 요소에 따라 속도와 성능이 크게 달라질 수 있습니다._

요약하자면 웹페이지 불러오는 과정

2티어 아키텍쳐와 3티어 아키텍쳐의 차이가 뭐야?

2티어 아키텍처와 3티어 아키텍처는 소프트웨어 시스템에서 매우 일반적인 아키텍처 패턴입니다.

2티어 아키텍처는 클라이언트-서버 아키텍처로도 알려져 있으며, 두 개의 계층으로 이루어집니다. 첫 번째 계층은 사용자 인터페이스 및 응용 프로그램 로직을 처리하는 클라이언트이고, 두 번째 계층은 데이터베이스나 파일 시스템과 같은 백엔드 서버입니다. 이러한 아키텍처는 간단하고 직관적이지만, 데이터와 로직이 분리되지 않기 때문에 유지 보수성이 낮아질 수 있습니다.

반면, 3티어 아키텍처는 사용자 인터페이스, 응용 프로그램 로직 및 데이터베이스와 같은 데이터 저장소를 처리하는 세 개의 계층으로 이루어집니다. 첫 번째 계층은 사용자 인터페이스를 처리하고, 두 번째 계층은 응용 프로그램 로직을 처리하고, 세 번째 계층은 데이터베이스나 파일 시스템과 같은 데이터 저장소를 처리합니다. 이러한 아키텍처는 각 계층이 독립적으로 작동하기 때문에 유지 보수성이 높아지고, 확장성도 좋아집니다.

3티어 아키텍처는 보통 웹 애플리케이션에서 많이 사용되며, 예를 들어, 클라이언트 계층은 브라우저에서 실행되는 HTML, CSS 및 JavaScript로 작성된 웹 페이지이고, 애플리케이션 계층은 PHP, Java, Python과 같은 프로그래밍 언어로 작성된 백엔드 코드이며, 데이터베이스 계층은 MySQL, Oracle, MongoDB와 같은 데이터베이스 관리 시스템을 사용합니다.

요약하자면 3티어는 2티어보다 중간다리 역활의 로직이 있어서 서버의 부담이 덜하다는 것 같다
🦀  p.s 마우스가 고장났는데 하필 좌클릭 버튼이 고장나서 커서가 자꾸 이동하는 덕분에 고생중이다.
	내일 여유가 되는대로 마우스부터 사야될 것 같다
profile
갭린이 리나

0개의 댓글