WASD BLOG

  링크 문제를 꼼꼼히 읽어봐야 하는 문제이다. 주어지는 왼쪽, 위 배열은 항상 증가하므로 나머지 애벌레들의 크기는 맨 위 애벌레의 크기와 항상 같다는 걸 알 수 있다. (위 애벌레의 증가율은 항상 왼쪽, 왼쪽 위 애벌레 이상이므로) 문제는 왼쪽, 위쪽 애벌레의 최종 크기를 구하는 거였는데 최대가 1400 * 100만이라 각 쿼리마다 0, 1, 2 를 카운트해주면 시간초과가 날 것 같아 lazy propagate 구간합 업데이트를 이용했다. 0, 1, 2의 개수에 대해 각각 세그먼트 트리를 만들어 해당 구간의 개수를 카운트해주고 왼쪽, 위쪽 애벌레에 더해주었다. #include<iostream> #include<memory.h> #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 mv1[

이전 글 에서 Github Actions, Codedeploy 배포 자동화에 필요한 AWS 세팅을 모두 끝냈고  이번 포스팅에선 .yml .sh 파일을 이용해 개체들을 연결해 보려고 한다. 1. EC2 인스턴스에 Codedeploy 설치

최근 거의 3일 내내 매달렸던 배포 자동화에 드디어 성공했다. 다음번에 삽질을 최대한 줄이고자 간단하게나마 과정을 남겨두려고 한다. 이번 글 에선 AWS 콘솔에서의 세팅 다음 글 에선 실제 연동 과정을 포스팅한다. 준비물 배포할 프로젝트의 Git repository (Nodejs 웹 프로젝트를 기준으로 작성됨) AWS S3 버킷 EC2 인스턴스(서버로 사용될) 전체적인 흐름 프로젝트를 Git에 커밋하고 서버에서 배포되기까지의 대략적인 흐름은 위와 같다. (제대로 이해했다면) 내용상으론 되게 간단한데 각 단계마다 서로 연결하는 과정에서 애를 많이 먹었다. 1. EC2 에 IAM 역할 등록 IAM 이란? : Identity and Access Management 의 약자로 AWS 에서 제공하는 서비스들간의 접근 권한을 관리해주는 서비스이다. 위 흐름도를 보면 EC2 인스턴스에서 Codedeploy 서비스를 이용해 S3 에 접근하게 되는데, 따라서 Codedeploy, S3 두 서비스에 대한 접근 권한이 필요하다. 이제 직접 IAM 역할을 만들고, EC2 에 등록해보자. 1) 새 IAM 역할 만들기 AWS 에서 서비스 탭 -> IAM -> 역할 만들기 2) EC2 개체 선택 EC2 인스턴스에 등록할 IAM 를 만드는 것이므로 EC2 를 선택하고 넘어가자. 3) 정책 설정 S3 와 Codedeploy 에 대한 모든 권한을 얻어오자. 4) 태그 설정 - 필수x 없어도 무관하고, 생성 후에 수정할 수 있으니 건너뛰자. 5) 검토 및 생성 역할의 이름을 설정하고, 생성해주자. 6) 기존 인스턴스에 IAM 역할 등록 서버로 사용할 EC2 인스턴스에 IAM 역할을 등록해주자. (EC2가 없다면 만들어주자) IAM 역할을 위에서 만든 역할로 바꿔주면 끝! 이제 EC2 에서 AWS S3, Codedeploy 에 접근할 수 있게 되었다!! 2. Codedeploy Agent 사용자

 npm forever는 nodejs의 서버가 종료되었을 때 바로 재 실행시켜주는 도구이다. 기존에 nodemon을 사용해 npm start로만 서버를 껐다 키다가 forever을 사용해 서버를 키려하니 알 수 없는 오류가 발생했다. forever start init.js  위 명령어로 서버를 실행시키면 실행 list에 STOPPED 라고 표시된다. package.json 의 위 내용을 로 바꿔주니 해결되었다. package.json 에서 scripts 는 key 값이 명령어, value 값이 해당 명령어가 변환될 값이다. 두 번째 scripts 내용대로라면 "start" 란 명령어가 입력되면 "forever start -c babel-node init.js" 명령어가 실행되는 것이다. 위 내용을 모르고 "forever start" 명령어로 서버를 키려 헀는데, babel 옵션을 주지 않아 코드를 읽지 못했다. package.json 을 수정하고 npm start 하니 잘 실행됐다.

웹 공부를 하면서 헤맸던 부분들 정리 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, hea

 이번 글에선 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 태그를 클릭한 것

 최근에 웹 클론 코딩을 하면서 이미지 미리보기 기능을 구현해야 됐는데 구글링해서 나온 대부분이 제이쿼리를  이용한 코드여서 찾는데 애를 좀 먹었다. 이 글에선 제이쿼리를 쓰지 않고 이미지 미리보기를 구현해보려고 한다. 먼저, 기본으로 제공되는 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

  문제 링크 스택과 배열을 이용한 단순 구현 문제였다. 주어지는 메모리배열과 명령어, 문자의 길이가 크지 않으므로 해당 길이만큼 선언하고, 명령어에 따라 적절히 조건문을 걸어준다. 무한루프를 찾아야 하므로 가장 중요한 명령어는 '[' 와 ']' 인데, 명령들을 수행하기 전에 미리  '[' -> ']' , ']' -> '[' 처럼 인덱스를 찾아갈 수 있도록 스택을 이용해 전처리를 해주자. '[' 을 만나면 스택에 넣고, ']' 을 만나면 스택에서 뺀 '[' 와 link를 연결해 주면 간단히 해결된다. 이제 남은 건 무한루프의 판별인데 ']' 명령을 잘 생각해보면 ']' 를 만났을 때 현재 포인터가 가르키는 수가  단 한번이라도 0 이라면 그 ']' 는 무한루프가 아니란 걸 알 수 있다. (다른 곳에서 무한루프를 돌고 있거나 무한루프가 없다.) 따라서 모든 ']' 중에 단 한번도 현재 수가 0 이 나온적이 없던 ']' 와 그 짝 '[' 이 무한루프이다. # include<iostream> # include<memory.h> # 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

링크 200000 개의 행과 200000 개의 열이 주어질 수 있기 때문에 일반적인 탐색 알고리즘을 사용하면 당연히 시간 초과가 나는 문제이다. 따라서 투 포인터를 이용해 200000개의 행만 탐색함으로써 O(n) 만에 풀이할 수 있다. 투 포인터의 구간 = 현재 행에서 보스 방으로 갈 수 있는 구간 왼쪽(LP), 오른쪽(RP) 포인터를 다음과 같이 정의한다.(오른쪽부터 탐색했을 때 - 보스방이 오른쪽 위이므로) LP = 이전 LP 에서 다음 U 가 나오기 바로 전의 인덱스 RP = 이전 RP 에서 다음 번 U의 인덱스(그대로 내려올 수도 있다.) 보스 방에서부터 구간을 차례대로 내려오면 구간이 계단 모양 혹은 그대로 내려오게 되는데, 매번 해당 구간의 수를 세어주면 된다. 매 행마다 U를 찾으면 시간 초과가 나므로 미리 26가지의 행에 대해 U의 next 인덱스 정보를 전처리 해 주어야 한다. ex) RRRURU RU -> l = 6 , r = 7 UURU RRU R -> l = 4 , r = 6 RRU RRUU U -> l = 3 , r = 6 RRRRUU RR -> l = 0 , r = 5 # 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&l