분류 전체보기

자기계발/생각 정리

프론트와 백엔드를 분리하고 싶다...

8일 동안 블로그에 글을 못썼다. 글을 못쓴 이유는 8일 동안 뭔가 진전되었다고 할 만한 결과물이 안나왔기 때문이다. 8일 동안 삽질만 계속했다... 지금 공부하고 있는건 Node JS 를 이용한 로그인 구현인데, 인터넷 자료들을 이용해서 공부하려고 보니 다들 node js 로 프론트와 백을 모두 커버하고 있다. 그래서 그 자료들을 곧이 곧대로 내가 공부하면서 만들고 있는 클론 코딩 프로젝트에 대입을 할 수 가 없다. (그 자료들 만으로도 충분히 할 수 있는데 내가 못 하는 걸지도 모르겠지만 ㅋㅋㅋ) 프론트 로그인 페이지에서 입력된 아이디 비밀번호를 백엔드 서버로 전송하고 백엔드 서버에서 받은 요청을 DB 정보와 비교해서 일치하면 응답으로 세션 생성과 함께 메인페이지로 리다이렉트를 시키고자 했다. 사실 ..

독서/Inside Javascript

[Inside Javascript] 6. 기본타입과 표준메서드, 연산자

기본타입 = 숫자, 문자열, 불린값 각 기본타입은 객체가 아님에도 각 타입에 맞는 메서드를 갖고 있다. 이때는 메서드 호출시 순간적으로 기본타입을 참조타입으로 바꾸었다가 메서드 호출이 끝나면 다시 기본타입으로 바뀌게 된다. + 연산자 자바스크립트의 + 연산자는 (숫자) + (숫자) 만 숫자 연산으로 계산하고, (숫자) + (문자열) 이나 (문자열) + (문자열) 은 문자열 연결로 계산한다. typeof 연산자 피연산자의 타입을 문자열 형태로 리턴한다. 이때 null 타입은 'object' 로 출력하고, 함수 타입은 'function' 으로 출력하는 부분에 주의한다. 배열은 'object'로 출력한다. == 연산자와 === 연산자 == 연산자는 두 피연산자의 타입이 다를 경우, 타입변환을 거친 다음 비교하..

개인 프로젝트/[2022] 유튜브 뮤직 클론코딩

[유튜브 뮤직 클론코딩] 5. MariaDB + NodeJS 연동하기

이번엔 지난번 포스팅에 적었던대로 데이터베이스를 연동하여 데이터를 가져오도록 해보았다. 우선 MariaDB 를 깔고, NodeJS 에 연동하기 위해 MySQL 모듈을 설치했다. 이걸 설치할 당시 가장 최근 버전이었던 10.8.3 버전을 깔았는데 오늘 다시 들어가보니 10.9 버전이 나왔다. 그런데 1년밖에 지원안하니까 10.6을 까는걸 권장한다고 나와있다.. 그리고 어제 설치할 때는 Harukasan 에서 다운로드를 할 수가 없었다. 그냥 아예 명령어를 복사 붙여넣기 했는데 404에러가 떴다. 그래서 YongBok.net 으로 받았다. 아직은 Express하고 mysql 밖에 없다 그리고 다음과 같이 코드를 작성했다. DB에 접속하기 위한 코드 부분을 따로 분리했다. DB서버와 nodejs 서버가 같은 ..

Infra/오라클 클라우드

안드로이드에서 MySQL(MariaDB) 원격 접속하기

30분정도 삽질을 한 끝에 성공한 안드로이드에서 MySQL 원격 접속하는 방법을 정리하고자 합니다. 저의 경우 Oracle Cloud 에 올린 인스턴스에 직접 MariaDB를 깔고 그 서버에 원격접속했습니다. 하지만 AWS나 GCP 같은 경우도 비슷하게 해결할 수 있을 겁니다. 과정은 다음과 같습니다. DB설치 (설명 생략, 구글과 함께라면 할 수 있습니다) MySQL 포트인 3306 포트 열기 (오라클 클라우드 네트워크 세팅) IPTABLE 포트 열기 마리아DB에서 모든 호스트로 접속가능하면서, 접속할 데이터베이스에 대해 모든 권한을 갖고 있는 유저 생성 (기본적으로 root 는 로컬호스트로만 접속이 가능하도록 되어 있기 때문) 최종삽질의 원인인 마리아DB설정 파일 수정하고 디비 껐다 키기 접속할 안드..

개인 프로젝트/[2022] 유튜브 뮤직 클론코딩

[유튜브 뮤직 클론코딩] 4. Express 프레임워크 적용과 API 서버에서 데이터 받기

원래는 http 내장 모듈을 이용해서 해볼까 했는데, 검색을 해보니까 이 모듈을 이용해서 서버 프로그래밍을 하는 건 안될 것 같다고 생각했다. createServer() 메소드로 서버를 만드는데, 이 함수의 인자로 콜백함수가 있다. 그런데 이 콜백함수로 요청 객체가 넘어오는데, 라우팅을 처리할 때 이 요청 객체의 경로를 일일히 분기로 나눠서 처리해야 했기 때문이다. 물론 해결책이 있을 것 같긴했는데, 굳이 그렇게까지 http모듈을 사용하고 싶지는 않아서 express 모듈을 사용하기로 했다. 사용하다보니까 뭔가 플라스크랑 닮았다. 대부분의 웹 프레임워크가 다 거기서 거기인건가 싶기도 하고... 'URL' -> 해당 url 에 대한 콜백 함수 이 구조인건 똑같았다. 우선 메인페이지로 사용자가 접속했을 때,..

개인 프로젝트/[2022] 유튜브 뮤직 클론코딩

[유튜브 뮤직 클론코딩] 3. Fetch API & Node.js 에서 CORS 해결하기

이제 분리한 API 서버 도메인에 접속되는 걸 확인했으니 프론트서버에서 백엔드서버로 요청을 보내고 응답을 받는 것을 테스트해보기로 했다. 현재 프론트에서는 아무런 프레임워크 없이 순수 바닐라 자바스크립트로 만들고 있기 때문에 자바스크립트에서 사용할 수 있는 가장 대표적인 내장 함수인 fetch API 를 사용했다. 우선 프론트엔드의 자바스크립트 파일에서 다음과 같은 코드를 작성했다. 이렇게 REST API 를 이용해서 데이터를 받아오고, 받아온 데이터로 화면에 UI를 뿌리는 것이기 때문에 첫번째 포스팅에서 동적으로 UI를 생성하도록 짰던 코드에서 fetch 를 호출하도록 했다. 이것도 일단 테스트니까 서버에서 받은 데이터를 콘솔에 출력하도록 해봤다. 다음으로 출력할 데이터를 보내줄 서버에 코드를 작성해야..

자기계발/생각 정리

오라클 클라우드, nginx, proxy_pass, err_address_unreachable

저번 휴가때도 그렇고 진짜 이 오류가 왜 뜨는지를 모르겠다. 일단 언젠가 해결책을 찾는다면 (제발..) 해결책을 이 블로그에 적을 날이 왔음 좋겠다. 저번 휴가 때 이 오류가 떴었던 과정 비주얼 스튜디오를 서버에 올려서 쓸 수 있다고 하는 말에 혹해서 code-server 라는 걸 설치한다음, 로컬에서 실행하고 nginx에서 proxy_pass 를 통해 127.0.0.1:포트 로 리다이렉트 하도록 했다. 그리고 삽질을 몇번 한 끝에 성공했다 근데 성공하고 나서 얼마 안있으니까 err_address_unreachable 이라는 오류와 함께 내 서버에 웹으로 접속이 되질 않게 되었다. 리다이렉트 하도록 만든 해당 주소 뿐만 아니라 기존에 잘 접속되던 다른 주소들도 모두 몽땅 접속이 안된다. 저 오류가 뜨면서..

개인 프로젝트/[2022] 유튜브 뮤직 클론코딩

[유튜브 뮤직 클론코딩] 2. nginx에 서브도메인 등록하기

별도 포스팅으로 남기지는 않겠지만, 그동안 유튜브 뮤직에서 사용하는 모달을 만들었다. 모달에 애니메이션도 넣어보면서 css 의 animation 도 사용해보았다. 다른 사람의 코드를 볼 때는 엄청 어렵고 복잡해 보였었는데 애니메이션을 공부하고 보니 각 애니메이션을 단계별로 자세하게 적어서 복잡해보인 것일 뿐 각 단계를 뜯어보면 그렇게까지 복잡하지 않다는 것을 알 수 있었다. 이렇게 만들어졌다. 실제 유튜브 뮤직이랑 비교하면 아이콘도 조금 다르고, 모달에 메뉴도 더 넣어야되지만 일단 UI 넣는건 이정도까지만 해보기로 했다. 이제는 API 서버를 만들어서 프론트에서 백엔드로 HTTP 요청을 날려서 데이터를 얻어온 뒤, 얻어온 데이터를 잘 처리해서 UI에 뿌려주도록 분리된 백엔드를 만들어보려고 한다. 이를 위..

알고리즘 (PS)/BOJ

[백준] 12850 - 본대 산책 2 (G1)

https://www.acmicpc.net/problem/12850 12850번: 본대 산책2 가능한 경로의 수를 1,000,000,007로 나눈 나머지를 출력한다. www.acmicpc.net 처음엔 그림만 보고 그래프 문제를 예상했는데, 문제를 읽어보니 경우의 수를 세라길래 DP로 예상해서 DP 점화식을 세웠다. 근데 dp테이블을 일일히 채우고 있다가는 저 10억이라는 입력데이터를 감당하지 못하겠다는 생각이 들었다. 그래서 결국 알고리즘 분류를 봤다.. 그런데 띠용.. '분할정복을 이용한 거듭제곱' 문제라고 소개가 되어있었다. 다행히 이걸 보고 전에 풀었던 피보나치 문제가 스쳐지나갔다. 행렬 거듭제곱을 이용해서 피보나치 수열을 빠르게 구하는 문제였다. 그런데 부끄럽게도 그 문제를 풀 당시에는 피보나치..

Infra/Network

도메인, CNAME, TTL

프론트엔드와 벡엔드를 어떻게 분리해야하는지 공부하다가 API 서버와 REST API가 나와서 이걸 공부하다보니 api 서버의 주소를 api.example.com 과 같이 쓰기도 한다는 점에서 저 도메인도 별도로 등록을 해야하나? 그건 좀 귀찮겠는데? 싶어서 도메인을 공부해봤다. - 도메인 (Domain) 내가 알고 있는 도메인은 IP 주소를 매번 기억할 수 없으니 이름을 붙여준 것으로 알고 있었다. '대한민국 국민중 주민번호가 000509-3...... 인 사람' 은 너무 길고 복잡해서 알 수 없으니 '홍길동' 라는 이름을 붙여준 것과 같다고 이해했다. 차이가 있다면 이름은 겹칠 수 있지만, 도메인은 겹칠 수 없다는 것 정도? 193.122.xxx.xxx 라는 내 서버에 아이피주소를 다른 사람에게 외우도..

에버듀
'분류 전체보기' 카테고리의 글 목록 (40 Page)