API 라이브러리에 접근하기 위한 규칙을 정의한 것이다. 날씨 알림 어플을 만든다고 해보자. 날씨에 관련된 정보는 기상청이 가지고 있다. 하지만 우리는 기상청의 DB에 접근할 권한이 없기 때문에 기상청의 API를 통해 기상청에게 날씨 정보를 요청한다. API는 클라이언트와 서버의 중간에 위치하여 클라이언트와 서버를 중재하고, 매개체의 역할을 수행한다고 할 수 있다. REST API 설계 URL url은 웹 페이지의 위치를 알려주는 기능과 서버에 데이터를 연산해 달라고 요청을 보내는 기능도 수행한다. ex) https://comic.naver.com/index REST API HTTP 통신 규약을 잘 따른 API를 의미한다. RESTful API는 REST 규칙을 잘 따르는 API를 말한다. RESTful..
포트폴리오 페이지 이미지 자르기 이미지를 감싸는 div 태그를 만든다. 1.에서 만든 태그의 width와 height를 정의한다. 이미지의 width와 height를 100%로 설정한다. 이미지의 object-fit을 cover로 설정한다. Transition 이 프로젝트에서는 버튼에 transition을 줬다. 버튼에 마우스를 올릴 경우 버튼 색이 바뀌고 그림자가 생긴다. hover 했을 때의 나타날 스타일을 설정한다. (ex: background-color) hover 말고 기본 스타일에 transition: 속성 시간; 을 설정한다. 여러 개를 입력할 때는 콤마 하고 띄어쓰기하면 된다. index.html 김그렙의 포트폴리오 안녕하세요, 늘 고민하는 개발자 김그렙입니다. 제 프로젝트들을 소개합니다...
데이터베이스 데이터베이스 데이터를 통합하여 효율적으로 관리하기 위한 데이터 집합체이다. → 데이터 중복을 막고, 효율적이고 빠른 연산을 가능하게 한다. DBMS(DataBase Management System) 데이터베이스(DB)를 운영·관리하는 시스템이다. ex) Oracle, Mysql, MariaDB 등 SQL 데이터베이스에 연산을 요청하기 위해 사용되는 언어이다. 데이터 생성, 삭제, 수정, 조회 등의 기능을 수행한다. Docker 원래 프로그램을 설치하거나 실행할 때는 OS(운영체제)와 소통하게 된다. Docker는 OS위에 설치되어 Docker위에 설치한 프로그램들이 OS가 아닌 Docker와 소통하게 해 준다. 컨테이너를 만들고 그 안에 프로그램(App)을 설치한다. 컨테이너 안에 설치한 프..
프론트엔드 메인 페이지 주문 내역 페이지 CSS 백엔드 백엔드의 구조 Node.js 자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼이다. 웹 서버와 웹 어플리케이션 서버의 역할을 할 수 있기 때문에 js로 백엔드 구현이 가능하다. Node.js로 서버 만들기 1. index.js 파일에서 server.js에 있는 서버를 시작하는 함수인 start 함수를 호출한다. 2. start 함수 내부에서는 요청을 처리할 함수를 정의하고, 서버를 시작한다. 3. router.js 파일의 route 함수에서 요청의 url이 유효한지 확인한다. 4-1. 유효하지 않은 url일 경우 3.의 조건문에서 걸러져서 404 에러 메시지를 발송한다. 4-2. 유요한 url일 경우 requ..
branch 생성 로컬에서는 아래의 명령어로 브랜치를 생성한다. git branch 브랜치이름 생성한 브랜치를 깃허브에도 반영해야 한다. git push 원격저장소별칭 깃브랜치명 branch 전략 가장 많이 사용하는 방법은 fast forward와 3-way가 결합된 방식이다. 각 기능별로 브랜치를 생성하여 작업한 후, 차례대로 main브랜치로 결합한다. branch 병합하기 1. main branch 보호 GitHub에서 레포지토리 선택 Branches에서 보호할 브랜치 선택 상세 규칙 설정 2. 추가 branch를 main branch로 병합 base 브랜치와 compare 브랜치 방향이 제대로 되어있는지 확인 PR(Pull Request) 메시지 작성(주요 구현 사항, 발생한 이슈와 해결 방안 등)..
CSS HTML 태그를 하나하나 꾸미는 역할을 한다. 인라인 HTML 태그 안에 속성으로 작성하는 방법이다. 로그인 내부 스타일 시트 화면에 대한 내용이 아니기 때문에 style 태그는 head에 작성한다. class를 꾸밀 경우 ".클래스이름", id를 꾸밀 경우 "#아이디이름" 형식으로 작성한다. 외부 스타일 시트 별도의 파일에 작성한 후 HTML 문서에 연결하는 방식이다. 내부 스타일 시트 결과와 동일하다. index.html style.css h1 { color: rgb(66, 129, 224); background-color: rgb(212, 235, 255); } .login_input { background-color: rgb(212, 235, 255); } #submit-btn { colo..
웹의 이해 인터넷 전 세계의 모든 컴퓨터를 하나의 통신망 안에서 연결한다는 의미 웹 != 인터넷, 인터넷 안에 웹이 포함되어 있음 웹 World Wide Web 줄여서 Web이라고 한다. 인터넷에 연결된 컴퓨터를 통해서 사람들이 정보를 공유할 수 있는 공간이다. 정보를 하이퍼텍스트 형식으로 표현하고, 하이퍼텍스트(링크)를 따라 이동하며 다양한 정보/문서들을 확인한다. 웹 페이지들의 집합이 웹 사이트이다. 웹 페이지나 웹상의 데이터를 찾거나 읽을 때 사용하는 것을 웹 브라우저라고 한다. 웹의 구조 클라이언트와 서버는 인터넷으로 연결되어 있으며 웹 프로토콜인 HTTP를 사용하여 데이터를 주고받는다. 웹 개발 직무 이해 프론트엔드: 사용자 화면에서 사용자와 상호작용 백엔드: 서버 측에서 프론트엔드에게 전달받은..
branch 이름 규칙 기능 개발: feature ex) feature/login, feature/select-product 출시 준비: release ex) release-1.3. release-1.4 긴급 수정: hotfix ex) hotfix-1.2.1 branch 삭제 git branch -d 브랜치이름 branch에 커밋 반영하기 아래와 같이 두 개의 브랜치를 생성했다. feature/login 브랜치로 이동한 후 test2.txt 파일을 아래와 같이 수정한다. 이 상태에서 feature/select-product 브랜치로 이동하면 커밋을 하지 않았기 때문에 수정된 파일이 똑같이 보인다. feature/login 브랜치에서 커밋을 해주고, feature/select-product 브랜치로 이동하..
Clone 원격 저장소에 연결하여 소스 코드를 받아오는 명령어이다. CLI 새 폴더 생성 생성한 폴더를 vscode에서 열기 터미널에 아래 코드 입력 git clone 원격저장소_URL .git 폴더가 내려받은 폴더인 FirstRepository 폴더에 위치하고 있기 때문에 pull 할 때는 FirstRepository로 작업 디렉토리를 변경하고 수행해야 한다. 디렉토리를 변경하지 않고 pull을 수행하면 아래와 같이 fatal: not a git repository (or any of the parent directories): .git 에러가 발생한다. GUI 이 경우에는 현재 작업 디렉토리가 FirstRepository이기 때문에 별도의 디렉토리 이동 없이 pull을 수행하면 된다. vscode 탐..
Add 프로젝트 폴더에서 git init을 실행하면 .git 폴더가 생성되고 git이 프로젝트 폴더를 관리해 주기 시작한다. 하지만 프로젝트 폴더에 있는 파일들을 트래킹 해주지는 않는다. 따라서 우리가 원하는 파일을 지금부터 트래킹 해달라고 git에게 명령을 내려한다. git add 파일명 위 코드를 실행했을 때 정상적으로 수행되었다면 아무것도 출력되지 않는다. 위 코드를 실행하면 git은 버전 히스토리를 생성하기 위해 해당 파일을 대기열에 모아둔다. vscode에서 GUI로 add 하려면 왼쪽 사이드바에 있는 5개의 아이콘 중 세 번째 아이콘(소스 제어)를 클릭하고 원하는 파일을 찾아 + 버튼을 클릭하면 된다. Commit 버전으로 저장할 것들을 모두 모았으니 모아둔 것들로 버전을 만들어 달라는 명령어..
