· 오늘 공부한 것

IntelliJ 설치

Java 타입과 변수 정리

·  공부한 내용, 궁금한 내용, 부족한 내용

JDK (Java Development Kit)

1. JRE (Java Runtime Environment) 자바 실행 환경

2. .java 파일들을 .class 파일들로 변환해 주는 Java Compiler 기능

3. 디버깅 (jdb)

기본형, 참조형 변수

• 기본형 : 논리형(true or false), 문자형('A'), 정수형(1), 실수형(1.0

• 정수형 => byte(1) < short(2) < int(4) < long(8)
• 실수형 => float(4) < double(8)
• 실수형이 정수형보다 범위가 훨씬 넓다. 이는 부동 소수점 방식을 사용하기 때문이다.

• 참조형: 문자열(Strin), Object, Array, List...

변수 타입 바꾸기 (형변환)

자동 형변환

1. 작은 크기의 타입에서 큰 크기의 타입으로 저장될 때

2. 작은 크기의 타입과 큰 크기의 타입이 계산될 때

· 오늘 서칭 한 자료

강의 자료

· 느낀 점

자바스크립트를 사용하다 자바를 해보니 타입도 지정해줘야 하고 먼가 확실히 입력해 줘야 오류 없이 실행되는 느낌이 들었다.

strict 해서 코드 작성할 때 쉽지 않아 보이지만 확실하게 지정하기 때문에 완성된 코드를 읽기는 더 편할 거 같다.

아직 console.log()로 뭔가를 출력하려 한다... System.out.println() 익숙하지 않다.

· 오늘 공부한 것

프로그래머스에서 스킬체크 입문자 테스트

깃헙에 TIL 레포지토리 생성

· 공부한 내용, 궁금한 내용, 부족한 내용

코딩 테스트에서 마지막 문제가 스테이지별 실패율을 구해서 실패율이 높은 스테이지순으로 정렬한 결과를 내는 것이었다. 여기서 실패율은 (해당 스테이지에 머무르고 있는 사람들 / 해당 스테이지를 도달한 사람들)로 구할 수 있었다. 매개변수로는 전체 스테이지 수인 N 값과 전체 인원들이 머무르고 있는 스테이지를 배열 stages 값이 있었다.

function solution(N, stages) {
    var answer = [];
    return answer;
}

해결 방법으로는 1 ~ N까지 for문을 돌리면서 이중 반복문을 통해서 stages에 있는 값들을 돌면서 통과했는지 머무르고 있는지에 따른 값을 각각에 저장해서 반복문이 끝나고 나서 실패율을 구한 값을 빈 배열에 넣었다. 이렇게 해서 스테이지별 실패율이 있는 배열을 구할 수 있었다.

function solution(N, stages) {
    let answer = [];
    let fail = [];
    let reach = 0;
    let pass = 0;
    for (let stage = 1; stage <= N; stage++) {
    	for (let i = 0; i < stages.length; i++) {
        	if (stages[i] > stage) {
            	pass += 1;
            }	else if (stages[i] === stage) {
            	reach += 1;
            }
        }
        fail.push(reach / (reach + pass))
        reach = 0;
        pass = 0;
    }
	return answer;
}

이렇게 구한 스테이지별 실패율이 있는 배열을 보고 실패율이 높은 스테이지부터 정렬해야 했다. 만약 실패율이 같다면 낮은 스테이지부터 나오게 해야 한다. 그래서 실패율이 있는 배열을 while문으로 돌리면서 해당 값이 max값이면 인덱스 값에 +1을 해서 answer 배열에 넣었다. 그렇게 최대 실패율 스테이지가 answer에 들어가게 되면 해당 스테이지의 실패율을 -1으로 만들었다. 그래야 다음 최대 실패율이 바뀌기 때문이다.

function solution(N, stages) {
    let answer = [];
    let fail = [];
    let reach = 0;
    let pass = 0;
    
    for (let stage = 1; stage <= N; stage++) {
    	for (let i = 0; i < stages.length; i++) {
        	if (stages[i] > stage) {
            	pass += 1;
            }	else if (stages[i] === stage) {
            	reach += 1;
            } 
        }
        fail.push(reach / (reach + pass))
        reach = 0;
        pass = 0;
    }
    
    let idx = 0;
    while (Math.max(...fail) > -1) {
      if (Math.max(...fail) === fail[idx]) {
        answer.push(idx + 1);
        fail = [...fail.slice(0, idx), -1, ...fail.slice(idx + 1, fail.length)];
        idx = 0;
      } else {
        idx += 1;
      }
    }
    
	return answer;
}

· 오늘 서칭 한 자료

https://programmers.co.kr/skill_checks

https://github.com/lsj135779/Today-I-Learned

· 느낀 점

TIL을 블로그에도 남기고 깃헙에도 올리는 식으로 하면 마크다운 문법도 계속 익히고 commit도 남길 수 있을 거 같다.

오랜만에 알고리즘을 풀다 보니 보이는 그대로 일단 코딩을 작성해서 효율적이지는 않았다. 그래도 확실히 문제해결능력은 많이 발달하는 느낌이다.

지금은 자바스크립트로 알고리즘 문제를 해결하고 있는데 빨리 java 문법을 익혀서 java로 풀어봐야겠다.

· 오늘 공부한 것

SQL문을 복습

새로운 데이터베이스 관리 프로그램 DBeaver 사용

· 공부한 내용, 궁금한 내용, 부족한 내용

전에 사용했던 데이터베이스 관리 프로그램은 Sequel Pro, MySQLWorkbench, MongoDB Compass, Robo 3T 들이 있었다. 관계형과 비관계형 DB에 따라 사용해 본 경험이 있다. 그리고 프론트엔드를 집중적으로 하다 보니 잘 안 쓰게 되면서 사용법들을 까먹었는데 좋은 복습 기회가 되었다. 그리고 이번에 사용한 DBeaver의 경우 사용해 보니 UI도 직관적이어서 좋았고 자동완성 기능이 있어 쉽게 사용할 수 있었다. 관계형 DB를 사용할 때 자주 이용할 거 같다. 하지만 아직 DB연결이나 다양한 활용법은 더 익혀야겠다.

SQL문을 공부하면서 기본적인 select, from, where, join, group by, order by 등은 쉽게 사용할 수 있었는데 서브쿼리개념과 with, case 등 충분히 생각해야 하는 것들이 있었다. 특히 여러 테이블을 거쳐서 나오는 결괏값을 얻기 위해서는 다양한 조합으로 쿼리문을 작성해야 했다. 하지만 길을 많고 내가 원하는 결괏값을 얻으면 되는 것이다.

아래는 학습하면서 다양한 문법을 사용한 예시이다.

수강등록정보(enrolled_id)별 전체 강의 수와 들은 강의의 수, 그리고 진도율 출력해보기

with table1 as (
    select enrolled_id, count(*) as done_cnt from enrolleds_detail
    where done = 1
    group by enrolled_id
), table2 as (
    select enrolled_id, count(*) as total_cnt from enrolleds_detail
    group by enrolled_id
)

select a.enrolled_id,
       a.done_cnt,
       b.total_cnt,
       round(a.done_cnt/b.total_cnt,2) as ratio
  from table1 a
 inner join table2 b on a.enrolled_id = b.enrolled_id

· 오늘 서칭 한 자료

스파르타코딩클럽 강의로 대체

· 느낀 점

백엔드로 취업방향성을 정했으므로 DB와 친해져야 한다. 물론 그것을 관리하는 프로그램도 잘 다룰 줄 알아야 한다고 느꼈다.

SQL 문을 사용하여 원하는 데이터를 얻는 능력이 굉장하다고 생각한다. 필수!!

· 오늘 공부한 것

깃헙 README파일을 마크다운문법을 사용해서 업데이트

자바 기본 개념을 학습

· 공부한 내용, 궁금한 내용, 부족한 내용

전에 사용하던 javascript는 함수식을 많이 사용했는데 java의 경우 class를 사용하기 때문에 객체지향형을 많이 학습해야겠다.

깃헙페이지를 꾸미기 위해 마크다운문법을 사용해 보았는데 확실히 사용법은 간단했지만 익숙하지는 않았다. 그리고 깃헙페이지를 꾸미기 위해 필요한 도구들이 있는 사이트들도 많이 있다는 것을 알았다. 사용한 기술을 표현하는 이미지 아이콘도 외부에서 가져와 사용할 수 있었다.

README파일을 업데이트하면서 이미지에 링크를 거는 작업을 해보았다. 시행착오를 겪으면서 태그형태로도 써보고 마크다운문법으로도 사용해 보았다. 태그형태로 사용할 경우 이미지 크기도 바꿀 수 있었다. 그리고 밑에 3개 중에 2개는 이미지를 업로드하고 나온 주소로 바로 사용을 하였더니 원하는 유튜브링크가 아니라 amazon s3에 업로드되어 있는 이미지 주소로 이동이 되었다. 그래서 결국 해결 방법으로 그 주소로 다시 이미지 주소를 변경했더니 원하는 링크 주소로 이동할 수 있었다. 결국 페이지에 처음 업로드 할 때 나온 주소는 깃헙 내에 assets에 임시 저장된 것을 보여주는 것이었다. 확실히 이미지로 링크를 걸기 위해서는 이미지가 업로드된 확실한 주소를 가져와서 사용해야 하는 것이었다. 사소한 실수였지만 해결하는 과정에서 다양한 표현방법도 알 수 있었고 확실히 이해하고 넘어갈 수 있었다.

· 오늘 서칭 한 자료

https://gist.github.com/ninanung/2b81a5db946c26c98c573e3662a92b62

https://gist.github.com/ihoneymon/652be052a0727ad59601#24-%EC%BD%94%EB%93%9C

https://nbcamp.gitbook.io/java-handbook/

· 느낀 점

마크다운 문법을 한번 익혀서 사용해 보니 나중에 자주 사용할 거 같고 지금 블로그에 쓰고 있는 TIL 같은 것도 깃헙에 쓸 수 있을 거 같다. 그러면 깃헙에 잔디도 자주 심을 수 있을 거 같다.

앞으로는 백엔드로 취업의 방향성을 정했기 때문에 JAVA문법을 확실히 익혀야겠다.

· 오늘 공부한 것

숫자 문자 등을 자바스크립트에서 인코딩, 디코딩하는 방법과 아스키코드와 유니코드

비밀번호 sha256으로 암호화해서 firebase에 저장

firestore database에서 데이터를 가져올 때 날짜순으로 가져오기 (쿼리, 정렬)

· 공부한 내용, 궁금한 내용, 부족한 내용

관리자페이지로 접속할 때 비밀번호를 사용하는데 이게 1234로 그대로 문서에 들어가 있었다. 그래서 인코딩하는 방법을 알아보았는데 비밀번호의 경우 남들이 알 수 없어야 했기에 복호화가 불가능한 것을 찾아보았다. 그래서 전에 react에서 crypto-js에서 sha256을 사용한 경험이 있어서 사용해 보았다. 복호화가 불가능하다고는 하지만 1234와 같은 쉽거나 자주 사용되는 비밀번호의 경우는 충분히 가능하다. 비밀번호를 어렵게 설정해야 하는 이유이다. 검색과정 중에 자바스크립트에서 인코딩하는 방법과 아스키코드도 학습했다. 영어 대소문자, 숫자, 특수기호등을 표현하는데 한글, 한자등을 표현하기 위해서 사용되는 유니코드까지 알아 보았다.

프로젝트과정에서 방명록 데이터를 가져왔는데 순서가 랜덤으로 생기다 보니 방명록이 원하는 데로 붙지 않았다. 그래서 최신 방명록이 제일 상단에 보일 수 있도록 쿼리문을 사용해서 저장할 때 넣은 date로 내림차순으로 데이터들을 가져왔다.

· 오늘 서칭 한 자료

https://firebase.google.com/docs/firestore/query-data/queries?hl=ko 

https://devje.tistory.com/181

https://velog.io/@seeh_h/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%AC%B8%EC%9E%90%EC%97%B4%EC%9D%98-%EC%9D%B8%EC%BD%94%EB%94%A9-%EB%94%94%EC%BD%94%EB%94%A9

· 느낀 점

중요하게 다뤄져야 하는 개인정보나 비밀번호와 같은 데이터는 암호화 과정을 통해서 확실히 보안에 신경 써야 한다고 생각한다.

정보를 데이터베이스에 저장하는 것도 중요하지만 저장된 데이터를 원하는 형태로 가져오는 것도 중요하다.

새로운 것을 학습할 때 이것이 왜 나오게 되었는지를 아는 것이 중요하다.

· 오늘 공부한 것

팀원 소개 페이지 제작(내일 배움 캠프 미니 프로젝트) : 구성한 와이어프레임으로 관리자페이지 제작(html, css 만 사용)

학습한 firebase를 프로젝트 내에 적용

학습한 jQuery를 사용해서 태그에 속성 부여

· 공부한 내용, 궁금한 내용, 부족한 내용

Firestore Database에서 자료를 가져올 때 getDocs를 사용해서 컬렉션 안에 있는 데이터를 모두 가져오고 getDoc은 하나의 내용을 가져오는데 이때 저장된 id를 통해서 가져올 수 있었다.

또한 전에 react를 사용할 때는 state에 가져온 정보를 저장해서 쉽게 사용할 수 있었는데 여기서는 html 태그에 가져온 id 정보를 저장해 보았다. 이 과정에서 객체 데이터를 한 번에 넣어 보려고 객체를 JSON 형태로 바꿔 보았는데 태그의 속성이 ""를 인식하다 보니 저장한 데이터 값이 { 으로 나왔다. 그 이유는 객체의 키값이 "로 시작하는데 data-id="{"name":"이승준", ....} 이런 식이다 보니 data-id 속성의 값이 "{" 이 형태로만 인식되어 나왔다. 그래서 id값만 넘기고 다시 firebase에 정보를 요청해서 받아오는 방식으로 해결하였다. 하지만 만약 객체가 저장이 됐어도 사용은 안 했을 거 같다. 왜냐하면 정보가 html 속성값에 들어가는 것은 말이 안 된다.

받아온 데이터로 화면 렌더링할 때 생성한 태그에 클릭 이벤트를 주는 방식을 찾아보았다. jQuery 다른 활용법들을 알고 싶다.

· 오늘 서칭 한 자료

https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute\

https://univdev.page/posts/firestore-read-data/

https://java119.tistory.com/87

· 느낀 점

jQuery를 사용하면 간단하기는 하지만 애상하지 못한 곳에서 막히는 경우가 아직은 있다.

아직 firebase에서 firestore Database만 사용하고 있는데 Storage도 자주 사용할 거 같다.

태그에서 data 속성을 이해할 수 있었는데 알고 넘어가는 정도지 자주 사용하지 않을 거 같다.

html css만으로 페이지를 구성해 보았는데 왜 react와 같은 웹 프레임워크가 개발되었는지 알 거 같았다.

css는 사용하는 것은 간단한데 동작이나 반응형까지 생각하면 계속 공부해야 할 거 같다.

https://prgms.tistory.com/129

템플릿

· 오늘 공부한 것

· 공부한 내용, 궁금한 내용, 부족한 내용

· 오늘 서칭 한 자료

· 느낀 점

· 오늘 공부한 것

Git & Github 기본 개념 및 기본 명령어

jQuery, fetch 기본 사용방법

Firebase에서 Firestore Database로 데이터 추가 및 가져오기

· 공부한 내용, 궁금한 내용, 부족한 내용

git pull과 fetch 차이 확실히 알기 - pull로 바로 받는 것보다 fetch사용 후 하는 것이 더 안전하다.

· 오늘 서칭 한 자료

https://7942yongdae.tistory.com/13

https://velog.io/@msung99/push-%EB%B8%8C%EB%9E%9C%EC%B9%98-%EA%B9%83%ED%94%8C%EB%A1%9C%EC%9A%B0-pull

https://proglish.tistory.com/152

· 느낀 점

git은 사용하면 할수록 모르는 부분이 계속 발견된다. 알았다고 생각해도 막상 사용하면 새로운 에러를 만나게 된다.

전에 프로젝트할 때 주로 axios를 사용했는데 오랜만에 fetch를 사용했다. 멀 사용 하든 잘 사용하기만 하면 좋다.

DOM조작에 있어서 긴 코드대신에 jQuery를 사용하니 훨씬 간단하지만 자주 사용해 봐야 익숙해질 거 같다.

DOM 이란 무엇인가?

• Document Object Model 의 약자이다.
• HTML 요소를 Object처럼 조작 할 수 있는 Model이다.

Achievement Goals

• DOM의 개념을 이해할 수 있다.
• DOM의 구조를 파악하고, HTML과 DOM이 어떻게 닮아있는지 알 수 있다.
• HTML에서 Javascript 파일을 불러올 때 주의점에 대해서 이해할 수 있다.
• <script> 태그가 적용되는 위치에 따라서 실행 결과가 달라질 수 있음을 이해할 수 있다.

DOM으로 HTML 조작하기

연습사이트

CREATE - createElement

const tweetDiv = document.createElement('div')

위와 같은 명령어를 쳐도 화면에는 변화가 없습니다.

div가 생기긴 했지만 아무것도 연결이 되어있지 않기 때문에 따로 떨어져 있습니다.

그래서 APPEND를 이용해서 웹 페이지 상에도 보이게 해야 합니다.

APPEND -append, appendChild

document.body.append(tweetDiv)

위와 같은 명령어를 입력하면 역시 웹 페이지에 아무것도 나오지 않습니다.

이 것은 개발자도구에서 확인하면 새로운 div가 생긴 것을 확인할 수 있지만 안에 아무런 내용이 없기 때문입니다.

그래서 UPDATE를 통해서 내용을 입력할 수 있습니다.

또한 우리가 원하는 위치에 생성한 div를 넣기 위해서는 container를 먼저 찾아야 합니다.

READ를 통해서 container를 찾을 수 있습니다.

READ - querySelector, querySelectorAll

const oneTweet = document.querySelector('.tweet')

위와 같은 명령어를 입력하면 클래스 이름이 tweet 인 HTML 엘리먼트 중 첫 번째 엘리먼트를 조회할 수 있습니다.

여러 개의 엘리먼트를 한 번에 가져오기 위해서는 querySelectorAll 을 사용합니다.

const tweets = document.querySelectorAll('.tweet')

오래된 방식의 get으로 시작하는 명령어도 있다. (getElementById, getElementByClassName, getElementByName 등)

const container = document.querySelector('#container')
container.append(tweetDiv)

위와 같이 입력하면 새로만든 div가 원하는 위치인 container 안에 들어가는 것을 확인할 수 있습니다.

UPDATE - textContent, classList.add

console.log(tweetDiv)
tweetDiv.textContent = 'div';
console.log(tweetDiv)

위와 같이 입력하면 새로만든 div에 dev라고 입력할 수 있다.

하지만 아직 CSS 스타일링이 적용되지 않았기 때문에 class를 추가해서 CSS가 적용될 수 있도록 해야한다.

tweetDiv.classList.add('tweet')
console.log(oneDiv)

class와 id 말고 다른 attribute를 추가하고 싶을 때는 setAttribute 라는 메소드를 사용한다.

Delete - remove, removeChild

tweetDiv.remove()

위와 같은 명령어를 치면 생성한 div가 사라지는 것을 확인할 수 있습니다.

여러개의 자식 엘리먼트를 지우기 위해서는 innerHTML을 이용할 수 있습니다.

document.querySelector('#container').innerHTML = '';

위와 같은 방식은 편하긴 하지만 보안에서 몇가지 문제를 가지고 있습니다.

대표적인 XSS(Cross-Site Scripting) 공격에 취약합니다. 이는 권한이 없는 사용자가 악의적인 용도로 웹 사이트에 스크립트를 삽입하는 공격 기법을 말합니다.

※ XSS의 공격 순서

  1. 해커가 사전에 만든 웹페이지에 사용자가 브라우저로 엑세스를 시도

  2. XSS공격 link가 포함된 웹페이지가 브라우저에 표시

  3. 사용자가 link를 클릭

  4. 사용자가 느끼지 못하는 사이 취약한 사이트에 있는 해커의 스크립트에 엑세스 됨

  5. 사용자의 웹브라우저 상에서 해커의 스크립트가 실행

removeChild 명령어를 반복문과 같이 활용해서 모든 자식 엘리먼트를 삭제할 수 있습니다.

while (container.firstChild) {
container.removeChild(container.firstChild);
}

하지만 위와 같이 입력하면 원하지 않은 Tweet List 까지 삭제되는 것을 볼 수 있습니다.

이것을 방지하기 위한 방법으로는 아래와 같습니다.

while (container.children.length > 1) {
container.removeChild(container.lastChild);
}

아니면 클래스 이름이 tweet인 엘리먼트들만 찾아서 지우는 방법도 있습니다.

const tweets = document.querySelectorAll('.tweet')
for (let tweet of tweets) {
tweet.remove()
}