잘하자 IT

사이드바 만들기 div class="sidebar">            div class="my-page-div">                div class="my-page-a">                    div class="member-id-div">                        p>asdasdasdasda님p>                        p>My Pagep>                                          div>                div>                    a href="">개인 정보 변경a>                div>                div>                    a href..

kh 교육 과정에서 최종 파이널 프로젝트에 돌입했다 본격적인 UI설계 앞서서 연습용으로 사이드바를 만들고 있다  유튜브를 찾아보다가 사이드바를 보다 세련적이고쉽게 만드는 영상이 있어서 참고하고 만들었다      input type="checkbox" id="menuicon">        label for="menuicon">            span>span>            span>span>            span>span>        label> 햄버거 버튼을 만들기 html 코드이다  input을 사용하여 사이드바를 만들기위해서 input type을 checkbox 속성을 주었다. label 안에 span은 햄버거 버튼을 위한줄이라고 생각을 하면된다.        input[id=..

import { useState } from "react";function WaitingList(){    // 기존 리스트    const[waitingList, setWaitingList] = useState([        {name: '조건웅', count: 10, phone:'010-1010-3737'},        {name: '양민욱', count: 3, phone:'010-2020-3030'},        {name: '김창식', count: 4, phone:'010-2727-3737'},        {name: '차은우', count: 7, phone:'010-5555-1212'}    ]);    // 새롭게 추가될 useState로 초기화 시킨다.    const [newName..

프로젝트 생성 : npx create-react-app [생성할 프로젝트명]  프로젝트 실행 : npm start 모듈 추가하기 : npm add 모듈명 => npm install 모듈명  지금까지 사용한 모듈들 - (2024-09-30) styled-components- (2024-09-30) react-router-dom- (2024-09-30) react-axios BrowerRouter : React 애플리케이션에서 클라이언트 사이드 라우팅을 가능하게 해주는 컴포넌트 URL을 관리하고 브라우저의 주소 변경에 따라 올바른 컴포넌트를 렌더링해준다.  Link : 애플리케이션 내에서 다른 경로로 이동할 수 있게 해주는 컴포넌트이다. 을 활용하여 클릭 시 지정한 경로로 이동할 수 있다 Routes: 애플..

회원가입                                       /member/insert" method="post">                                      * ID                                           * Password                                           * Password Check                                                                * Name                                              Email                                             ..

link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">     모달 연결 시 link : 로는 CSS(스타일시트) 연결을 할 수 있다. Bootstrap의 스타일을 적용한다. 이는 페이지의 레이아웃이나 디자인을 담당하게 된다.   script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" ..

구조 살펴보기 :  1. Content(내용) 영역 요소의 실제 컨텐츠가 들어가는 부분이다. 텍스트, 이미지, 비디오 등등 콘텐츠가 포함될 수 있다.  2.Padding (안쪽 여백)콘텐츠와 테두리(border)사이의 여백이다 요소의 배경색이 적용된다. 3.Border(안쪽 여백)요소의 경계선이다 4.Margin(바깥 여백)요소와 다른 요소 사이의 공간으로 외부여백이다 요소의 배경색이 적용되지 않으면 margin끼리 중첩이 될 수 있다.   margin: 0 auto;는 CSS에서 요소를 수평으로 가운데 정렬하는 데 사용된다 margin -은 위쪽과 아래쪽 여백을 0으로 정하고 왼쪽과 오른쪽 여백은 자동으로 설정된다자동으로 할당된 여백은 사용 가능한 공간을 균등하게 나눈다.

Javascript란?  자바스크립트란 웹 페이지에 동적인 기능을 추가하기 위해서 사용되는 프로그램 언어이다 Javascript는 웹 브라우저에서 실행된다. 사용자가 웹 페이지와 상호작용할 때 즉각적인 반응을 제공해준다.  또한 AJAX를 통해서 비동기적으로 데이터를 주고 받을 수 있다.  자바스크립트 데이터 타입 :  Data Types :여섯 개의 Primitive Type과 한 개의 오브젝트 타입이있다. Number(숫자) String (문자열)Boolean(논리연산)undefinednull Symbol  Object 객체 타입 데이터 타입을 알고싶을 떈 (typeof 변수명);을 통해서 확인할 수 있다.  String 타입 문자열 안에 '  '표 넣기" "안에 넣는다. " ' ' "    Hois..

플렉스 박스는 각 요소들을 배치하는 기법이다 사용자들 마다 화면 크기가 다른 경우(기기마다)Flexbox를 통해서 웹사이트의 요소들을 배치하기 쉽게 만들어준다.   flexbox 사용 방법  display: flex;를 사용한다  이때 사용하고 싶은 요소에 직접 추가하는 게 아닌 부모요소에 display:flex를 사용한다. 즉 display: flex;를 사용하게 되면 해당 컨테이너 내의 모든 자식 요소들은 flex 아이템이 된다.  Flex는 기본족으로 가로축이 메인으로 잡힌다 flex-direction : row : 메인 축을 가로 방향으로 정할 수 있다 [해당 값은 기본 값이다]row-reverse: 메인축 가로 방향으로 정하되 역 방향이 된다. column: 메인 축을 세로 방향으로 정한다. c..

드디어 KH 정보교육원 파이널 프로젝트에 들어서게 되었다.나는 파이널 프로젝트 기능구현을 하기 전 스프링 개념을 정리하는 중이다 그래서 request객촤 session 객체 차이점을 정리를 해보고자한다.  먼저 request 객체는 식당으로 비유하자면 직원한테 하는 주문 같은 거다.직원한테 주문을 하게 된다면 종업원은 포스기에 주문 내용을 적고하나에 주문번호가 생성되고 그 주문 번호를 통해서테이블 번호 메뉴이름 등등 포함해서 주문이 들어가게 된다. 즉 단일한 요청이다.  다음은 session 객체이다. session 객체는 사용자의 상태를 일정 기간 동안 유지를 하는 객체이다 식당 안에서 한 사용자가 있는 동안에 벌어지는일을 기억하고 관리를 하는 포스기 같은 역할을 한다.한 사용자가 해당 테이블에서 주문..