jossiya

기간 : 2022.09.09 ~ 2022.09.13 (4일간 진행)
프로젝트명 : youcoding

1. 기획 배경

우리가 코딩을 시작하면 서 제일로 중요한 것은 기본 지식을 아는 것이긴 하지만, 그 지식으로 검색을 해서 자신이 원하는 검색 결과를 찾아내는 것이다. 그것을 글로보다는 영상으로 설명되어 있는 것을 보면서 더욱 쉽게 이해할수 있게 하는 자신이 원하는 언어 강의 동영상을 모아둔 사이트. 

기본 레이아웃

언어페이지 별로 들어가면 기본적으로 인기순의 유튜브 동영상이 뜬다.

2.나는 기본적인 페이지 전반으로 레이아웃(페이지 네비게이션바 및 레이아웃), 언어별 페이지를 구현

• 우선 언어별로 페이지를 작성
• 유튜브 API를 가져와 영상들의 정보를 DB에 저장
  ->유튜브 할당량으로 인한 API 유지가 불가능 하여 크롤링으로 대체 ㅜㅜ
• 페이지 정렬 조회수 좋아요 등록순 구현
  ->API 데이터 사용 불가로 크롤링으로 데이터를 가져오는 중 조회수 있는 데이터와 없는 데이터가 있어 인기순으로 교체.. 날짜도 들어오지 않음. 그래서 타이틀 오름차순 내림차순으로 교체
• 썸네일과 타이틀 클릭시 비디오 시청페이지로 링크 이동 하며 비디오 아이디를 url로 같이 넘김

3.깃헙 주소

https://github.com/jossiya/youcoding

4 배운것

• JWT인증 방식과 Jjnfa2 를 이용한 서버사이드 렌더링에 대해 알게되었고 서버쪽에서 정보를 어떻게 가져오고 이를 이용해 페이지이동을 더욱 쉽게 할 수 있다는 것을 알게 되었다.
• 아직 초기 단계이지만 협업으로 인한 팀원들간 커뮤니케이션을 하는 것이 중요하다는 것을 깨닫는 시간이 었고 자신이 모르는 것을 고민후 물어보고 팀원이 모르는것을 같이 찾아보면서 문제 해결해가는 방식을 배운 소중한 시간이었다. 

-jinja2

• Python에서 사용하는 데이터와 템플릿을 연결시켜주는 기능

-JWT

• 사용자에 대한 정보가 토큰 자체에 포함
• 저장소를 서버에 따로 만드는 세션/키 방식이 아니다. 요청이 많은 시 생기는 과부하를 줄여준다.
• 트레픽에 대한 부담이 낮아짐
• 쿠키에 대한 취약점이 사라짐

-API

• 웹 사이트 개발에 다른 서비스에 요청을 보내고 응답을 받기 위해 열려있는 일종의 은행창구 역할

-GITHUB

• 로컬저장소와와 원격저장소로 나누어 팀원들 또는 사용자들과 데이터를 공유 

5. 아쉬웠던점

프로젝트 기간이 4일밖에 되지 않아 자신이 원하는 기능을 온전히 구현하지 못한게 너무 아쉬웠다.

파이참이라는 IDE를 처음 써보기도 했고 파이선에 대해 많은 것을 알지 못해 어려움이 있었다.

또한 나혼자서 깃허브를 사용해보긴 했지만 깃허브에 콜라보레이션기능이 있는 것을 알았고 처음 써보는 것이기에 초반에

PUSH 및 PULL에 충돌로 인해 애를 먹었고 병합하는 과정에서도 코드들이 석여 애를 먹었다.

4일이라는 시간동안 자신이 알고있는 것과 구글링에 의해 개발하는 것은 상당히 익숙하지않아 힘이들었다. 그만큼 어렵고 정신 없었고 블로그를 통한 하루를 정리하는 시간을 가지며 자신이 모르는 것을 정리해가며 다시한번 머리에 새기는 것이 정말 좋다는 것을 깨달았다. 공부를 꾸준히하며 처음 정한 목표와 다짐을 잃지 않고 열심히 해서 훌륭한 개발자가 되고 싶다.

오늘도 코딩 테스트 연습!

Arrays.sort()는 오름차순으로 정령을 해준다.

Arrays.sort();

Colections.reverseOrder() 를 사용하면 내림차순으로 바꿔준다.

Arrays.sort(list, Collections.reverseOrder());

StringBuilder

자바에서 String 객체는 변경 불가능하다. 한 번 생성되면 내용을 바꿀 수 없단 뜻이다. 따라서 하나의 문자열을 다른 문자열과 연결하면 새 문자열이 생성되고, 이전 문자열은 가비지 컬렉터로 들어간다.

100만 개의 문자열을 연결해야 하는 상황이 왔다고 가정하자. 그리고 100만 개의 문자열을 추가로 생성했다고 하자.

문자열끼리 연결하는 작업 시에는 내부적으로 여러 작업이 발생하고, 기존 문자열 값의 길이에 추가된 문자열의 크기를 더한 크기의 새로운 문자열이 생성된다. 이걸 100만 번 수행해야 하니 메모리를 많이 잡아먹게 되는 건 어찌보면 그렇게 되겠구나 싶다.

이 경우 고려해볼 수 있는 것 중 하나가 이 포스팅의 주제인 StringBuilder다. Stirng은 변경 불가능한 문자열을 생성하지만 StringBuilder는 변경 가능한 문자열을 만들어 주기 때문에, String을 합치는 작업 시 하나의 대안이 될 수 있다.

간단한 사용법은 아래와 같다.

public class Main
{
    public static void main(String[] args)
    {
        StringBuilder stringBuilder = new StringBuilder();
        stringBuilder.append("문자열 ").append("연결");
//        String str = stringBuilder;   // String에 StringBuilder를 그대로 넣을 순 없다. toString()을 붙여야 한다
        String str = stringBuilder.toString();
        // 두 println()은 같은 값을 출력한다
        System.out.println(stringBuilder);
        System.out.println(str);
    }

}

제곱근

Math.sqrt() 제곱근 루트 구하는 메서드

public class MathSqrt {
	public static void main(String[] args) throws IOException  {		
		System.out.println("9의 제곱근 : " + Math.sqrt(9));				
		System.out.println("20의 제곱근 : " + Math.sqrt(20));				
		System.out.println("50의 제곱근 : " + Math.sqrt(50));					
		System.out.println("100의 제곱근 : " + Math.sqrt(100));			
		System.out.println("NaN의 제곱근 : " + Math.sqrt(Double.NaN));	
		System.out.println("-1의 제곱근 : " + Math.sqrt(-1));
	}
}

Math.pow ^기호를 의미하는 함수로

ex --> Math.pow(2.4)-> 결과 :16

          Math.pow(밑.지수)

stream 기본 사용법

자바8부터 Stream 을 사용 할 수 있습니다.

기존에 자바 컬렉션이나 배열의 원소를 가공할떄, for문, foreach 등으로 원소 하나씩 골라내여 가공을 하였다면,

Stream 을 이용하여 람다함수형식으로 간결하고 깔끔하게 요소들의 처리가 가능g.

스트림 사용법을 간단하게 알아보겠습니다.

배열의 원소를 가공하는데 있어

map, filter, sorted 등 이 있습니다.

map은 요소들을 특정조건에 해당하는 값으로 변환해 줍니다.

요소들을 대,소문자 변형 등 의 작업을 하고 싶을떄 사용 가능 합니다.

filter는 요소들을 조건에 따라 걸러내는 작업을 해줍니다.

길이의 제한, 특정문자포함 등 의 작업을 하고 싶을때 사용 가능합니다.

sorted는 요소들을 정렬해주는 작업을 해줍니다.

요소들의 가공이 끝났다면 리턴해줄 결과를 collect 를 통해 만들어줍니다. 

ArrayList<string> list = new ArrayList<>(Arrays.asList("Apple","Banana","Melon","Grape","Strawberry")); System.out.println(list);

//[Apple, Banana, Melon, Grape, Strawberry]

소문자 대문자로 바꾸기

list.stream().map(s->s.toUpperCase());

list.stream().map(String::toUpperCase);

collect-리턴 결과

forEach-하나씩 가각 작업

System.out.println(list.stream().map(s->s.toUpperCase()).collect(Collectors.joining(" ")));

//APPLE BANANA MELON GRAPE STRAWBERRY

System.out.println(list.stream().map(s->s.toUpperCase()).collect(Collectors.toList()));

//[APPLE, BANANA, MELON, GRAPE, STRAWBERRY] System.out.println(list.stream().map(String::toUpperCase).collect(Collectors.toList()));

//[APPLE, BANANA, MELON, GRAPE, STRAWBERRY]

list.stream().map(String::toUpperCase).forEach(s -> System.out.println(s));

//APPLE

//BANANA

//MELON

//GRAPE

//STRAWBERRY

filter 는 요소를 특정 기준으로 걸러냄

list.stream().filter(t->t.length()>5)

길이 5이상

System.out.println(list.stream().filter(t->t.length()>5).collect(Collectors.joining(" "))); //Banana Strawberry System.out.println(list.stream().filter(t->t.length()>5).collect(Collectors.toList())); //[Banana, Strawberry]

오늘부터는 주특기 별로 이제 시작한다.

코딩테스트 

시작 인덱스 ,인댁스

substring(0,n);

String a = "무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세 ";	
//replace([기존문자],[바꿀문자])
a= a.replace("대한", "민국");	
System.out.println(a);

다음은 getOrDefault 메서드의 사용법입니다.

import java.util.HashMap;

public class MapGetOrDefaultEx {
	public static void main(String arg[]) {
		String [] alphabet = { "A", "B", "C" ,"A"};
		HashMap<String, Integer> hm = new HashMap<>();
		for(String key : alphabet) hm.put(key, hm.getOrDefault(key, 0) + 1);
		System.out.println("결과 : " + hm);
        	// 결과 : {A=2, B=1, C=1}
	}
}

원하는 문자열 자르기

String str = "Hi guys This is split example";

String[] result = str.split(" ");
String[] result2 = str.split(" ", 2);
String[] result3 = str.split(" ", 3);

System.out.println(Arrays.toString(result));
System.out.println(Arrays.toString(result2));
System.out.println(Arrays.toString(result3));

형변환 하기

Byte.parseByte();

Short.parseShort();

Integer.parseInt();

Long.parseLong();

Float.parseFloat();

Double.parseDouble();

charAt().

charAt()은 String타입의 문자열에서

해당 위치에 있는 문자만을 char타입으로 변환해

전에 입력했던 것을 저장 안하고 컴퓨터를 껐는 지 다 날라갔다..ㅠㅠ

3일차 새벽에 프로젝트를 완성하고 각자 맞은 파트를 깃에 올려 병합했다.

병합후 배포

1.우선 깃에 올림

https://github.com/jossiya/youcoding

2.filezila

3.AWS E2 

인스턴트 작성 후 ip 주소 받아서 

git bash 로 접속하여 셋팅 후에 nohub으로 배포 하였다

4.나만의 도메인 네임 얻기

가비아 사이트에 도메인을 판매하는데 500원짜리 있어서 사전 공부에 사노은 도메인 주소를 사용해서 배포를 하였따

  https://www.gabia.com

-배포 도메인 네임-

http://jossiya.shop/

ㅇ항해 시작 후 처음으로 팀원들과 미니 프로젝트 시작

우선 팀원들과 와이어프레임을 만들어 간단한 기능을 구현

ㅇ 그 다음 팀원이 4명이라 메인 페이지, 언어페이지, 디테일 비디오 페이지, 로그인 회원가입 페이지로 나누어 진행하기로 하였다.

ㅇ나는 언어 페이지별로 썸네일을 이용하여 디테일 비디오페 이지로  이동할 수 있게 만들기로 하였다.

ㅇ 정렬기능을 만들었고 인기순(검색 시 상단 부터 크롤링 ), 오름차순(title), 내림차순(title) -> 만들었다.

처음에는 구글 API를 받아서 검색형식의 유튜브 영상들을 받아왔었다 하지만 여러 테스트를 진행하다가 오류가 뜨기시작....

->.확인 결과 검색 할 수 있는 할당량이 정해져있단다...(이거 될때는 완벽했는데...) 이후 팀원들과 상의를 해서 크롤링으로 하기로 결정

->유튜브 크롤링은 헬이었다.. 유튜브 동영상 자체가 웹페이지에 보일 때 데이타를 받아 보여주는 형식이라 파이선 bs4로는  할 수 없었다...

폭풍 구글링 후 selenium을 사용하면 된다 하여 해봤다. 

->테그들이 너무 많아 하나씩 복사해가며 자식 테그들 하나씩 붙여가면서 코드 작성.

되긴 하는데 또 하나의 문제 발생.. 유튜브 검색 페이지가 컨테이너들이 여러개라  컨테이너 하나로 할 경우 동영상이 3~11개 정도 밖에 안뜸....

->어떻게 생각을 하다가 우선 검색마다 동영상뜨는 개수가 달라서 무한 검색하면서 동영상 많이뜨는 링크를 사용하기로 결정하였다 ㅎㅎ