본문 바로가기

분류 전체보기213

[NodeJS+Express] 8. EJS 문법 정리 이전 2개의 포스트에서 다루었던 EJS 문법에 대해서 간단히 정리해보자! 1. - JS 문법을 EJS 파일 내에서 사용할 때 예시 HELLO! 결과 2. - 사이에 들어오는 데이터가 html이어도 escape하여 문자열로 출력 예시 결과 3. - 사이에 들어오는 데이터가 html이라면 실제 html 블록 생성 (즉, include() 등 특수한 문법 사용 혹은 DB에서 html 받아올 때 활용) 예시 //footer.ejs @KassidBoard 결과 2023. 10. 9.

[NodeJS+Express] 7. EJS 파일 내 JS문법 사용 & 파일 내 .ejs파일 삽입 이번에는 저번 포스트에 이어서 EJS 문법에 대해서 좀 더 알아보자! 1. EJS 파일 내 JS문법 사용 ejs 파일 내에서는 JS문법을 그대로 사용할 수 있다! 사용법 위처럼 으로 JS구문을 감싸서 사용하면된다. 예시와 함께 살펴보자. 예시1 Hello 결과1 for문의 반복문을 사용하여 태그를 반복할 때 위와 같은 형식을 사용한다. 예시2 HELLO!! Hello 결과2 if문도 문제없이 정상작동한다! 2. 파일 내 ejs 파일 삽입 ejs파일 내에 다른 ejs 파일을 가져와서 붙여넣을 수 있다. nav바 혹은 footer 등 페이지마다 계속해서 반복되는 요소들을 ejs 파일로 따로 생성한 뒤 그 파일을 가져오는 방식으로 보다 간편하게 구현할 수 있다. 사용법 server.js에서 ejs파일에 데이터.. 2023. 10. 9.

[NodeJS+Express] 6. EJS로 MongoDB 데이터 바인딩하기 저번 포스트까지 MongoDB를 서버와 연결하고 DB의 데이터를 꺼내오는 것까지 완료하였다. 이번에는 그 데이터를 이용하여 페이지를 제작해보자! 1. EJS (Embedded JavaScipt Template) 1) 간단하게 알아보기 EJS는 템플릿 엔진이다. 템플릿 엔진이란, DB나 API의 데이터와 미리 정의된 템플릿을 합쳐서 하나의 HTML 파일을 출력해주는 모듈이다. 특히 EJS는 JavaScript 문법을 그대로 사용할 수 있어서 현재 프로젝트에 아주 간편하게 활용할 수 있다. 2) 세팅하기 (1) 라이브러리 설치 npm install ejs (2) server.js(서버파일) 수정 app.set('view engine', 'ejs') 위 코드를 서버파일 상단에 작성한다. (3) views 디렉.. 2023. 10. 8.

[React] 12. Styled-components (+ 한 컴포넌트에 css파일 적용법) 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component) 4. 2023.05.28 - [🌌 | WEB DEV/React] - .. 2023. 10. 4.

[React] 11. 라우팅-3 양산형 라우팅 이전 글 ▼ 더보기 0. 2023.05.05 - [🌌 | WEB DEV/React] - [React] 0. React를 사용하는 이유 & 초기 세팅 1. 2023.05.07 - [🌌 | WEB DEV/React] - [React] 1. JSX 2. 2023.05.26 - [🌌 | WEB DEV/React] - [React] 2. state (변수, array, object) 2-1. 2023.05.27 - [🌌 | WEB DEV/React] - [React] 2-1. array state 정렬하기 ( .sort()활용) 3. 2023.05.28 - [🌌 | WEB DEV/React] - [React] 3. 컴포넌트 (Component) 4. 2023.05.28 - [🌌 | WEB DEV/React] - .. 2023. 10. 3.

[NodeJS+Express] 5. MongoDB에서 데이터 꺼내기 이번에는 MongoDB에서 데이터를 꺼내와보자! 1. MongoDB의 데이터 형태 꺼내오기 전에 사이트에서 직접 데이터를 저장해보자. 세팅이 완료되었다면 이러한 형태로 DB / collection 이 등록되어있을 것이다. [INSERT DOCUMENT]를 눌러서 아래와 같이 {Key: Value}를 입력해보자. 이렇게 잘 들어가는 것을 확인할 수 있다! 저 한 블록이 document인 것이다. ※ _id 란? document 생성 시 _id 라는 항목도 함께 생성이 되는데, 이는 document 간 구분을 위한 id 이다. 이때 ObjectId 라는 랜덤 문자를 입력하는데 몇가지 특징이 있다. 1. 중복X / 2. 먼저 만들수록 낮은 ObjectId / 3. ObjectId 대신 임의로 설정 가능(e.g.. 2023. 9. 24.

[NodeJS+Express] 4. MongoDB 탑재해주기 지금까지 세팅한 서버에 DB를 달아보자! 1. DB 톺아보기 0) DB가 필요한 이유 웹 서비스를 제공하기 위해서 중요한 것 중 하나는 사용자들의 데이터를 관리하는 것이다. 이를 위해서 사용하는 것이 DataBase(DB)이다! 데이터베이스를 이용해 빠른 데이터의 입출력과 대용량 보관을 할 수 있다. 1) DB의 종류 DB의 종류에는 계층형, 네트워크형, 관계형, 객체지향, 비관계형이 있다. 이중 최근 많이 사용하는 것은 관계형과 비관계형이다. 이 둘에 대해 간단히 알아보자. - 관계형 데이터베이스 쉽게 이것을 설명하면 엑셀과 비슷하다. 테이블이 존재하고, 데이터를 한 행씩 차례로 보관한다. 이를 사용하기 위해서는 DBMS(데이터베이스 관리시스템)를 설치해야한다. ex) MySQL, Oracle, SQL.. 2023. 9. 24.

[NodeJS+Express] 3.정적파일 넣어주기 (css파일 등록) & Bootstrap 이용하기 이제 웹사이트를 디자인 해보자. 1. 정적파일 삽입하기 1) css 파일 생성하기 css 파일과 같은 정적파일은 보통 public 디렉토리에서 관리한다. 따라서 위처럼 public/main.css 를 생성해준다. 2) public 디렉토리를 서버에 등록하기 app.use(express.static(__dirname + '/public')) public 폴더에 있는 파일들을 서버에서 사용할 수 있도록 서버에 디렉토리를 등록해준다. (오타주의) 3) html파일에 넣어주기 html 파일의 header에 위 태그를 삽입해주면 된다. 4) 확인해보기 /* main.css */ .square{ width: 100px; height: 100px; background: #4cb1ff; } 2. Bootstrap 이.. 2023. 9. 23.

[NodeJS+Express] nodemon으로 자동화하기 지금껏 아래의 코드와 같이 node server.js 이 명령어를 사용하고 서버를 실행할 때 귀찮은 점은 파일을 수정한 뒤 적용을 하기 위해서 ctrl+c로 실행을 종료하고 다시 재시작을 해야한다는 것이었다. 이를 해결해주는 아주 착한 친구가 있다! 1. nodemon 설치하기 npm install -g nodemon 위 명령어로 설치했다면 잘 적용되는지 확인해보자. 2. 확인하기 서버를 실행해보자. nodemon server.js 이제 server.js를 수정해보자! app.get('/news', (request, response) => { response.send('오늘의 뉴스...') }) 위 코드를 새로 추가해준뒤 저장하면 이렇게 자동으로 재시작 해주는 것을 알 수 있다. html파일도 수정해보면.. 2023. 9. 23.

이전 1 2 3 4 5 6 ··· 24 다음

티스토리툴바