본문 바로가기

☕ 따뜻한 개발 한 잔19

[Next.js] 코드 스플리팅 next.js에서 를 사용하면 전체 페이지를 로드하지 않고 (리액트 SPA 특성 유지되면서) client-side-navigation으로 작동 => 대신 링크로 태우면 새로고침 됌 Next.js는 자동으로 코드 스플리팅을 해줘서 각 페이지에 필요한 항목만을 로드함 * 코드 스플리팅? 페이지가 /main, /about, /post 이렇게 세 가지 페이지로 이루어진 SPA를 개발한다고 할 때 /main 페이지를 들어가는 동안 /about이나 /post 페이지 정보는 사용자에게 필요하지 않을 확률이 높다. 그러한 파일들을 분리하여 지금 사용자에게 필요한 파일만 불러올 수가 있다면 로딩도 빠르게 이루어지고 트래픽도 줄어 사용자 경험이 좋아질 수가 있다. 이와 같이 더 나은 사용자 경험을 위해 코드를 비동기적으로.. 2023. 7. 22.
바닐라 자스(keyword프로젝트) 리팩토링 해보기 [개선한 부분] 1. data를 불러오는 똑같은 작업을 하는 부분을 함수로 만들기 2. 실제 data.text로 추출한 html내용을 넣어주는 로직 함수 만들기 3. fetch를 통해 데이터를 뽑아오는 부분이 여러개 필요한 부분(header,footer,sidebar)은 Promise.all을 사용해서 병렬적으로 스타트 될수 있도록 개선하기 // header,footer, async function fetchContent(name) { const content = await fetch(routes[name] || routes[404]).then((data) => data.text() ); return content; } // 페이지 내용을 채우는 함수 // 여기서 pageContent는 path 받고 잇.. 2023. 3. 18.
[리액트] 리액트로 todoList 만들기 ( #1_수정해야하는 부분있음) app.js import React, { useState } from "react"; import "./App.css"; import TodoItem from "./components/TodoItem"; // import todoDone from "./components/todoDone"; function App() { const [inputValue, setInputValue] = useState(""); const [todoList, setTodoList] = useState([ { id: 1, todoItem: "Test", isDone: false, }, { id: 2, todoItem: "나의 버킷리스트", isDone: true, }, { id: 3, todoItem: "리액트 장인되기!", .. 2022. 12. 7.
[js/html] '맨 위로' 버튼 구현하기 / '맨 아래' 버튼 구현 (주말공부) 1. a 태그 사용하기 #만 사용쓰면 그것이 곧 자기 페이지를 의미하는 것!!1 맨 위로 2. 자바스크립트 사용 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징 스크롤 버튼을 클릭했을 때 자연스럽게 animate 효과로 위로 올라가는걸 연습중이징.. 2022. 11. 6.
[CSS] 다크모드? 생각보다 간단한 구현이었구나(주말공부) @media (prefers-color-scheme: dark) { 이곳엔 다크모드일때 css 작성 } light는 라이트 테마일 때, dark는 다크 테마일 때 no-preference는 선호하는 테마가 없을때 a { color: black; } @ media (prefers-color-scheme: dark) { body { background: black; color: white; } a { color: white; } } 2022. 11. 6.
[몽고db/flask] 내가 원하는 특정 댓글 삭제하기 🥸 포인트 1 - 애초에 댓글을 보여주는 메소드를 구현할 때 '게시물번호(고유번호)'를 delete 메소드의 파라메터로 넣어주었다. ${membernum} ${comment} ${name} 삭제 function show_comment() { $('#comment-list').empty() $.ajax({ type: "GET", url: "/homework", data: {}, success: function (response) { /* db에서 직접 받아오는 건 app.py에서 하고 */ let rows = response['comments'] /* for문 돌리는건 */ for(let i = 0 ; i < rows.length ; i++){ let membernum = rows[i]['membernum.. 2022. 11. 1.

티스토리툴바