티스토리

개발 맨땅에 헤딩

검색하기

블로그 홈

개발 맨땅에 헤딩

howtoact.tistory.com/m

비전공자 대학교 4학년의 개발 도전기

구독자: 0

방명록 방문하기

주요 글 목록

chat, deploy chat npm install nodemon -g nodemon app_3.js html js 다 자동인식잘됨 //설치된 express 불러오기 console.log("==========="); const express = require("express"); //설치한 socket.io 모듈 불러오기 const socket = require("socket.io"); //node.js 기본 내장 모듈 불러오기 const http = require("http"); //Node.js 기본내장 모듈 불러오기 const fs = require("fs"); ////file system //express 객체 생성 const app =express(); //express http 서버생성 const server = .. 공감수 0 댓글수 0 2024. 3. 28.
updateDone, app, chatting updateDone module.exports = { HTML: function (title, body, control) { return ` ${title} ${body} ${control} `; }, table: function (topics) { var list = ""; var i = 0; while (i < topics.length) { list = list + ` ${topics[i][0]} ${topics[i][1]} ${topics[i][2]} 삭제 수정 `; i = i + 1; } list = list + ""; return list; }, Form: function (topics, url, metaData) { var form = ` `; var i = 0; console.log(topi.. 공감수 0 댓글수 0 2024. 3. 28.
selectOne/delete/template const express = require("express"); const app = express(); //npm install body-parser app.use(express.urlencoded({ extended: true })); //////////////////post방식 데이터 처리 //서버 listen const server = app.listen(3000, () => { console.log("Start Server: localhost:3000"); }); //__dirname: 현재 디렉토리 //page경로 설정 app.set("views", __dirname + "/views"); app.set("view engine", "ejs"); app.engine("html", require(.. 공감수 0 댓글수 0 2024. 3. 28.
Node.js 자바스크립트 (실행되는 곳? 브라우저 에서 실행) node⇒ 자바 스크립트 코드 → 브라우저 밖에서 실행되는 (어플리케이션) : 웹서버 구축, db연동 npm init C:\node_study\node_stu>node test.js Hello World C:\node_study\node_stu>node test Hello World express란? NodeJS란, 자바스크립트를 브라우저 밖에서 사용하게 해주는 프로그램임. express는 사용하여 서버를 개발하고자 하는 개발자들을 위하여 서버를 쉽게 구성할 수 있게 만든 프레임워크다. 프레임워크란, 클래스와 라이브러리의 집합체임. npm install express --save const express = require("express"); const .. 공감수 0 댓글수 0 2024. 3. 28.
css, routing, form Routing10_action함수1_Form태그서버전송2_예외처리_useActionData이용 import React from 'react'; import Home from './pages/Home' import Products from './pages/Products' import Root from './pages/Root'; import UsersRoot from './pages/UsersRoot'; import NewUser from './pages/NewUser'; import Error from './pages/Error'; import ProductDetails from './pages/ProductDetails'; import ProductDetails2 from './pages/Produc.. 공감수 0 댓글수 0 2024. 3. 24.
Routing_loader 라우팅 메뉴링크활성화피드백_NaviLink이용 import React from 'react'; import { NavLink } from 'react-router-dom'; import classes from './MainNavigation.module.css' import { Link } from 'react-router-dom'; function MainNavigation(props) { return ( { return isActive ? classes.menu : undefined; }}> Home { return isActive ? classes.a : undefined; }}> products ); } export default MainNavigation; css a{ text-decoratio.. 공감수 0 댓글수 0 2024. 3. 24.
axios, router 사용자추가1 import {useEffect, useState} from "react"; import {fetchUserList} from "./http.js" import UsersList from './components/UsersList' import Error from './components/Error'; import Box from "./components/Box.js"; export default function App() { const [usersList, setUsersList] = useState([]);//사용자 목록 const [isFetching, setIsFetching] = useState(false); //로딩중 상태저장값 const [error, setError] =useS.. 공감수 0 댓글수 0 2024. 3. 24.
useEffect , memo button import Button from "./components/Button"; import { createContext, useReducer,useState } from "react"; export const UserContext = createContext(null); export default function App() { const reducer = (current_state, action )=> { switch (action.type){ case "ADD": return [...current_state, action.xxx]; case "DEL": return [current_state.filter((v,i) => v !== action.xxx)]; default: return curre.. 공감수 0 댓글수 0 2024. 3. 19.
useRef input관리매번랜너링문제해결 import { useState, useRef } from "react"; //////////////// export default function Player() { const username = useRef(); const age = useRef(); //태그 중 ref={playerName}을 참조함 ////////////////////state와 다르게 값을 변경해도 재랜더링 되지 않고, current 속성을 사용 const [inputs, setEnterdPlayerName] = useState({username:"", age:""}); //button 을 클릭했을 때만 재랜더링 됨 , 효율적임 function handleClick() { var new_inputs.. 공감수 0 댓글수 0 2024. 3. 19.
useState 와 useRef GameBoarder import React, { useState } from 'react'; import "./GameBoarder.css" const initialGameBoard=[ [null, null, null], [null, null, null], [null, null, null], ] // const[gameBoard, setGameBoard] = useState(initialGameBoard); function GameBoarder() { const[gameBoard, setGameBoard] = useState(initialGameBoard); function handleSelect (rowIndex, colIndex){ //1.방법 (베열에 변경사항이 저장되나 동일한 주소값이기 때문에 .. 공감수 0 댓글수 0 2024. 3. 19.
useState, 이벤트, hook 자식에게이벤트전달패턴 import React from 'react'; import TabButton from './assets/components/TabButton'; function App() { //부모에서 자식 이벤트 핸들러 구현 function handleEvent(){ console.log("hellobutton"); } //App컴포넌트 실행횟수 체트 => 실행하면 1번만 호출됨 console.log("App Component") return ( {/*onSelect 대신에 임의의 값 사용가능 자식 호출 시 이벤트 함수 를 전달함 매우 많이 사용되는 중요한 패턴임*/} Java SQL SPRING SpringBoot Vue ); } export default App; import React f.. 공감수 0 댓글수 0 2024. 3. 17.
props PROPS img import reactImg from './assets/exam.png'; function App() { return ( {/* public 폴더에 sample.png 붙여넣기 할것*/} ); }; export default App; PROPS index.js 에서 막으면 결과가 출력 한번만 됨 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App.js'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementByI.. 공감수 0 댓글수 0 2024. 3. 17.
React App.js //export default App; 를 넣거나 export default function App(){ 를 쓰기 import "./App.css"; function MyButton(){ //js코드 ==vue script 부분 //컴포넌트의 이름은 항상 대문자로 시작 return I'm a button //return vue== template 부분 } //arrow 함수 const MyButton2 = (props)=> { return I'm a button2 }; export default function App(){ return( Welcome to my app ); } //export default App; Button.js function MyButton (){ return but.. 공감수 0 댓글수 0 2024. 3. 17.
부서 삭제, router@3 props, query, 라우팅 부서삭제 부서삭제 부서번호 삭제 {{ msg }} 부서번호 부서이름 위치 {{ dept.deptno }} {{ dept.dname }} {{ dept.loc }} npm install vue-router props Bar Bar{{ pw }} Baz Baz {{ pw }} Foo Foo props-od:{{ id }} $router.params.id={{ $useRouter.params.id }} Knu knu userid={{ userid }} NotFound Not Found app에서 라우팅연습 Home login/abcd Baz-pw /my/abcd knu {iserid:"홍길동"} http://localhost:8081/#/login/abcd http://localhost:8081/#/my/12.. 공감수 0 댓글수 0 2024. 3. 14.
eventBus, slot, sts 연결 eventBus eventBus.vue HelloWorld.vue {{msg}} HelloWorld2로 이벤트 전달 HelloWorld2.vue {{ msg }} app.vue EventBus Input.vue list.vue {{ index + 1 }}. {{ data }} 삭제 App.vue slot 아름다운 밤입니다 {{ msg }} App.vue {{ A.message }} {{ A.header }} {{ A.footer }} HelloWorld.vue {{ msg }} {{ footerText }} src_14_slot4_SpeechBox_named helloWorld.vue {{ msg }} App.vue {{ A.header }} {{ A.message }} {{ A.footer }} axo.. 공감수 0 댓글수 0 2024. 3. 14.
click, event, preventDefault, eventBus event01_click2 {{ result }} 값1: 값2: + - * / 이벤트 실습 가격: 갯수: 10 15 20 {{ total }} 도서목록{{ msg }} {{ book.name }}, {{ idx }}번, 가격: {{ book.price }} 삭제 선택삭제 람다 도서목록{{ msg }} {{ book.name }}, {{ idx }}번, 가격: {{ book.price }} 삭제 선택삭제 이벤트 @click="prevent” preventDefault(); target.html로 이동 {{ msg }} 다음 -preventDefault 구글 전송 이벤트 수식어 {{ msg }} x() x() once 2. preventDefault이벤트 수식어 다음1 y 다음2 y2 다음2 prevent .. 공감수 0 댓글수 0 2024. 3. 14.
v-if /v-for/ v-on event dummy hello1 dummy dummy hello2 dummy hello3 hello4 {{ amount }} 100보다 큰 값만 입력 가능 정상적으로 입력 directive05_exam5 exam 이름: 이름은 4글자 정상적으로 입력 나이: 10살보다 크거나 120살보다 작은 값만 입력가능 이름길이 :{{ username.length }}, 나이: {{ age }} elseif 점수: 점수는: {{ grade }} A학점 B학점 C학점 F학점 v-for array {{ names }} index 없이 - {{ name }} index 지정 {{ index }}: {{ name }} v-for (img, select,div 그룹핑 img-bind ./components/BookList.vue Boo.. 공감수 0 댓글수 0 2024. 3. 13.
vue vue.js vue - 푸론트 javascript 파일 vue2 : update 종료 cli 방식 p/g :프로젝트 단위로 vue 파일 작성 ⇒ build 이후 html 이나 jsp 에 포함 cdn 방식 p/g: 라이브러리를 html, jsp , thymeleaf 에서 직접 (jquery 방식) vue3 cli 방식 p/g :프로젝트 단위로 vue 파일 작성 ⇒ build 이후 html 이나 jsp 에 포함 cdn 방식 p/g: 라이브러리를 html, jsp , thymeleaf 에서 직접 (jquery 방식) vue create 프로젝트명 npm install npm run serve ⇒server 가동 ctrl + c ⇒ 서버 끄기 App.vue 부모컴포넌트의 값 {{x}} {{ y }} {{z[0].. 공감수 0 댓글수 0 2024. 3. 13.
ECMA setget, 상속 클래스3표현방식 var Person =class{ 클래스4생성자 상속시 생성자 고려할 점 자식 클래스와 부모 클래스 양쪽 constructor를 작성하지 않아도 인스턴스 생성된다. ( default constructor 사용 ) 부모 클래스에만 constructor를 작성하면, 자식 클래스의 ‘default 생성자’가 호출되고 부모 클래스의 constructor가 호출된다. 자식 클래스에만 constructor를 작성하면 자식 클래스의 constructor가 호출되고 반드시 부모 constructor를 명시적으로 호출해야 된다. 자식과 부모 클래스 양쪽 constructor를 작성하면 자식 constructor가 호출되지만 반드시 부모 constructor를 명시적으로 호출해야 된다... 공감수 0 댓글수 0 2024. 3. 13.
ECMA let_var_const 객체분해할당1배열 객체분해할당2객체 객체분해할당3파라미터 중요!!!!! ❗❗❗❗❗❗❗ template리터럴 함수1생성방법 함수2일급객체_콜백 함수3_default_rest 중첩, 애로우 4중첩함수 arrow 클래스 공감수 0 댓글수 1 2024. 3. 12.
thymeleaf, external_img thymeleaf2__JPA_H2 package com.example.demo.controller; @Controller public class MainController { // 자동 index.html 부터 시작 주소는 / @Autowired UserService service; @RequestMapping("/join") //회원가입 폼 public String join(){ System.out.println("/join"); return "joinForm"; } @RequestMapping("/register") //회원가입 public String register(User user){ System.out.println("/register "+ user); service.save(user);//d.. 공감수 0 댓글수 0 2024. 3. 12.
redirect,thymeleaf thymeleaf main Main.html main2 Main2.html main3 main3.html main4 main4.html main5.html 홍길동/20 이순신 홍길동/20 세종/40 세종/40 main5_1.html main6 main6.html 1. 문자열 리터럴 template file 2. 숫자 리터럴 this year is 1111. In two years, it will be 1111. 3. 불린 리터럴: 태그의 사용 여부 결정 이름은 홍길동 (thymeleaf 가 처리) 이름은 홍길동 (springEL 가 처리) 이름은 aaa 아님 null 문자 사용 가능 null 문자 사용 가능 4. null 리터럴 null 문자 사용 가능1 null 문자 사용 가능2 5. 텍스트 추가 및 .. 공감수 0 댓글수 0 2024. 3. 12.
boot-mybatis jsp @Controller public class MainController { @RequestMapping(value = "/") public String main() { System.out.println("/주소요청"); System.out.println("/주소요청33333"); return "main"; } } #내장 tomcat server.port=8090 server.servlet.context-path=/app #view-resolver spring.mvc.view.prefix=/WEB-INF/views/ spring.mvc.view.suffix=.jsp main.jsp jsp-css-image main @Controller public class MainController { @Requ.. 공감수 0 댓글수 0 2024. 3. 12.
boot-database h2 h2 DROP TABLE IF EXISTS USER; CREATE TABLE IF NOT EXISTS USER( ID NUMBER IDENTITY PRIMARY KEY, -- identity는 auto increment 값이다. NAME VARCHAR(50), ADDRESS VARCHAR(50) ); INSERT INTO USER(NAME, ADDRESS) VALUES('HONG', 'SEOUL'); INSERT INTO USER(NAME, ADDRESS) VALUES('KIM', 'BUSAN'); INSERT INTO USER(NAME, ADDRESS) VALUES('LEE', 'INCHEON'); drop table user; application.properties spring.datasour.. 공감수 0 댓글수 0 2024. 3. 11.
component-scan component-scan public interface DBDao { public abstract List list(); } @Repository //component -scan 이용 생성 public class DBOracleDAO implements DBDao { public List list(){ return Arrays.asList("oracle 홍길동","oracle 이순신"); } } public interface DBService { public abstract List list(); } @Service("myService") public class DBOracleService { @Autowired DBDao dao; public List list(){ return this.dao.lis.. 공감수 0 댓글수 0 2024. 3. 11.
list, map, @Autowired collection_list @SpringBootApplication /// 서브패키지에 있는 @JavaConfig 자동생성함 public class Sample01BeanApplication { public static void main(String[] args) { ApplicationContext ctx=SpringApplication.run(Sample01BeanApplication.class, args); DBService service= ctx.getBean("myService", DBService.class); List list= service.list(); System.out.println(list.size()); for (String s : list) { //List data= dao.l.. 공감수 1 댓글수 1 2024. 2. 28.
springboot springProfile application.properties 설정값에 따라 log 가 다르게 나옴 spring.profiles.active=prod #spring-profiles.active=dev banner public static void main(String[] args) { //SpringApplication.run(Boot03Banner01NobannerApplication.class, args); SpringApplication app = new SpringApplication(Boot03Banner01NobannerApplication.class); app.setBannerMode(Banner.Mode.OFF); //배너 끄기 app.run(args);//boot app 실행 } 한글.. 공감수 1 댓글수 1 2024. 2. 28.
myBatis2 controller => list 주소 처리 return void로 설정 service.list()함수 이용 전체 데이터 select 전체 데이터 sysout확인 후 model에 저장 list.jsp로 응답위임 list.jsp => el태그 이용 전체 테이터 출력 main.jsp 수정 추가 => db insert 후 list 다시 띄우기 (51번 사원추가 테스트 ) 2.삭제 => 51번 삭제 후 list다시 띄우기 (? 이용) 3.삭제=>51번 삭제 후 list다시 띄우기 (pathvariable이용) 3.수정 => 51번 사원정보 수정 후 list 다시 띄우기 list2 주소 처리 => ModelAndView => list2.jsp list3 주소처리 => forward => list3.jsp add/.. 공감수 0 댓글수 0 2024. 2. 16.
@Reponsebody ,mybatis @Reponsebody @RequestBody : 프론트 json ⇒ 서버에 Request Body 전송시 서버에서 수신할 경우 사용 @ResponseBody 버튼⇒ 특정 주소 /aaa 요청 @RequestMapping(/aaa) @ResponseBody public String aaa(){returs “test”; //문자열 전체를 응답 데이터로 처리 } @ResponseBody public String aaa(){ return “hello”; // 문자열 전체를 응답데이터로 처리 ‘hello’문자열 응답처리 } public String aaa(){ return “hello”; // hello.jsp } @Controller public class TestController { @RequestMappi.. 공감수 0 댓글수 0 2024. 2. 16.
handler, response, json URLMapping @Controller public class TestController { @RequestMapping(value = "/", method = RequestMethod.GET )//get, post 둘다 처리 public String main() {//servlet과 동일 return "main";//응답요청을 할 jsp 파일이름 test.jsp } @RequestMapping(value="/aaa", method=RequestMethod.GET) public String aaa() { System.out.println("aaa 호출"); return "main"; } // aaa2, aaa3 둘다 같은 페이지 호출 @RequestMapping(value= {"/aaa2", "/aaa.. 공감수 0 댓글수 0 2024. 2. 16.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.