7월 3주차 WIL_01

Jobmania·2022년 7월 17일
APIJWTJavahttphttps
0

항해 과정 기록

목록 보기
2/19
post-thumbnail

이번주 목표는 미니프로젝트에 사용된 기술 및 알고리즘(JAVA)를 풀기 위해 개념을 숙지하는 것임.

7.11 (미니프로젝트 D+0 시작)

< 튜터님 OT >

굵직한 프로젝트, 사이드 프로젝트 많이 하자
내가 프로젝트 사용시 적용한 기술에 대해 많이 생각해라
협업, 끈기, 도와 줄때 성장

7.12 (미니프로젝트 D+1 )

SOAP API vs REST API 차이

  • RSET API :
    단일한 인터페이스를 사용
    데이터 포맷이 JSON이기 때문에 브라우저들 간에 호환성이 좋음

  • SOAP API :
    보안 수준이 엄격

참조사이트:

기타 상식
Server 응답자 <-> client 요청자( web client)
ex) apache, IIS, nginx <-> ex)크롬,사파리
내용: html, css, javascript 요청 및 전달함
참조사이트 : 생활코딩

7.13 (미니프로젝트 D+2 )

프로젝트 시 오류 내용

AttributeError: 'str' object has no attribute 'decode'  발생

code내용
token = jwt.encode(payload, app.config['JWT_SECRET_KEY'], 'HS256')
return jsonify({'access_token': token.decode('UTF-8')})


해결방법
token = jwt.encode(payload, app.config['JWT_SECRET_KEY'], 'HS256')
return jsonify({'access_token': token})
>>즉 decode내용 삭제

출처
https://teddygood.github.io/posts/python/attributeerror-str-decode/

ID 로그인 방식 ( 정규 표현식)


function is_nickname(asValue) {
                var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
                return regExp.test(asValue);
            }

            function is_password(asValue) {
                var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
                return regExp.test(asValue);
            }

*[ ] 반드시포함을 의미
\d 의미는 숫자를 의미
[ ]는 포함할수 있는 것을 의미
{숫자,숫자} ex)1~5자리까지 가능

기타상식

javascript 
if(!블라블라블라(num)) { }
느낌표는 not을 의미
  • CSS 동영상 넣을려면?
    https://www.codingfactory.net/11880
    https://webdir.tistory.com/31
  • GIT Hub merge가 어렵다면?
    각각의 브랜치를 만들고 이후 병합하고 싶은데 어려움
    하나의 브랜치를 메인과 병합하고 이후 다른 인원이 충돌변경을 한다
    이 과정을 거치면 하나의 메인이 탄생.
    스태시 커밋내용이 있어 병합하지 못하는 브랜치의 정보에 대해서 임시저장 느낌?
    깃헙에 대해 더 알고싶다
    https://0ver-grow.tistory.com/847

7.14 (미니프로젝트 D+3마지막 )

CSS 팁


body {
color: red ! important;   }
body { 
color: blue ! }
>>> 여기서는 importatn만 적용

width 100vh >> 보이는 화면을 꽉 채워라!
- 배경 색상이 화면 전체에 표시되지 않는 문제 -> body 태그에
  min-height를 100vh로 설정하여 해결함

전체적인 개발 순서
휘림님 : 로그인 페이지, 회원가입, 마이페이지 구현
용준님 : 리뷰페이지 스와이프 기능구현 및 CSS 디자인
훈님 : 리뷰작성페이지 구현 및 팀장 업무
나 : 웹페이지 크롤링, 로그인페이지 CSS

내가 한 것 

1.웹페이지 크롤링 : 해당 url을 입력시 이미지, 평점, 기타 불러오기
2. 리뷰 저장 및 삭제 기능 추가 

리뷰가 삭제 될 때 num도 같이 삭제가 됨 
문제 발생 1. 작성시 기존의 리스트 수 +1 로 num을 부여시 삭제 이후 중복 num이 발생

num_list = list(db.nums.find({}, {'_id': False}))
count = len(num_list) + 1
doc_num = {
    'num': count
}
db.nums.insert_one(doc_num)

>>해결방법  : num 데이터베이스를 따로 만들어서 리뷰 삭제를
진행하여도 num은 삭제 되지 않도록 구현, num 부여 방식은 list(num) +1 

4. 배경 동영상 
Static mp3파일 저장 및 기능 구현 > 동영상 가운데 입력상자 구현에서 문제발생
video {width: 100%; }
.container { position: absolute;
    margin-top: 10%;
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

추신 >>> 배경 동영상 CSS부분은 아직도 잘 모르겠다; ㄷㄷ

미니프로젝트 깃헙 저장소

아래 코드는 입력값을 넣을시 구글검색을 통해 첫화면의 이미지를 가져오는 코드다. 

#<--이미지 크롤링 코드 시작 -->
        options = webdriver.ChromeOptions()
        options.add_argument('headless')
        options.add_argument('window-size=1920x1080')
        options.add_argument("--disable-gpu")
        options.add_argument(
            "user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) 
            AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36")
        # driver = webdriver.Chrome('chromedriver', options=options)
        driver = webdriver.Chrome(executable_path='/home/ubuntu/eattogether/chromedriver', options=options)
        #ec2에서 크롬드라이버 경로를 잡지 못해서 절대경로를 사용해서 chromedriver 잡아줘야함
        driver.get("https://www.google.co.kr/imghp?hl=ko&tab=wi&authuser=0&ogbl")
        elem = driver.find_element(By.NAME, "q")  # 구글 검색창 선택
        elem.send_keys(place_receive)  # 검색창에 검색할 내용(name)넣기
        elem.send_keys(Keys.RETURN)  # 검색할 내용을 넣고 enter를 치는것!
        driver.implicitly_wait(2)
        driver.find_element(By.XPATH,
                            '/html/body/div[2]/c-wiz/div[3]/div[1]/div/div/div/div[1]/div[1]/span/div[1]/div[1]/div[1]/a[1]/div[1]/img').click()
        time.sleep(1)
        imgUrl = driver.find_element(By.XPATH,
                                     '/html/body/div[2]/c-wiz/div[3]/div[2]/div[3]/div/div/div[3]/div[2]/c-wiz/div/div[1]/div[1]/div[3]/div/a/img').get_attribute(
            "src")
        driver.quit()
        #<--이미지 크롤링 코드 끝-->

7.15 (알고리즘(JAVA)시작 D+0 )

int ;정수타입(변수)
double ; 실수타입(변수)
string ; 문자
final int J(대문자써야함) ; 상수

itemPrice 변수 이름 규칙
ITEM_PRICE 상수이름 규칙

long bing = 1651686156L; (long타입경우 반드시 뒤에 L을 붙여아함)
float f = 1234.f; (float타입경우 반드시 뒤에 L을 붙여아함)
double d = 34234.123;

강제 형변환
int y2 = (int) x2;

int i1 = 2;
int i2 = ++i1; >> i2 = 3, i1 = 3
int i2 = i1++; >> i2 = 2, i1=3

대입연산자 뜻
a += b; 라는 식은
a = a + b; 와 동일

레스트풀 api ?

println은 띄어쓰기
print 붙여지는거

삼항연산자
a > b ? 3 : 2

swtich 조건문 사용방법
switch, case , default, breaak

// 다음과 같이 case문을 한번에 사용하면 더 짧게 코드를 짤 수 있습니다.
switch(month) {
case 1: case 2: case 12:
season = "겨울"; break;
case 3: case 4: case 5:
season = "봄"; break;
case 6: case 7: case 8:
season = "여름"; break;
case 9: case 10: case 11:
season = "가을"; break;
}
System.out.println("지금은 " + month + "월이고, " + season + "입니다.");

while 예시)

while(i < 11){
// if 문을 추가해, i가 짝수일때만 i를 출력하는 코드를 짜보세요.
if (i%2==0){
System.out.println(i); } i++; }
do while은 한번이라도 실행되면 좋겟다 일때 쓴다.

continue와 break; 에 대해 이해하자
continue 중지하고 다시 위의 반복문 처음으로 돌아가지만
break 중지하고 반복문에서 나온다

!!!!!!!배열에 대해 이해하자
배열 생성방법
int [ ] array1 = new int[100];
타입형 [ ] 이름 = new 타입[갯수];
또는
int [ ] array2 = { 1, 2, 3, 4, ~~}

!!! 변수는 생성된 반복문이나 { }에서만 존재, 나오면 소멸함!

변수의 스코프(변수의 유효범위)

2차원 배열
int [ ][] array = new int[3][4];
ㅁㅁㅁㅁ
ㅁㅁㅁㅁ
ㅁㅁㅁㅁ
ex) int [ ][ ] array 5 = new int[3][];
array5 [0][0] = 10; >>> 하면 오류발생함 왜냐? 1첫번째 생성안햇기때문

int [ ][ ] array 5 = new int[3][];
array5[0] = new int[1];
array5 [0][0] = 10; >> 이렇게 생성하고 입력해야함

for each 구문!

int[] iarr = {10,20,30,40,50};
 for( int value:iarr){
     System.out.println(value);
 }

이것은 아래와 동일하다!! 

for( int value =0 ; i< arr.length; i++{
      System.out.println(value);}

내일은 클래스 관련 수업을 들을 예정이다.

TIL 작성을 진행하엿고
마인드 팁!!!!
http://egloos.zum.com/agile/v/5749946
http://egloos.zum.com/agile/v/5838463

코드리뷰사이트!!
aws codeguru
github codepilot
codereview automatic
lint
정적분석도구

알고리즘 공부 팁 !!
https://steady-coding.tistory.com/260

7.16 (알고리즘(JAVA)시작 D+1 )

알고리즘

!!!!!!! 문자열 변환

charAt() 함수 -- 사용법
charAt 함수란?
String 타입의 데이터(문자열)에서 특정 문자를 char 타입으로 변환할 때 사용하는 함수

String sample = "abc";
char target = sample.charAt(0);
위처럼 String 변수에서 사용할 수 있으며,
charAt(i)
i 자리에는 int 형 변수를 넣어서 원하는 위치의 문자를 가져올 수 있다.

https://velog.io/@shin_stealer/%EC%BD%94%EB%94%A9%ED%85%8C%EC%8A%A4%ED%8A%B8-%EC%A4%80%EB%B9%84-String-%EA%B4%80%EB%A0%A8-%EB%AC%B8%EC%A0%9C%EC%97%90%EC%84%9C-%EC%9E%90%EC%A3%BC%EC%93%B0%EC%9D%B4%EB%8A%94-%ED%95%A8%EC%88%98-%EC%A0%95%EB%A6%ACJAVA

String 문자열 자르기/치환하기 - split(), substring(), replace()
https://velog.io/@yanghl98/java-%EB%AC%B8%EC%9E%90%EC%97%B4-%EC%A1%B0%EC%9E%91

배열을 사용하기 위해선 미리 배열을 만들어 줘야한다 !!
https://school.programmers.co.kr/learn/courses/5/lessons/135#

형변환 관련

class Solution {
public long[] solution(int x, int n) {
long[] arr1 = new long[n];
for(int i=0; i<n; i++){
arr1[i]= x*(i+1); <<<<<< 여기서 오류발생! }
return arr1; } }

x(i+1) 은 int 고 arr1은 long이죠. x(i+1) 이 int로 측정할 수 있는 값을 넘어가 버리면 이상한 값이 들어가게 되기 때문에 (long)x*(i+1) 형변환을 시켜서 넣어주면 됩니다
ex)
long x2 = 5;
int y2 = (int) x2;
이것이 형변환!!

!!!Math.max/min 메서드 사용(두값중 크거나 작은값 리턴)
https://mine-it-record.tistory.com/140

숫자배열 오름차순 참고 !
https://developerm.tistory.com/118?category=989900
https://ju-nam2.tistory.com/8

spring 알고리즘 코딩
문제 잘 읽기!
깔끔하게 요구사항 정리
계속 움직여서
for, if문이라도 돌려보자 최대한 풀어보자

!!!
인텔리 j 활용해보자 >> 클래스 강의 듣기

!!!
import java.util.ArrayList 써보기
System.out.println(Arrays.toString(answer));
//행렬을 문자로
System.out.println(Arrays.deepToString(answer));
//2차원행렬을 2차열문자로~~

7.17 (알고리즘(JAVA)시작 D+2 )

💡 강의 2-9 내용중 깨진글자 제거 

.encode('ascii', 'ignore').decode('utf-8')

문자열을 > 아스키코드형태로 인코딩하는데 아스키코드로 바꿀수 없는애들은 무시해라. > 이후 다시 문자열로

💡 강의 2-14 문자 형식 변환

{{ words|tojson }}; 제이슨 형식으로
{{words/ toint}}  인트 형식으로

💡 강의 4-3
해쉬함수 : 알고리즘의 한 종류로서 임의의 데이터를 입력 받아 항상 고정된 길이의 임의의 값으로 변환해주는 함수

💡 강의 4-4
JWT : JSON Web Token의 줄임말로, JSON 객체를 사용해 정보를 안정성 있게 전달하는 웹표준이에요! 이러한 정보를 토큰이라고 한다

토큰 : 서버에서 클라이언트에게 발급하는 팔찌

자세한 설명!
https://tansfil.tistory.com/58

로그인 하면 입력값을 서버로 이동, 서버에서 입력된 값을 db에서 탐색 및 검사, 일치하면 사용자 id를 가지고 jwt토큰을 만들어서 사용자한테 토큰을 다시 준다. 사용자는 이 토큰을 가지고 이용한다. (만료시간있음)

로그인하면 서버가 클라이언트한테 JWT 토큰을 주게 되는데 이 정보를
payload( 1.사용자ID정보, 2.언제까지 유효한지에 대한 정보)라고 부름
이후 payload 역시 Secret Key통해 암호화하여 한번더 유저한테 준다.

쿠기 : 브라우저에 저장되어 있는 정보.
로그인을 구현하면, 반드시 쿠키라는 개념을 사용합니다. 페이지에 관계없이 브라우저에 임시로 저장되는 정보입니다. 키:밸류 형태(딕셔너리 형태)로 저장됩니다. 쿠키가 있기 때문에, 한번 로그인하면 네이버에서 다시
로그인할 필요가 없는 것입니다. 브라우저를 닫으면 자동 삭제되게 하거나, 일정 시간이 지나면 삭제되게 할 수 있습니다.

그래서 서버는 쿠키에 토큰이 있나 살펴봄

쿠키&세션은 서버에 저장

쿠키는 사용자에 저장, 세션은 서버에 저장, jwt토큰은 암호화된 쿠키

사용자 정보들을 암호화시킨 토큰을 서버에서 생성하여 사용하는 인증 방식입니다
jwt토큰은 암호화가 되어 안정성이 높고 서버에 상태를 저장하지 않기 때문에 세션에 비해 서버에 부담을 줄인다.

💡 강의 4-8 (로그인 기능 구현하기 흐름파악!)
정규 표현식 

function is_nickname(asValue) {
    var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
    return regExp.test(asValue);
}

function is_password(asValue) {
    var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
    return regExp.test(asValue);
}

로그인하면 서버에서 검증하고 토큰을 발행

인코딩 : 문자열을 바이트로 변환 ( 코드화 == 암호화)
디코딩 : 바이트를 문자열로 변환
참조 : https://chrisjune-13837.medium.com/%EC%9D%B8%EC%BD%94%EB%94%A9%EA%B3%BC-%EB%94%94%EC%BD%94%EB%94%A9-87006cf8dee2

BREAK 와 Continue 구분하기

https://hymndev.tistory.com/20

다음주 발표내용들~
Rest API, HTTPS, 쿠키/세션/캐시, 객체리터럴/구조분해할당

@@@@@@@
Java 속성들에 대해 공부하다보니 오늘은 알고리즘 문제를 많이 못풀었다 ㅠㅠㅠ
생활코딩을 영상을 틈틈히 봐서 java 속성에 대해 이해하도록 노력하자!!

profile
Jobmania
HelloWorld에서 RealWorld로
이전 포스트

7월 4주차 WIL_02

다음 포스트

7월 5주차 WIL_03

0개의 댓글