[HTTP] 1-1. IP (인터넷 프로토콜)
·
✏️ Study/🌐 네트워크
1. 인터넷 네트워크 1-1. IP 1-2. TCP/UDP 1-3. PORT 1-4. DNS 클라이언트-서버 간 인터넷 통신은 수 많은 노드를 거쳐 이루어짐 IP (Internet protocol) 의 역할 - IP 주소를 통해 데이터 전송, 수신 가능 IP의 한계 1. 비연결성 - 패킷을 받을 대상이 없거나, 서비스 불능 상태여도 무조건적으로 패킷 전송 2. 비신뢰성 - 중간에 패킷이 소실될 수 있음 - 패킷이 순서대로 도착하지 않을 수 있음
크롬 브라우저 유용한 단축키 for Mac
·
🥁 Frontend/🖼️ 브라우저
📍창 관련새 창 열기: cmd + n시크릿 모드로 새 창 열기: cmd + chift + n창 최소화: cmd + m 📍탭 관련새 탭 열기: cmd + t이전에 닫은 탭을 닫은 순서대로 다시 열기: cmd + shift + t탭 이동: opt + cmd + N번째 탭으로 이동: cmd + 1 ~ 8마지막 탭으로 이동: cmd + 9뒤로 가기: cmd + 앞으로 가기: cmd + -> or ]탭 닫기: cmd + w 📍기타강력 새로고침: cmd + shift + r현재 페이지 북마크 저장: cmd + d
워드프레스 - 02 - 기본
·
✏️ Study/🪜 Dev Infra
준비사항 - EC2 인스턴스에서 docker-compose로 워드프레스 설치 - 퍼블릭 IP:8080에 접속 워드프레스 테마 설치 - 접속 후 외모 => 테마 => 시드니 검색 후 설치 => 활성화 워드프레스 페이지 생성 - 하나의 페이지 = 하나의 메뉴 - 페이지 => 새 페이지 추가 클릭 메뉴 편집 - 외모 => 메뉴 => 메뉴 편집 사이트 제목 편집 - 헤더 => 사이트 아이덴티티 - 사이트 제목, 파비콘, 로고 등을 편집할 수 있음 설정 - 페이지 고유주소를 글이름으로 설정 가능 Footer 만들기 - 외모 => 사용자 정의 => Footer - 외모 => 위젯 => Footer 선택 후 입력 게시판 플러그인 설치 - 플러그인 => 새로 추가 => Mang Board 설치 및 활성화 - Mangb..
도커 (Docker) 소개
·
✏️ Study/🪜 Dev Infra
도커란? - 컨테이너 기반의 오픈소스 가상화 플랫폼 - 다양한 프로그램, 실행 환경 등을 컨테이너로 추상화하여 동일한 인터페이스를 제공하고 프로그램의 배포와 관리를 쉽게함 도커 및 워드프레스 설치 - PuTTY를 통해 EC2 인스턴스에 접속 - root에서 도커 설치 sudo yum install -y docker - 도커 실행 sudo service docker start - 도커 그룹에 sudo 추가 (인스턴스 접속 후 바로 도커 제어할 수 있도록 sudo usermod -aG docker ec2-user - 인스턴스 재접속 후 도커 명령어 실행해보기 docker run hello-world - docker-compose 설치 (최신 버전 v2 이나 편의상 1.29.2 로 진행) sudo curl -..
워드프레스(Wordpress) - 01 - 소개
·
✏️ Study/🪜 Dev Infra
워드프레스란? - 콘텐츠 관리 시스템(CMS) - php 기반의 오픈소스 프로그램 - 빠르고 쉽게 디자인을 갖춘 웹사이트나 블로그, 앱 등을 만들 수 있음 워드프레스의 장점 - 쉬운 사용법 (카테고리 생성 -> 포스트 발행 -> 페이지 구축) - 강력한 플러그인 시스템 (이커머스 등의 다양한 플러그인 라이브러리 제공) -> 다양한 기능을 제공하는 웹사이트 구현 가능 - HTML, CSS를 몰라도 디자인 구현 가능 (테마 구매) - 모바일 웹 지원 - 검색엔진 최적화 (SEO) 지원 - 댓글 기능 제공 (SNS 연동 가능) 워드프레스의 단점 - 커스터마이징 어려움 - 한글 서체 적용을 위한 추가 작업 필요 - IE 지원 호환 어려움 (워드프레스는 HTML5 기반으로 IE 호환 어려움)
Bootstrap - Intro
·
✏️ Study/Front-end ETC
Bootstrap이란? - 웹 디자인용 오픈소스 프레임워크 - HTML, CSS, JS 사용 - 트위터에서 개발 그런데 Framework란? - 소프트웨어의 생산성을 높이기 위해 개발된 방법 - 반복된 구조나 기능들을 추상화시켜 재사용이 가능하도록 하는 소프트웨어 환경 - 즉, 미리 만들어놓은 기능을 어플리케이션에서 손쉽게 재사용할 수 있도록 해준다 - 따라서 라이브러리에 비해 프레임워크의 주도권이 강함 (전용 문법 多) Bootstrap의 장점 - 오픈소스 - 디자인 코딩 부담 완화 - Grid disply를 바탕으로 다양한 사이즈와 비율을 지원 - 반응형 웹 대응 쉬움 Bootstrap의 단점 - 기존 코드와 충돌 - 추가 메모리 소요 (부트스트랩 전체 이용시 126kb의 CSS, 29kb의 JS 코..
26 - ES6 함수의 추가 기능
·
✏️ Study/🧽 JS & TS
모던 자바스크립트 Deep Dive 정리 1. 함수의 구분 ▶ ES6 이전에는 일반 함수, 생성자 함수, 메서드, 콜백 함수 간 구분이 명확하지 않았다 ▷ 예) new 만 붙이면 생성자 함수 ▷ 모든 함수가 callable(호출할 수 있는 함수 객체)이면서 constructor(인스턴스 생성 가능한 함수 객체) ▷ 이는 실수를 유발하고 성능을 저해함 ▷ constructor는 매번 prototype 프로퍼티를 가지고, 프로토타입 객체도 만들기 때문 ▶ 그래서 ES6에서는 함수를 사용 목적에 따라 4가지로 명확히 구분한다 ES6 함수의 구분 constructor prototype super arguments 일반 함수 O O X O 메서드 X X O O 화살표 함수 X X X X ▶ 표준 빌트인 객체가 제..
[AWS EC2] httpd 사용하기
·
✏️ Study/💰 AWS
AWS EC2에서 httpd 사용하기1. HTTPD란?HTTPD (hypertext trnasfer protocol daemon)▶ HTTP 서비스를 제공하는 데몬 서버▶ 80번 포트를 사용 (SSH 프로토콜은 22번이었음)▶ 서버 패키지 : apache※ apache : 서버에서 웹 페이지 전송 서비스를 제공하는 서버 프로그램 ▶ EC2 인스턴스가 일종의 물리적 서버 컴퓨터라면, HTTPD는 서버 컴퓨터에서 웹 서비스를 제공하기 위한 프로그램2. HTTPD 사용 과정2-1. 서버 로그인 (PuTTY)▷ PuTTY용 키페어 바로 생성 가능 -> ppk pem 파일 변환 불필요2-2. 서버 접속후 터미널에서 yum 패키지 업데이트▶ sudo yum update 입력하여 yum 업데이트▷ sudo : 유닉스..