$$config title: 박소망 공부 LOG keywords: - IT - ... $$ # [장희성 강사님 깃](https://github.com/jhs512?tab=repositories) # [김범수 강사님 깃](https://github.com/xanqus) # [폰트어썸 최신 cdn](https://cdnjs.com/libraries/font-awesome) # 참고자료 https://wonit.tistory.com/131?category=738059 https://youngkyonyou.github.io/springboot/2021/07/07/springboot-post16.html (정적자료가 자동 리로드 되지 않을 때) # 2022-07-21 SSE + mongodb로 실시간 채팅 만들기 스프링 시큐리티로 OAuth2 jwt로그인 배포 팀 구현서비스 w3chool # 2022-08-23 리엑트에서는 Jpa에서 사용한 일반적인 세션 로그인이 불가능하다. 때문에 JWT(Json Web Token) 혹은 localStorage를 사용한다. # 2022-06-26 com.example.demo 패키지 명 고정 demo 뒤에 서비스 , 리포지터리, 컨트롤러 등을 쓴다. # 2022-06-25 컨트롤러는 바로 DB에 접근 불가. 인접한 것에만 접근 가능. 각 기능별로 요청 / 응답 가능 => 요청과 응답 동시 불가 => 컨트롤러 에서 서비스 호출 서비스에서 컨트롤러로 받을 수 있으나 서비스가 컨트롤러에게 주도적으로 무엇을 시킬 수 없음. 서비스는 리포지터리에게 요청 리포지터리에게는 단순한 것만 줘야함. 서비스는 지금은 단순 요청만 보내고 있음 리포지터리에게 컨트롤러 -> 서비스 -> 리포지터리 -> DB 컨트롤러 <- 서비스 <- 리포지터리 <- DB # 2022-06-23 ``` @Controller // ctrl + shift + o 눌러주면 자동으로 import 함. public class UsrHomeController { @RequestMapping("/usr/home/main") //이게 들어온다면? @ResponseBody //요걸 반환해서 실행해라 public String ShowMain() { return "안녕하세요."; } } ``` # 2022-06-08 # tdd tdd를 위해 @Test가 필요함 위에 테스트를 인식시켜주기 위해서 import org.testng.annotations.Test; 필요 //이건 사람이 읽는 주석 @이건 컴퓨터가 읽는 주석 # for of 문 ```js let arr = ["a", "b", "c", "d"]; for (let value of arr) { console.log(value); } // 출력결과 a b c d ``` 배열의 값을 value에 넣어서 출력함 # for in 문 ```js let arr = ["a", "b", "c", "d"]; for (let value in arr) { console.log(value); } // 출력결과 0 1 2 3 ``` # join 문 ```js let arr = ["a", "b", "c", "d"]; console.log(arr.join(",")); //출력결과 a,b,c,d ``` # 2022-06-07 https://code.oa.gg/java8# 온라인 자바 https://www.jdoodle.com/ 자바툴 (클래스 설정할때) 자바 책 https://wikidocs.net/book/31 (온라인 책) # 2022-06-06 https://velog.io/@jong/M1-%EB%A7%A5%EB%B6%81%EC%97%90-node.js-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-nvm-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 # 2022-06-03 개츠비 블로그 https://woojeongmin.com/tags/react (참고) 아웃백 앞 고기 어찌고 ## 2022-06-02 깃허브 이어하기 git checkout -f . : 커밋되지 않은 수정들 제거 개츠비이미지 -> 경로에 해당 이미지가 없으면 문자열로 출력함. sharp -> 다듬는것을 해줌 눈누 :폰트사이트 git config --global core.ignorecase 확인 git config --global core.ignorecase false ## 2022-06-01 staticImage 좋은점 리랜더링이 없다. 알아서 적절한 크기로 설정된다. 다운로드(어딘가에 저장했다가 필요할 때 씀) # gif 파일 넣기 https://www.gatsbyjs.com/docs/how-to/images-and-media/working-with-gifs/#accessibility-concerns-with-animated-gifs install ~~ -- force : 강제로 설치 ## 2022-05-31 # HTML,CSS 기본값 이름, 이름{ 원하는 값 } 무속성 : div,nav,section,article - block 너비 : 너비가 지정되어 있지 않으면, 최대한 유연하게 늘어남. 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. 배열방향 : 한줄에 무조건 1개 - inline-block 너비 : 너비가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. 높이 : 높이가 지정되어 있지 않으면, 최소한으로 유연하게 줄어든다. 배열방향 : 한줄에 최대한 여러개 # 폰트 꾸미기 - (글자의 두께 조절) font-weight:normal; font-weight:bold; - (글자의 크기 조절) font-size:3rem (기본 폰트의 3배) font-size:140px (기본 폰트의 3배) - (자간 조절) letter-spacing:-10px; (자간이 짧아짐) color:~~(글자 색상) [rgba(red,green,blue,투명도)] # 표 만들기

교시/요일

border : 테두리 크기 조절 ```HTML table{ border-collapse:collapse; } ``` 테이블 테두리 하나만 나옴 # br 줄바꿈 # \\ 링크로 넘어감 target="\_blank" 있으면 새창에서 열림 # 후손,자손 선택 # text-align : 자신이 가지고 있는 텍스트를 정렬한다 (엘리먼트를 정렬하는게 아님 -> display:inline-block 하면 엘리먼트가 텍스트화 되어 가능) >> 자신이 가지고 있는 텍스트 -> 부모에 정의 (flex는 자손에도 정의 가능) # inline 요소에 text align ```html div { border:20px solid red; padding:20px; text-align:center; display:inline-block; /*너비를 줄임*/ } section { width:100px; display:inline-block; border:20px solid blue; padding:1px; } ``` inline 요소는 너비를 최소화 하는데 정렬은 의미가 없다. 때문에 text align은 의미 없다. inline : 엘리먼트는 전 후 줄바꿈 없이 한줄에 나란히 배치 block : 전후 줄바꿈이 들어감 # flex가 편함 ## 사이간격 노말라이즈 : 간격을 조절 https://fontawesome.com/icons/angle-right?s=solid 꾸며주는 class 사이트 gatsby : React + 그래프QL : 정적사이트 생성기 https://www.gatsbyjs.com/docs/tutorial/ npm install -g gatsby-cli ![원본이미지](https://www.gatsbyjs.com/static/0fd27b745c1de708f034eaf97c4416e0/321ea/deployment-workflow.png) 1. 만든걸 깃허브에 보냄 2. 깃허브와 개츠비가 연결하는거 cd c:\work mkdir gatsby_projects cd gatsby_projects gatsby new # index는 없음을 의미함. https://localhost:8000/ 파일명 # vscode npm run start 만약 안되면 1. Ctrl + C, npm run start 2. Ctrl + C, npm run clean, npm run start 3. vs code 재시작 # git git origin pull master : 깃에 있는것을 받아옴. git clone "주소" "폴더(없으면 생성됨)" 이면 한번에 작업이 진행 git config user.name git config user.email 접속 해야함. module은 ignore로 받아오지 않아짐, npm install 해서 받으면 됨 -> npm run start 하면 됨. ## 2020-05-30 # HTML div nav section article : 무속성 a : 링크 네이버 br : 줄바꿈(셀프 -
) img : 이미지(셀프 - ) ul,li : 목록, 항목 # CSS padding , magin : 여백 section div : section에 들어있는 div -> 후손을 말함. '>' : 자식을 말함 display : flex (기본값은 block) flex : 남는 부분을 사용할 수 있다. flex-grow:1 : 남는부분 가져감 min-height : 높이가 늘어날 수 있다. # 직접 블로그 만들기 개츠비(개발툴) 사용할거임 ## 2022-05-29 # flex - justify-content (flex요소들을 가로선 상에서 정렬) flex-start : 왼쪽으로 정렬 - default flex-end : 오른쪽으로 정렬 center : 가로선 상 가운데로 정렬 space-between : 요소들 사이의 간격을 동일하게 둔다. space-around : 요소들 주의에 동일한 간격을 둔다. - align-items (flex요소들을 세로선 상에서 정렬) flex-start: 꼭대기로 정렬 flex-end: 바닥으로 정렬 center: 세로선 상 가운데로 정렬 baseline: 컨테이너(담은 곳)시작 위치에 정렬 stretch: 컨테이너(담은 곳)에 맞도록 늘림 - default - flex-direction (정렬할 방향을 정함) row: 텍스트 방향(가로)으로 정렬 - default row-reverse: row의 반대로 정렬 column: 위아래 방향(세로)으로 정렬 column-reverse: column의 반대로 정렬 >>> 방향을 바꾸면 justify와 align 도 바뀜 => 세로선 justify, 가로선 align - order (요소의 순서를 지정) -n ~ n - align-self (items의 영향을 받지않고 개별로 요소를 적용시킴) - flex-wrap (flex요소들을 한 줄 또는 여러 줄에 걸쳐 정렬) nowrap: 모든 요소들을 한 줄에 정렬 - defalut wrap: 요소들을 여러 줄에 걸쳐 정렬 wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬 - flex-flow (flex-direction + flex-wrap을 합침) flex-direction명령어 flex-wrap명령어 - align-content (줄 사이의 간격을 지정) flex-start: 여러 줄들을 컨테이너 꼭대기에 정렬 flex-end: 여러 줄들을 컨테이너 바닥에 정렬 center: 어러 줄들을 세로선 상의 가운데에 정렬 space-between: 어러 줄들의 사이에 동일한 간격을둠 space-around: 여러 줄들 주위에 동일한 간격을 둠 stretch: 여러 줄들을 컨테이너에 맞도록 늘림 변수는 소문자(카멜), 상수는 대문자(언더바)로 사용한다 ## 2022-05-28 6 - 1 5 - 2 3 - 3 1 2 3 4 7 : 1 -3 5 7 final 변수 : 변수를 상수화 시킴 -> 상수 :바뀌지않는 수 --- 개입이 절대 불가하다. enum[변수를 모아놓은 클래스] : 상수의 이름을 정의하고 3개의 상수가 어디에 필요한지 이름정의, 값을 정의하지 않으면 0,1,2 로 증가 이름을 사용할것이기 때문에 0,1,2의 값은 의미가 없다. -관리가 용의하고 어디서든 사용이 가능하다. (각 클래스에서 정의하고 사용) enum log{ A B C } log.flag; d ## 2022-05-27 vs코드 셋팅 https://velog.io/@eundada064/%EB%B0%B1%EC%A4%80-JavaScript-VSCode-%ED%99%98%EA%B2%BD-%EC%84%B8%ED%8C%85 # 명언 서버 깃허브 리포지터리를 서버로도 사용할 수 있음.. (무료이다.) , 페이지 설정 단점 : 데이터 수정 삭제 추가가 안된다. (조회만 가능) 장점 : 무료!! ## 2022-05-26 vscode 넣은것만 수정되게 하는 방법 ```js const {id = row.id , content = row.content, like = row.like} = req.body // 값을 받은건 수정하고 값을 받지 않은 건 그대로 냅둘 수 있는 로직임 ``` 객체를 넣을 때 body를 ```js {...todo 바꾸고 싶은 내용. } ``` 내가 한 명언, 게시판은 리액트 형식으로 한게 아님. 낼 프로젝트 화면에 깔끔하게 나오는게 목적임. - 랜덤 단건 조회 API - 수정 API - 랜덤단건 조회 리액트 - 다른 명언 보기 버튼 - 좋아요 싫어요 버튼 - API 버튼 연동 자바스크립트는 멍청해서 매개변수 순서도 중요하다 ;;;; \[\[a]] 을 쓰는 이유 : VS코드 내에서 a내의 value를 받기 위해서 필요하다. ## 2022-05-25 # 할일 리스트 앱 구현 1. 기본 세팅 깃허브 만들기 프로젝트 생성 (폴더 : work -> 폴더만들기) 폴더에서 git colone 주소~~ vs code -> npm i express , npm i mysql2 , npm i cors "type" : "module" 2. 코드펜 연결 확인 깃에 파일 집어넣음 3. DB 만들기 할일 만들면 됨 (id, reg_date, update_date, no\[id는 마음대로 수정할 수 없으므로] ,user_code\[식별자], content, perform_date, is_completed \[기본값 0 - default 0]) 테스트 데이터 생성 alter table 테이블명 add unique( , ); 4. VScode 수정 /:user_code/todos : user_code별로 할일 리스트를 가져올 수 있음. 5. to2.kr/dun : 리액트에 관한 좋은것들이 들어 있음. (리액트 연습장임.) # form 입력상자의 묶음.. # trim 양쪽 공백을 제거함. # 에러 발생 - 값을 객체로 받을 수 있음 (Undefined 발생 안함) ```js const \[wiseSaying, setWiserSaying] = useState(null); useEffect(asynct () =>{ const data = await fetch(~~) const dataJson = await data.json(); setWiseSaying(dataJson); }, []); //두번이상 실행할때는 오류 발생. -> 해결방법 /*1번 해결방법*/ if(wiseSaying == null) return <> Loading.. /*2번 해결방법*/ ``` 배열로 주면 \[ {} ] 객체로 주면 \ {} # 프로젝트 이어하는 방법 git pull origin master 하면 파일이 전부 옴. \[정석] git clone 주소 하면 파일을 받아옴 \[야매] ## 2022-05-23 git - 원격 저장소(웹하드) 워킹디렉토리(일반 폴더) => 인덱스(장바구니) => 로컬저장소 커밋 : 소스코드를 로컬저장소에 넣는것 git init : 저장소를 생성한다. (숨김파일로 저장될 수도 있음.) touch : 파일 생성 (ex : touch a.txt) git status : 장바구니 확인. (빨간색 : 아직 선택되지 않은 파일, 녹색 : 담긴 파일) git add a.txt : 장바구니에 a.txt를 넣겠다. (빨간색이 사라짐.) git rm --cached b.txt : 장바구니에서 빼기 (다시 빨간색으로 됨.) git add . :싹다 담기 rm a.txt : 파일 삭제 rm -rf .git : git 폴더 제거 git config user.name : 현재 작업자명 확인 git config user.name "깃허브아이디" : 현재 작업자명 설정 git config user.email : 현재 작업자 이메일 확인 git config user.email "깃허브이메일" : 현재 작업자 이메일 설정 # 커밋 git commit -m "작업내용" : 커밋 git log : 커밋 기록보기, 빠져나가는 키 q" # 원격저장소 생성 삭제 http:// github.com/new : 저장소 생성 -> settle , 최하단 삭제 # 원격 저장소 연결 git remote -v : 현재 연결되어 있는 원격저장소 git remote add origin 저장소주소 : origin이라는 별칭으로 원격저장소 등록 git remote remove origin : 삭제 git push origin master :집어넣음 git push -u origin +master : 에러 발생시 강제로 넣어버림 # 깃 초록색 : 추가 된 부분 # 리액트 fetch("주소") .then((data) => data.json()) 통신에 사용 # CORS (기본값 모든 도메인을 허용) 주소를 codepen 에서 접근 가능하도록 뚫는거. 일부만 허용하게 하는거 -> 구글링을 통해서 API를 복사해옴. (express cors 라고 검색하면 나옴) origin : "허용하는 주소" # 코드펜 주소 https://cdpn.io # fetch 만약 일이 오래 걸리면 일을 요청하고 다른 일을 진행한다. 오래 걸리는 작업에 await를 붙임. await를 한번이라도 붙이면 async를 붙여야함. # 백준 ```python T = input() arr = ["ABC", "DEF", "GHI", "JKL", "MINO", "PQRS", "TUV", "WXYZ"] # for i in T: # print(arr.index(i)) # print(arr.index("A")) sum = 0 cnt = 2 for i in arr: for j in T: if i.index(j) != -1: sum += cnt cnt += 1 print(sum) ``` # vscode 자바스크립트 ctrl + alt + N 파이썬 F5 # useEffect \[] 배열이 바뀔때마다 실행된다. ## 2022-05-22 # 자바 리펙토링을 하는 이유 - 중복을 굉장히 싫어해서 해결해야함. (함수 단위로 중복을 해결함) - 클래스 안에 다른 클래스(객체) 들을 조합해서 또 다른 클래스(객체)를 만들어서 중복을 해결 - ## 2022-05-20 node.js (mysql 연결시) 기본 문법 ```js import express from "express"; import mysql from "mysql2/promise"; const pool = mysql.createPool({ host: "localhost", user: "sm", password: "1234", database: "a9", waitForConnections: true, connectionLimit: 10, queueLimit: 0, }); const app = express(); const port = 3000; app.get("/todos", async (req, res) => { const [rows] = await pool.query("SELECT * FROM todo ORDER BY id DESC"); res.json(rows); }); app.get("/todos/1", async (req, res) => { const [rows] = await pool.query("SELECT * FROM todo LIMIT 1"); res.json(rows); }); app.listen(port); ``` id로 입력받으려면 const id = req.params.id; 필요 # HTTP Method GET /api/tutorial 모든 tutorial 조회 GET /api/tutorial/:id id로 tutorial 조회 \[입력한 숫자에 따라 id에 입력되고 입력된 id에 따라 수행됨.] POST /api/tutorial tutorial 생성 PUT /api/tutorial/:id id로 tutorial 수정 : 아예 교체 PATCH : 부분 교체 DELETE /api/tutorial/:id id로 tutorial 삭제 /todos/:id/:age const {id, age} = req.params.id, req.params.age ; 두 값을 한번에 받음. \`\` 백틱을 쓰면 구문내에 엔터 가능. 출처: https://freestrokes.tistory.com/138 # POSTMAN cmd 창에서 npm install postman POSTMAN : 개발자용 브라우저 워크스페이스 안에 콜렉션, 리퀘스트가 있음. # 200, 300, 400, 500계열 200 계열 : 성공 300 계열 : 다른곳으로 가시오 404 계열 : 너가 잘못 500 계열 : 내가 잘못 (브라우저) 계열별로 여러가지의 문제점이 있는데 그건 구글링을 통해서 알자. # 수정에서 생성까지 POSTMAN 이용 ```js import express from "express"; import mysql from "mysql2/promise"; const pool = mysql.createPool({ host: "localhost", user: "sm", password: "1234", database: "a9", waitForConnections: true, connectionLimit: 10, queueLimit: 0, }); const app = express(); const port = 3000; app.use(express.json()); //외워야함. // 조회 get ================================================== app.get("/todos", async (req, res) => { const [rows] = await pool.query("SELECT * FROM todo ORDER BY id DESC"); res.json(rows); }); // 단건조회 get ================================================== app.get("/todos/:id", async (req, res) => { const { id } = req.params; const [rows] = await pool.query( `SELECT * FROM todo WHERE id = ? `, [id] ); // 어차피 값이 하나이므로 배열로 감쌀 필요가 없다. // 출력할 때 [] 없이 if (rows.length == 0) { res.status(404).json({ msg: "not found", }); return; } res.json(rows[0]); }); // 생성 post ================================================== app.post("/todos", async (req, res) => { const { reg_date, perform_date, is_completed, content } = req.body; if (!perform_date) { res.status(400).json({ msg: "perform_date is Null", }); return; } if (!content) { res.status(400).json({ msg: "content is Null", }); return; } if (!is_completed) { res.status(400).json({ msg: "is_completed is Null", }); return; } if (!reg_date) { res.status(400).json({ msg: "reg_date is Null", }); return; } const [rs] = await pool.query( ` INSERT INTO todo SET reg_date = ?, perform_date = ?, is_completed =?, content = ? `, [reg_date, perform_date, is_completed, content] ); res.json({ msg: `data insert`, }); }); // 수정 patch ================================================== app.patch("/todos/:id", async (req, res) => { const { id } = req.params; const [rows] = await pool.query( ` SELECT * FROM todo WHERE id = ? `, [id] ); if (rows.length == 0) { res.status(404).json({ msg: "not found", }); return; } const { perform_date, content } = req.body; if (!perform_date) { res.status(400).json({ msg: "perform_date is Null", }); return; } if (!content) { res.status(400).json({ msg: "content is Null", }); return; } const [rs] = await pool.query( ` UPDATE todo SET perform_date = ?, content = ? WHERE id = ? `, [perform_date, content, id] ); res.json({ msg: `${id} data update`, }); }); // 삭제 delete ================================================== app.delete("/todos/:id", async (req, res) => { const { id } = req.params; const [rows] = await pool.query( `SELECT * FROM todo WHERE id = ? `, [id] ); // 어차피 값이 하나이므로 배열로 감쌀 필요가 없다. // 출력할 때 [] 없이 if (rows.length == 0) { res.status(404).json({ msg: "not found", }); return; } const [rs] = await pool.query( ` DELETE FROM todo WHERE id = ? `, [id] ); res.json({ msg: `${id} data delete`, }); }); app.listen(port); ``` 수정, 생성을 위해서는 body 에서 raw, json 으로 하고 다음과 같이 입력 ```json { "reg_date" : "NOW()", "perform_date" : "2022-12-13- 12:12:12", "is_completed": "1", "content" : "크리스마스 해피해피 축제 끝" } ``` # 자바 스크립트에서 charAt 와 charCodeAt 차이점 자바에서는 charAt(a)는 문자열에서 해당 a 번째 인덱스의 값을 문자로 바꿔서 반환한다. 하지만 자바스크립트에서는 다르다. - charAt(a) 문자열에서 a번째 인덱스 값을 그냥 반환한다. - charCodeAt(a) (자바에서 이게 charAT(a)) 문자열에서 a번째 인덱스 값을 받아 문자로 바꿔서 반환한다. ```js let A = "9"; console.log(A.charAt(0)); console.log(A.charCodeAt(0)); //출력결과 //9 //57 ``` # 배열에서 map(함수) - arr.map(함수) 만약 arr 길이가 3 이면 map은 3번 실행. - const arr2 = arr.map((no) => no * 10); 각 인덱스의 값을 10번 곱한다. ## 2022-05-19 # 조별과제 명언 - 누구나 명언 등록 - 누구나 명언 수정 (만든지 5분 이내) - 누구나 명언 삭제 (만든지 5분 이내) - 명언 필터링 (좋아요, 싫어요 => 싫어요는 나한테만 보임) # 리액트 난이도 -> 상에서 배울만한 정도로 내려옴 가장 인기 있는 프론트엔드 프레임워크 (페이스북에서 제작) - 뉴스피드, 복잡한 UI를 쉽게 만들 수 있는 방법. - 백엔드 개발자가 리액트를 알만함 -> 백엔드와 비슷하게 작용해서 - 페이스북(PHP) 복잡한 자바스크립트를 잘 못했음. - php 방식으로 프론트를 개발한게 리액트. (즉, 백엔드 개발 방식으로 프론트를 만들자!) 리액트 연습장 https://codepen.io/jangka44/pen/qBPgROX?editors=0010 meta(화면 ) 와 div 만 알면됨. JS 부분은 외우는거 아님. 외울 수도 없음. # 리액트 2단계 리액트는 수정이라는 개념이 없음. 무엇인가를 만들기는 쉽지만 고치는 것은 어려움. UI가 수정이 필요할때 싹 지우고 다시만듬, VDOM으로 속도를 해결함. 리액트를 해도 눈에 띄는 변환느 초반에 없으나 나중에 리액트가 없었으면 굉장히 복잡했을거다. # 리액트 3단계 일반 변수는 사용자가 직접 코드를 수정하고 리로드 (리로드 수동) state 변수는 수정 후 자동으로 리로드 (리로드 자동) const \[변수 , set변수 ] = useState(수); -> state 변수 ## 2022-05-18 # try catch 예외 발생시 처리 ```js let input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n'); let answer = ''; let i = 0; try{ while(true) { let tmp = input[i].split(' ').map(Number); answer += (tmp[0] + tmp[1]) + '\n'; i++; } } catch(e) { console.log(answer) }; ``` 만약 예외가 발생하면 더하기를 종료하는 프로그램이다. 즉 EOF가 발생하면 (많은 프로그램에서 EOF가 있다.---cmd, mysql등등) 예외가 발생하면서 반복문을 종료하고 값을 출력한다. 여기서 try 는 예외가 발생할 수 있는 부분을 체크하는 것이고 catch는 예외가 발생했다면 수행하는 부분이다. # 배열 함수 사용 주의점. ```js let input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n'); // let tmp_1 = input[0].split('').map(Number); let tmp_2 = input[1].split(' ').map(Number); // let arr = []; // for(let i = 0; i < tmp_1; i++){ // arr.push(tmp_2[i]); // } // console.log(arr); console.log(Math.min(...tmp_2),Math.max(...tmp_2)) ``` 자바스크립트에서는 이 문제는 굉장히 짧게 풀린다. 입력을 처음부터 배열로 받기 때문이다. 여기서 중요한 점은 max,min 함수를 사용할 때 바로 입력하면 NaN이 나온다. 그 이유는 배열이 아니라 고유한 변수를 기대하기 때문이다. 따라서 Math.min.apply(Math, nums) 을 이용하거나 ... 을 통해 배열임을 알려주자. ```js let input = require('fs').readFileSync('/dev/stdin').toString().trim().split('\n'); let tmp_2 = input[1].split(' ').map(Number); console.log(Math.min(...tmp_2),Math.max(...tmp_2)) ``` 사실 tmp_2도 필요 없다. (출처 https://jjeongil.tistory.com/949) (req, res) => { res.send("Bye!"); } 이 뜻은 function(req, res){ res.send("Bye!"); } npm install -g nodemon 터미널 실행 종료를 자동으로 해주는 아이. nodemon app.js 을 치면 실행됨. # 최신문법 { "dependencies": { "express": "^4.18.1" }, "type" : "module" } -> app.js import express from "express"; const => 재할당이 불가능함. (한번만 값이 할당됨) let, var => 여러번 할당 가능 req : 받은 편지 (이미 받은거) res : 보낼 편지 (브라우저에게 전달함.) # DB 연동 1. 라이브러리 설치 npm i mysql2 데이터베이스와 연결 시켜주는 라이브러리 ```js const pool = mysql.createPool({ host: "localhost", user: "sm", password: "1234", database: "a9", waitForConnections: true, connectionLimit: 10, queueLimit: 0, }); ``` !!!!! mysql에서 제약사항 순서 지켜야됨. 안그러면 에러남. ## 2022-05-16 숙제 : 1.프로그래머스 자바스크립입문 30분안에 힌트없이 풀기. 2.백준 1단계 다 풀기 ## 2022-05-17 split가 다를때, 문자를 여러개 받을때, 20 10 20 을 입력 받아야 할때 ```js const input = require('fs').readFileSync(0).toString().trim().split('\n'); const input_AB = input[0].split(' ').map(Number); const A = input_AB[0]; const B = input_AB[1]; const C = parseInt(input[1]); ``` ![원본이미지](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fc0kL1V%2FbtrCcFePUa1%2FJop60YtrnbldAUfxYSYiX1%2Fimg.png) ※10 이상 숫자를 단일로 받는다? -> split(); ※공백으로 받는다? -> split(' '); # 시간초과 ```js let input = require('fs').readFileSync(0).toString().split(); let answer = ''; for (let i = 1; i <= parseInt(input[0]); i++){ answer += i + '\n'; } console.log(answer); ``` console.log는 속도가 느리다. 따라서 반복문 안에 넣어서 실행하면 시간초과가 발생한다. 유튜브 제목은 2022 05 17, 백준문제풀이 제목, 상세설명을 상세하게 작성할것. # xampp (번들 툴) -> 이걸 설치하면 기본적으로다 설치됨. DBMS(DataBaseManageSystem) MariaDB(MySQL) 웹서버를 구현할거임. -> 자바스크립트(node.js) 와 데이터베이스를 연동할거임. 회원가입, 글쓰기, 글수정 할 수 있는 백엔드 서버를 구현할거임. start를 눌러야 시작됨 (캡스톤때 썼던것을 기억하자.) lower_case_table_names=2 -> 테이블 명에 소문자를 허용해 준다. MySQL(MariaDB) 기본 사용자 root , 비번은 없음. 권한을 부여해 줄 수 있음. 사용자를 만들어 줄거임 1. 들어가기 shell(서버 실행) -> mysql -u root(서버 접속) 종료 : ctrl + c 2. 계정 생성 비번 설정, 권한 부여 GRANT ALL PRIVILEGES ON *.* TO 계정이름@\`%\` IDENTIFIED BY '비밀번호'; GRANT ALL PRIVILEGES ON *.* TO sbsst@\`%\` IDENTIFIED BY 'sbs123414'; % 감싸는거 작은 따옴표 아님. 키보드 1번 옆에 있는거 \` 이거임. 웹서버 / 웹클라이언트 (웹 브라우저) ---------------------------------------------------------- MySQL (mysqld : 서버, mysql : 클라이언트 -> 얘가 별로 좋지 않음. SQLYOG를 다운받을거임) -MySQL 서버 -MySQL 클리아언트 존재 코딩용 폰트로 바꾸기 -> D2 coding : 코딩할때 가독성을 위해서 # 데이터베이스 만들기 CREATE DATABASE a1; DROP DATABASE IF EXISTS a1; # 테이블 만들기 ```sql CREATE TABLE todo ( # 제약 # UNSIGNED 음수 금지 # NOT NULL 공백 금지 # PRIMART KEY(기본키) 중복 금지 [하나만 넣자] # AUTO_INCREMENT 자동으로 숫자 증가 id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, reg_date DATETIME NOT NULL, perform_data DATETIME NOT NULL, is_completed TINYINT UNSIGNED NOT NULL, content VARCHAR(200) NOT NULL ); ``` 테이블을 보려면 DESC 테이블명; 테이블을 삭제하려면 DROP TABLE IF EXISTS 테이블명; 데이터 삽입 ```sql INSERT INTO todo SET reg_date = NOW(), perform_date = '2020-05-18 07:00:00', is_completed = 0, content = '기상'; ``` 1. 테이블 안에 있는 데이터 삭제 (기존의 흔적은 존재) ```sql DELETE FROM todo; ``` 만약 데이터를 골라서 삭제한다면 ```sql DELETE FROM todo WHERE id = 2; ``` 2. 테이블 안에 있는 데이터 흔적도 없이 삭제 (기존의 흔적 모두 삭제) ```sql TRUNCATE todo; ``` 3. 테이블 수정 ```sql UPDATE todo SET is_completed = 1 WHERE id =3 ; ``` # express 웹 프레임 워크 -> 웹 사이트를 만들기 위해 필요한 기능이 90% 가 있고 10%만 채우면 됨. 단 사용법을 인지 해야한다. 자바 스크립트 => 백엔드, node.js # 에러 1. MySQL 사용자 포트 잘 바꿔주면 됨... https://computer-science-student.tistory.com/514 갓 컴공생이 정리한 서버 사용법. 2. nvm use 에러 cmd를 권리자 권한으로 실행해서 하자 3. localhost port 에러 3000번 사용중이다. 3000번 포트 사용일 죽이고 사용할 수 있고 혹은 다른 포트를 사용하자.