웹 공부 애로사항 모음

-
웹 공부를 하면서 헤맸던 부분들 정리

1. MongoDB 에서 find API 는 해당 데이터가 존재하지 않으면 빈 배열을 반환한다. - 즉, 해당 데이터가 있는지 판단하려면 if(data) 가 아닌 if(data.length > 0) 으로 해야 한다.
해당 데이터의 존재 여부만 판단하려면 그냥 findOne을 쓰자.

2. MongoDB에서 insert, save, create 차이? - 더 공부해봐야 할듯

3. res.locals.[변수 명] 은 현재 요청-응답 사이클 사이에 공유 가능한 변수를 만들어 준다. - 프론트에서 해당 변수 명을 사용할 수 있다! 하지만 다른 컨트롤러에서 변경이 불가하므로 session 변수를 사용해서 변경된 변수 값을 유지할 수 있다.

4. 프로필 사진을 업로드하는 기능을 구현할 때 업로드될 사진을 미리보기해주는 기능을 추가하려 했는데 업로드는 잘 되지만 script 부분이 실행이 되지 않는 문제가 발생했다.
(심지어 오류메세지도 뜨지 않고 무반응)

해당 웹 페이지에서 F12를 눌러 디버깅에 성공했다.


원인은 $ 문자가 JQuery에서 사용되는 선택자인데, JQuery를 애초에 로드해주질 않아서 script 구문 자체가 오류가 난 거였다.


헤더 부분에 JQuery를 로드해주니 해결됐다.

5. nodejs에서 파일 업로드를 도와주는 미들웨어인 Multer를 사용할 때 Upload 콜백 함수의 뒤 콜백 함수에선 req.body 가 비어있게 된다.
Upload 뒷 단에선 req.body를 사용하지 않는 방식으로 코드를 짜야할 것 같다.
(req.body를 살리는 방법을 못 찾음)

6. 자바 스크립트 화살표 함수 특징
- new, super, this, arguments, target 등을 사용할 수 없음
- 항상 익명 함수
- 생성자로 사용할 수 없음

7. 비동기 처리 시엔 jquery 대신 fetch api 를 이용하자.
- fetch(경로, 각종 옵션(method, headers, body 등)) 으로 사용 가능

8. 콜백 함수를 반복문 내에서 사용할 때, 콜백 함수 내에서 반복문의 index를 사용하게 되면 예상과 다른 결과가 나올 수 있다.
(콜백함수는 반복문이 모두 끝난 뒤 실행되기 때문에)
따라서 새로운 함수를 만들어 매 반복문마다 인자를 call by value로 넘겨주자.

댓글

댓글 쓰기

이 블로그의 인기 게시물

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 - DNA 유사도(2612)

-
문제(링크) LCS 알고리즘 응용문제입니다. dp[i][j] = i, j 지점에서 나올 수 있는 최대 유사도 공백을 추가할 때, 현재 유사도가 음수가 되버리면 그 지점부터 다시 시작하는게 이득입니다. 따라서 lcs 알고리즘과 비슷하게 문자가 같지 않다면 왼쪽, 왼쪽 위, 위 값의 최댓값을 현재 값으로 가져오는데 해당 값에 공백을 추가한 값, 즉, -2 를 한 값을 가져오고 최종 값이 음수가 되면 0으로 바꿔줘야 합니다. 문자가 같다면 lcs 알고리즘에서 처럼 +3을 해줍니다. dp 배열을 완성했다면 유사도가 최대인 점을 찾습니다. 최대인 점으로부터 가로, 세로, 대각선을 체크하면서 시작 점을 찾아가는데, 가로, 세로는 +2 , 대각선은 -3 으로 찾아가면서 0이 될때까지 찾아가고, 역으로 시작점부터 끝점까지 출력하면 됩니다. #include<iostream> #include<algorithm> #include<math.h> #include<string> #include<vector> #include<stack> #include<queue> #include<map> 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 LM...
자세한 내용 보기