웹 프로그래밍
-
flex box layout (display : flex ;)웹 프로그래밍/FE(Front-End) 2021. 7. 8. 18:00
우리는 보여지는 요소의 위치를 내가 원하는대로 조정하여 반응형 웹 디자인을 구현하기 위해 position속성에 값을 주어 left, right, bottom, right를 주거나 이렇게 조정하여도 원하는 결과를 얻지 못하면 float 속성을 이용한다. 하지만, float속성이 만들어진 이유는 반응형 웹 디자인을 위해서가 아니라 마치 요소를 떠 있게 하는 것처럼 하여 그 주변을 다른 요소로 감싸는 포지셔닝(positing)을 위해서이다. 즉, 우리가 원하는 레이아웃(layout)으로 요소를 배치하기 위해 float속성을 마주잡이로 사용하는 것은 어긋난 행동이다. 하지만, flex box가 나오기 이전에는 어쩔 수 없이 position, float, table 등과 같은 속성을 사용하여 레이아웃을 구성하게 ..
-
SSH (Secure SHell)웹 프로그래밍/BE(Back-End) 2021. 7. 7. 20:25
SSH는 네트워크상의 다른 컴퓨터에 로그인하거나 원격 시스템에서 명령을 실행하고 다른 시스템으로 파일을 복사할 수 있도록 해 주는 응용 프로그램을 의미한다. 기존의 rsh, rlogin, 텔넷 등을 대체하기 위해 설계되었으며 강력한 인증 방법 및 안전하지 못한 네트워크에서 안전하게 통신을 할 수 있는 기능을 제공한다. SSH의 포트 번호는 기본적으로 22번 포트를 사용한다. SSH는 암호화 기법을 사용하기 때문에 통신이 노출된다고 하더라도 안전한 통신이 가능하다. SSH의 동작 방식은 어떠할까? SSH는 공개키(public key)와 비공개키(private key)를 사용하여 인증 과정을 거친다. 더보기 Public Key는 공개되어도 비교적 안전한 Key이다. 이 Public Key를 통해 메시지를 전..
-
MongoDB 알아보기웹 프로그래밍/BE(Back-End) 2021. 7. 6. 22:21
MongoDB는 DBMS의 한 종류로 데이터의 구축과 조작을 비관계형(NoSQL)방식으로 관리하는 DBMS이다. 더보기 DBMS는 대량의 데이터를 저장하고 관리하기 위해 활용되는 시스템으로 컴퓨터에 데이터가 들어가고 나오기 위한 소프트웨어 도구의 집합이다. DBMS는 다음과 같은 역할을 한다. - 정의: 형식, 구조, 제약을 통해 데이터를 균일하게 관리하도록 도와줌. - 구축: 관리하는 정보를 기억 장치에 저장. - 조작: 질의 및 다른 기능을 통해 데이터를 독립적이고 효율적으로 접근하게 해줌. - 공유: 데이터에 동시에 접근할 수 있게 해줌. - 보호: 보안을 유지시키고 충돌을 복구할 수 있게 해줌. - 유지보수: 시간이 지나면서 변화하는 요구사항을 반영할 수 있게 해줌. MongoDB의 구조는 아래의..
-
JSON이란?웹 프로그래밍/FE(Front-End) 2021. 7. 5. 22:52
JSON은 JavaScript Object Naotation의 약어로 말 그대로 번역해 보면 자바스크립트에서의 객체 표기법으로 작성된 텍스트이다. 이러한 JSON은 데이터 저장 및 교환을 위한 개방형 표준 포맷으로 사용되고도 하고 넓은 범위로는 AJAX를 위해 XML을 대체하는 데이터 포맷으로 사용되기도 한다. 자바스크립트 개게 표기법 구문에서 파생된 JSON의 구문은 다음과 같다. - 데이터는 이름/값(속성-값 쌍 또는 키-값쌍)이다. - 데이터는 쉼표로 구분되다. - 중골호는 객체를 유지한다. - 대괄호는 배열을 유지한다. JSON에서의 값(value)은 문자열, 숫자, 객체(JSON 객체), 배열, Boolean, null 중 하나이여한다. JSON 안에 있는 값(value)에 접근하기 위해서는 도..
-
브라우저 객체(BOM)웹 프로그래밍/FE(Front-End) 2021. 7. 4. 23:20
오늘은 브라우저 객체(BOM)에 대해 정리해보려고 한다. BOM(Browser Object Model)은 브라우저의 창이나 프레임을 프로그래밍적으로 제어할 수 있게 해주는 객체모델로 웹 브라우저가 가지고 있는 모든 객체를 의미한다. 공식 표준은 아니지만 브라우저 대부분이 자바스크립트와의 상호작용에 있어서 비슷한 메소드와 속성으로 동작하기에 이와 같은 메소드들을 통칭하여 BOM이라고 한다. BOM을 사용하면 자바스크립트가 브라우저와 대화할 수 있고 BOM의 객체모델을 보면 아래와 같다. 최상위 객체는 window 객체이고 하위 객체로 6개의 객체를 가지고 있다. 그러면 각각의 객체에 대해 알아보자. 1) window 객체 window 객체는 모든 브라우저에서 지원되는 객체로 우리가 보고 있는 브라우저 창을..
-
GET과 POST웹 프로그래밍/BE(Back-End) 2021. 7. 3. 23:04
GET과 POST는 HTTP 통신에서 가장 많이 사용되는 HTTP Methods로 서버와 클라이언트가 통신하는데 정해진 기능을 제공한다. 여기서 HTTP는 무엇일까? HTTP는 Hypertext Transfer Protocol의 약어로 클라이언트와 서버 사이에 통신이 가능하도록 고안된 프로토콜이다. HTTP는 클라이언트와 서버사이에서 요청과 응답을 주고받을 수 있는 역할을 한다. 예를 들어, 웹 브라우저(클라이언트)가 HTTP 요청을 웹 서버(서버)로 보내게 되면 웹 서버는 브라우주에게 요청에 대한 응답을 보낼 수 있다. 그러면 지금부터 GET과 POST에 대해서 알아보자. 먼저, GET은 무엇일까? GET은서버로부터 정보를 조회하기 위해설계된 메소드이다. GET을 통한 요청은 필요한 데이터를 Body에..
-
SQL & NoSQL웹 프로그래밍/BE(Back-End) 2021. 7. 2. 19:06
오늘은 SQL과 NoSQL에 대해 알아보고 둘의 차이점을 정리해보려고 한다. 먼저, SQL은 무엇일까? SQL은 Structured Query Language의 약어로 관계형 데이터베이스 관리 시스템(RDBMS)의 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어이다. 관계형 데이터베이스 관리 시스템에서 데이터 검색과 관리, 데이터베이스 생성과 수정 등과 같은 작업을 수행할 때 SQL을 쓴다. SQL 문법의 종류는 데이터 정의 언어 (DDL : Data Definition Language), 데이터 조작 언어 (DML : Data Manipulation Language), 데이터 제어 언어 (DCL : Data Control Language) 3가지가 있다. SQL을 사용하는 관계형 데이터베이스..
-
form 태그 파헤치기웹 프로그래밍/FE(Front-End) 2021. 7. 1. 22:36
오늘은 HTML을 공부하던 중 평소에는 별 관심없이 썼던 form태그에 많은 기능이 있다는 것을 알고 정리해보려고 한다. 먼저, form태그의 이용성을 간단히 얘기해보면 웹에서 로그인이나 회원가입 페이지를 구현할 때 자주 사용되고 검색 사이트나 쇼핑몰 주문서 화면에서도 form태그를 이용하기도 한다. 그러면 form태그에는 어떠한 기능을 가지고 있을까? 먼저, form태그와 같이 선언되는 속성에 대해 알아보자. 속성 설명 method 사용자가 입력한 내용들을 서버로 넘겨주는 방법을 지정하는 속성으로 GET, POST 중 원하는 속성값을 지정 name 폼의 이름을 지정하는 속성으로 한 HTML 문서 안에 여러 개의 form태그가 있을 경우 form을 구별하기 위해 사용 action form 태그 안의 내용..