$$config title: 박소영 공부블로그 keywords: - javascript - html, css - sql $$ # 22_07_13 >> 001일차 # 22_07_14 >> 002일차 - < node.js > 백준 단계별 문제풀이 - < css > block, inline-block 차이점 글자꾸미기 ( font-size, font-weight, letter-spacing(자간), color : rgba(0,0,0,0) … 엘리먼트 # 02_ 따로 공부해볼것들 node.js 백준 문제 풀기 (참고 : https://velog.io/@xoxobabegirl) 10171, 10172_> 백슬래시 출력시에는 두번 입력하기 백탭 (`) 사용하는 이유 ? 언제 사용하는지 input 입력값 가져와서 출력하기 변수 var let const 입출력 기본코드 마지막에 .split (' ') 넣는 것과 .trim() 넣는것 차이점 .split 괄호 안에 ' ' 을 꼭 넣어줘야함 안넣으면 에러 **javascript ** (https://ko.javascript.info/) for문 루프 패턴 : for (var i = 0; i < myarray.length; i++) 루프 반복때마다 length에 접근함 연산자 (https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators#%EC%82%B0%EC%88%A0_%EC%97%B0%EC%82%B0%EC%9E%90) object 객체를 구성하는 전체 키를 배열로 얻는 코드 (http://www.gisdeveloper.co.kr/?p=11005) console.log(Object.keys(obj)); // Array 프로그래머스 for in문 (https://velog.io/@cateto/javascript-Object-%ED%83%80%EC%9E%85%EC%97%90%EC%84%9C-%ED%8A%B9%EC%A0%95-%EA%B0%92value%EC%9D%B4-%EC%9E%88%EB%8A%94%EC%A7%80-%EC%B0%BE%EA%B8%B0) 참고 # 22_07_15 >> 003일차 - < mySQL > 기초 문법 - < html, css > 테이블 : 표 만들기 (< table border = 1>) display 속성 관련 문제, 복습 태그 < a > 하이퍼링크, < br > # 22_07_18 >> 004일차 - 매일 디스코드에 공부시간 업로드 ( 영상시간 / 유튜브 시청 수 / 백준 공부시간 / 블로그 글 업로드 수) - mysql 기초이론 - mysql 테이블 생성하기 (to do list), 제약조건 걸고 내용 추가하기 - html, css text-align 속성 주기 # 22_07_19 >> 005일차 - visual studio code 설치, 환경설정 - node.js (https://vanillacreamdonut.tistory.com/268) - css 1> hover : 마우스를 올리면 색상변함 div + div 하면 처음 div 제외 아래 (형제) div 에 속성 입력가능 \ 스페이스 한 칸 기능 # 22_07_20 >> 006일차 - 비구조화 할당 (js) https://learnjs.vlpt.us/useful/06-destructuring.html - [async 함수](https://ko.javascript.info/async-await) < CREATE USER 'sbsst'@'%' IDENTIFIED BY 'sbs123414'; GRANT ALL PRIVILEGES ON *.* TO 'sbsst'@'%';> - 동기와 비동기의 차이 [참고자료 1](https://www.youtube.com/watch?v=U42qWURR6Gw), [참고자료2](https://velog.io/@slobber/%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0%EC%9D%98-%EC%B0%A8%EC%9D%B4) - express mysql 접속방법 ~~~ 접속해보기 # 22_07_21 >> 007일차 [강사님 깃 주소](https://github.com/xanqus/express_todolist) -깃에 업데이트하는 코드 1) git add . (띄어쓰기 해야함) 2) git commit -m "제목" 3) git push origin master -html 이미지 삽입 https://picsum.photos/id/이미지 번호 / 길이 / 높이 --> 사이즈는 이 사이트에서만 가능 ! - display : flex; - padding, margin 차이점 (css) - object-fit : cover,,,,,;;;;;; -[node.js 설치] (http://pyrasis.com/nodejs/nodejs-HOWTO#express---) # 22_07_22 >> 008일차 - fetch함수 (api) - 얄팍한 코딩사전 ; [git 관련 영상](https://www.youtube.com/watch?v=1I3hMwQU6GU) 볼것 ! - 웹의 4대 요소 crud : create , read, update, delete - 할 일 삭제 코드 작성 - sql delete구문 * 안붙이는...이유 - div : first-child : div의 첫번째에만 적용 => last-child, nth-child(), nth-last-child(), 괄호에 3n+1, 등등 넣어서 규칙줄수있음 - [margin, padding 값 입력 순서](https://1duri1.tistory.com/248) - [가상선택자 nth-child 관련 블로그](https://lalacode.tistory.com/6) # 22_07_23 >> 009일차 - 아두이노 실습 - < css > [가상선택자 실습](https://flukeout.github.io/) # 22_07_24 >> 010일차 - 아두이노 테스트 < html > - ul, li 태그 - h1~h6 태그 : 글자 크기 < css > - list-style : none; => 목록 스타일 삭제 - 태그 + 태그 - 태그 ~ 태그 - 태그:hover ~ (+) 태그 가능 # 22_07_25 >> 011일차 - [리액트 강의](https://www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi) - work = > react_project 폴더 -> cmd -> " npx create-react-app react-counter" - < css > - calc(100% / 한 줄 개수) 함수 # 22_07_29 >> - [자바스크립트 초기설정](https://nykim.work/105) - [자바스크립트 불변성](https://sustainable-dev.tistory.com/156) - [티스토리 참고](https://codechasseur.tistory.com/105) - [vscode 함수](http://www.tcpschool.com/html-tag-attrs/input-placeholder) # 22_08_01 >> - useEffect 훅 # 22_08_02 >> - < css > white-space : nowrap overflow : scroll ; auto ; hidden text-overflow : ellipsis; # 22_08_03 >> [react 입문](https://react.vlpt.us/basic/) # 22_08_05 >> - 비구조화 할당 # 22_08_10 >> [리액트 라우터 돔](https://goddaehee.tistory.com/305) 자바 기초 git flow [인프런](https://www.inflearn.com/course/%EB%94%B0%EB%9D%BC%ED%95%98%EB%8A%94-%EB%A6%AC%EC%95%A1%ED%8A%B8) https://code.oa.gg/java8/1933 # 22_08_11 >> [react 타이틀 변경](https://toramko.tistory.com/entry/react-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%ED%83%AD-%EC%95%84%EC%9D%B4%EC%BD%98favicon-%EC%A0%9C%EB%AA%A9title-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0) [깃 연동](https://taeminator1.tistory.com/62) # 22_08_16 >> 자바 ```java package com.example.myjavaproject; public class Main { public static void main(String[] args) { // 자동차 b자동차; // b자동차 = new 자동차(); // b자동차.최고속력 = 150; // System.out.println(a자동차.name); // System.out.println(a자동차.color); // System.out.println("a자동차의 최고속력은 " + a자동차.최고속력 + "km/h 입니다."); // System.out.println("b자동차의 최고속력은 " + b자동차.최고속력 + "km/h 입니다."); // 자동차 승용차 = new 자동차 (); // 승용차.최고속력 = 230; // 승용차.번호 = 1; // // 자동차 트럭 = new 자동차 (); // 트럭.최고속력 = 210; // 트럭.번호 = 2; // // 승용차.달리다(); // 트럭.달리다(); 자동차.달리다(); } } class 자동차 { // class (설계도) => 변수생성, 객체 // int 최고속력; // int 번호; // void 달리다() { //void : return타입 메서드 // System.out.println(번호 +"번 자동차가 최고속력 " + 최고속력 + "km로 달립니다."); //} public static void 달리다 () { System.out.println("자동차가 달립니다."); } } ``` # 스크롤시 페이드인 [참고사이트](https://kutar37.tistory.com/entry/%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%8A%A4%ED%81%AC%EB%A1%A4%EC%8B%9C-Fade-In-%ED%9A%A8%EA%B3%BC%EC%A3%BC%EA%B8%B0) [제이쿼리 설치](http://lwiesel.github.io/jquery-fadethis/) # 자바 n부터 m까지 더하는 코드 ```java package com.example.myjavaproject; public class Main { public static void main(String[] args) { int 결과1 = Math.nToSum(2, 3); System.out.println("결과 1 : " + 결과1); int 결과2 = Math.nToSum(5, 10); System.out.println("결과 2 : " + 결과2); } } class Math { static int nToSum(int a, int b) { int result = 0; for (int i = a; i <= b; i++) { result += i ; } return result; } } ``` # 상속 메서드 호출 ```java public class Main { public static void main(String[] args) { 사람 a사람 = new 사람(); a사람.숨쉬다(); } } class 동물 { static void 숨쉬다() { System.out.println("숨쉬다."); } } class 사람 extends 동물{ // A is B 관계일 때 상속가능함 ex> 사람은 동물이다(O), 동물은 사람이다 (X) }; ``` # 메서드 오버라이딩 ```java public class Main { public static void main(String[] args) { 청둥오리 a청둥오리 = new 청둥오리(); a청둥오리.날다(); 흰오리 a흰오리 = new 흰오리(); a흰오리.날다(); // 출력 : 오리가 날개로 날아갑니다. 고무오리 a고무오리 = new 고무오리(); a고무오리.날다(); // 출력 : 저는 날 수 없어요. ㅜㅠ } } class 오리 { void 날다() { System.out.println("오리가 날개로 날아갑니다."); } } class 청둥오리 extends 오리{ } class 흰오리 extends 오리 { } class 고무오리 extends 오리{ // 메서드 오버라이딩 => 부모가 가진 값을 사용하지 않고 재정의한다. void 날다() { System.out.println("저는 날 수 없어요. ㅜㅠ"); } } ``` [fadein](https://ungdoli0916.tistory.com/875) # 220819 java ```java public class Main { public static void main(String[] args) { 전사 a전사 = new 전사(); a전사.공격("브라이언", "칼"); // 브라이언이(가) 칼(으)로 공격합니다. a전사.공격("필립", "창"); // 필립이(가) 창(으)로 공격합니다. a전사.공격("마크", "지팡이"); // 마크(가) 지팡이(으)로 공격합니다. a전사.재공격(); // 브라이언이(가) 칼(으)로 공격합니다. a전사.재공격(); // 마크(가) 지팡이(으)로 공격합니다. } } class 전사 { String 이름; String 무기; void 공격(String 이름, String 무기) { this.이름 = 이름; this.무기 = 무기; 재공격(); } void 재공격 () { System.out.printf("%s(이)가 %s(으)로 공격합니다! \n", 이름, 무기); } } ``` [슬라이드 제이쿼리](https://programmer93.tistory.com/34) # 카카오뱅크 모작 위캔 사이트 [1](https://slog.gg/p/7732) # 슬릭슬라이드 관련 블로그 [참고](https://velog.io/@hoje15v/React-Slick%EC%9C%BC%EB%A1%9C-%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0) # 220824 자바 중국집 배달 ```java class Main { public static void main(String[] args) { 사람 a김철수 = new 김철수(); 사람 a김영희 = new 김영희(); a김철수.배달_음식_주문하다(); // 영화반점에서 김철수(010-1234-1234)에게 매운 짬뽕(을)를 배달합니다. a김영희.배달_음식_주문하다(); // 북경반점에서 김영희(010-4321-4321)에게 안매운 짬뽕(을)를 배달합니다. a김영희.a좋아하는_음식점 = a김철수.a좋아하는_음식점; a김영희.선호하는_음식의_매운정도 = "아주 매운"; a김영희.선호하는_음식 = "짜장"; a김영희.배달_음식_주문하다(); // 영화반점에서 김영희(010-4321-4321)에게 아주 매운 짜장(을)를 배달합니다. } } class 사람 { String 이름; String 전화번호; String 선호하는_음식의_매운정도; String 선호하는_음식; 음식점 a좋아하는_음식점; void 배달_음식_주문하다() { a좋아하는_음식점.주문(이름, 전화번호, 선호하는_음식의_매운정도, 선호하는_음식); } } class 김철수 extends 사람 { 김철수() { 이름 = "김철수"; 전화번호 = "010-1234-1234"; 선호하는_음식의_매운정도 = "매운"; 선호하는_음식 = "짬뽕"; a좋아하는_음식점 = new 영화반점(); } } class 김영희 extends 사람 { 김영희 () { 이름 = "김영희"; 전화번호 = "010-4321-4321"; 선호하는_음식의_매운정도 = "안매운"; 선호하는_음식 = "짬뽕"; a좋아하는_음식점 = new 북경반점(); } } class 음식점 { String 음식점_이름; void 주문(String 주문자명, String 주문자_전화번호, String 맵기, String 음식) { System.out.printf("%s에서 %s(%s)에게 %s %s(을)를 배달합니다.\n", 음식점_이름, 주문자명, 주문자_전화번호, 맵기, 음식); } } class 영화반점 extends 음식점 { 영화반점() { 음식점_이름 = "영화반점"; } } class 북경반점 extends 음식점 { 북경반점() { 음식점_이름 = "북경반점"; } } ``` # 220824 매개변수사용X ```java class Main { public static void main(String[] args) { 전사 a전사 = new 전사(); String 이름 = "칸"; a전사.이름 = 이름; a전사.나이 = 20; a전사.자기소개(); a전사.나이++; a전사.자기소개(); a전사.나이 = 30; a전사.이름 = "카니"; a전사.자기소개(); a전사.a무기 = new 활(); a전사.공격(); // 출력 : 카니가 활로 공격합니다. a전사.a무기 = new 칼(); a전사.공격(); // 출력 : 카니가 칼로 공격합니다. } } class 전사 { String 이름; int 나이; 무기 a무기; void 자기소개 () { System.out.printf("안녕하세요. 저는 %d살 %s입니다.\n", 나이, 이름); } void 공격() { a무기.사용자_이름 = this.이름; a무기.작동(); } } class 무기 { String 무기_이름; String 사용자_이름; void 작동() { System.out.printf("%s(이)가 %s로 공격합니다.\n", 사용자_이름, 무기_이름); } } class 활 extends 무기 { 활() { 무기_이름 = "활"; } } class 칼 extends 무기 { 칼() { 무기_이름 = "칼"; } } ``` # 22_08_29 [https://code.oa.gg/java8/1960](https://code.oa.gg/java8/1960) ~ 1962 [추상화 유튜브](https://www.youtube.com/watch?v=M3zlc6jiB5o)