본문 바로가기

전체 글

 (135)
HTTP 1. HTTP(Hyper Text Transfer Protocol) HTTP란 서버/클라이언트 모델을 따라 데이터를 주고 받기 위한 프로토콜(통신규약)이다. HTTP는 암호화가 되지 않은 평문 데이터를 전송하는 프로토콜로, HTTP로 중요한 정보를 주고 받을경우 제3자가 정보를 조회할 수 있다. 이러한 문제를 해결하기 위해 HTTPS가 등장하게 되었다. HyperText HTTP에서 HyperText는 HTML(HyperText Markup Language)의 HyperText와 의미가 같다. HTML은 문서와 문서를 링크로 연결하는 태그로 구성된 언어이다. Transfer 사전적 의미로 "전송하다"는 의미로 만들어진 웹사이트를 다른 사람들과 공유하기 위해서 다른 컴퓨터에게 전송하는것을 말한다. 전송에는..
web storage와 cookies Web Storage Object HTML5 부터 새롭게 지원하는 저장소로 클라이언트에 데이터를 저장할 수 있다. 쿠키와 다르게 네트워크 요청시 서버에 전송하지않아 서버에 부담이 가지않으며, 쿠키보다 더 많은 자료를 보관할 수 있다.(약5MB) 웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 객체형태(키-값 페어)로 데이터를 저장할 수 있게 해준다. 쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없어 자동 전송의 위험이없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행되며, 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있기때문에 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.(CR..
개발자 도구 개발자도구란? Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. 개발자 도구는 브라우저에 제공하는 하나의 tool(도구)이다. 웹사이트를 즉각적으로 수정하고 문제 발생시 원인을 빠르게 파악할수 있어 빠르게 처리하 수 있도록 도와준다. 개발자도구 열기: cmd+option+i/ctrl+shift+i 개발자도구에는 여러개의 패널이 존재하는데 상황에따라 각 ..
sementic Web & Tag 1. sementic web? Semantic Web은 인터넷의 급속한 활성화로인해 웹에 많은양의 데이터가 축적되었고 그 많은 데이터에서 원하는 데이터를 편하게 가져오기 위해 사용하기 시작하였다. 웹은 문서(document) 단위로 정보가 공유되는데 Semantic Web은 이러한 기존의 문서 중심의 웹을 "데이터 중심(data-centric)의 웹"으로 발전시키기 위해 개발되었다. Semantic Web서는 RDF(Resource Description Framework), OWL(Web Ontology Language), SPARQL(SPARQL Protocol and RDF Query Language) 등의 기술을 사용하여 컴퓨터가 사람의 언어로 알아들을 수 있게 데이터를 표현한다. 이러한 기술들은 ..
HTML과 HTTP 1. HTML(HyperText Markup Language)란? HTML이란 하이퍼텍스트를 활용하여 네트워크가 연결된 웹페이지에서 문서를 작성하고 읽거나 공유하기 위해 만들어진 체계이다. HyperText? 웹 페이지 등 다른 대상의 링크가 들어있는텍스트르 말하는데, HTML은 이 하이퍼텍스트를 활용하여 다른 사이트로 이동한다. 그렇다면 어떻게 다른 페이지로 이동할까? 그 답은 Markup Languague에 있다. Markup Languague? 이름 그대로 표시(markup)하는 언어를 뜻하며, 텍스트와 구분할수 있는 마크를 추가하는 언어이다. 쉽게 말하면 학교에 과제를 냈을때 선생님 또는 교수님이 어떻게 하면 좋겠다라고 색깔펜으로 표시해 주셨는데 컴퓨터에서 무언가를 하라고 지시하는 것이다. 웹 서..
HTML 1. HTML Hyper Text Markup Language의 약자로 네트워크가 연결된 웹페이지에서 문서를 읽고, 작성, 공유하기 위해 만들어진 체계이다. HTML은 웹 페이지를 만들기 위한 언어로 HTML로 웹페이지의 구조를 잡을 수 있다. HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있다. 브라우저(safari, chrome, ie..)는 HTML파일을 통해 어떻게 화면에 그려내면 되는지 파악한 후에 웹 페이지를 생성한다. 2. HTML 파일 HTML은 .html확장자가 붙은 텍스트 파일이다. 텍스트편집기(Text Editor)같은 간단한 메모작성 앱을 열고, .html 확장자로 저장한 후, 해당파일을 브라우저(크롬)에 drag & drop 하면 브라우저에서..
cdnjs 백엔드 공부를 하면서 mvp를 사용햇었는데 이제 css를 사용할 때가 왔다. 사용해오던 mvp부분을 지워주니 마음에 안들음.. 이제 사이트를 꾸며보려고하는데 cdnjs를 사용해야한다. 근데 cdnjs가 뭐지? CDN (Content Delivery Network) 분산된 서버 네트워크를 활용하여 웹 콘텐츠를 빠르고 안정적으로 제공하는 서비스이다. 웹 사이트의 이미지, 스타일 시트, 자바스크립트 파일 등과 같은 정적 콘텐츠를 여러 지역의 서버에 캐시하고, 사용자가 해당 콘텐츠를 요청할 때 가장 가까운 서버에서 제공하여 응답 시간을 최소화하고 부하를 분산할 수 있다. 이점으로는 다운로드 속도향상, 높은가용성, 트래픽 분산을 통한 부하 분산, DDos 방어를 통한 강한 보안이있다. cdnjs cdnjs는 Co..
SASS 내가 기억하기로는 프론트분들이 싸스라고 했던거같은데 왜 scss를 sass라고 부르는지 궁금해서 검색해봤다. SCSS(SASS)란? Syntactically Awesome StyleShee로 CSS의 단점(selector, 연산기능 등)을 보완하고 편의성을 높인 CSS 전처리기이다. 전처리기는 CSS가 동작하기 전, 개발단계에서는 SCSS를 사용하고, 웹에서는 CSS로 변환해서 작동한다. .sass? sass는 css의 전처리기로 해석되어 CSS로 컴파일되는 스크립트 언어이다. sass에서는 중괄호대신 들역쓰기를 사용하여 코드블록을 정의한다. body font-family: Arial, sans-serif .container background-color: $primary-color padding: 20..
webpack webpack은 웹에서 사용되는 자원(asset)들을 번들링해주는 도구이다. 번들링은 여러파일의 종속성이 존재하는경우 그파일들을 모아서 압축,변형시켜 최소화하고 필요한 과정을 거쳐 정리한 코드를 결과물로 반환한다. 쉽게말해 그 종속성이 존재하는 파일을 하나의 파일로 묶어주는 패키징과정을 말한다. js를 구버번의 js로 바꾸거나 Sass를 CSS로 변경할 수 있는 등 많은 것을 할 수 있다. 보통 React난 Next.js 같은 것에는 webpack이 기본적을 포함되어있다. 모든 webpack.config.js파일들은 동일한 구조를 갖는데, entry, output, rules, 변형할 파일을 설정하는 방법은 기억해두자. Webpack 설치과정 webpack documentation npm i webpac..
CSS의 레이아웃 CSS 레이아웃 보통 무언가를 만든다거나 계획을 세울때 우리는 기본틀부터 짜기 시작합니다. 이곳에는 이렇게하고 저기에는 저렇게, 저곳은 또 이렇게해야지 구성을 짜는것을 CSS에서는 layout이라 합니다. 즉, layout은 내가 원하는곳에 블록의 요소들을 배치하는 것입니다. 배치방법으로는 display 사용하는 방법, table태그 를 사용하는 방법, float 속성을 사용하는 방법 등이 있습니다. table태그를 사용하거나 float을 쓰는것은 과거에 많이 사용했으나 요즘에는 display:flex를 많이 쓴다고 합니다. 1.Position의 property(속성) CSS의 position은 웹문서 안의 요소들을 어떻게 배치하여 나타낼지를 정하는 속성입니다. position속성을 사용하면, html ..
Server란 무엇일까? 컴퓨터를 이용해본사람이라면 "서버가 터졌어","서버가 왜이런담" 이라는 말을 한번쯤은 해보았을것이다. 나 또한 새로 오픈된 게임이나 사이트에 접속했을때 접속이 안되거나 오래 기다려본 경험이 있다. 그때마다 '서버가 왜이래?'라고 불평을 자아낸적이있는데, 개발자 공부를 하다보니 서버가 무엇인지 정확히 모른다는것을 알았다. 구체적으로 Server가 무엇일까? 1. Server란? 눈에 보이지않는 데이터를 저장해두고 필요한때 네트워크를 통해 사용자의 기기로 전달해주는 컴퓨터이다. (이미지는 canva로 제작했습니다) 좀더 나아가서 서버는 역할을 개념화한 것이다. 컴퓨터가 네트워크를 사용하여 정보를 제공하는 컴퓨터일 경우에는 Server가 되고, 데이터를 전달받는 컴퓨터일 경우에는 Client가 된다. HTML..
Stack 과 Que 코딩테스트 스터디를 하다가 큐와 스택을 알게되었다. 선입선출, 후입선출 이라는 것 정도만 알고있었는데, 생각보다 알고리즘과 자료를 효율적으로 처리히기 위해 알아야겠다는 생각이 들었고, 함수의 호출과 런타임도 관련있지않을까해서 공부해보았다. 스택과 큐 스택(Stack)과 큐(Queue)는 데이터 구조(Data Structure)로서, 데이터를 저장하고 조작하는 방법을 정의하는 추상적인 개념이다. 컴퓨터 과학(CS)에서 사용되며, 데이터의 삽입, 삭제, 조회 등을 효율적으로 처리하기 위해 사용한다. 스택(Stack) 이란? 스택(stack)은 stack은 순서가 보존되는 선형 자료구조로 Last In, First Out"(LIFO) 원칙을 따르는 자료구조이다. ㄷㅔ이터를 받은 순서대로 정렬하며, 가장 마지막..

티스토리툴바