heejin0283 님의 블로그

12.15) Edit 페이지 구현하기 Edit.jsximport { useParams, useNavigate } from "react-router-dom";import Header from "../components/Header";import Button from "../components/Button";import Editor from "../components/Editor";import { useContext, useEffect, useState } from "react";import { DiaryDispatchContext, DiaryStateContext } from "../App";const Edit = () => { const params = useParams(); const nav..

12.10) Home 페이지 구현하기 1. UIApp.jsximport "./App.css";import { useReducer, useRef, createContext } from "react";import { Routes, Route } from "react-router-dom";import Home from "./pages/Home";import Diary from "./pages/Diary";import New from "./pages/New";import Edit from "./pages/Edit";import Notfound from "./pages/Notfound";const mockData = [ { id: 1, createdDate: new Date().getTime(), ..

12.2) 페이지 라우팅-경로에 따라 알맞은 페이지를 렌더링 하는 과정 ex) /new -> new 페이지 렌더링사용자가 /home, /about 같은 경로로 이동라우터(router)가 그 주소를 감지해당 경로에 맞는 컴포넌트(페이지)를 화면에 표시!실제로는 전체 페이지를 새로 불러오지 않고 화면 일부만 교체하는 SPA 방식으로 동작React Router, Vue Router 같은 라이브러리가 이 기능을 제공- Multi Page Application(MPA)MPA(멀티 페이지 애플리케이션)은 여러 개의 페이지로 구성된 전통적인 웹 방식입니다.사용자가 페이지를 이동할 때마다 서버가 새로운 HTML 페이지를 전송합니다.각 페이지는 독립적으로 서버에 요청되고 새로 고침이 일어납니다.초기에 서버가 여러 페이지..

9.1) useReducer는 React의 상태 관리 Hook 중 하나로,useState보다 복잡한 상태 변경 로직을 깔끔하게 처리할 때 사용합니다. Exam.jsximport { useReducer } from "react";// reducer : 변환기// -> 상태를 실제로 변화시키는 변환기 역할function reducer(state, action) { switch (action.type) { case "INCREASE": return state + action.data; case "DECREASE": return state - action.data; default: return state; }}const Exam = () => { // dispat..

6)프로젝트 카운터앱 만들 Controller.jsxconst Controller = ({ onClickButton }) => { return { onClickButton(-1) }} > -1 { onClickButton(-10); }} >-10 { onClickButton(-100); }}>-100 { onClickButton(+100); }}>+100 { onClickB..

import useInput from "./../hooks/useInput";//3가지 hook관련된 팁//1.함수 컴포넌트, 커스텀 훅 내부에서만 호출가능//2.조건부로 호출될수는 없다//3.커스텀 훅을 직접만들수있다const HookExam = () => { const [input1, onChange1] = useInput(); const [input2, onChange2] = useInput(); return ( );};export default HookExam;import './App.css';import {useState} from "react";function App() { const [count,s..

1) Node.js란? 웹 브라우저가 아닌 환경에서도 우리 자바스크립트 코드를 실행시켜주는 자바스크립트의 런타임, 즉 자바스크립트의 실행환경이다.-Node가 필요한 이유? 원래 자바스크립트는 웹페이지 안에서만 동작했지만,Node.js가 등장하면서 서버 개발, 데이터 처리, 파일 입출력 같은 일을 모두 자바스크립트로 할 수 있게 되었다.이로 인해 프론트엔드와 백엔드를 같은 언어(자바스크립트)로 통일할 수 있어개발 효율이 높아졌고,비동기 처리 덕분에 많은 요청을 빠르고 가볍게 처리할 수 있는 서버를 만들 수 있다.또한 Node.js는 수많은 외부 모듈을 제공해웹 서버, 채팅, 게임, API 등 다양한 프로그램을 손쉽게 구축할 수 있다.--> Node.js는 자바스크립트를 이용해 빠르고 효율적인 서버 개발..

1)단락평가function returnFalse(){ console.log("False함수"); return false;}function returnTrue(){ console.log("True 함수"); return true;}console.log(returnFalse() && returnTrue()); returnFalse()가 먼저 호출됨 → "False함수" 출력됨returnFalse()의 결과는 falsefalse && ... 이므로 뒤의 returnTrue()는 아예 실행되지 않음 2) 객체구조분해할당let person = { name: "이정환", age: 28, hobby: "테니스"};// 3. 객체 구조분해할당을 이용해서 함수의 매개변수를 받는 방법..

1.5)자료형 let inf =Infinity;let mInf=-Infinity;let nan=NaN;console.log(1*"hello");NaN 은 not a number로 1*"hello"와 같은 것을 출력했을때 나타나는 결과. let myName="김희진"let myLocation="수원"let inroduceText=`${myName}은 ${myLocation}에 거주합니다.`;빽틱이란것을 활용하여 코드에 변수를 삽입할수도 있다.(작은 따옴표, 큰 따옴표 아님) --> 템플릿 리터럴 문법이라고 함 Q.) Null과 Undefined의 차이?아무것도 할당하지 않았을때 들어가는 값은 Undefined Type, Null은 변수에 명시적으로 값을 할당해줘야 하는 값입니다프로그래머가 직접 이값은 아무..

1)Singleton 패턴이란? 소프트웨어 디자인패턴에서 싱글턴 패턴(Singleton pattern)을 따르는 클래스는, 생성자가 여러 차례 호출되더라도 실제로 생성되는 객체는 하나이고 최초 생성 이후에 호출된 생성자는 최초의 생성자가 생성한 객체를 리턴한다. 이와 같은 디자인 유형을 싱글턴 패턴이라고 한다. 주로 공통된 객체를 여러개 생성해서 사용하는 DBCP(DataBase Connection Pool)와 같은 상황에서 많이 사용된다. ex)public class Coin { private static final int ADD_MORE_COIN = 10; private int coin; private static Coin instance = new Coin(); // eagerly ..