자바스크립트 비구조화 객체(Object) 좌변의 json 안에 있는 변수명과 일치하는 우변의 json 키에 대응하는 값을 좌변의 변수에 대입한다. 아래 코드에서는 우변의 값이 json이니까 좌변에 json을 열어서 title과 description이라는 변수를 만들어놓는다. 그리고 우변의 json이 가지고 있는 키 중 title과 description이 있으면 그 키의 value를 좌변의 json 안에 생성해 놨던 변수 title과 description에 대입한다. 우변의 json에 존재하지 않는 키에 대해서 좌변에 변수를 선언하면 value가 undefined로 설정된다. const obj = { title: '객체', description: '객체의 비구조화' }; const { title, desc..
Express.js http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크다. express.js를 사용하면 http 모듈로 서버를 구축하는 것보다 더 간결하게 서버를 구축할 수 있다. 설치 터미널에서 아래 명령어를 입력한다. npm i express 실습 서버를 가동하고, 로컬호스트 포트 번호 3000번으로 접속하면 Hello World가 화면에 표시되는 것을 확인할 수 있다. const express = require('express'); const app = express(); app.get('/', function (req, res) { res.send('Hello World'); }) app.listen(3000); URL 파라미터 url에 포함된 변수를 추출할 수도 있다. 저번에 예시..
HTTP Method 생성(등록) POST 조회 GET 수정 PUT(덮어쓰기), PATCH(일부 수정) 삭제 DELETE 기타 HEAD, OPTIONS, CONNECT, TRACE Node.js 자바스크립트는 원래 웹 브라우저 위에서만 실행이 가능했다. Node.js는 자바스크립트가 웹 브라우저 밖에서도 구동될 수 있도록 환경을 구축해 놓은 플랫폼이다. 특징 1. 싱글 스레드 우리는 vscode로 작업하면서 백그라운드에는 유튜브를 띄워놓을 수 있다. 이것을 멀티 프로세스라고 하며 프로세스는 현재 실행 중인 프로그램이라고 생각하면 된다. 스레드는 하나의 프로세스 안에 존재하는 흐름을 말한다. 여러 흐름이 동시에 실행되면 멀티 스레드, 하나의 흐름만 존재하면 싱글 스레드라고 한다. node.js 자체는 싱글..
난이도: Lv. 2 정답률: 53% 문제: https://school.programmers.co.kr/learn/courses/30/lessons/42839 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 알고리즘 찾은 소수를 저장할 Set을 선언한다. 이 Set은 동일한 수가 정답으로 여러 번 카운팅 되는 것을 막아준다. "011"에서 11이라는 수는 두 번 발생하지만 카운팅은 한 번만 해야 하는 게 그 예시다. 숫자 하나와 numbers 문자열에서 어떤 문자가 이미 사용되었는지 표시해 주는 bitArr 배열을 파라미터로 넘겨주어 깊이 우선 탐색을 시작한..
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..
