본문 바로가기

전체 글6

3. List 페이지 구현하기 이 글에서는 fetch() 함수와 Router Handler를 이용해 데이터를 가자오는 방법을 알아보겠습니다.[ { "title": "빨래하기", "content": "세탁기에 빨래 넣기", "date": "2024-05-07" }, { "title": "장보기", "content": "과일, 채소, 우유 구매", "date": "2024-05-08" }, { "title": "운동하기", "content": "체육관에서 유산소 운동 30분", "date": "2024-05-10" }] 우선 위 파일을 database.json라는 이름으로 public/database 경로에 만들어 줍니다.다음으로, fetch() 요청을 보내기 위해 Next js.. 2024. 5. 7.
1. 페이지 이동 페이지 이동Next js는 app폴더 내 폴더를 만들면 자동으로 경로를 지정해 줍니다.app폴더에 show라는 폴더를 만들어서 /show로 접속 시 보여줄 페이지를 만들어봅시다.여기서 잠깐, jsx 파일과 js 파일의 차이점은 무엇일까요?jsx는 JavaScript XML의 약자로, JavaScript를 확장한 문법입니다. 가장 큰 특징은 자바스크립트에서 HTML 문법을 사용할 수 있다는 점입니다.js파일로 사용해도 문제는 없습니다만, jsx 파일로 사용하는 이유는 Emmet 기능을 사용할 수 있기 때문입니다.다시 본론으로 돌아와서 show 폴더 내부의 page.jsx 파일에 다음과 같은 코드를 작성해 줍니다.export default function Show() { return (Show 페이지 입니.. 2024. 5. 6.
0. 시작하기 아무것도 모르는 상태로 시작해 보는 next js로 웹사이트 만들어 보기 프로젝트입니다.입문자의 시선에서 작성된 글이기에 전문성이 부족할 수 있습니다.초보자도 쉽게 따라할 수 있도록 하는게 이 프로젝트의 목적입니다!Next js를 선택한 이유.프런트엔드 + 백엔드를 혼자 관리해야 하고, 두 분야 전부 처음 해보기 때문에 서버를 따로 구축할 필요가 없는 Next js를 선택하게 되었습니다. 나는 어디까지 알고 있어야 하는가?진짜 기본적인 html / css / javascript 기초만 알고 있다면 따라할 수 있습니다.React에 대한 기본적인 지식이 있다면 더욱 이해하기 쉽습니다.css 대신 tailwindcss를 사용하기에 tailwindcss에 대해 알아보면 좋습니다. Next js 시작하기공식 홈페.. 2024. 5. 6.
[Python]멜론차트 긁어오기로 알아보는 파이썬 bs4 목표: 멜론차트 TOP100을 가져와서 json파일로 저장하기 멜론차트는 https://www.melon.com/chart/ 여기서 가져올껍니다. 웹 사이트에서 정보를 긁어오는 것 = 크롤링 크롤링하면 대표적으로 bs4랑 셀레니움이 유명합니다. 여기서는 bs4를 사용할껍니다. 그러면 bs4사용법에 대해 알아봅시다. 먼저 requests랑 bs4를 설치해야 됩니다. 터미널에 아래 2개를 입력해서 설치해줍시다. pip install requests pip install bs4 requests랑 bs4를 import하고 시작합니다. import requests from bs4 import BeautifulSoup 그럼 어떤식으로 코드를 짤 것인가? 사이트 접속 -> 원하는 데이터(멜론 차트 TOP 100) 찾.. 2022. 4. 13.