[Web]BLACKPINK IN YOUR AREA-13-갤러리 스크롤 수정

 

10.09 12:18am

일단 지금 페이지의 문제점은

1. s3/images/ 안의 파일들이 모두 div 라인으로 표현되고있기 때문에 오른쪽 화면 스크롤이 한도끝도없이 작아진다는 것

2. 추가할 맴버별, 업로드 월 별로 콤보박스를 구현해야 하기 때문에 S3에서 태깅을 사용하거나 이미지 디렉토리를 rds나 dynamoDB로 마이그레이션 해야한다는 것

이렇게 2개 문제부터 해결해보자

 

 

 

 

 

 

10.09 2:16am

스크롤 이벤트를 활용해서 화면 최하단에 도달했을때 새로운 데이터들을 불러오는 기능을 구현하려고 했는데, 지금 시스템으로는 힘들것 같다. 지금은 s3 엔드포인트를 route53 에 매핑시킨 정적 웹 호스팅인데, 서버로 사용하고 있는 ec2 ip 를 매핑시키고 s3는 단순 스토리지로만 사용하면서 동적 웹 호스팅으로 바꿔야 가능할 것 같다.

 

• 정적 웹 -> 동적 웹

하나씩 해보자

일단 s3 에 있는 웹 파일들을 모두 /var/www/html 아래로 옮기고 관리를 쉽게 하기 위해서 vsc 탐색기도 / 로 접속해줬다

그리고 s3 버킷 내용물은 일단 모두 삭제해주고

 

알아보니까 s3 tag 는 보통 분석기능을 위해 사용된다고 한다

using s3 tags

https://docs.aws.amazon.com/AmazonS3/latest/userguide/object-tagging.html

Categorizing your storage using tags - Amazon Simple Storage Service

그래서 s3에 이미지를 저장하고, rds 혹은 dynamoDB 에 이미지 metadata 랑 s3 링크를 저장해서 활용해야 할 것 같다.

ㅅㅂ

rds 는 oracle 을 사용할 것 같다 무료라고 하네요

 

일단 해야할 일의 순서를 정리해보면

1. s3 to ec2 migration

2. 크롤링한 이미지 s3에 저장 후 metadata를 oracle 에 저장

3. index.html 에서 최신기준 24장의 사진을 db에서 읽어오기 구현

 

일단 이렇게만 해보자

 

 

 

 

 

 

 

10.09 3:22am

s3 에 있던 웹 관련 파일들을 모두 ec2 로 옮겼고 이제 백앤드 코드들을 수정해야 하는데

aws oracle 은 다뤄본적이 없기때문에

https://docs.aws.amazon.com/ko_kr/AmazonRDS/latest/UserGuide/CHAP_Oracle.html

Amazon RDS의 Oracle - Amazon Relational Database Service

공식 문서를 보면서 하나씩 해봐야겠다

 

 

 

 

 

10.09 6:06am

음.. 찾다보니까 일단 오라클이 무료여서 이용하고싶었는데

일단 가지고 있는 책이나 아니면 구글링에서 mysql 을 많이 사용하는 것 같다.

웹 서버에서 실행되는 php app 으로 db와 연결하는 예시가 많아서

오라클을 계속 써야하나는 자고나서 고민해보고

자고 일어나서 하자

 

 

 

 

10.11 2:24am

일요일 월요일 동안 아마존 프라임 미스터로봇 시즌2 정주행하느라 손 안댔음 ㅋㅋ

일단 구현하려는 로직은

웹서버에서 python 으로 aws rds oracle 에 s3 url 혹은 객체url 과 meta 데이터를 넣고

이후에 php로 db를 읽어와서 반영하는것

일단 s3 객체 url 로 접근해서 반영하는건 성공했다

<div class="col-4"><span class="image fit"><img src="https://s3.ap-northeast-2.amazonaws.com/blackpinkinyourarea.cyaninn.com/images/2022-09-06_00-44-03_jennierubyjane_1.jpg" alt="" /></span></div>

이런식으로 하니까 잘 나왔다

그럼 이제 python 으로 객체 url 을 얻어와서 oracle db에 넣어보자

 

 

파이썬으로 oracle db를 다루려면 cx_Oracle 모듈을 사용해야 하나보다

cx_oracle 8 docs

https://cx-oracle.readthedocs.io/en/latest/user_guide/installation.html

cx_Oracle 8 Installation — cx_Oracle 8.3.0 documentation

 

 

aws rds oracle stack overflow

https://stackoverflow.com/questions/49771812/aws-rds-oracle-python-connection

AWS RDS oracle python connection

python -m pip install cx_Oracle --upgrade

 

음 일단 gui 로 보면서 하는게 편할것 같아서

oracle sql developer 를 다운받아봤다

https://docs.aws.amazon.com/ko_kr/AmazonRDS/latest/UserGuide/USER_ConnectToOracleInstance.html#USER_ConnectToOracleInstance.SQLDeveloper

Oracle DB 인스턴스에 연결 - Amazon Relational Database Service

 

 

10.11 4:10am

The Network Adapter could not establish the connection 라고 하면서 계속 안된다

계속 체크해봐도 안됬었는데

1521 freeinbound 보안그룹 만들어서 연결해주니까 성공했다

 

CREATE TABLE blackpinkinyourarea
(
    Members_name varchar(30),
    date_year int,
    date_month int,
    filenum int,
    s3_url varchar(255)
)

 

대충 이렇게 테이블을 만들었고,

create table 확인

테이블을 만들어놨다

 

 

 

 

10.11 5:12am

cx_oracle8 을 사용해서 python 으로 oracle 접속을 하려면 oracle client 가 설치되어있어야 하는것 같은데 ubuntu 에서 설치하려면 rpm 압축 파일을 deb 으로 변환해야 하는것 같다

일단 지금 db정보가 

BANNER

Oracle Database 19c Standard Edition 2 Release 19.0.0.0.0 - Production

BANNER_FULL

"Oracle Database 19c Standard Edition 2 Release 19.0.0.0.0 - Production Version 19.16.0.0.0"

BANNER_LEGACY

Oracle Database 19c Standard Edition 2 Release 19.0.0.0.0 - Production

 

• Add Oracle 21, 19, 18, 12 or 11.2 client libraries to your operating system library search path such as PATH on Windows or LD_LIBRARY_PATH on Linux. On macOS use init_oracle_client() in your application to pass the Oracle Client directory name, see Using cx_Oracle.init_oracle_client() to set the Oracle Client directory. This is also usable on Windows.
  • If your database is on a remote computer, then download and unzip the client libraries from the free Oracle Instant Client “Basic” or “Basic Light” package for your operating system architecture.
  • Instant Client on Windows requires an appropriate Microsoft Windows Redistributables, see Installing cx_Oracle on Windows. On Linux, the libaio (sometimes called libaio1) package is needed. Oracle Linux 8 also needs the libnsl package.
  • Alternatively, use the client libraries already available in a locally installed database such as the free Oracle Database Express Edition (“XE”) release.
• Version 21 client libraries can connect to Oracle Database 12.1 or greater. Version 19, 18 and 12.2 client libraries can connect to Oracle Database 11.2 or greater. Version 12.1 client libraries can connect to Oracle Database 10.2 or greater. Version 11.2 client libraries can connect to Oracle Database 9.2 or greater.
• To get the libraries:

 

 

일단 이렇게 인데

이거에 맞는 oracle client 를 설치해주고 path 설정을 해줘야 할 것 같다

배고프다 밥시켜야겠다

 

 

 

 

 

10.11 11:10pm

ubuntu 인스턴스에 oracle client 를 버전에 맞게 설치해줬어야 했는데

관련 정보를 찾았다

https://gist.github.com/bmaupin/1d376476a2b6548889b4dd95663ede58

Install Oracle client on Ubuntu

alien

test.py 를 만들어서 db 버전을 받아오는 코드를 짜봤는데 성공했다

이제 테스트 데이터를 입력해보자

 

 

 

 

10.12 12:37am

db와 연결에 성공해서 테스트 데이터를 넣어보려고 했는데 에러는 나지 않지만 db에 반영이 안됬다.

그냥 일반 문자열로 쭉 입력하려고 한건데

sql = "insert into blackpinkinyourarea values('"+d_name+"',"+str(d_year)+","+str(d_month)+","+str(d_filenum)+",'"+d_s3url+"')"

처음에는 문자열에 작은따옴표 안씌워서 에러나다가 다 했는데도 안되길래 좀 찾아봤는데

 

https://velog.io/@convin305/Python-cxOracle%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%B4%EC%84%9C-%EB%8D%B0%EC%9D%B4%ED%84%B0-select-insert%ED%95%98%EA%B8%B0

[Python] cx_Oracle을 이용해서 데이터 select, insert하기

이분도 

INSERT and UPDATE Statements

SQL Data Manipulation Language statements (DML) such as INSERT and UPDATE can easily be executed with cx_Oracle. For example:

cur = connection.cursor()
cur.execute("insert into MyTable values (:idbv, :nmbv)", [1, "Fredico"])

Do not concatenate or interpolate user data into SQL statements. See Using Bind Variables instead.

See Transaction Management for best practices on committing and rolling back data changes.

When handling multiple data values, use executemany() for performance. See Batch Statement Execution and Bulk Loading

 

https://cx-oracle.readthedocs.io/en/latest/user_guide/sql_execution.html#fetch-methods

SQL Execution — cx_Oracle 8.3.0 documentation

 

음 왜 저렇게 하는지 모르겠어서 좀 봤는데

https://pinokio0702.tistory.com/54

[SQL] bind variable의 사용 의미

하드 파싱이 일어나서 그렇다고 한다.

그래서 데이터 입력이 안된건가... 흠...

executemany() 로 해야했던건가.. 내일 이어서 하자

 

 

 

10.13 8:09pm

학교에서 수업 들으면서 insert 구현하려고 해봤다가 성공했다

https://bitcoden.com/answers/pyspark-cx_oracleinterfaceerror-not-a-query

PYSPARK: CX_ORACLE.InterfaceError: not a query

도움을 받은 블로그

d_name='yeonwoo'
d_year=97
d_month=10
d_filenum=2
d_s3url='blackpinkinyourarea.cyaninn.com'
d_list=[d_name,d_year,d_month,d_filenum,d_s3url]
try:
    sql = "insert into blackpinkinyourarea values(:d_name, :d_year, :d_month, :d_filenum, :d_s3url)"
    #sql="select * from blackpinkinyourarea"
    cursor = db.cursor()
    cursor.execute(sql,(d_name, d_year, d_month, d_filenum, d_s3url))
    #cursor.execute(sql)
    
    #res=cursor.fetchall()
    #print("[01] : ", res)
    
    result=db.commit()

oracle developer 에서 확인

cursor.commit() 으로 하려고 하니까 안됬었다

다른 example 들을 보니까 위 코드에선 db.commit 이였고 햇갈리지 않게 나중에 connecting 으로 바꿔줘야겠다.

이제 db table을 지우고 다시 생성할꺼다

사진을 보여줄때 최신순으로 보여주려면 날자 열이 하나 더 필요할 것 같고

url 뒤에 downloads 열을 하나 더 추가해서 인기순도 표시해줘야겠다

 

 

10.13 8:31PM

create table blackpinkinyourarea(
    I_MEM_NAME varchar(30),
    I_YEAR INT,
    I_MONTH INT,
    I_DAY INT,
    I_FILENUM INT,
    I_S3URL VARCHAR(300),
    I_DOWNLOAD INT )

새롭게 테이블을 만들어주고

데이터 INSERT 테스트를 해보려는데

ORA-01036: illegal variable name/number

오류가 떠서 알아봤다

https://sulung-sulung.tistory.com/5

ORA-01036: illegal variable name/number 잘못된 변수명/번호 |

변수 받는 부분을 숫자로 치환해줘야 한다고 한다

d_name='yeonwoo'
d_year=97
d_month=10
d_day=23
d_filenum=2
d_s3url='blackpinkinyourarea.cyaninn.com'
d_download=0

d_list=[d_name,d_year,d_month,d_filenum,d_s3url]
try:
    sql = "insert into blackpinkinyourarea values(:1, :2, :3, :4, :5, :6, :7)"
    #sql="select * from blackpinkinyourarea"
    cursor = db.cursor()
    cursor.execute(sql,(d_name, d_year, d_month, d_day, d_filenum, d_s3url, d_download))
    #cursor.execute(sql)
    
    #res=cursor.fetchall()
    #print("[01] : ", res)
    
    result=db.commit()

이렇게 하니까 데이터가 잘 들어갔다

data insert 성공

이제 파일을 다운로드받고 s3로 보낼때 각 컬럼에 넣을 데이터를 빼서 리스트로 반환하는걸 구현해보자

imagefile_upload_to_s3()

에서 각 컬럼 데이터를 return 해서

__main__.py 에서 반환 받은 데이터를 2차원 리스트로 저장한 후

insert_data_to_oracle()

에서 한번의 커넥트로 열어서 for문으로 쫙 집어넣고 close 시키도록 해볼 예정

 

 

 

 

10.13 9:18pm

def imagefile_upload_to_s3(local_file_path, filename):
    s3 = s3_connection()
    try:
        s3.upload_file(local_file_path, "blackpinkinyourarea.cyaninn.com", "images/"+filename, ExtraArgs={"ServerSideEncryption": "AES256"})
        print("upload success : "+filename)
    except Exception as e:
        print(e)
    
    #이미지파일 메타데이터 반환
    f_date, f_time, n, f_filenum = filename.split('_')
    y, m, d = f_date.split('-')
    num, h = f_filenum.split('.')
    url=id.s3_bucket_url+filename
    dl=0
    y=int(y); m=int(m); d=int(d); num=int(num)
    
    return n, y, m,,d, num, url, dl


def insert_data_to_oracle(row_list)
    os.putenv('NLS_LANG', 'KOREAN_KOREA.AL32UTF8') 
    db = cx_Oracle.connect(id.db_host,id.db_pass,id.db_ip_port_sid)

    print('{}'.format(db.version))

    for i in row_list:
        d_name=     i[0]
        d_year=     i[1]
        d_month=    i[2]
        d_day=      i[3]
        d_filenum=  i[4]
        d_s3url=    i[5]
        d_download= i[6]

        try:
            sql = "insert into blackpinkinyourarea values(:1, :2, :3, :4, :5, :6, :7)"
            
            cursor = db.cursor()
            cursor.execute(sql,(d_name, d_year, d_month, d_day, d_filenum, d_s3url, d_download))
            
            result=db.commit()
            
            print("insert seccess : "+d_name,,d_year,d_month,d_day,d_filenum)
        except Exception as e:
            print(e)

    cursor.close()
    db.close()

메타데이터를 빼내는 함수를 완성햇다

일단 이렇게 하고 수업 끝날 시간 다되가서 집가서 테스트 한번 돌려봐야겠다.

 

 

 

10.15 12:15am

올해 9월 사진만을 가져와서 s3로 보내는 백앤드를 실행시켜봤는데 성공햇다

s3에도 사진이 잘 올라갔고

oracle에서도 db에 저장된걸 확인햇다

db

이제 블랙핑크 맴버들의 전체 사진을 모두 긁어오고 instaloader filter 에 input() 을 넣어줘서 수동으로 기간을 정해 다운로드 받기 쉽게 하면 백앤드 작업은 거의 끝이다

 

 

 

10.15 12:37pm

ㅇㅅㅇ

이거 더하면 아예 계정 막힐것같아서 일단 그만뒀다

나눠서 조금씩 해야할 것 같은데... ㅋㅋ

일단 2022년 사진들만 계정 1개씩 가져와야겠다

 

 

 

10.15 12:50pm

;;

인스타한테 ip밴먹었다 ㅇㅅㅇ

탄력적 IP  써서 아이디 한개씩 긁어와야겠다 ㄷㄷ

 

 

 

 

10.15 1:22am

2022 blackpink

2022년도에 포스팅된 블랙핑크 맴버들의 인스타 사진을 모두 크롤링했다

사실 제니는 2021이랑 2020 년도 사진도 몇장 더 들어갔는데 그렇다 치자

이제 프론트앤드 단 작업에 들어가야겠다

 

 

 

10.15 2:46am

인스타그램이나 페이스북처럼 페이지를 끝까지 내리면 추가로 데이터가 불러와지는 화면을 구현하려고 했는데 그 기술의 이름을 몰라서 좀 찾아봤었다

페이징, 페이지네이션 등 비슷한걸 찾아내다가 '무한스크롤' 이라는 기술을 찾아냈다

페이지네이션 vs 무한스크롤 이렇게 비교되서 많이 사용하는것 같다

다행히도 무한 스크롤 구현 관련 블로그들이 많아서 쉽게 구현할 수 있을것 같다

천천히 해보자

 

 

 

 

10.15 4:12AM

무한 스크롤을 소개한 블로그들 스크랩

 

python + javascript

https://a-littlecoding.tistory.com/43

무한 스크롤 구현하기 (intersections observers로 스크롤 페이지네이션)

javascript

https://velog.io/@eunoia/%EB%AC%B4%ED%95%9C-%EC%8A%A4%ED%81%AC%EB%A1%A4Infinite-scroll-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0#%EC%95%84%EC%9D%B4%ED%85%9C%EC%9D%B4-%EB%A1%9C%EB%94%A9%EB%90%98%EA%B8%B0-%EC%A0%84-ui-%EA%B5%AC%ED%98%84

무한 스크롤(Infinite scroll) 구현하기

javascript - no module

https://penguingoon.tistory.com/259

자바스크립트 무한스크롤 구현하기 (라이브러리 사용없이 간단히)

 

 

 

 

10.15 4:35AM

작업할 순서를 생각해봤다.

1. 우선 html 파일 안에서 db에 connect 해야하고

2. connect 후 이미지를 불러올때 최신순으로 정해진 갯수만큼(인스타는 12개 사진) 불러와야 하기 때문에 sql dml 을 생각해 봐야 하고

3. 이미지를 잘 불러오는데 성공했다면 무한 스크롤을 구현하고

4. 사진을 누르면 팝업이 뜨게 구현하고

5. 팝업 안에 닫기버튼, 다운로드 버튼을 구현해야 한다

 

구현에 필요한 블로그 스크랩

oracle row 개수 제한 ex

https://javaoop.tistory.com/29

[Oracle] Row 개수 제한 Example

php oracle

https://e2xist.tistory.com/105

[PHP, ORACLE] PHP & 오라클 디비 연결 테스트 (업데이트 2017-11-24)

php oracle2

https://rich-informer.tistory.com/20

php로 오라클 접속 및 조회하기

php oracle - 스샷

https://peemangit.tistory.com/381

ORACLE 사용자 생성 및 ORACLE + PHP 구성 방법

 

 

 

10.22 5:32pm

카카오 터지고 티스토리 도 같이 터져서 글을 못썻었다

그래서 프로젝트도 같이 쉬었는데

오늘은 로컬 환경에서 html 안에 php 코드로 db에 연결해서 사진을 불러오는걸 구현해볼 예정

 

 

10.22 7:00pm

근데 생각해보니까 지금 내 로컬 환경에서 php가 안돌아감 ㅋㅋ

흠.. ㅋㅋ

그래서 ec2 /html 안에 test 파일만들어서 해보려고 했는데

php.ini path

aws ec2 ubuntu php8.1 php.ini path

error code

??

뭐 어쩌란건지 모르겠다 ㅋㅋ

html에 파이썬 쓸까 느리다던데 아

javascript로 파이썬 파일 실행 방법

1)코드 

# print.py 파일

print('황금알 낳는 거위를 찾아서')

황금알 낳는 거위를 찾아서 <<를 출력하는 파이썬 코드

 

2)javascript 코드에서 파이썬 코드 실행 및 결과 출력

// connectPython_print.js 파일

const spawn = require('child_process').spawn;

const result = spawn('python', ['print.py'));

result.stdout.on('data', function(data) {
    console.log(data.toString());
});

result.stderr.on('data', function(data) {
    console.log(data.toString());
});

차일드프로세스의 spawn을 통해 파이썬 프린트.py 명령어를 실행해 파이썬 코드를 구동시킨다. stdout의 data 이벤트 리스터를 통해 결과를 받아서 출력한다. 위 코드에서 data를 toString()없이 사용하면, 버퍼가 출력되기때문에 주의가 필요하다고함

출처: https://goldsystem.tistory.com/814 [황금알 낳는 거위를 찾아서 지식을 연구, 탐구:티스토리]

 

 

 

 

 

 

amazon ec2 ssl/tls

https://dev.classmethod.jp/articles/try-configuring-ssl-tls-on-an-ec2-instance/

EC2 인스턴스에 SSL/TLS를 구성해 HTTPS로 접속해 보기 | DevelopersIO