$$config title: 공부log keywords: - 공부 - 브이로그 $$ # 주소 . [공부log](https://to2.kr/dHI) - 영상제목 : 일자, 해당 내용 자세히 (log, 기록X) [예시 - 2022 05 17 - 백준문제풀이] . 개발자log : (https://to2.kr/dG3) # 2022-06-16: 백준 1. 백준 문제 블로그 정리 2. 백준 3. TDD 4. 상속 # 2022-06-16: 백준, 정리 1. 백준 문제 블로그 정리 2. 백준 3. TDD 진행 # 2022-06-15: 백준, 정리 1. 전일 수업분 중 TDD 미정리분 정리 진행 2. 백준 풀이 3. 영상 시청 # 2022-06-14: 정리, 백준, TDD 1. TDD 복습 및 블로그 정리 2. 백준 풀이 및 정리 3. 뭘했더라 # 2022-06-13 : 정리, 백준, TDD 1. 개츠비 정리 2. 백준 4단계 3. TDD 시험 # 2022-06-12 : 정리, 백준 1. 명언앱 추가 [ 문제점 4가지 관련 블로그 작성 ] / 명언 마무리 2 . 백준 - 4단계 # 2022-06-11 : TDD, 정리 1 . TDD - 계산기 구현 - 단순연산 [ 완 ] - 괄호연산 [ 완 ] - 복합연산 [ 완 ] 2 . 전체적으로 정리 - 앱서버 만들기 [1차 완] # 2022-06-10 : 백준, 블로그 1. 최댓값구하기 [ java ] 1) 풀이 방법 : 해당문제에서는 두번째 줄에 몇 번째 수인지를 출력하는 것이 있어, sort사용 X, for문 사용 2) 풀이[~ing] ```java ``` 3) 설명 ## 목표 ; 계산기 프로그램 복습 및 완성 # 2022-06-09 : 백준, 블로그 , 프로그래머스, TDD 단계별 진행 1. 프로그래머스 1~6 이해 2. 프로그래머스 7~10 경험 3. 6732 11강 4. 6732 13강 5. 백준 ## 백준 4 - 1 : 최소, 최대 * Arrays.sort 사용 - 이것과 관련해서 정리 + ([배열관련된것도 정리](https://ifuwanna.tistory.com/231)) ## 블로그 정리 : 인터페이스, 자바(sort 등) ## 프로그래머스 1~6단계까지 15분안에? 프로그래머스에서 완벽하게 알고있지 않은 것은 [code.oa.gg](https://code.oa.gg/java8#)에서 실험을 통해 알아가도록 하자 ## TDD : 계산기 프로그램 하나는 안보고 할수 있을정도로 ## 기초훈련 1단계 : 언어 문법 외우기 2단계 : 백준 [영상 - 나동빈? 참고] # 2022-06-08 : intellij 설치 및 사용 방법, 백준 1. 빠른 A+B [ java ](https://wickedmagic.tistory.com/50) - buffer 관련 해서 새로운캔으로 만들자 1) 풀이 방법 : scan이 아닌 bufferedReader 사용 2) 풀이[~ing] ```java import java.io.BufferedReader; import java.io.InputStreamReader; import java.io.IOException; public class Main { public static void main(String[] args) throws Exception { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); int N = Integer.parseInt(br.readLine()); StringBuilder sb = new StringBuilder(); for (int i = 0; i < N; i++) { String str = br.readLine(); int target = str.indexOf(" "); int result = Integer.parseInt(str.substring(0,target)) + Integer.parseInt(str.substring(target + 1)); sb.append(result+"\n"); } br.close(); System.out.print(sb); } } ``` 3) [설명](https://slog.gg/p/6736) # 2022-06-07 : 백준, 자바, 프로그래머스 * 프로그래머스 자바 1시간 * 백준 1, 2단계 자바로 진행 1시간 * 엑셀 -> 블로그 1시간 ## 공부시 참고사항 ㋛ 문제 : 현재와 목표와의 갭 ㋛ 기술은 수단에 불과 ㋛ 어떠한 기능을 만들고싶다라는 생각으로(몰입!) ㋛ 자바를 빠르게 배우고 스프링으로 사이트를 만드는것 ㋛ 교육자가 되라(답답한걸 티내지말라) ## 자바 [프로그래머스 - 자바](https://programmers.co.kr/learn/courses/5/lessons) [ 이제부터 백준도 자바로 풀어라(1단계부터 다시) ] 집에가서 자바 엑셀파일 정리(주말에 집중적으로 평소엔 1시간씩만) [ 엑셀 -> 블로그 ] ## 백준 풀이 2. 숫자의 개수 - 조건 * A × B × C를 계산한 결과에 0부터 9까지 각각의 숫자가 몇 번씩 쓰였는지를 구하는 프로그램 * 숫자가 각각 몇 번 쓰였는지 차례로 한 줄에 하나씩 출력한다. 1) 풀이 방법 : 2) 풀이[~ing] ```js let input = require('fs').readFileSync('/dev/stdin').toString().split(' \n') let A = Number(input[0]) let B = Number(input[1]) let C = Number(input[2]) let max = Math.max(...input) console.log(max) console.log(input.indexOf(max) + 1) ``` 3) 참고사항 1. 최댓값 - 조건 * 첫째 줄에 최댓값을 출력 * 둘째 줄에 최댓값이 몇 번째 수인지를 출력 1) 풀이 방법 : Math.max 메서드로 max값을 구하고 indexOf 메서드로 index 위치를 찾아줌 2) 풀이[end] ```js let input = require('fs').readFileSync('/dev/stdin').toString().split('\n').map(n=> Number(n)); let max = Math.max(...input) console.log(max) console.log(input.indexOf(max) + 1) ``` 3) 참고사항 ㋛ Math.max() : 입력값으로 받은 0개 이상의 숫자 중 가장 큰 숫자를 반환 [ 구문 ] : Math.max(스프레드 연산자(or 값)); - 만약 인수 중 하나라도 숫자로 변환하지 못한다면 NaN로 반환 - 매개변수를 제공하지 않은 경우(아무 요소도 주어지지 않았다면) 결과는 -Infinity - 해당문제는 "스프레드 연산자" 솔루션을 적용한다.(형태 : "...변수명") ㋛ [indexOf()](https://hianna.tistory.com/379) : 문자열(string)에서 특정 문자열(searchvalue)을 찾고, 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴 [ 구문 ] : string.indexOf(searchvalue, position) - 존재하지 않으면 '-1'을 반환 - 제공된 색인이 음수이면 배열은 앞에서 뒤로 검색됩니다. - 계산 된 인덱스가 0보다 작으면 전체 배열이 검색 - 문자열을 찾을 때 대소문자를 구분 # 2022-06-06 - 1. 앱서버[5814](블로그 정리 완료) - 2. 앱구현[6215](블로그 정리 완료) * 6661에 문제점해결한 코드렌 링크 추가 10 [6662] 11 [6663] 13, 14 [6664] - 3. html/css[6277](40~60)(블로그 정리 완료) 41~43 [6665] 44~49 [6666] 50~51 [6467 수정] 52~53 [6468 수정] 54 [6466 수정] 55~58 [6667] 59~60 [css 연습 문제 재풀이] - 4. 개츠비 [6496] 1단계~7단계 실전(완료) 47~54(7단계 이후, 강사님) (완료) - 5. 블로그 최종 정리 (금일 작성분 블로그에 업로드 진행) (완료) - 6. 백준 4단계 진행 ## 백준 풀이 1. 최댓값 - 조건 * 첫째 줄에 최댓값을 출력 * 둘째 줄에 최댓값이 몇 번째 수인지를 출력 1) 풀이 방법 : 2) 풀이[ing] ```js let input = require('fs').readFileSync('/dev/stdin').toString(); let arr = input.trim().split('\n'); let count = Number(arr[0]); let e = arr[1].trim().split(' ').map(n=>Number([n])); e.sort((a,b) => a - b); console.log(`${e[0]} ${e[count - 1]}`); ``` 3) 참고사항 : 4) 결과 : # 2022-06-03 : 개인별 자기소개, 백준, 개츠비, html/css ## HTML/CSS 40 ~ 50 - 기존에 입력했던 블로그 내용 수정 진행 (21겅~39강까지) # 2022-06-02 : 개츠비 - 7단계까지 완료, 강사님이 알려주신 폰트 변경, 사진이 있을때 없을때, 코드하이라이터 완료 - 재시작 현재 4단계 진행중 - 꼬솜이 블로그 새로 제작(7단계 진행 중) # 2022-06-01 : 백준, 개츠비 ## 개츠비 - 개츠비 공식사이트에 있는 단계를 따라하고, 강사님의 강의를 통해 이해를 하자 - 오늘은 개츠비 실습 위주로 ## 백준 풀이 1. 최대/최소 - 조건 * 첫째 줄에 정수의 개수 N / 둘째 줄에는 N개의 정수를 공백으로 구분해서 주어짐 * 첫째 줄에 주어진 정수 N개의 최솟값과 최댓값을 공백으로 구분해 출력 1) 풀이 방법 : 2) 풀이[end] ```js let input = require('fs').readFileSync('/dev/stdin').toString(); let arr = input.trim().split('\n'); let count = Number(arr[0]); let e = arr[1].trim().split(' ').map(n=>Number([n])); e.sort((a,b) => a - b); console.log(`${e[0]} ${e[count - 1]}`); /* let[a,b] 저부분을 최대, 최소값을 구하는걸로 정렬 sort 사용? var e = [a,b,c]; // 배열로 묶어서 정렬하기 위함 e.sort(); // 정렬코드 */ ``` 3) 참고사항 : sort 메서드로 내림차순 정렬을 하면 numbers 배열에서 index 0번째가 최솟값이 되고 numbers 배열에서 첫 번째 줄에 주어진 정수 N - 1(마지막 인덱스) 은 최댓값이 됨 4) 결과 : 성공! 안보고도 해보자 # 2022-05-31 : 명언앱(리액트 초급으로 포폴에 넣을 수 있다.) 문제점 해결, gatsby를 활용한 블로그 제작?, 백준 - - 깃허브와 개츠비 연결 - vscode를 이용하여 개츠비 사이트 제작 - vscode를 이용한 사이트 내용 제작 진행(페이지 생성) ## Gatsby 깃허브와 연결 ~ 레이아웃
▷ [Gatsby](https://slog.gg/p/6496) : (리액트 + 그래프QL) 정적사이트생성기
### 깃허브와 개츠비 연결 1. 개츠비 CLI 설치 : npm install -g gatsby-cli 2. cmd에 프로젝트 생성 - cmd로 work 폴더에 개츠비 프로젝트 파일 생성, "gatsby new" 입력 - 프로그램 질문 : 프로젝트명(My Blog 2022-05-31), 언어(자바스크립트), 그 외 선택 X 3. 프로젝트 개발모드 실행 - cmd를 통해 'my ~ 31'에 들어간 뒤 VS코드 실행 - 명령어 입력 : npm run start * 해당명령어가 실행하고 있는 대쉬는 내비두고 새로운 대쉬를 만들어 거기에 입력하자. 4. 깃허브와 개츠비 연결 - 깃허브 프로젝트 생성 - VS코드에 깃허브 push!! - 개츠비 클라우드 가입 및 로그인 - 사이트 추가 : Add a site > Click here to add an installation > Click here to authorize > my-blog-2022-05-31 Import > Next > Build Site ### 페이지 추가 1. index페이지에서 쓸데없는 내용 지우기 - ctrl + T -> 검색창(해당 단축키 누른뒤 "index" 검색) - import와 indexpage 함수, export 제외 index안에 있는 내용 삭제 ※ 함수에서 return, main, title(사이트 이름?), h1(본문에 나오는 내용) 제외 삭제 2. 페이지 추가 - indext를 가지고 있는 pages에 새로운 파일 생성 - import, 함수, export 입력(1번 ※ 참고) ### 링크 ~ 레이아웃 1. gnb 추가 1) a href="주소명"을 div로 감싸준다. 2) 리액트에서는 *div class*가 아닌 *div className*이다. style은 객체로 감싸준다. - gap을 통해 단어사이에 간격을 줄 수 있다. 3) a href을 통해 주소를 사용하였기 때문에 "ctrl+space"를 클릭하여 자동완성을 만들어줌 4) 1~3의 내용을 다른 파일에도 복사 붙여넣기를 사용. 5) html/css상 링크 : a href || 개츠비상 링크 : Link to 2. Head 컴포넌트 추가 1) 기존의 page 폴더이외에 새로운 폴더를 생성 - 새로운 테크를 정의 2) 새로운 폴더 안에 어느 페이지든 공통으로 들어가는 항목을 넣는다. - head 테크 생성 3) index안에 있는 파일에 "head /"입력 후 자동완성을 이용 3. Head 컴포넌트 대신 layout 컴포넌트 추가 1) 레이아웃 컴포넌트에서는 상단, 빈칸, 하단의 내용을 입력할 수 있다. 2) 공통 내용을 해당 컴포넌트에 추가(main 포함!) 3) 빈칸에 비워줘야하는 것은 "{children}"이다. 4) head와 같이 자동완성 이용 ### 그 외 1. gnb란? : GNB (Global Navication bar)는 어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴임 2. 개츠비와 관련된 VS코드에서 문제가 생겼을때 해결법 - ctrl + C, (npm run clean) npm run start - VS코드 재시작 또는 PC 재부팅 - clone으로 받아서 진행 3. 다른곳에서 작업 이어가는 방법 - cmd 진입 부터 git init을 지나쳐, user name/email까지는 비슷 - 기존 방법 : user 정보 입력 후 리포지터리 주소 등록 및 pull origin master등 입력 후 VS코드 확인 - clone 방법 : user 개인정보 입력 전에 colne 입력 후 확인 4. package.json으로부터, node_modules 폴더 복원 - vs코드 진입 > npm install > npm run start 5. Link 컴포넌트 - F1 단추키 - 명렁어 창 열기 : VS CODE가 자동완성을 잘 못하는 것 같을 때 - TypeScript: Restart TS server : import 관련 소스코드 정리 - Organize Imports - 특징 : 일반 HTML에서는 a로 링크이동 > 개츠비에서는 Link로 링크이동 > 페이지간 이동속도가 빨라짐 > a는 href 속성이, Link에는 to속성 사용 ## 백준 풀이 1. 더하기 사이클 - 조건 * 사이클 : 주어진 수가 10보다 작다면 앞에 0을 붙여 각 자리의 숫자를 더한다. 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙여라 * N의 사이클의 길이를 구하라 1) 풀이 방법 : while문 사용 2) 풀이[~ing] ```js const fs = require('fs'); const input = fs.readFileSync('dev/stdin').toString(); let n = Number(input); let count = 0; let sum; while(true) { sum = Math.floor(n/10) + (n%10); n = (n%10)*10 + (sum%10); count++; if(n===Number(input)) break; }; console.log(count); ``` 3) 참고사항 : Math를 사용하여 소수점 관련 문제를 풀 수 있다. - Math.floor() : 소수점 이하 버림 - Math.ceil() : 소수점 이하 올림 - Math.round() : 소수점 이하 반올림 4) 결과 : 성공, 힌트안보고 다시 풀이보자 / 첫줄이 살짝 이상해도 런타임에러가 걸리니까 주의하자 # 2022-05-30 : HTML, CSS ## [html와 css 활용](https://codepen.io/SeonHo-/pen/MWQQxGJ) ### 순서 [기초](https://codepen.io/SeonHo-/pen/YzeeMNK) 1 . 헤더/푸터 -> flex item으로 제작, 세로 방향 배열 2 . 푸터안 텍스트 가운데 정렬 3 . 중단부분 마크업(가운데 값 생성) 4 . 중단부분의 세 부분을 세로가 아닌 가로로 배열 5 . 양사이드바가 남는 공간을 1:1 비율로 나눠가지도록하기 6 . 왼쪽 사이드 너비(150px), 오른쪽 사이드 너비(120px), 나머지 여백(중앙박스 차지) 7 . 컨테이너 높이가 100vh 이상이 되도록 8 . 중단부분의 높이가 헤더와 푸터가 사용한 나머지를 차지 9 . 화면의 너비가 줄어도 양사이드의 너비가 바뀌지 않게 ### 순서별 필요기능 1 . 헤더/푸터 -> flex item으로 제작, 세로 방향 배열 - 헤더/푸더를 한번에 감싸는 클래스에 아래와 같이 입력 ```html display:flex;. flex-direction:column; ``` 2 . 푸터안 텍스트 가운데 정렬 - 푸터안을 가운데 정렬시키는것 flex item으로 설정 후 가로 센터로 해준다. ```html display:flex;. justify-content:center; ``` 3 . 중단부분 마크업(가운데 값 생성) - 헤더와 푸터 사이에 테크 입력(각 테그의 이름을 다르게해 구분하기 쉽게하자) ```html [ html ]

메인내용

추가적인 내용

``` ```css [ css] .container > .content { border:1px solid black; } .container > .content > nav { background-color:gold; } .container > .content > div { background-color:pink; } .container > .content > article { background-color:purple; } ``` 4 . 중단부분의 세 부분을 세로가 아닌 가로로 배열 : content 가로정렬(리버스X) 5 . 양사이드바가 남는 공간을 1:1 비율로 나눠가지도록하기 - 양끝 부분에 flex-grow: 1; / 중간부분은 0으로 입력 6 . 왼쪽 사이드 너비(150px), 오른쪽 사이드 너비(120px), 나머지 여백(중앙박스 차지) - 양끝 부분에 flex-basis를 이용하여 px값을 설정, 나머지 여백을 위해 중간 부분 grow 값을 1로 변경 7 . 컨테이너 높이가 100vh 이상이 되도록 - 100vh는 100프로의 의미, 100프로의 이상이 되려면 min을 사용해주어야한다.(최소 100%) ```css .container { display:flex; flex-direction:column; min-height:100vh; background-color:darkcyan; } ``` 8 . 중단부분의 높이가 헤더와 푸터가 사용한 나머지를 차지 - 헤더와 푸터에 grow값을 0으로 두고, 중단 부분 grow값을 1로 만들어 중간 여백을 중단이 차지 9 . 화면의 너비가 줄어도 양사이드의 너비가 바뀌지 않게 - 너비고정 -> flex-shrink 사용 [기본값이 1 // 너비 고정하려면 0으로 변경] ## html 기본 테크 1 . 무속성(의미X) div, nav, section, article 등 2 . 그 외테크 a : 링크 ```html ``` br : 줄바꿈(셀프) ```html
``` img : 이미지(셀프) ```html ``` ul, li : 목록, 항목 ## html 이론 1 . 후손선택자 : nav이긴 nav인데 section안에 있는 nav이다.(띄어쓰기를 기준으로 한다.) ```html

``` - 부모 자식의 관계가 아닌 조상과 손자의 관계일때 사용 ```html section nav{} ``` - 부모 자식간의 관계일때는 '>'을 사용해도 된다. ```html selction > div{} ``` 2 . block/inline-block 1. block - 너비 : 너비가 지정되어 있지 않으면, 최대한 늘어난다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 세로, 한줄에 무조건 1개씩 2. inline-block - 너비 : 너비가 지정되어 있지 않으면, 최소한으로 줄어든다. - 높이 : 높이가 지정되어 있지 않으면, 최소한으로 줄어든다. - 배열방향 : 가로, 한줄에 최대한 많이 3 . 테이블 태그 ```html - 표 - 칼럼 - 줄 - 내용

- 칸

``` +) css 테이블 꾸미기 - 테이블 칸당 벌어져있는 빈칸을 없애줌 [ border-collapse:collapse; ] 4 . display 속성 1. div, section, nav, article의 display 속성 기본값은 block이다. 2. div, section, nav, article의 width 속성 기본값은 auto이다. 3. div, section, nav, article의 height 속성 기본값은 auto이다. ## css [연습사이트] [css diner](https://flukeout.github.io/) ### CSS selector(선택자) 간단설명 [참고사이트](https://velog.io/@jaedie/CSS-Diner-%EC%99%84%EB%A3%8C%EB%8B%B5%EC%95%88%EC%9A%94%EC%A0%90%EC%A0%95%EB%A6%AC-23) *클래스 선택자(Class Selector)는 특정 값을 class 속성(attribute)의 값으로 갖는 요소(element)를 선택* 1. A -> 테크명만 입력하면 선택 2. A -> 위와 동일 3. #id -> 테크 아이디명을 선택하기 위해 "#+아이디명"을 한다. 4. A B -> A테크 안에 있는 B테크 내용을 전부 선택한다. 5. #id A -> #에 해당하는 아이디안에 있는 A를 선택한다. 6. .classname -> 아이디와 다르게 클래스를 선택할때는 " . + 클래스명"을 한다. 7. A.className -> A테크 중 입력된 클래스를 선택 8. A, B -> A와 B선택(AND) 9. ```css *``` -> 전체 선택(ALL) 10. A * -> A테크 안에 있는 것을 전체 선택 11. A + B -> 특정 element 뒤에 *바로 따라오는 siblings들을 선택*할 수 있는 selector 12. A ~ B -> A라는 element 이후로 *존재하는 sibling 모두를 선택*하는 selector 13. A > B -> parents element에 속해 있는 child element를 바로 선택 14. A:first-child -> parent element에 있는 첫번째 child element를 선택 (A는 직접적으로 우리가 선택하고자는 element가 되는것이지, parents element 아니다.) 15. :only-child ▷ parents element에 있는 child elements들 중 독자(only child)인 녀석들만 선택 ▷ A:only-child : only child 인 [모든 A element를 선택] ▷ A :only-child : "A"와 ":" 사이에 공백 有, A라는 parents elements들의 [모든 only-child element를 선택] 16. :last-child -> parents element의 child element 중 마지막 element (last child) ▷ child element가 하나라면 해당 element는 first-child 이자 only-child 이며 last-child임 17. :nth-child(A) -> n번째에 위치한 element 선택 18. :nth-last-child(A) -> :nth-child()와 비슷하지만 카운팅 방향이 위에서 부터가 아니라 아래에서 부터임 19. :first-of-type -> element, class, id 중 원하는 type의 첫번째 녀석을 선택 20. :nth-of-type(A) -> nth 자리에 위치한 type별로 선택 / 숫자외에도 패턴을 나타내는 "even or odd" 사용 21. :nth-of-type(An+B) ▷ 어느 한 element의 위치를 시작으로 n번째 element를 연속적으로 선택 ▷ B : selecting을 시작하는 element ▷ An : B이후로 A번째 element 모두를 연속적으로 선택 22. :only-of-type -> parent element내에서 '유일한'type을 선택 23. :last-of-type -> 한 type내에서 가장 마지막에 위치한 element를 선택 24. :empty -> child element가 하나도 없는 텅빈 element 모두를 선택 25. :not(X) ▷ 'x'를 제외한 모든 나머지 element를 선택 ▷ 괄호안에 1가지 이상의 type이 존재할때는 ','로 나눠줘야 한다. 26. [attribute] -> attribute(특성)을 이용한 selector 27. A[attribute] -> 어떠한 element type을 특정화하여 그 type내에서 한 특성을 공유하는 element들을 모두 선택 28. [attribute="value"] -> 특성이 가진 고유 값를 이용한 선택 29. [attribute^="value"] -> value의 일부분을 이용해 값의 *"앞부분"*을 공통적으로 공유하는 모든 element를 선택 30. [attribute$="value"] -> 앞쪽 일부 대신 뒷쪽의 일부를 가지고 선택 31. [attribute*="value"] -> 특정 알파벳을 특성값으로 가지는 모든 element 선택 ------------------------- #### [용어설명] 1 . element : 여는테크, 닫는테그를 이용해 하나의 테그로 완성된 공간(?) 2 . siblings : A element 뒤에 바로 따라오는 B element를 A element의 sibling 이라고 한다. (단, 두 element는 같은 level 과 depth를 가지고 있어야 한다.) --------------------------- ### 이론 1 . 노말라이즈 : 원래 기본으로 브라우저에서 주는 기본 css속성을 없앰 ```html ul{ list-style : none } ``` ul{} -> 테크가 ul인것을 검색한다. list-style : none -> ul의 리스트에 기본으로 주어지는 css속성을 없앤다. 2 . 높이지정 - 만약 height의 높이를 100%로 하고 싶다면 css에 "100%"가 아닌 "100vh"라고 작성해주어야한다. - height앞에 min을 붙임으로 최소 높이를 설정한다. ("min-height : 100vh" 는 최소 100프로이며, 내용이 많을때 100프로 이상이 될 수 있다.) ※ 너비는 width 사용 ### 글자 꾸미기 1 . font 크기 - 글자크기는 ~px/rem 임 [ font-size:~px/rem; ] 2 . font 굵기 - 굵게 [ font-weight: bold; ] [ font-weight: normal; ] * font-weight의 기본값이 bold라서 normal을 해도 글씨가 굵게 나옴 3 . 자간 - 자간 설정 [ letter-spacing:~px/rem; (마이너스도 가능) ] 4 . 색 - 글자색 설정 [ color: rgba(red[0~255], green, blue, 불투명도(0~1) ] / [ color: #css색코드 ] ## FLEX 종류 [연습사이트] [ 개구리 ](https://flexboxfroggy.com/#ko) [ 디펜스 ](http://www.flexboxdefense.com/) [ 명령어 기능 test ](https://cdpn.io/pen/debug/adLPwv) [ 이론 ](https://studiomeal.com/archives/197) ### flex-direction [졍렬] 1. row : 기본 가로 정렬 2. row-reverse : 가로 정렬 반대 3. column : 기본 세로 정렬 4. column-reverse : 세로 정렬 반대 -------------------- ### justify-content [가로] 1. flex-start : 그룹이 시작하는곳 2. flex-end : 그룹이 끝나는곳 3. center : 중앙 4. space-around : 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줌 5. space-between : 아이템들의 “사이(between)”에 균일한 간격 만들어 줌 -------------------- ### align-content [세로, 여러행] 1. flex-start : 그룹이 시작하는곳 2. flex-end : 그룹이 끝나는곳 3. center : 중앙 4. space-around : 아이템들의 “둘레(around)”에 균일한 간격을 만들어 줌 5. space-between : 아이템들의 “사이(between)”에 균일한 간격 만들어 줌 6. stretch : 채우기(content에 있는 값을 세로로 채움) -------------------- ### align-items [세로] 1. flex-start : 그룹이 시작하는곳 2. flex-end : 그룹이 끝나는곳 3. center : 중앙 ------------ ### align-self[세로, 아이템별 지정] 1. flex-start : 그룹이 시작하는곳 2. flex-end : 그룹이 끝나는곳 3. center : 중앙 -------------------- ### flex-wrap [줄넘김] 1. nowrap (기본값) : 줄바꿈X (넘치면 그냥 삐져나감) 2. wrap : 줄바꿈 / float나 inline-block으로 배치한 요소들과 비슷하게 동작 3. wrap-reverse : 줄바꿈, 역순 ------------- ### 그 외 1. order : 특정아이템 위치 변경 음수(좌측)~양수(우측) (0은 현재 아이템의 위치) 2. flex-grow : 전체 flex에서 아이템별 가로 크기 지정(숫자가 높을수록 가로 크기 [확장]) - 기본값이 0, 너비를 채울려면 1로 변경 3. flex-shrink : 전체 flex에서 아이템별 가로 크기 지정(숫자가 높을수록 가로 크기 [축소]) - 해당코드를 사용하면 화면의 너비가 줄어도 flex-shrink를 설정한 공간은 너비가 바뀌지 않는다. - 기본값이 1 // 너비 고정하려면 0으로 변경 - 도덕성 0, 부모가 아무리 힘들어도 자신의 너비를 포기하지 않음 4. flex-basis(너비) : Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이) 5. flex-flow : flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성 (flex-direction, flex-wrap의 순으로 한 칸 떼고 작성) # 2022-05-27 : 백준, 명언앱, 플랙스 ## 플렉스 속성 강좌 - 개구리 진행 숙제(마저 못적음..) - 현재 명언앱의 문제점 해결 (순서 맞춰서 해결하기) - * 1 . 좌 우 버튼이 실행되도록 * 2 . 좌 우 버튼을 클릭할 때 더이상 좌측으로 갈 수 없다면 끝번호와 이어지도록하기(루프) * 3번과 4번은 해결함 ## 명언앱을 제작 - 명언앱을 제작하려면 명언 서버가 필요함(유료라서 다른 방법을 찾아야함) - 깃허브에 있는 리포지터리를 이용해 무료로 서버를 사용할 수 있다.(페이지 설정을 하면됨) * 단점 : 데이터 수정, 삭제, 추가가 안됨 ### 외부 데이터값을 가져와 랜덤하게 명언 표시 진행 &*& [외부데이터값](https://jhs512.github.io/wise_saying_server/data.json)으로 랜덤하게 명언 표시 [ 단계 ] 1) 데이터 받아오기 2) 랜덤하게 1개 선택 3) 선택된 명언 표시 4) 다른명언 버튼 구현 5) [다른명언 버튼 누르면 랜덤한 다른 명언 표시](https://codepen.io/SeonHo-/pen/xxYpqpx?editors=0111) 6) 이전, 다음버튼 구현 7) 이전버튼 누르면 이전 순서의 명언 표시 8) 다음 버튼 누르면 다음 순서의 명언 표시 ## 백준 풀이 1. X보다 작은 수 - 조건 * 첫번째줄에 n과 x가 주어진다. * 두번째줄에 주어진 n개의 수에 맞는 정수가 입력된다. * x보다 작은수를 입력받은 순서대로 공백으로 구분해서 출력 1) 풀이 방법 2 - 첫줄과 둘째줄에 해당하는 값을 공백을 기준으로 나누어 따로 보관 / for문과 if문을 사용해서 진행 2) 풀이[~ing] ```js const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().trim().split("\n"); let n_x = input[0].split(' '); // 첫줄은 공백을 기준으로 나눈다. let n = Number(n_x[0]); let x = Number(n_x[1]); let n_n = input[1].split(' '); let x_s = ''; for(i=0;i<=n;i++){ if(Number(n_n[i]) parseInt(n)); // input 값을 공백을 기준으로 나누어 a와 b에 넣는다. sum = a + b; if(sum===0) continue; // a와 b에 0이 들어간것은 출력을 제외해야하기 때문에 if continue를 통해 없애준다. console.log(sum); }; ``` 3. 결과 : 성공, 힌트안보고 다시 풀이보자 # 2022-05-26 : 명언앱 제작(추천수 증가까지) ------------- 공부 tip - 지식, 지혜 - 지혜 = 응용된 지식 - 지식과잉시대에 살고있는 만큼 지식은 적을 수록 좋음(많으면 헷갈려) - 개발공부는 운동과도 같다 (운동을 해서 힘들다 -> 운동 잘했다처럼 개발공부도 힘들게 해야지 공부를 잘한거임) - 미련하게 공부해라 - 될때까지 해라 ------------ # 앱구현 - 추천수(좋아요/싫어요) 증가 # 조별 과제 * 배포 - 조회수 - 추천수 - 싫어요 - 위의 3개 말고 랜덤 명언이 잘나오도록? 1. 랜덤단건 조회 api 2. 수정 api 3. 랜덤단건 조회 리액트 api 4. 다른 명언 보기 버튼 5. 좋아요/싫어요 버튼 6. 좋아요/싫어요 버튼 api 연동 # 2022-05-25 : 백준, 할일리스트 앱 제작 ## [제작] 앱구현 - 기초 설정 ### 1. 리포지터리 생성 Δ GITHUB에 접속하여 리포지터리를 생성하여 준다. Δ 앞으로 구현할 코드를 해당 리포지터리에 업로드하여 장소에 제약없이 코딩을 할 수 있도록 한다. ### 2. 프로젝트 생성 Δ 생성한 리포지터리를 VS에 넣는방법 1 . 기존방법(정석) 1) 명령어를 차례대로 입력하여 master를 통해 리포지터리를 넣는방법으로 아래에 있는 코드를 차례대로 입력해야한다. 1. mkdir exam - "exam"이라는 프린트 제작 2. cd exam - 제작한 "exam"으로 이동 3. git init - git을 사용하기 위해 처음 입력해야하는것 4. git remote add origin [사이트주소] - [사이트주소]에 origin을 걸어준다. 5. git pull origin master - origin에 있는 주소를 마스터로 이동 . 2 . 새로운방법(단순) 1) 여러개의 명령어를 입력해야했던 정석방법과 달리 코드 하나로 원하는바를 이룰수 있도록함 1. git clone [사이트주소] - [사이트주소]에 있는 리포지터리를 가져오겠다. - 위의 코드를 작성하면 폴더가 생성이 됨 2. cd [생성폴더명] 에서 git remote -v를 통해 잘입력되었는지 확인 Δ VS코드 1 . npm i ~ 를 통해 기본 설정 진행 (express, mysql2, cors 등) 후 package.json에서 잘 입력되었는지 확인 2 . app.js 생성 후 import ~ from ~;을 통해 js에서 express, mysql2 등을 사용하겠다고 선언 3 . 그외 기본 코드 입력 진행(localhost/codepen 를 통해 인삿말이 나올정도 + cors 설정 잊지 말자) Δ 생성완료한 VS코드를 생성한 리포지터리에 업로드 ### 3. DB 설계 Δ 앱은 나만쓰는것이 아닌 다른사람들도 사용할수 있는것이기 때문에 칼럼을 생성할때 'user_id' 와 같이 사용자별로 무언가를 구분할수 있게하는 칼럼을 생성하자 Δ 사용자별로 숫자를 생성 ```sql ALTER TABLE 테이블명 ADD UNIQUE INDEX(사용자 고유 코드, 사용자별 사용할 숫자 코드) ``` ※ 사용자 고유 코드와 숫자 코드 입력 순서에 유의하자 ## [제작] 앱구현 - API 구현(DB내용 localhost를 통한 구현) Δ TIP [ vs code ] * app.get에서 주소를 표시하는 곳에 /:user_code/~라고 표시하여 사용자별 다른 결과를 나타낼 수 있게한다. * DB와의 연결 정보를 연결하는 곳에 "dateStrings: true,"를 사용하면 datetime를 출력할때 나오는 "2022-05-24T00:51:46.000Z"의 형식에서 불필요한 T와 Z를 없앨 수 있다. [ 2022-05-24T00:51:46.000Z => 2022-05-24 09:51:46 ] Δ VS코드 입력 [사용자별로 내용 출력] ```js app.get(`/:user_code/todos`, async (req, res) => { const { user_code } = req.params; const [todoRows] = await pool.query( ` SELECT * FROM todo WHERE user_code = ? ORDER BY id DESC `, [user_code] ); 1. res.json({ resultCode: "S-1", msg: "성공", data: todoRows, }); ``` 1 . 데이터의 유무와 상관없이 json형식으로 출력할때 resultCode와 mag는 출력이 됨 ## [제작] 앱구현 - 목록 및 내용 화면에 출력 방법 Δ TIP [ 리액트에서 데이터가 뒤늦게 로딩되면 생길 수 있는 문제 해결방법 - 9강 ](https://slog.gg/p/6215) 해결방법 1 : 먼저 리턴을 해서, 아래 코드가 실행이 안되게 하는 방법 ▷ if ( wiseSaying == null ) return <>Loading.. 해결방법 2 : ?를 사용하는 방법 ▷ return <>{wiseSaying?.id} : {wiseSaying?.content} ### 할일 목록 Δ codepen [flex] 1 . css에서 아래와 같이 flex를 설정하여 js에서도 flex설정을 할 수 있도록한다. , 해당 설정을 통해 root의 아이템을 다루겠다. ```css #root { 1) display : flex; 2) flex-direction : column; } ``` 1) root의 자식(js)은 flex의 아이템을 다루겠다. 2) 위에서 아래로 배열하겠다. 2 . flex 별 의미 1) flex-1 : 최대화 Δ codepen [js] ```js 1. const userCode = "localhost"; function App() { 2. const [todos, setTodos] = useState([]); 3. useEffect(async () => { const data = await fetch(`http://localhost:3000/${userCode}/todos`); const dataJson = await data.json(); setTodos(dataJson.data); }, []); return ( <>

- flex관련

--------------------- 4.

{todo.no} : {todo.content}

---------------------

); } ``` 1 . userCode를 "localhost"라고 지정한다. 2 . DB에 있는 값을 끌어오기 위해 state 변수를 생성한다. 3 . fetch를 이용 - 해당 fetch를 이용할 경우 한번만 실행했는데 연속으로 실행을 하는 오류가 있을 수 있다. 이러한 오류를 방지하기 위해 useEffect문을 사용한다. - async ~ await은 await이 안붙은 코드가 실행될때 시작하고 바로 다른것을 먼저 진행하면서 해당코드의 내용이 늦게 출력되는 상황이 방지하기 위해 await이 붙은 코드의 경우 코드가 끝날때까지 기다렸다가 다음 코드를 실행한다. - localhost~에 있는 값을 data에 넣고, 넣어진 data의 json값을 새로운 변수에 넣는다. - todos가 실행되면 dataJson에 있는 data가 실행이 된다는 뜻 4 . 목록, map - map을 통해 목록 형식으로 DB 데이터를 가져온다. ### 할일 작성 ```js ...+ 3-2 const reloadList = async () => { const data = await fetch(`http://localhost:3000/${userCode}/todos`); const dataJson = await data.json(); setTodos(dataJson.data); }; 3-2. useEffect(reloadList, []); 2. const addTodo = async () => { await fetch(`http://localhost:3000/${userCode}/todos`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ perform_date: "2022-12-12 12:12:12", content: "운동하기" }) }); 3-1. await reloadList(); }; return ( ...+ 1. ...+ ); } ``` 1 . 작성이라는 버튼을 클릭하여 "addTodo" 실행한다. 2 - addTodo를 실행하면 fetch가 실행 - fetch가 실행하면서 값을 DB에게 날려보내야함 - DB에게 날릴 값에 조건이 붙는다 - [fetch 옵션](https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch)은 따로 사이트를 이용하는 것이 좋다 - 옵션 * 'method : ~' 는 'POST'타입으로 된것과 통신한다. * 'headers ~'는 내가 보내려고 하는 데이터 코드는 json형태로 보낼거야라는 의미 * 'body : ~' 는 데이터를 암호화 하는것으로 body안에 보낼 데이터를 입력하면 된다. 3 - addTodo 함수에 막바지에 있는 reloadList를 실행 - 본래 useEffect로 감싸여 있던 익명함수에 이름(reloadList)을 부여함으로 useEffect를 따로 빼둔다. - fetch(todos의 json값을 가져온다)문 실행 - await을 잘 사용하자. 4 . 작성을 누르면 1번~3번이 실행되고 입력된 값은 VS코드로 이동한다. 5 . VS코드에 있는 app.post가 실행됨 ------------------------------------------------------------------------------------------------------------- ## [제작] 앱구현 - 화면에 작성하는 내용 DB에 반영하는 방법 Δ TIP : "datetime-local"을 사용하면 날짜와 시간관련된 설정을 달력형식으로 클릭하여 선택할 수 있다. Δ form - 입력상자들의 묶음 Δ [코드펜](https://codepen.io/SeonHo-/pen/jOZYxLx?editors=0010) ```js function App() { const [todos, setTodos] = useState([]); const reloadList = async [fetch관련 함수] . + . useEffect(reloadList, []); 4-2. const addTodo = async (perform_date, content) => { await fetch(`http://localhost:3000/${userCode}/todos`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ perform_date, content }) }); await reloadList(); }; 3-2 . const onSubmit = (e) => { e.preventDefault(); const form = e.target; if (form.performDate.value.length == 0) { alert("수행날짜를 입력해주세요."); form.performDate.focus(); return; } const performDate = form.performDate.value.replace("T", " ") + ":00"; . + . 4-1. addTodo(performDate, content); }; return ( <> . + . 1. 3-1. . + . ); ``` 1 . form 생성 : 입력상자를 묶어주기 위해 생성 2 . input type = "submit" - 만약 form안에 input type이 "submit"인게 있다면 클릭 시 발송이 됨 3 . onSubmit - form onSubmit={onSubmit} : 작성이 클릭될때 submit을 발송, 발송하기 전에 onSubmit을 실행한 뒤 발송 - const onSubmit = (e) => { e.preventDefault(); const form = e.target;} * 해당코드가 내부적으로 e[이벤트] 값을 받아서 실행 * e.preventDefault(); : 원래 onSubmit가 실행되면 페이지가 새로 생성되면서 이동하지만, 그 기능을 해당 코드를 통해 막음(페이지 이동X) - const form = e.target; : 이벤트의 중심이 되는 form객체를 form 변수에 넣는다. - const performDate = form.performDate.value.replace("T", " ") + ":00"; * form -> input에 있는 performDate의 값을 performDate에 넣는다. * .replace("T", " ") + ":00"; : datetime을 실행할때 나오는 T와 같이 쓸모없는 값을 없앰, 더 깔끔한 결과를 볼 수 있음 - if (form.performDate.value.length == 0) {alert("수행날짜를 입력해주세요."); form.performDate.focus(); return; } * 만약 날짜 관련 값을 입력하지 않았을때 메세지를 출력하고 날짜칸에 커서 포커스를 맞춘다. 4 . 매개변수 ```js [4번과 비슷한 유형 예시] const addTodo = async () => { fetch(`http://localhost:3000/${userCode}/todos`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ perform_date: "2022-12-12 12:12:12", content: "운동하기" }) ``` - fetch에 매개변수를 넣어 body안에 연결시킨다. - 원래 body에서 " 객체 : 데이터값"으로 입력하지만 객체와 데이터값의 이름이 동일할 때 4번과 같이 "perform_date"라고만 써도 된다. -------------------------- ## 백준 풀이 1. 별찍기 - 2 - 조건 : 첫째 줄부터 N번째 줄까지 차례대로 별을 출력한다. 단, 오른쪽정렬로 1) 풀이 방법 2 - for문을 중첩해서 활용 2) 풀이[~ing] ```js const fs = require('fs'); const input = fs.readFileSync('/dev/stdin').toString().trim().split("\n"); const max = input[0]; let sum = ''; let star = ''; let blank = ''; for( let i = 0; i i; j--) { result += ' '; } for (let k = 0; k <=i; k++) { //star관련 for문 result += '*'; } result += '\n'; } console.log(result); */ ``` 3. 결과 : 성공, 힌트안보고 다시 풀이보자 # 2022-05-24 : 명언 DB 만들기 [조별과제] 명언 DB 만들기 0 . 조건 - 번호, 등록날짜, 내용, 작가 [ex - 1. 2022-12-12 12:12:12, 내 사전에 불가능이란 없다., 나폴레옹] - codepen 실행할 때 마다, 랜덤하게 명언이 화면에 나오도록 * 지금 같은 경우에는 DB하나에 테이블 하나만 있어도 됨 - json 덩어리 / fetch 이용 - 명언별로 조회수, 좋아요, 싫어요 -> function doLike(){ } ++ - 명언 삭제 - 명언 수정/생성 (조건, 5분 이내 수정 가능) 1 . 명언 DB 만들기! 1 ) SQL을 활용하여 데이터 베이스 제작(데이터베이스 / 테이블 생성 및 내용 추가 - 명언 10개 이상) 2 ) PETCH을 이용하려면 localhost가 있어야함 - vscode 활용 - O * 제작한 DB가 localhost를 통해 출력이 되어야함 * codepen에서 타도메인을 사용하기 위해 cors를 입력 - [codepen](https://codepen.io/SeonHo-/pen/RwQZVWd?editors=1011) * 전일 수업한 내용을 참고하여 작성 - O * 코드펜 실행 -> 명언이 화면에 나오도록 ※ 랜덤 명언 표시 - SELECT * FROM saying ORDER BY RAND() LIMIT 1; /* 명언별로 조회수, 좋아요, 싫어요 출력해야함 id를 이용 예시 - id가 1일때 조회수, 좋아요, 싫어요 sql에서 view_ws 만들어 보는 걸류 await pool.query( ` UPDATE saying SET = view_ws + 1 = > 여기에 있는 +는 DB에 넣기 위해 '+'를 시켜주는것 WHERE id = ?; `, [row.id] ); row.view_ws++; => 여기에 있는 +는 자바에 넣기 위해 */ rows : 객체들 rows[0] : 객체 ~ 못적음 # 2022-05-23 : 백준, git, codepen, vscode 등 ## 1. 백준 문제 풀이 ## 2. [GIT](https://slog.gg/p/1229) : 원격저장소 1 . gjthub 로그인 -> [repository default branch](https://github.com/settings/repositories) master를 main으로 변경 후 업그레이드 진행 2 . 종류 (워킹 ~ -> 인덱스 -> 로컬저장소) 1 ) 워킹 디렉토리(일반폴더) 2) 인덱스(중간 장바구니 역할정도) 3 ) 로컬저장소 - 커밋 : 소스코드를 로컬저장소에 넣는것 . 한번에 넣을 수 없다 3 . (중요!) ★ git 명령어 종류 및 설명 - cmd에서 입력하면 됨 [순서] rm -rf .git -> rm * -> 파일 생성 -> 원격저장소 생성 -> 로컬 저장소 생성 -> 작업자 세팅 -> 원격저장소 연결 -> 장바구니 담기 -> 커밋 -> git push origin master -> 저장소를 크롬으로 접속해서 확인 [워킹 디렉토리] - git init : 저장소를 생성한다. [위의 코드를 실행할때 한번은 작업자를 알려주어야함] * git config user.name : 현재 작업자명 확인 * git config user.name " 깃허브 아이디" : 만약 작업자명 확인할때 없으면 작업자명을 설정해주는 코드 * git config user.email : 현재 작업자이메일 확인 * git config user.email "깃허브이메일" : 현재 작업자이메일 설정 - touch : 파일 생성 - git checkout -f . : 수정한 파일이 있다면, 커밋하기 전에 수정한 내용을 삭제할 수 있는 명령어 - git checkout -f master : 수정 내용 삭제본을 복구하는 작업(해당 코드 앞에 수정 내용 삭제 코드를 입력해야지 실행이 가능함) [인덱스] - git status : 생성된 파일 목록 현황 * 적색 : 인덱스에 안들어간 파일 * 녹색 : 인덱스에 들어간 파일 - git add 파일명 : 생성된 파일을 인덱스에 넣기 - git rm --cached 파일명 : 인덱스에서 제거 - git add . : 싹다 담기 - rm 파일명 : 파일삭제(일반) - git rm -rf .git : .git 폴더 제거(일반) [커밋] - git commit -m "작업내용" : 커밋 - git log : 커밋기록 보기, 빠져나가는 키는 q [원격저장소 생성 및 삭제](https://github.com/new) [외워라] - 이름 : exam_22_05_23 1 . 저장소 주소 : https://github.com/아이디/exam_22_05_23 2 . 저장소 삭제 : https://github.com/jhs512/exam_22_05_23/settings - 최하단, Delete this repository [원격저장소 연결] - git inti - 작업장 정보, 이름, 이메일 세팅 - git remote -v : 현재 연결되어 있는 원격저장소 리스트 - git remote add origin 저장소 주소 : origin이라는 별칭으로 원격저장소 등록 - git remote remove origin : 삭제 - git push origin master : 오리진에 있는 커밋 내용들을 업로드 하겠다 ## [코드펜, VS코드] fetch를 이용한 API 호출 ### [코드펜] fetch를 이용한 API 호출 - 1 ※ 기본적으로 fetch를 이용한 API를 호출할 때 타 도메인(EX - https://cdpn.io)으로 부터의 요청이라면 실행이 안되지만, CORS 설정에 의해 허용이 될 수 있다. [【 기본 구조 】](https://codepen.io/SeonHo-/pen/mdXMgVq?editors=1111) ```js 1 . fetch("https://picsum.photos/v2/list?page=1&limit=3") . .then((data) => data.json()) 2. .then(console.log) // .then((data) => console.log(data)) // 이 코드와 같다. 3. .catch(console.error); ``` 1 . fetch ```js fetch("https://picsum.photos/v2/list?page=1&limit=3") . .then((data) => data.json()) - 압축해제 ``` - fetch : 통신을 발생시키다. - 통신을 할때 해당 문장은 필수로 들어가야 하는 것이다.(통신 발생 및 데이터 압축풀기) - picsum.photos의 API는 cors 허용이 되어있기 때문에, catch 부분이 실행이 되지 않는다. * 원래 [타도메인간 연결을 시도하면 오류가 발생](https://codepen.io/jangka44/pen/WNMEJbY?editors=1111)한다. 2 . 압축해제된 데이터의 값이 들어감 / 2번 코드는 ".then((data) => console.log(data))"으로도 작성할 수 있다. 3 . 위의 3문장을 실행하였을때 오류가 발생하면 catch문 실행 / 3번 코드는 ".then((err) => console.error(err));"으로도 작성할 수 있다. --------------------------- ### [코드펜, VS코드] fetch를 이용한 API 호출 - 2 ※ express에 cors 추가하여 특정도메인에 대해 cors 허용 [【 VS코드 - 특정도메인 cors 허용 】](https://codepen.io/SeonHo-/pen/mdXMgVq?editors=1111) [GIT](https://github.com/Parkseonho/happy/commit/5ffeec47b0c2d99e59aeac7939266db554d24800) ```js [app.js] 1. import cors from "cors"; ~~ 2. const corsOptions = { origin: "https://cdpn.io", optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors(corsOptions)); ``` ```json [package.json] ~ 1. "cors": "^2.8.5", ~ ``` 1 . 타도메인을 사용할 수 있게 설정하는 cors를 사용하기 위해 vs코드에 cors이라는 외부 데이터를 가져온다. 2 . app.에서 cors를 사용할거라는 함수 - express처럼 app.use(cors()); 형식으로 입력하는 방법도 있으나 해당 방법은 전체 타도메인에 대한 허용을 하는것으로 보안상에 좋지않음 따라서, 2번에 입력된 내용처럼 '특정도메인'에만 허용을 걸어 보안성을 챙겨준다. - 인터넷에 "express cors" 검색 후 "Configuring CORS" 항목에서 "var corsOptions ~" 관련 내용을 복사한 뒤 내 정보에 맞게 수정 ## [코드펜] 동기, 비동기 ### 비동기 코드 - 만약, 실행이 오래 걸리는 코드가 있다면 일단 넘기고 다른코드부터 실행 ```js fetch("https://picsum.photos/v2/list?page=1&limit=3") . .then((data) => data.json()) . then(console.log) .catch(console.error); ``` ### 동기 코드 - 만약, 실행이 오래 걸리는 코드가 있어도 실행 완료될때까지 기다렸다가 다음코드 실행 ```js [예시] let rs = 0; rs = a(); //5초 rs = b(rs); //10초 rs = c(rs); //20초 console.log(rs); //35초 ``` # 2022-05-20 ~ 22 : 백준, vs code, 리액트 등 ## 1. 백준 문제 풀이 ## VS Code ### VS code 생성 명령어 순서 * npm i express -> npm install -g nodemon -> npm i mysql2 -> app.js 생성 -> nodemon app.js ### 단건조회 ```js [전체 보기] 1. app.get("/todos/:id", async (req, res) => { //const id = req.params.id; const { id } = req.params; 2. const [rows] = await pool.query( ` SELECT * FROM todo WHERE id = ? `, [id] ); 3. if (rows.length == 0) { res.status(404).json({ msg: "not found", }); return; } 4. res.json(rows[0]); }); ``` 1 . 실행할 주소명 및 기초 작성 단계 해당 단계 후 res.json을 통해 잘입력됐는지 확인하는 단계가 필요하다. ```js app.get("/todos/:id", async (req, res) => { //const id = req.params.id; const { id } = req.params; ``` - ("/todos/:id"~) : todoes뒤에 있는 ':id'는 todos 테이블에 있는 id 항목의 번호를 작성, id 개수가 많을 경우 'todos/1'의 형식으로 id 개수만큼 작성하는것은 데이터 낭비이기 때문에 ':id'를 사용한다. - (~, async (~) : vs code안에서 sql을 사용하려면 await을 사용해야 하는데 해당 코드를 작성하기 위해서 사전에 입력해야하는 코드 - [ const {id} = req.params; ] == [ const id =req.params.id; ] * const id : 변수 id 선언 / req : 고객이 입력한 주소 / params : 구조분해할당 / req.params : 객체 : 객체 안에 있는 id를 한번에 받는다는 뜻으로 오른쪽에 있는것이 왼쪽으로 변환할 수 있다. 2 . 주소 입력시 출력되는 화면 내용 ```js const [rows] = await pool.query( ` SELECT * FROM todo WHERE id = ? `, [id] ); ``` - 백틱(`)을 사용함으로써 SQL문법에 엔터를 사용할 수 있게한다. - [ WHERE id = ? ~ [id] ] == [ WHERE id = ${id} ] ※ WHERE id = ${id}를 사용하는것이 더 간단하지만 "SQL 인덱션 해킹'의 위험이 있기 때문에 전자의 경우를 사용한다. ※ * 안전을 위해 ${id} 대신 ?를 입력 * 백틱이 끝나면 그 뒤에 쉼표를 입력 * 쉼표 다음줄에 '[id]' 입력하여 값을 치환 (만약, 물음표의 개수가 3개면 [ ]안에 들어가는 값도 3개가 들어가야한다. 3 . 주소명 잘못입력시 나오는 화면 제작 ```js if (rows.length == 0) { res.status(404).json({ msg: "not found", }); return; } ``` - if (rows.length == 0) ~ return; : todo에 없는 번호가 들어올 시 rows의 length가 0때 retrun을 통해 빠져나온다. - res.json({ msg : "not found", }); : 값이 없을때 그냥 빠져나오지 않고 메세지를 출력하여 빈화면이 안나오게 한다. - status(404) : 응답코드를 작성하지 않으면 기본으로 200번대가 실행됨 메세지에 not found가 있다면 응답코드(status) 404를 작성해주는 것이 좋다. 4 . 내용 출력 코드 ```js res.json(rows[0]); ``` - rows[0] : 만약 rows에 [0]이 붙지 않았다면 출력되는 화면의 맨 첫줄과 마지막줄에 '['와 ']'이 붙는 배열 형식이 나옴 * [0]을 사용함으로 화면에 출력되는 배열형식을 없앤다! -------------------------------------------------------- ### 수정 ```js ~ 1 . app.use(express.json()); ~ app.patch("/todos/patch/:id", async (req, res) => { const { id } = req.params; 2. const [rows] = await pool.query( ` select* from todo where id = ? `, [id] ); if (rows.length == 0) { res.status(404).json({ msg: "not found", }); return; } 3. const { perform_date, content } = req.body; 4. if (!perform_date) { res.status(400).json({ msg: "perform_date required", }); return; } 5. if (!content) { res.status(400).json({ msg: "content required", }); return; } 6. const [rs] = await pool.query( ` update todo set perform_date = ?, content =? where id = ? `, [perform_date, content, id] ); 7. res.json({ msg: "${id}번 할일이 수정되었습니다.", }); ``` 1 . express에서 json을 입력하기 위한 명령어 ```js app.use(express.json()); ``` - express에게 데이터가 json형식으로 입력될테니까 준비하라는 의미의 명령어 2 . 단건조회 입력본 활용 3 . 원하는 데이터 가져오기 ```js const {perform_date, content} = req.body; ``` - 리퀘스트 바디에 들어있는 perform_date와 content를 가져온다. 4 . perform_date 값이 없을경우 ```js if (!perform_date) { res.status(400).json({ msg: "perform_date required", }); return; } ``` - if (!perform_date) : 만약, perform_Date의 값이 ( !-> 반대의 뜻) 없다면~ - 400 : 입력을 잘못했을때 나태내는 응답코드 5 . content 값이 없을경우 ```js if (!content) { res.status(400).json({ msg: "content required", }); return; } ``` 6 . 수정 관련 내용 ```js const [rs] = await pool.query( ` update todo set perform_date = ?, content =? where id = ? `, [perform_date, content, id] ); ``` 7 . 수정 완료 후 출력 메세지 ```js res.json({ msg: "${id}번 할일이 수정되었습니다.", }); ``` ---------------------------- ### 삭제/생성 ```js [삭제] app.delete("/todos/delete/:id", async (req, res) => { 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}번 삭제를 완료했습니다.", }); }); ``` ```js [생성] app.post("/todos/post/:id", async (req, res) => { const { reg_date, perform_date, is_completed, content } = req.body; if (!reg_date) { res.status(400).json({ msg: "reg_date required", }); return; } if (!perform_date) { res.status(400).json({ msg: "perform_date required", }); return; } if (!is_completed) { res.status(400).json({ msg: "is_completed required", }); return; } if (!content) { res.status(400).json({ msg: "content required", }); return; } const [rs] = await pool.query( ` insert into todo set reg_date = ?, perform_date =?, is_completed =?, content =? where id = ? `, [reg_date, perform_date, is_completed, content, id] ); res.json({ msg: "할일이 추가 되었습니다.", }); }); ``` ## post man : 개발자용 필수! 브라우저 - 크롬 : 개발자, 일반사용자가 사용하는 브라우저 - 카카오톡처럼 로그인을 하면 하던 작업 이어서 할 수 있다. - 워크스페이스! * 프로젝트 폴더 * 워크스페이스 안에는 콜렉션과 리퀘스트가 있음 ## [HTTP] 프로토콜 표준(메서드, 응답코드) 1. 메서드 : 데이터를 보내는 방법 / 내가 어떤 의도로 데이터를 보내는지에 따라 사용 메서드가 다름 1) GET - 데이터를 가져오려는 의도 [조회(단일조회)] 2) POST - 데이터를 생성하려는 의도 [생성] 3) PUT - 데이터를 아예 교체하려는 의도 [수정] 4) PATCH - 데이터를 부분 교체하려는 의도 [수정] 5) DELETE - 데이터를 삭제하려는 의도 [삭제] 2. 응답코드 1) 200계열 : 성공 2) 300계열 : 다른곳으로 가시오, (오류는 아님) 3) 400계열 : 니가 잘못 / 브라우저 잘못으로 인한 오류(잘못 입력함) 4) 500계열 : 내가 잘못 / 내가 하다가 뻗었다. ## 리액트 ### [리액트] [입력상자 구현하는 방법](https://codepen.io/SeonHo-/pen/RwQZVWd?editors=1010) #### 1 . state 활용하여 입려받을 숫자의 변수 생성 ```js const [no, setNo] = useState(0); ``` #### 2 . input 안에 입력받을 값의 타입, 값, 재실행 관련 코드 입력 ```js return ( <> setNo(e.target.valueAsNumber)} />

no : {no}

); ``` -

: 줄바꿈 ### [리액트] [취소버튼 구현 방법](https://codepen.io/SeonHo-/pen/jOZLmWr?editors=0010) ```js return ( <> setNo(e.target.valueAsNumber)} />

no : {no}

); ``` - input 뒤에 button 버튼을 만들어 준다. - => 띄어쓰기 기능 - 위의 취소 기능 : 취소 버튼을 누르면 0으로 초기화 된다. ### [리액트] [저장버튼 구현 방법](https://codepen.io/SeonHo-/pen/ExQvmyQ?editors=0010) ```js function App() { const [no, setNo] = useState(0); const save = () => { setNo(0); }; return ( <> setNo(e.target.valueAsNumber)} />

no : {no}

); } ``` - 위의 취소 버튼 구현방법에서 바로 0으로 초기화를 했던것을 함수를 이용하여 초기화할 수 도 있다. ### [리액트] [저장버튼에 의한 배열변경 방법](https://codepen.io/SeonHo-/pen/eYVEWgG?editors=0010) ```js function App() { const [no, setNo] = useState(0); const [nos, setNos] = useState([]); const save = () => { setNo(0); setNos([10, 20, 30]); }; return ( <> setNo(e.target.valueAsNumber)} />

no : {no}

nos : {JSON.stringify(nos)}

); } ``` - 배열을 저장하기 위한 state를 추가한다. - 추가한 stsate를 save 함수 안에 넣는다. => setNos([~]); - setNos([]);로 입력을 하면 출력하는 문장에서 특별한 코드를 써주어야함 " {JSON.stringify(nos)}" => 해당 객체를 문장형식으로 잘 보여달라는 뜻 ### [리액트] [저장시 숫자 추가 방법](https://codepen.io/SeonHo-/pen/BaYdRZN?editors=0010) ```js function App() { const [no, setNo] = useState(0); const [nos, setNos] = useState([]); const save = () => { setNo(0); setNos([...nos, no]); }; return(~~); ``` - 배열을 저장하는 방법을 사용하려면 예시에 나와있는 방법을 활용하여 save에 있는 setNos(); 안에 있는 값을 [...nos, no]으로 변경해야한다. * 예시 [왼쪽에 있는것과 오른쪽에 있는 것은 같은것이다.] ```js const a = [10,20]; const b =[a[0], a[1], 30];``` ||| ```js const a = [10,20]; const b =[...a, 30];``` ### [리액트] [저장시 리스트 리랜더링 방법](https://codepen.io/SeonHo-/pen/wvyqdpG?editors=0010) ```js setNo(e.target.valueAsNumber)} />

no : {no}

nos : {JSON.stringify(nos)}

{no}

``` - map과 ui(목록) / li(항목)의 특징을 활용하여 함수를 만든다. => ```js

{no}

``` - 이와 같이 맵을 통해서 엘리먼트를 많이 만들 경우에는 no만 작성하는것이 아닌 index도 같이 작성 / 항목에는 kye ={index}하는 것도 잊으면 안됨! [외울것!!] ```js

{no}

``` # 2022-05-19 : VScode, SQL, 리액트 등 - vs code 오류로 인해 삭제 후 재다운 및 재부팅 - SQL 9강 및 10강 풀이 ## 리액트 개념 및 특징 : 가장 인기 있는 프론트엔드 프레임워크 [페이스북에서 제작] - 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 - 복잡한 UI를 쉽게 만들 수 있는 방법 - 백엔드와 비슷하게 작동 -> 백엔드 개발자가 배우면 좋음 [백엔드 개발 방식으로 프론트를 만든것이기 때문] - [참고/필수명령어](https://codepen.io/SeonHo-/pen/ZErKJoy) - 사이트 : 코드펜 *설정 : setting => js => javascript preprocessor : babel - [리액트 아닌 다른것으로 앱을 만들려고하면](https://codepen.io/SeonHo-/pen/poaPrVR) 만드는 로직하나와 수정하는 로직 하나를 만들어야한다. ### 리액트 특징 1 . 리액트에서는 수정이라는 개념이 없다. (무언가를 만들기는 쉽지만 고치는것은 어렵다.) - 수정이 필요할때는 기존의 것을 삭제한 뒤 원하는 수정사항을 반영한 페이지를 새로 만든다. 2 . 복잡한 UI를 쉽게 구현 3 . 리액트로 해도 눈에 띄는 변화는 초반에 없지만 리액트 없이 하면 조금만 복잡해져도 말도 안되게 어렵다. ## 리액트 기본 명령어 ### 코드펜 -> HTML에 기본적으로 입력되어야할것 ```html

``` 1 . 엘리먼트를 만들어줌 * 엘리먼트란 위의 코드 처럼 테그를 열고 닫는것을 말한다. ------------------------------------- ### 코드펜 -> 자바스크립트에 기본적으로 입력되어야할것 ```js console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function App() { return <>안녕하세요.; } ReactDOM.render(, document.getElementById("root")); ``` 1 . console.clear(); -> 코드펜으로 코드를 구성하려면 맨 처음에 작성해주는 것이 좋음(화면을 지우는것) 2 . 필수 명령어 1 ) import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; 2 ) import ReactDOM from "https://cdn.skypack.dev/react-dom"; * 외부에서 정보를 가져와야함(리액트 관련 정보) 3 ) function App() { return <>안녕하세요.;} * 안녕하세요 앞에 있는 <>는 '<>'가 입력된 다음줄부터 자바안에서 리액트를 작성할 수 있게하는 명령어 / 로 명령어를 닫는다. * 앱을 만들기 위한 함수를 만드는 것 4 ) ReactDOM.render(, document.getElementById("root")); * ```js ``` : 앱테크를 열고 닫은것과 같은 효과를 가진다. 테그 안에 내용이 없다면 'App /' 처럼 줄여쓰는게 좋다. ```js ``` : 앱을 실행시킨다. * document.getElementById("root") : ID가 "root"인 엘리먼트를 검색해라라는 뜻으로 이 문장을 실행하면 HTML에 있는 root가 실행된다. - [간단요약] 나는 앱을 실행하겠다. 그 실행하는것을 root에다 두겠다. 여기있는 root는 HTML에 있는 root다. ## [코드펜] [리액트 없이 사칙연산 로직 만드는 방법 및 설명](https://codepen.io/SeonHo-/pen/poaPrVR?editors=1010) ### HTML 코드 및 설명 ```html [html] 코드

계산결과는 ? 입니다.

``` #### 설명 1 . ```html ``` 1. input -> 내용을 입력할 수 있는 네모칸이 생김 2. type -> type에 "number"을 넣음으로서 네모칸 안에 숫자가 입력될수 있도록함 3. style -> 네모칸의 길이를 지정 4. value -> 네모칸 안에 들어가는 숫자의 기본값을 설정 5. min/max -> 네모칸 안에 들어가는 숫자의 크기를 지정 2 . ```html ``` 1. select -> 옵션을 만들수 있도록하는 것 2. option -> 옵션칸 안에 들어갈 내용 3 . ```html ``` 1. button -> 버튼이 만들어짐 4 . ```html

```

1. div -> 결과 실행 ------------------------- ### JS 코드 및 설명 ```js [자바스크립트 ] console.clear(); const btnCalc = document.querySelector("#btn-calc"); function calculate() { const inputNum1 = document.querySelector("#num1"); const inputNum2 = document.querySelector("#num2"); const num1 = inputNum1.valueAsNumber; const num2 = inputNum2.valueAsNumber; const inputOp = document.querySelector("#op"); let rs = 0; if (inputOp.value == 0) { rs = num1 + num2; } else if (inputOp.value == 1) { rs = num1 - num2; } else if (inputOp.value == 2) { rs = num1 * num2; } else if (inputOp.value == 2) { rs = num1 / num2; } else { rs = num1 ** num2; } const divRs = document.querySelector("#rs"); const divRs2 = document.querySelector("#rs2"); divRs.innerText = rs; divRs2.innerText = rs; } btnCalc.onclick = calculate; ``` #### 설명 - 이름이 있으면 가져온다.(#이름) 1 . ```js btnCalc.onclick = calculate; ``` 1. onclick -> 클릭했을때 2. calculate -> 함수명 / 여기선 예약 느낌 3. 한줄 요약 : btnCalc를 클릭할때마다 calculate 함수 실행해라 2 . ```js const btnCalc = document.querySelector("#btn-calc");``` 1. #btn-calc -> 아이디가 btn-calc인 엘리먼트 (여기서 말하는 아이디는 html에서 설정한 아이디) 2. document -> 문서, html 같은거 관리하는 문서 3. querySelector -> 검색 4. 한줄 요약 : html 문서에서 아이디가 btn-calc인 엘리먼트를 검색한다. / 검색한 내용을 btnCalc에 넣는다.! 3 . ```js const num1 = inputNum1.valueAsNumber; ``` 1. inputNum1.valueAsNumber -> inputNum1이 가지고 있는 값을 숫자형식으로 가져온다. 4 .```js divRs.innerText = rs; ``` 1. innerText -> html 태그를 변경하고 텍스트를 넣는다. ## HTML을 JSX로 교체하는 방법 / [리액트를 활용한 사칙연산](https://codepen.io/SeonHo-/pen/abqWRLX?editors=1010) 1 . JSX에서는 HTML과는 다르게 이름이 필요없다. * 예시 : input id = "rs" => input 2 . 리액트에서는 코드가 한줄이면 ```js ```처럼 엘리먼트를 형식으로 만든다. 3 . style 형식을 변경해준다. - style ="width:100px;" => style ={ {width:100} } * JSX에서 {}을 사용하여 JSX에서 {}안에 한하여 자바를 실행시킬수 있음 * {}안에 있는 {}은 객체로 사용 4 . input앞에 return을 넣어준다. ## [리액트] state변수 / onChange 구현하는 방법 : onChange는 일부 내용을 변경할 수 있도록 하는것으로 기존의 것을 삭제하고 새로 만들 수 있게 해줌 - state 변수 : 수정 후 자동으로 리로드 가능 / 값이 바뀌는것은 전부 state변수로 바꿔주는 것이 좋다. * 형식 : const [변수명, set변수명] = useState(값); (const[num1, setNum1] = useState(11); * 주의 사항 : set뒤에 오는 변수명의 첫글자는 대문자로 해야한다. 1 . onChange가 제대로 실행되는지 확인하는 방법 [앱 재실행의 횟수를 확인할수 있는 코드] ```js let App__callCount = 0; - ● funtion App(){ console.log(`App__callCount : ${++App__callCount}`); //백틱(`)을 사용하여 입력하면 ${}의 값이 ●로 치환됨 //앱이 재실행될때 마다 플러스 -> ++App~ ``` 2 . onChange 입력 형식 및 설명 ```js console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; let App__callCount = 0; function App() { console.log(`App__callCount : ${++App__callCount}`); const [num1, setNum1] = useState(0); return ( <> //여기부터 JSX 실행 setNum1(e.target.value)} />

계산결과는 ? 입니다.

); } ReactDOM.render(, document.getElementById("root")); ``` - onChange={(e) => setNum1(e.target.value)} * ()=> 에서 ()안에 들어가는 e는 매개변수로, 여기에서는 이벤트의 의미로 쓰임 / 안에 글씨가 들어간것이 중요하지 어떤 글씨가 들어가는지는 중요하지 않다. * e.target.value -> 사용자가 입력한 값으로 해당 코드를 사용하면 원하는 숫자를 자유롭게 입력할 수 있다. # 2022-05-18 : 백준, 아두이누, VS Code 등 ## 1. 백준 문제 풀이 ## 2. 숫자의 정렬과 반환/map을 통한 정수변환 - 숫자의 정렬과 반환 : 숫자를 비교하고 그 中 가장 큰수를 구해야할 때 sort()와 pop을 사용. [백준 주사위 문제와 관련있음] ```js var e = [a,b,c]; // 배열로 묶어서 정렬하기 위함 e.sort(); // 정렬코드 console.log(e.pop()*100); // pop => 배열에서 마지막 요소를 제거하고 그 요소를 반환 ``` - map코드를 활용한 정수변환 : map(~)을 통해서 n [예 - "5", "3"]가 parseInt를 통해서 정수가 됨 [예 - 5, 3] / [백준 A+B -3문제와 관련있음] * 코드 : .map((n) => parseInt(n)); ```js const [a, b] = arr[i].trim().split(" ").map(n => parseInt(n)); ``` ## 3. 아두이누 실습 진행 ## 4. VS 코드 -------------------------------------------------- ### 1. 익스프레스의 기본 라우팅 ```js const express = require("express"); const app = express(); const port = 3000; // 해당 '3000'이 포트 번호 [local host 뒤에 붙는것] (☆) app.get("/", function (req, res) { res.send("Hello World!"); }); app.get("/a.html", (req, res) => { res.send("HI"); }); app.get("/b.html", (req, res) => res.send("Bye")); app.listen(port, () => { console.log(`Example app listening on port ${port}`); }); ``` * ☆ [app.get("/", function (req, res) {res.send("Hello World!");});] - '/' -> 웹 브라우저의 주소 || /에 들어가면 function 작동! - 익명함수 : function ~ () -> ~ 위치에 함수명이 안들어간 함수 - 함수의 줄임표현 -> 'function(req,res)' 를 '(req,res)=>' 로 줄임 가능 -> 만약 내용이 한줄이라면 '(req,res)=> res.send("")' 이런식으로 생략가능 ------------------------------------------------- ### 2. 애로우 펑션 1) 함수 a를 만드는 방법1 [일반적 방법] ```js function a(num1, num2) { return num1 + num2; } ``` 2) 함수 a를 만드는 방법2 [익명함수를 상수a에 연결] ```js const a = function (num1, num2) { return num1 + num2; } ``` 3) 함수 a를 만드는 방법3 [애로우 펑션을 상수 a에 연결] ```js const a = (num1, num2) => { return num1 + num2; } ``` 4) 함수 a를 만드는 방법4 [애로우 펑션 => body 안 구문이 하나면 리턴 생략 가능] ```js const a = (num1, num2) => num1 + num2; ``` ------------------------------------------------- ### 3. nodemon : 내용 변경할때 마다 서버 재시작하는 수고를 줄일 수 있음 1) nodemon 특징 : 단 한번의 설치로 끝남(글로벌 설치), 프로그램 만들때 마다 입력할필요 없음 2) nodemon 설치명령어 : npm install -g nodemon 3) nodemon 종료 단축키 : Ctrl + C 4) nodemon으로 app.js실행하는 명령어 : nodemon app.js ------------------------------------------------- ### 4. 외부 모듈 불러오기 - require문법 [기존에 알고있는 방법] ```js const express = require("express"); const app = express(); const port = 3000; ``` - import문법 [최신문법] : 사용 조건 - app.js에서 명령어를 바꾸어야할 뿐아니라 package.jsoon에 명령어를 추가로 입력해야함 ```js [app.js] import express from "express"; const app = express(); const port = 3000; ``` ```js [package.jsoon] { "dependencies" : { "express" : "^4.18.1" }, "type" : "module" // => 기존의 코드에서 ["type" : "module"] 추가 } ``` ------------------------------------------------- ### 5. 라우팅 개념 ```js import express from "express"; const app = express(); const port = 3000; app.get("/todos", function (req, res) { console.log("/todos 요청이 실행되었습니다."); res.send("HI111"); }); app.listen(port); ``` - import express from "express"; ==> 'express' 묘듈 가져오기 - const app = express(); ==> express를 실행한다 (웹서버 안에) - const port = 3000; ==> 웹서버가 몇번의 포트를 가질지 입력 - app.get("/todos",~ ==> app에 '/todos[웹서버]'를 요청한다. - ~function(req, res) ==> 첫번째 인자인 'req'는 간단하게 주소, '/todos'에 있는정보가 들어가 있다. (받은편지) ==> 두번째 인자인 'res'는 'res.send("~")'안에 있는 내용을 브라우저로 전달한다. (보낼편지) - app.listen(port); ==> 해당 앱을 실행시키기 위해 사용하는 코드[포트로 실행시킨다] ------------------------------------------------- ### 6. mysql2 라이브러리 이용해서 node.js에서 DB쿼리 실행 ```js import express from "express"; import mysql from "mysql2/promise"; const pool = mysql.createPool({ //DB와의 연결 정보를 입력 host: "localhost", user: "sbsst", password: "sbs123414", 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.listen(port); ``` - npm i mysql2 : mysql2 라이브러리 실행하는 코드 / node.js와 mysql을 연결해줌! - async : get~안에 'await'을 사용하려면 인자 앞에 붙여야하는 코드이다. - res.json[rows] : todo의 내용을 json형식으로 나타내겠다(크롬브라우저 활용) # 2022-05-17 : 자바스크립트, 백준, MySQL등 ## 1. 런타임 에러(EACCES) - 런타임 에러(EACCES)의 대표적인 예가 백준의 [14681]번이다. - 위의 문제에서 해당 에러가 자주발생하는 이유 : 이전문제까지는 fs.readFileSync에 dev/stdin을 항상 입력해왔는데, 여기서 dev/stdin을 입력하면 런타임 에러가 발생하기 때문 * 해결방법 : fs.readFileSync(dev/stdin) -> fs.readFileSync(0) * dev/stdin을 없애야하는 이유 : [ ] ## 2. 배열 1. 배열 앞 엘리먼트 추가/삭제 1) 삭제 후 리턴 : .shift() 2) 추가 : .unshift() 2. 배열 뒤 엘리먼트 추가/삭제 1) 삭제 후 리턴 : .pop() 2) 추가 : .push() 3. 붙이기 : a.concat(b) - a와 b를 붙임[콘만한 고양이라서 붙어있어야함..ㅎ] 4. 검색 - 첫 위치 검색 : a.indexOf(?) - a에서 ?가 있는 첫 위치를 검색 - 마지막 위치 검색 : a.lastIndexOf(?) - a에서 ?가 있는 마지막 위치를 검색 ## 3. 백준 문제 풀이 ## 4. * 필요 프로그램 / xampp사용법(5814참고)* ### 주요 3가지 프론트 백(서버사이드언어/DBMS) 인프라 ### xampp사용법(5814참고) mariaDB(MySQL) xampp(번들) - 웹서버 구현을 위함 / 이게 설치되면 마리아DB가 같이 깔림 * 다운로그 시 MySQL 제외하고 설정 빼기 * 자바스크립트와 데이터베이스를 연동 : 회원가입, 글쓰기, 글수정을 할 수 있는 백엔드 서버를 구현하고자 함 xampp 사용방법 : 설치 완료 후 my.ini에서 설정파일 변경 기본사용자 root/[] -> 기본적으로 설정되어 있는 관리자 아이디 비번 MySQL 설치 my.ini에서 설정파일변경 - port가 3306인지 확인 - lower_case_table_names = 2 // 테이블명에 소문자를 허용[해당 문장 반드시 입력], [mysqld]바로 밑줄에 입력 MySQL 서버 실행 MySQL 클라이언트로 서버에 접속 - mysql -u root sbsst 계정 생성, 비번 설정, 권한부여 : shell[접속기] -> root로 들어가서 exit 입력 후 해당 코드 입력 - GRANT ALL PRIVILEGES ON *.* TO sbsst@`%` IDENTIFIED BY 'sbs123414'; = GRANT ALL PRIVILEGES ON *.* - 모든 권한 부여 = TO sbsst@`%` - 계정설정 = IDENTIFIED BY 'sbs123414' - 비번 설정 - mysql -u sbsst -p ## 5. 웹서버(제공) / 웹클라이언트 - 웹클라이언트 대표적 : 웹 브라우저 ------------------------------ MySQL - MySQL서버 [mysqld] - MySQL클라이언트 [mysql] ------------------------------------ * mysql의 클라이언트 성능이 안좋아서 SQLyog 다운 : https://github.com/webyog/sqlyog-community/wiki/Downloads ->SQLyog Community Edition - 13.1.9 (64-Bit) 다운 * 코딩용 글꼴 다운 : https://github.com/naver/d2codingfont/releases -> 첫번째 파일의 첫번째 글꼴 다운 [D2CodingBold-ver1.3.2] ## 6. SQL 데이터 베이스 : 제약사항이 있으면 있을수록 좋음 - 드래그 후 f9를 눌러 실행 [ttps://slog.gg/p/884]참고 -------------------------- DB - 생성 : CREATE DATABASE ~게시물~ - 수정 : 없음 - 삭제 : DROP DATABASE ~게시물~ 테이블 - 생성 : CREATE TABLE ~게시물~ - 추가 : ALTER TABLE ~게시물~ ADD COLUMN - 수정 : ALTER TABLE ~게시물~ MODIFY COLUMN - 삭제 : ALTER TABLE ~게시물~ DROP COLUMN 데이터 - 추가 : INSERT INTO ~게시물~ SET ~ 데이터값 ~ - 수정 : UPDATE ~게시물~ SET ~데이터값~ WHERE ~데이터위치~ - 삭제 * 데이터 모두 삭제 : DELETE FROM ~게시물~ * 데이터 일부 삭제 : DELETE FROM ~게시물~ WHERE ~데이터위치~ * 데이터 완전 삭제 : TRUNCATE ~게시물~; ---------------- 데이터베이스 생성 및 삭제, 선택 - DROP DATABASE IF EXISTS : 데이터베이스 제거(exists가 있을때) - CREATE DATABASE : 데이터베이스 생성 - use : 컨택 ```sql # 이름이 a9인 DB 삭제, 단 존재할 경우에만 삭제를 시도한다. DROP DATABASE IF EXISTS a9; # 이름이 a9인 DB 생성 CREATE DATABASE a9; # 이름이 a9인 DB 선택 USE a9; ``` ======================== 테이블 생성 및 삭제, 제약설정 - CREATE TABLE 테이블명() : 테이블 생성 - DESC 테이블명 : 테이블 생성됐는지 확인 - UNSIGNED : 음수금지 - NOT NULL : 생략금지 - PRIMARY KEY : 중복금지 - AUTO_INCREMENT : 수동금지(즉 자동으로 넘버링이 되기 때문에 데이터를 수동으로 넣지 않아도 된다.) ```sql # 할일을 위한 테이블 생성 # 모든테이블(칼럼+로우)에는 칼럼이 필요하다 DROP DATABASE IF EXISTS a9; CREATE DATABASE a9; USE a9; # todo 테이블이 존제한다면 삭제 DROP TABLE IF EXISTS todo; CREATE TABLE todo( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, -> 정수, 음수 금지, 빈칸 없이(필수정보), 중복 금지(해당 코드는 중복해서 사용하면 안됨), 자동 넘버링 reg_date DATETIME NOT NULL, perform_date DATETIME NOT NULL, -> 날짜 뿐만 아니라 시간까지 나타낼 때 사용 is_completed TINYINT NOT NULL, -> 메모리 낭비 방지를 위해 int가 아닌 tinyint 사용 content VARCHAR(200) NOT NULL -> 최대 200자까지 입력가능 그 이상으로 입력하려면 text사용 ); DESC todo; ``` ======================== 테이블 추가 ```sql # 할일 추가 INSERT INTO todo SET reg_date = NOW(), perform_date = '2022-05-18 07:00:00', is_completed = 0, content = '기상'; # 할일 추가, 08시에 아침식사 INSERT INTO todo SET reg_date = NOW(), perform_date = '2022-05-18 08:00:00', is_completed = 0, content = '아침식사'; # todo 테이블에 있는 id, reg_date, perform_date, is_completed, content칼럼의 데이터를 보여줘 SELECT id, reg_date, perform_date, is_completed, content FROM todo; # todo 테이블에 있는 모든 칼럼의 데이터를 보여 SELECT * FROM todo; # todo id 내림차순으로 정렬 SELECT * FROM todo ORDER BY id DESC; ``` ======================== 데이터 삭제/부분 추가 ```sql # 테이블 안에 있는 데이터를 모두 삭제 DELETE FROM todo; # 테이블 안에 있는 데이터를 흔적도 없이 모두 삭제 TRUNCATE todo; # id가 2번인 할일만 삭제 DELETE FROM todo WHERE id = 2; # id가 3번인 할일의 is_completed를 1로 수정, 즉 3번 할일을 완료처리 UPDATE todo SET is_completed = 1 WHERE id = 3; ``` ======================== 데이터 구조 수정 ```sql # todo 테이블에 place 칼럼을 추가, 순서는 is_completed 칼럼 뒤로 ALTER TABLE todo ADD COLUMN place VARCHAR(100) AFTER is_completed; DESC todo; # todo 테이블의 is_completed 칼럼을 수정, 기본값을 0으로 지정 ALTER TABLE todo MODIFY COLUMN is_completed TINYINT UNSIGNED DEFAULT 0; DESC todo; # todo 테이블에서 place 칼럼을 제거 ALTER TABLE todo DROP COLUMN place; DESC todo; ``` ## 7. VS 코드 (21 강까지) 1. 다운로드 : https://code.visualstudio.com/docs/?dv=win - 웹 프레임워크 : 웹 사이트를 만들기 위해 있는 툴(완성된 뼈대) * 사용법을 지키면서 만들어야하는 주의점이 있음 * 웹프레임워크에서 node.js를 잘하기위해서는 express가 필요(?) * work 폴더 -> node_projects -> exam1 폴더 만들기 ### 1. 명령어로 express 설치 ```js #기본 명령어 형식 const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => { res.send('Hello World!') }) app.listen(port, () => { console.log(`Example app listening on port ${port}`) }) ``` [터미널에 입력해야하는 명령어] - npm i express : 해당 명령어로 express 설치 - node app.js : app.js 를 실행하는 명령어 # 2022-05-16 : 자바스크립트 ## 1. shadowing 1) 설명 [ var a = 10; a=20; ] => 해당 코드에서 a가 2번 실행되면서 a의 값 中 10에 해당하는 것이 가려지는 것을 shadowing이라고 한다. 만약 ★과 같은 경우가 있을때 첫번째 for문의 i=1을 var 추가하여 shadowing이 효과를 없애 원하는 결과를 출력하도록함 2) 예시 ```js function printTimesTable(a){ for( i = 1 ; i <= 9 ; i++ ){ => i = 1 -> var i = 1; console.log( a + " * " + i + " = " + a*i ); } } for( var i = 2 ; i <= 9 ; i++ ){ printTimesTable(i); } ``` ## 2. const와 let 1) const : 변수의 값이 변환할 수 없도록 고정시킬 때 사용 * 예를 들어 for in함수에서 for( const ~ in ~) [in 앞에 들어가야할 것은 변하지 않아야하니까 const를 사용?] 형식으로 사용하기도 한다. 2) let : 변수의 값이 유동적으로 변환할 수 있도록 할때 사용 ## 3. node.js에서 표준입력(키보드입력)을 처리하는 방법 ```js var fs = require('fs'); var input = fs.readFileSync('/dev/stdin').toString().split(' '); // ☆ var a = parseInt(input[0]); var b = parseInt(input[1]); console.log(a+b); ``` (☆) 1. 해당 코드에서 split(' ')은 공백을 기준으로 입력을 처리한다[7 2입력 -> "7", "2" 인지] 2. trim을 사용한 split 공백 제거 방법 [ split 사용시 공백이 생겨(앞 2EA, 뒤 2EA) 내용이 다음줄로 넘어간다] - trim을 사용하여 문자열 앞뒤 공백 제거 단, 문자열 내부 공백 제거 불가능 - [표준입력 처리] 中 split를 trim으로 변경하여 공백을 제거한다. ## 4. return : 함수실행을 끝내는것 * 예시 ```js function a(n1, n2){ return 5600; return n1+n2; } let b = a(100,200); console.log(b); // 바로위의 값에 뭐가 들어가든 b에 들어가는 값은 리턴값이다. 리턴값은 먼저실행되는것으로 진행한다 => 5600 실행, 플러스가 들어가는것은 5600보다 뒤에 있기 때문 ``` ## 5. 진행사항 : 프로그래머스 완료, 백준 문제 풀기 2단계 진행중