프론트엔드(15)
-
display & position
Display CSS Box Model이란? 전체 CSS box model은 블록 박스에 적용되며, 인라인 박스는 박스 모델에 정의된 일부 동작만 사용할 수 있다. Block level 에서는 div를 사용하고, Inline level 에서는 span을 사용한다. div의 사이즈를 조절하고 싶을 때는 display: inline; 컨텐츠 크기만큼만 display: inline-block; 한줄에 여러개 박스 span의 사이즈를 조절하고 싶을 때는 display: block; 한줄에 하나씩 표현된다. Position position: static; static이 기본값 position: relative; 원래 있어야할 item에서 옮겨감 position: fixed; 상자에서 완전히 벗어나서 페이지상에서 ..
2022.12.02 -
웹 기본 이해하기
웹사이트 URL로 접속하면 어디서나 같은 웹 페이지를 볼 수 있다. ㄴ서버(Server)에 요청(Request)을 보내는 것 그러면 서버(Server)가 응답 Response로 (요청 Request에 맞는) 결과 Data를 보내준다. HTTPS HyperText Transfer Protocol + Secure 홈페이지 접속할 때 : GET https://www.~.com HTTP Request Method : HTTP 요청할 때 원하는 작업을 나타냄 CRUD(Create, Read, Update, Delete) Create > POST Read > GET Update > PUT Delete > DELETE Server에서는 요청에 맞게 실행한 후 결과를 보내준다. (Data, 화면 Code, 데이터 JS..
2022.01.01 -
React
React를 사용하는 이유 웹을 만들기 위해선 HTML, CSS, JS를 이용해야 한다. 하지만 웹이 점점 복잡해지면서 더 많은 HTML, JS가 들어가게 된다. 하나의 HTML 파일에 수많은 JS 라이브러리, HTML 요소들을 포함하게 된다. 하나의 파일에 코드 수가 점점 많아지면 개발자 입장에서는 유지보수하기가 어려워진다. ㄴ어느 코드에 문제가 생겼는지 확인하기 위해 수천 줄의 코드를 확인해야할 수도 있고, 코드끼리 의존성이 깊을수록 복잡해진다. 또한, 많은 JS 라이브러리를 불러와서 사용하다 보면 라이브러리 객체들끼리 이름이 같아 충돌할 수도 있고, 관리하기도 어려워진다. React를 사용하면 이런 문제들을 해결할 수 있다. 페이스북에서 만든 라이브러리로 웹 개발을 편하게 개발할 수 있도록 도와준다..
2022.01.01 -
Node.js - 에러(Error: listen EADDRINUSE) 해결방법
Error: listen EADDRINUSE: address already in use ___ 이런식의 에러가 뜬다면 포트를 이미 사용중이라는 것이다. 아마 노드서버가 정상적으로 종료되지 않아 발생하는 에러이다. 노드서버를 완전히 종료시키기 위해 1. 터미널에서 아래 코드대로 입력하여 프로세스의 pid를 찾는다. $ ps -ef | grep 파일명 2. 터미널에서 나타난 pid를 찾아 아래코드로 입력하면 완전히 종료된다. $ kill -9 pid번호
2021.11.18 -
Meta Tag란?
Meta tag - og:image : 웹 페이지 정보를 알려주는 정보 - 웹페이지 정보를 알려주는 Metadata를 담은 tag - Meta tag 중에서 Open Graph 약자인 'og:' 를 이용. 미리보기 등에 사용된다. 위 뉴스링크 Meta Tag를 살펴보면 og : image og : title og : url 로 구성된 것을 확인할 수 있다.
2021.09.30 -
Node.js란?
Node.js의 사전적 정의를 살펴보면 JavaScript 런타임이라고 소개되어있다. *런타임이란? 런타임은 바로 프로그래밍 언어가 구동되는 환경이다. 이전에는 JavaScript는 브라우저('프론트엔드')에서만 돌아가는 언어였었는데 이제는 Node.js라는 환경, 프로그래밍 구동 환경 덕분에 브라우저뿐만 아니라 서버용으로 혹은 머신러닝과 같은 다양한 분야에서도 사용할 수 있도록 하는 환경을 말한다. 바로 이러한 Node.js의 탄생 덕분에 자바스크립트가 프론트엔드에서만 사용되는 것이 아니라 다양한 개발환경에서 사용될 수 있는 그런 역할을 톡톡히 해냈다고 생각하면 된다. 다음으로는 NPM(Node Package Manager)이다. Node.js를 설치하면 자동적으로 설치되는 툴이다. Node.js에서 ..
2021.06.16