$$config title: 공부 LOG keywords: - IT - 개인공부 - 백준 코드 실험 사이트(https://www.jdoodle.com/execute-nodejs-online/) $$ - [공부LOG 유튜브](https://to2.kr/dGU) [개인 공부영상 유튜브](https://to2.kr/dGZ) [테일윈드 및 다른 라이브러리 검색사이트](https://cdnjs.com/) [테일윈드 치트시트](https://nerdcave.com/tailwind-cheat-sheet) ## github 다른 곳에서 작업한거 가져오기 1.mkdir 폴더 이름 => 2.cd 폴더 이름(폴더로 이동) = >git clone github주소 . => import로 파일 가져오기 # 2022년 10월 11일 ## ToDoList 예제 기능들 - TouchableOpacity => 클릭 시 글씨체의 깜빡임을 확인 할 수 있다. Button의 경우 안드로이드와 ios 차이가 있어서 버튼 깜빡임은 `TouchableOpacity`를 씀 - onPress => 버튼을 클릭했을 때 이벤트 발생을 시키기 위한 함수 - secureTextEntry => 비밀번호 입력 시 보안을 위해서 텍스트가 보이지 않고 점으로 보이게 한다. - autoCapitalize => 모바일에서 키보드 입력 시 첫번째 문자는 무조건 대문자로 입력하게 된다. - Asyncstorage => 앱이 꺼져도 데이터베이스는 남아있듯이 똑같이 어싱크스토리지에 값을 저장하고 앱을 꺼도 데이터가 저장되어있는 개념입니다. # 2022년 10월 05일 - Location.getCurrentPositionAsync(options) => 사용자의 현재 위치를 1회성으로 전달하도록 요청합니다. - Location.watchPositionAsync(options, callback) => 사용자의 위치 실시간으로 보여줌 - Location.geocodeAsync(address, options) => 주소 문자열을 위도, 경도로 표시해줌 ## 날씨 API[날씨 API](https://openweathermap.org/api/one-call-3) - API_KEY는 서버에 저장하여 숨겨두어야 한다. # 2022년 10월 03일 - view 는 기본적으로 Flex Container를 가지고 있다. - flex의 기본값은 column(수직)으로 설정되어 있다. - flexbox는 부모의 역할이 중요하다. - ScrollView 에는 Flex 가 필요없다. 왜냐하면 ScrollView는 항상 스크린보다 커야하기 때문에 - window의 개발자 메뉴처럼 모바일은 inspector를 보면 element 상태를 볼 수 있다. - 내 에뮬레이터의 width, height 크기를 알아볼 때는 const SCREEN_WIDTH = Dimensions.get('window').width; 을 사용하자. - PagingEnabled => true인 경우 스크롤할 때 스크롤 보기가 스크롤 보기 크기의 배수에서 멈춥니다.(스크롤이 중간에 멈출경우 이전으로 돌아감) - persistentScrollbar={true} 스크롤바가 투명해지지 않게 하는 props - showsHorizontalScrollIndicator = {false} 스크롤바를 투명하게 만드는 props # 2022년 06월 27일 - 에라토스 테네스의 체 => n을 제외한 n의 배수를 제외시키면서 소수를 찾는 방식 - ArrayList, .add / .remove / .get() # 2022년 06월 26일 ## 스프링부트 파일 github에서 가져오는 방법 1.git 명령어를 통해 제일 마지막에 저장한 파일을 가져온다. ``` 1. git clone https://github.com/chuchu02/sb_c_2022_2nd . 2. git user.name "chuchu02" 3. git user.email "rlaxogns73@gmail.com" 4. git pull origin master ``` 2.sts.exe로 들어와서 File => import를 하여 생성된 파일을 불러온다. ## 스프링부트 run 할 때 문제점 - pakage의 이름이 다를 경우 실행은 되지만 localhost:8080/usr/home/main에 접속 시 오류가 뜸 ## MVC 개념 - 실행순서는 C(Controller) M(Service, Reporsitory, DB) V(JSP) ## 스프링부트에서의 /usr/home/main - UsrHomeController { } => 일반 사용자가 사용하는 화면의 컨트롤러 - UsrArticleController {} => 일반 사용자의 게시물을 관리하는 컨트롤러 - AdmHomeController {} => 관리자가 사용하는 화면의 컨트롤러 # JAVA 다형성 ## 다형성의 장점 1.코드의 재사용성이 용이하다.(객체를 재사용하기 쉬워지기 떄문에) 2.유지보수가 쉽다.(여러 객체를 하나의 타입으로 관리하기 때문에) 3.결합도가 낮아져서 클래스간의 의존성가 낮아지고 안전성이 높아진다. # instanceof - 객체 타입을 확인하는 연산자 - Tiger 클래스가 Animal 클래스를 상속 받았으므로 animal은 Tiger 의 객체가 될 수 있다. ```java ...생략 class Bouncer { void barkAnimal(Animal animal) { // 리턴값 메소드(클래스 객체) if(animal instanceof Tiger) { // 객체 instanceof 클래스 System.out.println("어흥"); } else if (animal instanceof Lion) { // 객체 instanceof 클래스 System.out.println("으르렁"); } } } ...생략 ``` ## 추상 클래스 - 하나 이상의 추상 메소드를 가지고 있는 클래스를 추상 클래스라고 한다. - 추상 클래스를 만들기 위해서는 class 앞에 `abstarct` 라고 표기한다. - 추상클래스에 선언된 메소드도 interface의 메소드와 같이 반드시 구현되어야 한다. ```java // 추상 클래스 문법 abstarct class 클래스명 { abstarct 반환타입 메서드명(); } ``` ## 추상클래스 사용 목적 - 1. 공통된 필드와 메서드를 통일할 목적 => 필드와 메서드 이름을 통일하여 유지보수성을 높이고 통일성을 유지 - 2. 실체 클래스 구현시 시간절약 => 강제로 주어지는 필드와 메서드를 가지고 나만의 스타일대로 구현만 하면 된다. - 3. 규격에 맞는 실체클래스 구현 => 규격에 맞게 소스가 구현되어 있기 때문에 해당 규격에 대한 구현부만 수정하면 손 쉽게 수정이 가능하기 때문이다. # 2022년 06월 23일 ## 생성자 기초 # 생성자 - 객체의 생성과 동시에 원하는 값으로 초기화 할수 있는 작업 - 클래스명과 메서드 명이 동일하고 리턴 자료형을 정의하지 않는 메소드를 생성자라고 한다. - 객체가 생성될 때 호출된다. ```java (... 생략 ...) class HouseDog extends Dog { HouseDog(String name) { // 클래스의 이름과 메서드의 이름이 동일 this.setName(name); } void sleep() { System.out.println(this.name + " zzz in house"); } void sleep(int hour) { System.out.println(this.name + " zzz in house for " + hour + " hours"); } } (... 생략 ...) ``` ## 생성자의 규칙 1.클래스명과 메서드명이 동일해야 한다. 2.리턴타입을 정의하지 않는다.(void도 사용하지 않는다.) ## 생성자 호출 방법 ``` HouseDog dog = new HouseDog(입력 인수,...); HouseDog dog = new HouseDog("happy"); // String name을 인수로 넣어서 String 입력값을 넣는다. ``` ?만약 입력인수가 없으면 오류가 발생한다. ```java HouseDog dog = new HouseDog(); // 입력인수가 없으면... // 오류 발생 constructor HouseDog in class HouseDog cannot be applied to given types; required: java.lang.String found: no arguments reason: actual and formal argument lists differ in length ``` # 디폴트 생성자 - 생성자의 입력 항목이 없고 생성자 내부에 아무 내용이 없는 위와 같은 생성자를 디폴트 생성자라고 부른다. ```java (생략)..... class Dog extends Animal { // Animal 클래스를 상속받는 Dog 클래스 Dog() { // 생성자 입력항목이 없고 내부에도 아무것도 없다. } void sleep() { System.out.println(this.name + " zzz"); } } (생략).... ``` # 생성자 오버로딩 - 하나의 클래스에 여러개의 입력항목이 다른 생성자를 만들 수 있다. ```java (생략).... class HouseDog extends Dog { HouseDog(String name) { this.setName(name); } HouseDog(int type) { // 같은 메서드명의 입력항목만 다르게 한다. if(type == 1){ this.setName("yourkshire"); } else if (type == 2) { this.setName("bulldog"); } } void sleep() { System.out.println(this.name + " zzz in house"); } void sleep(int hour){ System.out.println(this.name+" zzz in house for " + hour + " hours"); } } public class Main { public static void main(String[] args) { HouseDog happy = new HouseDog("happy"); HouseDog yorkshire = new HouseDog(1); System.out.println(happy.name); System.out.println(yorkshire.name); } } ``` ## 인터페이스 - 동일한 목적 하에 동일한 기능을 사용할 수 있게끔 강제하는 것이 인터페이스의 역할이다. - 자바의 다형성을 극대화하여 개발코드 수정을 줄이고 프로그램 유지보수성을 높이기 위해 인터페이스를 사용한다. - class와 마찬가지로 단독파일로 저장하는 것이 일반적이다. ```java // 인터페이스 추가 방법 interface Predator { // interface 키워드 사용하여 생성 } class Animal { String name; void setName(String name) { this.name = name; } } ``` ## 인터페이스 구현방법 - 클래스 뒤에 implements 키워드를 사용하여 구현한다. ```java class Tiger extends Animal implements Predator{ } class Lion extends Animal implements Predator{ } ``` ## 인터페이스 구현 후 feed 메서드 변경 변경 전 - feed 메서드 안에 입력값이 타이거 클래스가 필요했다. ```java class ZooKeeper { void feed(Tiger tiger) { // 호랑이가 오면 사과를 던져 준다. System.out.println("feed apple"); } void feed(Lion lion) { // 사자가 오면 바나나를 던져준다. System.out.println("feed banana"); } } ``` 변경 후 - feed 메서드 안에 입력값이 인터페이스로 변경 - feed 메서드의 중복이 없어지고 원하는 클래스에 implements를 해주면 된다. ```java class ZooKeeper { void feed(Predator predator) { System.out.println("feed apple"); } } ``` ?tiger와 lion은 Tiger, Lion의 객체이기도 하지만 Predator의 객체이기도 하기 때문에 대체가 가능하다. # 인터페이스의 메서드 - 인터페이스의 메소드는 메소드의 이름과 입출력에 대한 정의만 있고 그 내용은 없다. - 인터페이스의 메소드의 구현은 인터페이스를 implements한 클래스에서 구현해야 한다. ```java interface Predator { String getFood(); } ``` 구현 --- ```java (... 생략 ...) class Tiger extends Animal implements Predator { public String getFood() { return "apple"; } } class Lion extends Animal implements Predator { public String getFood() { return "banana"; } } (... 생략 ...) ``` ?인터페이스의 메소드는 항상 public으로 구현해야 한다. ```java (... 생략 ...) class ZooKeeper { void feed(Predator predator) { System.out.println("feed "+predator.getFood()); // 객체.메서드명() 으로 호출 } } (... 생략 ...) ``` # 2022년 06월 10일 ## 계산기 클래스에서 쓰인 여러가지 자바 String 메서드 - charAt() = > String문자열을 char 문자 하나로 변환시켜 주는것 - substring(startindex, endindex) => 입력받는 문자열을 시작 index 부터 endindex 전까지 리턴해주는 것. - trim() => 공백을 제거해주는 것. ## html 목록 만들기 ### ul 태그 = > ubordered list의 약자로 순서가 필요없는 목록 / li 태그 => ul항목을 나열할 때 사용 ```html

사과
바나나
수박

``` ### ol 태그 => ordered list의 약자로 순서가 있는 목록 ```html

사과
바나나
수박

``` # 2022년 06월 08일 ## 코드 짜는 순서 - 오류 / 수습 / 개선 1.오류를 발생시킨다 = > 아직 존재하지 않는 클래스나 메서드를 상요하는 코드를 작성. 2.오류가 사라지게 만든다. => 정확하게 동작하지 않다도 된다. 컴파일 에러만 잡으면 된다. 3.정리한다. => 소스코드를 정리하고, 로직을 구현한다. # 2022년 06월 07일 ## border-radius - `border-radius` 속성은 요소 테두리의 경계의 꼭짓점을 둥글게 만든다. ```css border-radius : [top-left] [top-right] [bottom-right] [bottom-left] // 4개 일때 border-radius : [top-left] [top-right,bottom-left][bottom-right] // 3개일때 border-radius : [top-left, bottom-right] [ top-right, bottom-left] // 2개일때 ``` ## cursor - `cursor`요소 위에 마우스 커서가 올라갔을 때 보여줄 모양을 지정 [cursor 속성들](https://developer.mozilla.org/ko/docs/Web/CSS/cursor) ## inherit - `inherit` 키워드를 사용한 속성은 부모 요소로부터 해당 속성의 계산값을 받아 사용. ```html 홈으로

메뉴를 클릭하세요.

게시판으로 가기

``` ``` css a { color: blue; } div { color: orange; } div a { color: inherit; } ``` - `

` 밖 `` 태그는 파란색으로 `

` 안쪽 `

`태그는 주황색 그 아래 ``태그는 div의 속성을 이어받아 주황색으로 표시된다. # 2022년 06월 02일 # 이미지 적용방법 - 어떤 이미지에 마우스 우클릭 후 이미지 주소 복사 - ``를 이용하여 주소 붙여넣기 ## img src - 이미지는 기본적으로 inline 속성이다. ## 이미지 엘리먼트 스타일 속성 ```css img{ width : $px; height : $px; } ``` ?이미지 크기 를 width만 적용 시 비율에 맞게 적용 되지만 height를 같이 적용해주는 경우 높이를 조절한다. ## object fit - `object-fit` 속성은 대체되는 요소의 내용`(,