Web Server와 WAS ✍

📌 Web Server 🌟 정의 클라이언트(사용자)가 웹 브라우저에서 보내는 HTTP 요청을 받아 정적 컨텐츠를 제공하는 서버. 🌟 기능 웹 문서들을 HTTP 규약에 따라 웹 클라이언트와 주고 받으며 통신. HTML, CSS, JavaScript, 이미지, 파일 등 즉시 응답가능한 정적 컨텐츠 제공. 동적 컨텐츠 요청 시 WAS에게 해당 요청을 넘겨주고, WAS에서 처리한 결과를 클라이언트에게 전달. 🌟 종류 Apache IIS nginx 📌 WAS (Web Application Server) 🌟 정의 웹 서버와 웹 컨테이너가 합쳐진 형태로, 웹 서버 단독으로는 처리할 수 없는 동적 서버 컨텐츠를 수행하는 서버. 주로 DB 서버와 같이 수행. HTTP를 통해 컴퓨터나 장치에 애플리케이션을 수행해주는 미들..

[라이징캠프 서버 11기] 2주차 기록 📒

📌 수업 🌟 네트워크 네트워크는 Net + Work 의 합성어로써 컴퓨터들이 통신 기술을 이용하여 그물망처럼 연결된 통신 이용 형태를 의미한다. 좀더 쉽게 말하자면 "두 대 이상의 컴퓨터들을 연결하고 서로 통신(이야기)할 수 있는 것" 🌟 IP 주소 가게에 가려면 주소를 알아야하는 것처럼 서버의 주소를 알아야 한다. IP 주소(숫자) & 도메인 주소(WWW.~~) IP 주소만을 사용하지 않고 도메인 주소를 사용하는 이유는 직관적이고 인간 친화적이기 때문이다. 도메인 주소를 입력하면 IP 주소로 매핑하는 작업이 필요하다. 이 작업을 DNS 서버가 맡는다.(Domain Name Server) 포트 : 서버 접근 시 문을 통해 통과한다(127.0.0.1:8080에서 8080이 port, 문의 번호) 크게 고객..

[라이징캠프 서버 11기] 1주차 기록 📒

📌 수업 🌟 자기소개 지원 동기 : 서버 지식이 부족한 것 같아서 빠른 시간 내에 최대한 많은 걸 배우고 싶어서 얻어가고 싶은 것 : 무엇보다 협업의 경험 🌟 아이스브레이킹 좋은 개발자란 ? 어떤 사람을 동료로 맞이하면 좋겠는지? 주어진 시간 내에 요건을 잘 이해하고 이를 최대한 좋은 성능으로 개발하는 능력을 가진 개발자. 동료로는 무엇보다 의사소통이 잘 되는 개발자. 모르는 걸 숨기지 않고 아는 건 주변에게 잘 알려주는 개발자. 다른 의견 : 학습 능력이 좋은 개발자. 의사소통. 문제 해결 능력. 팀 내의 커뮤니케이션. 자기가 개발하고 있는 것을 잘 이해하고 있어야함. 피드백이 원활하게 이루어질 수 있는, 분위기에 잘 적응하는 동료. 되는 것과 안되는 것도 파악할 수 있어야 함. 결과물만 생각하지 않고..

[Tistory] 블로그 폰트가 모바일에 적용 안될 때 😢

웹 상 모바일 버전에서는 폰트가 잘 바뀌는데 휴대폰 접속 시 폰트가 그대로인 경우가 있다. 티스토리 자체에서 /m/ 접속에서의 css 수정하는 기능이 없기 때문인데, 이는 블로그 어드민 사이트 -> 사이드 바의 꾸미기 메뉴 -> 모바일 에서 모바일웹 자동 연결을 사용하지 않습니다로 변경하면 된다. 이렇게 하면 모바일에서 접속했을 때 tistory.com/m/으로의 리다이렉션을 막아줘서 모바일로 접속해도 폰트가 잘 적용된다. 👏

[Tistory] hELLO 스킨 폰트 바꾸기(모바일 포함) ✍

기본으로 설정된 블로그 폰트가 맘에 안들어서 바꿔보았다. 방법은 간단하지만 조금 귀찮은 작업이었다..ㅎ 📝 순서 바꾸고 싶은 폰트 다운받기 블로그 어드민 사이트 -> 사이드바 메뉴에서 스킨 편집 -> HTML 편집 으로 이동 css 코드 상단에 font-face{} 추가 font-family 수정 📌 바꾸고 싶은 폰트 찾기 폰트 무료 사이트 : https://noonnu.cc/ 눈누 상업용 무료한글폰트 사이트 noonnu.cc 원하는 폰트를 찾고 우측의 웹폰트로 사용 코드를 복사한다. 📌 블로그 어드민 사이트 -> 사이드바 메뉴에서 스킨 편집 -> HTML 편집 으로 이동 어드민 사이트 주소는 티스토리 블로그 URL 뒤에 /manage/ 붙이면 된다. ex) https://easyhomputer.tist..

[GitHub] 깃허브 프로필 꾸미기, README.md 코드 🌈

https://github.com/jiholee0 ** 레포지토리 fork 해가실 때 블로그 글에 공감!이나 댓글! 남겨주시면 감사드리겠습니다 ㅎㅎ jiholee0 - Overview 6_oHji. jiholee0 has 18 repositories available. Follow their code on GitHub. github.com 📝 목차 Header와 Footer 깃허브 프로필에 넣기 방문자 수 Hits 깃허브 프로필에 넣기 GitHub 상태 카드 깃허브 프로필에 넣기 기술 뱃지 깃허브 프로필에 넣기 Tistory 최근 게시물 깃허브 프로필에 넣기 -> 사용 불가 전체 코드 📌 Header와 Footer 오픈 소스 : https://github.com/kyechan99/capsule-rende..

[라이징캠프 서버 11기] 소개 및 후기(우수 수료) 💻

📌 지원 계기 백엔드 분야를 제대로 배워보고 싶은데 도저히 혼자서는 갈피를 못잡겠어서 지원했다. 외부 동아리들은 경쟁률이 너무 세고 혼자 공부하자니 막막하고... 라이징캠프는 지원하면 다 할 수 있어서(돈내야함) 질러버렸다..ㅎ 그리고 또 다른 결정적인 이유는 외주 때문이었다. 휴학하는 동안 돈을 모을 계획이었는데, 외주로 돈을 벌면 프로젝트 경험도 쌓고 돈도 벌 수 있겠다~! 하는 생각에 지원했다. 📌 커리큘럼 와 같이 수업이 진행되며, 주 1회 수업, 과제 수행 후 수업 마다 점검 받는 시스템으로 진행된다. 수업은 매주 정해진 요일에 3시간 씩 진행되며, 한시간씩 끊어서 Session 1. 과제 점검 및 피드백 Session 2. 토론식 세션 Session 3. 실습 으로 진행된다. 🚨🚨🚨 그렇다고 ..

[JavaScript] Vue.js 소개 💬

📌 Vue.js란 https://vuejs.org/ Vue.js - The Progressive JavaScript Framework | Vue.js Versatile A rich, incrementally adoptable ecosystem that scales between a library and a full-featured framework. vuejs.org - UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크. - MVVM(Model-View-ViewModel) 패턴을 따르며, 어플리케이션 로직과 UI 분리를 위해 설계되었다. - Angular.js나 React.js보다 많이 알려지진 않았지만 최근 급속도로 확산되고 있으며 실제 Google Trends의 검색어 비율과 GitHub..

[CSS] Inline, Block box 📦

📌 Inline *display 속성이 inline인 엘리먼트는 "나란히" 배치(줄바꿈 x)* width와 height 속성은 무시되고 해당 태그가 마크업하고 있는 요소의 크기 만큼만 공간을 차지한다. margin과 padding 속성은 좌우 간격만 반영되고, 상하 간격은 반영되지 않는다. defalut가 inline인 태그 : 등 📌 Block *display 속성이 block인 엘리먼트는 "세로로" 배치(줄바꿈 o)* width, height, margin, padding 속성 모두 반영된다. defalut가 block인 태그 : 등 📌 Inline-Block *display 속성이 inline-block인 엘리먼트는 "나란히" 배치(줄바꿈 o)* width, height, margin, paddin..

[CSS] Box Model 📦

공식문서 : https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model CSS 기본 박스 모델 입문 - CSS: Cascading Style Sheets | MDN 문서의 레이아웃을 계산할 때, 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각각의 요소를 사각형 박스로 표현합니다. CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 developer.mozilla.org 📌 개념 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(m..

[CSS] CSS 입문 💬

📌 CSS란? CSS는 Cascading Style Sheets의 준말로, HTML이나 XML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어이다. 📌 CSS가 도입된 이유 HTML로도 웹 사이트를 만들고 디자인할 수 있다. 특별히 CSS라는 언어가 도입된 이유는 바로 '정보의 가치와 효율성'을 고려했기 때문이다. 다음과 같은 태그는 해당 Element가 링크라는 정보와, href 속성를 통해 클릭했을 때 이동할 주소에 대한 정보를 제공해준다. 해당 Element를 디자인하기 위해 태그를 추가해보자. 크기는 50px, 색은 빨간색으로 속성을 부여한다. 이를 출력해보면 다음과 같다. 왼쪽은 태그로만 이루어진 Element, 오른쪽은 태그가 추가된 Element이다. '정보의 가치'의 관점에서 ..

[WEB] GitHub를 이용한 웹 호스팅 🕸

1. 웹 사이트를 만든 코드 파일(HTML) 2. 깃허브 페이지를 사용할 수 있는 환경 만 있다면 웹 호스팅을 할 수 있다. 웹 호스팅이란 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ https://easyhomputer.tistory.com/9?category=930933 0. WEB에 대하여 - homputer 0. WEB에 대하여 안녕하세요 :) 이번 포스팅에서는 웹 프로그래밍 언어를 학습하기 전, 'WEB'이 무엇인지를 먼저 다뤄볼까 합니다.٩(ˊᗜˋ*)و ① Web의 접근성 웹의 가장 중요한 특성은 'Public Domain'이 easyhomputer.tistory.com 📌 GitHub 가입 / 로그인 깃허브 사이트(https://github.com/)에서 가입 후 ..