목록전체 글 (175)
Cohe
Next.js 프로젝트 생성하기..수동 생성mkdir next-manualcd next-manualnpm init -y ⇒ pakage.json이 만들어진다.pakage.json을 수정한다접은글 내부에 적 더보기{ "name": "next-manual", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next dev" }, "keywords": [], "author": "", "license": "MIT" }npm install react@latest react-dom@latest next@latestpage.tsx : view component가 있는 파일 → return 값이 있는 것이다.app 폴더를 만..
Next.jsnext.js는 오픈소스 앱 애플리케이션 프레임워크다next.js는 리액트를 기반으로 구현 및 개발됨사용목적서버사이드 렌더링이나 정적 웹 사이트 생성 등 웹 애플리케이션 개발을 편리하게..리액트 기반이나, 서버의 기능도 일부 가지고 있다.리액트 공식 문서에 서버 사이드 랜더링 웹사이트 구축 시 Next.js로 권장함.특징으로 리액트의 기능성을 살피면서 리액트에서 다룰 수 없는 영역을 포함하는 실전적 웹 프레임워크이기 때문, 보다 개발을 십게, 쾌적한 사용자 경험을 제공.리액트 알고 있다면 훨씬 쉽게 작업할 수 있다.SSR/SSG의 필요성SPA는 클라이언트 사이드 렌더링을 사용하면서 초기 표시가 지연되는 문제가 있음.이에 대한 대안으로 SSR/SSG를 볼 수 있음.SSRserver side R..
숙제 - onToggle, onRemoveimport { useCallback, useReducer, useRef, useMemo, useState, useEffect } from 'react';import CreateUser from './Hook/CreateUser';function countActiveUsers(users) { console.log('활성 사용자 수를 세는 중....');...function reducer(state , action) { switch ... case 'CREATE_USER': return { inputs: initialState.inputs, users: state.users.concat(action.user) }..
삭제 버튼을 누르면 삭제가 되는 걸 만들고 싶어요!!array/userList.js에서 작성function User({user, onRemove}) { return ( {user.username} ({user.email}) onRemove(user.id)}>삭제 ); } function UserList({users, onRemove}) { return ( { users.map((user) => ( )) } App.js 에서 작업.... const onRemove = id => { // user.id가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열 만듦 // user.id가 파라미터로 전달된 id인 것만 제거한 새로운 배열 생성 // filter를 사용하여 구현 -> true인 애들만 제거..
useState를 통한 컴포넌트에서 바뀌는 값 관리하기리액트 16.8 이전에는 함수현 컴포넌트에 상태를 관리할 수 없었음.16.8 이후 부터는 hooks라는 기능을 도입하면서 함수형 컴포넌트에서도 상태 관리를 할 수 있게 되었다. (ustState는 이 훅들 중에 하나다)State리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.state가 체인지 되면 변화를 감지하여 리렌더링을 수행한다.클래스 vs 함수형 컴포넌트에서 사용하는 방법은 다르다. 함수형 컴포넌트에서는 hooks 개념을 이용해서 더욱 쉽게 사용 가능함.useState 사용하기syntax : useState(초기값)배열 반환첫번째 배열의 요소에는 현재값을 (getter과 동일)두번째 배열의 요소에는 상태를 변경하는 Sett..
리엑트 1일차REACT란?자바 스크립트 라이브러리구조는 MVC, MVVM과 같은 프레임워크가 다르게 오직 View만 처리SPA 구조 (Single Page Application)index.html 하나만 로드하고 실행시키는 구조REACT 구동번들러 (Webpack)이 모든 것을 동작 시켜 줍니다.Webpack이란 어플리케이션을 동작 시키는데 필요한 자원 (JS파일등, CSS, Image 등)을 하나로 묶어서 조합하여 경량화한 후 결과를 보여주는 도구번들러는 node.js를 통해서 직접 설정이 가능하지만, 리액트 프로젝트 생성 시 자동으로 포함되어 동작DOM (Document Object Model) ?HTML을 이해하기 쉽도록 트리 구조로 만들어진 태그 (객체)들을 의미함HTML방식이 아닌 다른 방식으로..
JavaScript 삼항 연산자//삼항 연산자 연습const array = []; // 상수, 변경되지 않음// let text = ""; // 재선언이 안됨// if(array.length === 0) {// text = "empty";// } else {// text = "not empty";//}let text = array.length === 0 ? "empty" : "not empty";console.log(text);// 삼항 연산자 중첩 사용 예시const condition1 = false;const condition2 = false;const value = condition1 ? '와우!!!' : condition2 ? '안녕!!!' : '초';console.log(val..
rm -rf node_modules 이후에 classNames를 자꾸 인식하지 못하는 분제yarn다운이 안됐거니.. 하고 npm 으로 다운 rm -rf node_modules보안 문제 생겨서 npm audit fix --force 를 시도하며 아래와 같은 오류가 뜸digital envelope routines::unsupported classpath 꼬여서 rm -rf node_modules 로 해결하고 다시 npm start 하니까 됨
우선 프로젝트의 기본 구조를 설명하자면 mvc2 패턴으로 앞으로 작성해야 할 패키지는 controller, service, repository, dto, entity, html 코드이다.mvc 모델은 다음과 같다.Client: 사용자가 웹 브라우저를 통해 서버에 요청을 보낸다Controller: 클라이언트의 요청을 받아 적절한 서비스 메서드를 호출한다. 서비스에서 반환된 결과를 바탕으로 HTML 페이지를 생성하여 클라이언트에게 응답한다.Service: 비즈니스 로직을 처리하는 계층으로, 데이터 조작 및 변환을 수행한다. 필요한 경우 DTO를 사용하여 데이터를 전달한다Repository: 데이터베이스와 상호 작용하는 계층으로, 엔티티 객체를 사용하여 데이터를 저장하고 조회한다.DTO (Data Transf..
springboot project 게시판 만들기spring boot 게시판 만들기를 시작하면서, 앞으로의 목차와 프로젝트의 기본 gradle 설정을 이야기 하고자 한다.참고로 springboot 3.2.5 버전이다!!!목차게시판 만들기 : Board table에 맞춰 작성CRUD게시글의 목록/검색/페이지 처리게시물의 등록게시물의 조회게시물의 수정/삭제post 후 모달창Searchreply 개수 넣기댓글 달기 : reply회원 정보 : member시작하기시작하기 앞서 해당 링크에 접속한다 https://start.spring.io/해당 링크에서 다음과 같이 맞춰준다.프로젝트 옵션:Project: Gradle - Groovy 선택됨Language: Java 선택됨Spring Boot 버전: 3.2.5 선택됨..