JS - HTML 간 통신 시 주소 문제

-
최근에 다른 블로그를 따라해보면서 웹 공부를 시작했는데, 자바스크립트와 HTML(pug) 간의 통신에서 주소 값을 잘못 넣어주어 고생을 했고, 혹시 까먹을까봐 다시 정리해보려고 한다.

메인 페이지에서 Upload 버튼을 누르면 비디오를 업로드하는 페이지가 뜨도록 만들기 위해 다음과 같은 코드를 짰다.

비디오 관련 루트들을 연결해주는 videoRouter.js
(getUpload와 postUpload는 videoController.js 에서 import 했다.)


videoController.js 의 getUpload 함수 - 단순히 videoUpload.pug를 찾아 불러와준다.


메인 페이지의 헤더 부분인데, routes.upload = "/upload" 로 저장되어 있어 위에 videoRouter에서와 똑같아 잘 실행이 될 줄 알았다...


하지만..



페이지의 연결이 잘못된 건 확실한데 컨트롤러, html 파일, 라우터 등 죄다 건드려봐도 답이 나오지 않았다.

문제는 아예 다른 곳에 있었는데,


여기서 videoRouter를 붙여줄 때 이미 routes.videos = "/videos" 를 붙여주고 시작했었다;
설정된 경로는 "/videos/upload"인데 자꾸 "/upload" 로 가라고 하니까 당연히 되질 않는거였다..


메인 페이지에서 목적지 경로(?) 를 "/videos/upload" 로 바꿔주니 해결되었다.


댓글

댓글 쓰기

이 블로그의 인기 게시물

HTML - input file 버튼 꾸미기

-
이미지
 이번 글에선 HTML 에서 기본적으로 제공하는 input 태그의 file 속성일 때의 모양을 바꿔보려고 한다. 열심히 구글링을 해본 결과 보안상의 문제로 직접 input 태그에 변경을 가할 수는 없다고 한다. 따라서 input 태그에 속성을 넣는 게 아닌 약간의 편법?을 이용해서 업로드 버튼처럼 보이게 만들어야 한다. 먼저, 파일의 이름을 출력할 가짜 input 태그를 넣자. <input type= "text" id= "file_route" disabled= "disabled" value= "파일 선택" > value 에 안내 문구를 넣었고, disabled를 지정했기 때문에 커서를 옮겨도 아무 것도 할 수 없다. 잘 생성됐다. 이제 오른쪽 버튼과 "선택된 파일 없음" 문구를 없애고 새 버튼을 만들어야 하는데 label과 style 속성을 잘 활용해서 없애보자. <input type= "text" id= "file_route" disabled= "disabled" value= "파일 선택" > <label for= "upload_file" style= "border: solid 1px black;" > 업로드 </label> <input type= "file" id= "upload_file" accept= "image/*" required= true style= "position:absolute; clip:rect(0, 0, 0, 0);" > label 태그는 for 속성으로 연결한 id의 태그와 자신(라벨)을 연결해 준다. 즉, "업로드" 를 클릭해도 input 태그를 클릭한 것...
자세한 내용 보기

HTML - 이미지 미리보기(jQuery 없이)

-
이미지
 최근에 웹 클론 코딩을 하면서 이미지 미리보기 기능을 구현해야 됐는데 구글링해서 나온 대부분이 제이쿼리를  이용한 코드여서 찾는데 애를 좀 먹었다. 이 글에선 제이쿼리를 쓰지 않고 이미지 미리보기를 구현해보려고 한다. 먼저, 기본으로 제공되는 input 태그와 미리보기를 하기 전 기본 이미지를 띄워보자. <img src= "고양이.jpg" id= "img_section" style= "width: 400px; height: 400px;" > <br> <input type= "file" id= "upload_file" accept= "image/*" required= true value= "업로드" > src 는 본인이 원하는 기본 이미지 경로로 설정해주면 된다. (어차피 나중에 src 속성을 바꿔서 이미지가 변경됨!) id , style 등등 나머지 속성을 지정해주자. 아직은 이미지와 input 버튼만 만들었기 때문에 파일을 아무리 업로드해도 아무 변화가 없다. 이제 동적으로 img 태그의 src 를 바꿔주는 스크립트를 작성해보자. <img src= "고양이.jpg" id= "img_section" style= "width: 400px; height: 400px;" > <br> <input type= "file" id= "upload_file" accept= "image/*" required= true value= "업로드" > <script> const reader = new FileReader(); reader.o...
자세한 내용 보기

BOJ - 섬(1109)

-
링크 먼저 조건에 따라 모든 섬에 번호를 매깁니다. (dfs로 해당 섬과 연결된 모든 x에 번호를 매깁니다.) 이 때 당연하게도 어떤 섬 A가 섬 B에 포함된다면, (A의 번호) > (B의 번호) 가 되게 됩니다. (겉 부분인 섬은 dfs를 통해 이미 번호가 매겨져 있기 때문) 따라서 어떤 섬의 가장 가깝게 포함하고 있는 섬(parent) = 도달할 수 있는 섬의 번호 중 최소 값이 됩니다. (탐색 중 맵을 벗어날 경우는 -1로 해 주었습니다.) 모든 섬에 대해 parent를 구했으면 역으로 child를 모두 달아주고, child 중 가장 깊은 child의 깊이가 해당 섬의 높이가 됩니다. #include<iostream> #include<algorithm> #include<math.h> #include<string> #include<vector> #include<stack> #include<queue> #include<map> #include<set> using namespace std; #define FIO ios_base::sync_with_stdio(false); cin.tie(NULL) #define pii pair<int, int> #define pdd pair<double, double> #define pic pair<int, char> #define ll long long #define vi vector<int> #define vl vector<long long> #define vc vector<char> #define vii vector<pii> #define IMAX 2000000001 #define LMAX 1000000000000000000 #define DMAX 0xFFFFFFFFFFFFF int...
자세한 내용 보기