웹 개념 (25) 썸네일형 리스트형 express.js 와 ajax를 이용한 라우팅과 비동기 통신 구현(1) 1. 우선 express.js를 이용하여 간단하게 백앤드 서버를 구현해보자! express를 가져오고 가져온 express함수를 app엠 담고, 포트번호는 7777로 설정. // express libaray fetch const express = require("express"); // 함수 담기 const app = express(); const PORT = 7777; 2. listen을 사용해서 해당 포트 번호로 서버를 엽니다. 그리고 get을 이용해서 '/' 위치의 index.html을 서버에서 가져오는 코드를 작성합니다. // __dirname 현재 경로를 의미한다. app.get('/', (req, res) => { res.render("index.html"); }) app.listen(PORT.. CSS - "&", ":", cursor은 멀 의미하는 걸까? A nested & selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector. e.g. h1 { &.class { } } is equivalent to: h1.class { } cursor 속성 개요 cursor 속성을 이용하면 해당 태그 위에 위치하는 마우스 커서의 모양을 바꿀 수 있습니다. auto: 자동 default: 기본값 (화살표) pointer: 손가락 모양 (클릭 가능한 버튼) wait: 로딩 등 다양한 종류의 값이 있습니다. 가상 요소(pseudo element) 가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타.. HTML id 와 class 차이? 이름을 불러오는 방식 클래스를 불러올 때는 클래스명 앞에 마침표(.)를 찍어준다. 아이디를 불러올 때는 아이디값 앞에 샵(#) 표시를 해준다. 아래는 아이디값과 클래스명을 모두 가진 태그가 있고, 이것을 css를 이용하여 꾸며준 예시이다. 권현성 중복 사용 여부 클래스는 중복 사용이 가능하여, 동일한 클래스명을 페이지의 여러 곳에 사용해도 무방하다. 그러나 아이디는 중복으로 사용할 수 없다. 한 개의 아이디는 페이지에서 딱 한번만 사용해야 한다. 권현성 손흥민 권현성 손흥민 출처: 디지털 노마드 (heinafantasy.com) css flex? flex란 유연성을 뜻하는데 CSS에서 flex box라는 개념이 생겼습니다. 요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아봅니다. display:flex 블록 레이아웃, 인라인 레이아웃, 테이블 레이아웃 및 위치 지정 레이아웃 모드와 더불어 CSS3에서는 보다 복잡한 블록 타입 레이아웃 모드인 flexbox 레이아웃을 지원한다. flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다. 과거 문법 display: box(old)와 같이 사용되다가 비공식적인 문법으로 display: flexbox(hybrid)와 같이 사용되었다. 근래에 명세에는 display: flex(modern).. 버블링과 캡처링이란? EM을 클릭했는데도 DIV에 할당한 핸들러가 동작합니다. 해당 코드에서 em을 클릭해도 div에 할당된 핸들러가 동작합니다. 왜그럴까요 버블링이라는 개념을 알면 알기 쉽습니다. 버블링 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 해당 구조는 div > em > code 의 구조를 가지고 있습니다. code에서 이벤트가 발생하면 document객체를 만날때까지 올라갑니다. 그렇기 때문에 div에서 핸들러가 동작했던것이죠. + 거의 모든 태그는 버블링을 가지고 있습니다. 그럼 코드를 짤때 이벤트 발.. git add . 오류 => Filename too long in Git for Windows Run Git Bash as administrator (right-clicking the app shortcut will show the option to Run as Administrator ) Run the following command: git config --system core.longpaths true Note: if step 2 does not work or gives any error, you can also try running this command: git config --global core.longpaths true NextJs Context의 의미 ◎NextJS에서 Data Fectching 하는 방법을 알아보자. NexJS 8 버전에는 getInitialProps를 사용했는데, 현재 9 버전에서는 getStaticProps, getStaticPaths, getServerSideProps를 주로 사용한다. 1. 사전 렌더링(pre-rendering) ◎ NextJS가 작동하는 방식과 이를 빠르게 만드는 데 있어 큰 부분을 차지한다. 기본적으로 NextJS는 실행해야 하는 최소한의 Jacascript와 함께 Hydration를 통해 각 페이지 HTML을 미리 생성하여 모든 페이지를 사전 렌더링 한다. 사전 렌더링에는 정적 생성(SG)과 서버 측 렌더링 (SSR)이 있다. 이 둘의 차이점은 데이터를 가져올 때이다. 1-2. 정적 생성(SG) ◎ SG의.. 프로미스란? Promise가 뭔가요? “A promise is an object that may produce a single value some time in the future” 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. Promise가 왜 필요한가요? 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용합니다. $.get('url 주소/products/1', function(response) { // ... }); 위 API가.. 이전 1 2 3 4 다음
