코딩 30

퍼펫티어와 cheerio 간단하게 익히기 : 스크래핑을 해보자

퍼펫티어(Puppeteer) 번역하면 인형극 이라고 한다. Chrome 팀이 개발한 Node 라이브러리 Headless chrome을 제어 할 수 있다. 고로 puppeteer 를 사용하기 위해서는 Chrome 이나 Chromium 이 필요하다. https://developer.chrome.com/docs/puppeteer/ Puppeteer - Chrome Developers Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrom..

코딩/expressJs 2022.06.29

[C++]Vector

Vector란? C++ 표준라이브러리(Standard Template Library)에 있는 컨테이너 크기가 바뀔 수 있는 배열을 나타내는 시퀀스 컨테이너이다. 동적으로 할당 된 배열을 사용하여 요소 저장이 가능하다. 동적으로 크기가 변하고 메모리가 연속적이기 때문에 자동으로 배열의 크기를 조절 할 수 있고 객체의 추가/삭제가 유연하게 가능하다. 다맨 끝에서만 삽입/삭제가 가능하다. 배열 기반이기 때문에 삽입 삭제가 빈번히 일어날 경우엔 비효율 적이다 각종 선언방법 #include /*vector 이름 ; 으로 vector을 선언*/ vector v_string; vector v_int; vector v_int10(10); //크기를 지정하는 경우 vector v_int1(10,1); //크기 10의 벡..

코딩/C++ 2022.06.14

[CSS] min-width / max-width

- 미디어 쿼리를 사용 할 때 브라우저의 폭을 인식해서 각 조건에 맞게 처리하기 @media (min-width: 1000px) {} /*최소 폭이 1000px 일 때 적용되는 코드 */ => 작은 사이즈의 레이아웃을 기본으로 하고 확장되는 형태로 작성 @media (max-width: 1000px) {} /*최대 폭이 1000px 이하인 경우 적용되는 코드 */ => 가장 큰 사이즈 레이아웃을 기본으로 축소하는 형태로 작성 예시) 전체 화면의 20%이지만 500px 이상으로 커질 땐 커지게 하고 싶지 않을 때 width: 20% max-width: 500px; 자식(li)이 부모(ul)의 width를 넘지 않게 할 때 ul{width: 500px;} li{max-width: 500px;} 참고 : ht..

코딩/HTML&CSS 2022.06.03

분노유발자

19. 분노 유발자 오늘은 수능이 끝난 다음날로 교장선생님은 1, 2학년 재학생들에게 강당에 모여 어벤져스 영 화를 보여준다고 하여 학생들이 강당에 모였습니다. 강당의 좌석은 영화관처럼 계단형이 아니라 평평한 바닥에 의자만 배치하고 학생들이 앉습니 다. 그런데 만약 앞자리에 앉은 키가 큰 학생이 앉으면 그 학생보다 앉은키가 작은 뒷자리 학 생은 스크린이 보이지 않습니다. 한 줄에 앉은키 정보가 주어지면 뒷사람 모두의 시야를 가려 영화 시청이 불가능하게 하는 분노유발자가 그 줄에 몇 명이 있는지 구하는 프로그램을 작성 하세요. ▣ 입력설명 첫 줄에 한 줄에 앉은 학생수 N(3 height[i]; } max = height[n-1];. for(int i = n-1 ; i >= 0 ; i--){ if(max ..

[백준] 2798 블랙잭

https://www.acmicpc.net/problem/2798 문제 카지노에서 제일 인기 있는 게임 블랙잭의 규칙은 상당히 쉽다. 카드의 합이 21을 넘지 않는 한도 내에서, 카드의 합을 최대한 크게 만드는 게임이다. 블랙잭은 카지노마다 다양한 규정이 있다. 한국 최고의 블랙잭 고수 김정인은 새로운 블랙잭 규칙을 만들어 상근, 창영이와 게임하려고 한다. 김정인 버전의 블랙잭에서 각 카드에는 양의 정수가 쓰여 있다. 그 다음, 딜러는 N장의 카드를 모두 숫자가 보이도록 바닥에 놓는다. 그런 후에 딜러는 숫자 M을 크게 외친다. 이제 플레이어는 제한된 시간 안에 N장의 카드 중에서 3장의 카드를 골라야 한다. 블랙잭 변형 게임이기 때문에, 플레이어가 고른 카드의 합은 M을 넘지 않으면서 M과 최대한 가깝..

[CSS] em과 rem의 공통점/차이점

공통점 - CSS의 font-size 값에 비례해서 결정되는 상대 단위 차이점 - font-size이 어느 기준(태그)이냐에 따라 차이가 발생 em : 해당 단위가 사용되는 스타일 지정 태그의 font-size 속성 값이 기준 (만약 없으면? 부모요소로 부터 font-size 값을 상속(inherit)받는다.) rem : r은 root, 즉 최상위 태그의 font-size 속성 값을 기준으로 한다. HTML에서 최상위 태그? 즉, html 태그의 font-size 속성 값이 기준 예시 1 html { font-size: 16px; } div { font-size: 20px; width: 10em; /* 200px */ } div { font-size: 20px; width: 10rem; /* 160px ..

코딩/HTML&CSS 2022.05.24

내가 만든 페이지가 이상했던 이유(box-sizing 속성)

반응형 페이지로 무언갈 만들고 있는 도중 문제점 : 윈도우의 가로 폭을 늘릴 때 아이콘&검색 영역이 전체 을 벗어난다 왜일까? => 아이콘&검색 영역의 폭을 잘못 설정해둬서! 폭을 왜 잘못 설정했을까? => CSS에서 box-sizing 속성에 따라 width와 height를 계산하는 방법을 몰랐기 때문 Box 모델의 크기 : 콘텐츠 크기 + padding(요소 내부 여백) + border(테두리) + margin(요소 외부 여백)값 ✨정리 box-sizing : content-box 요소의 크기 = 콘텐츠의 크기 최종 width = padding + border + 콘텐츠 크기(요소의 width) 예시) .box {width: 350px; border: 10px solid black;}을 적용한 요소의..

코딩/HTML&CSS 2022.05.18

This가 뭐지?

1. This가 무엇인가? 영어에선 This : 👉 이것(지시대명사) 이다. 의미와 같은 역할을 한다 this는 호출한 주체에 대한 정보가 담긴다. 보통 객체지향에선 클래스로 생성한 인스턴스 객체를 의미한다. 즉 클래스에서만 사용가능! 하지만 JS에서는... 어디서든 사용할 수 있다. 그렇기에 어디서 어떻게 사용하는지 어떤 대상을 바라보는지 알아야 한다. 함수와 객체(메서드)의 구분이 느슨한 JS에 this는 긴장감을 준다. 이 둘을 구분하기 때문 this는 실행 컨택스트가 생성될 때(함수를 호출할 때)결정된다. 즉 함수를 어떻게 호출 하냐에 따라 값이 달라진다. 2. 함수와 메서드 함수를 실행하는 두가지 방법 : 함수로 호출 / 메서드로 호출 함수와 메서드의 차이? 독립성 함수 : 그 자체로 독립적인 ..

코딩/JavaScript 2022.05.04

JWT 사용 정리

✔ 공부하면서 중요하다고 생각한 부분 - 토큰은 탈취될 가능성이 있기에 탈취 방지/탈취 당했을 경우를 염두해야 한다! ex) CSRF 방지 XSS 방지 등 ✔ 방법 1. Access Token만 사용할 경우 1) HTTP ONLY 옵션 걸기 2) 토큰발행시 개인을 식별할 수 있는 정보를 암호화 하여 payload에 넣기(IP 혹은 UUID 등) 3) 주기를 짧게 하기 2. Access Token과 Refresh Token 사용하기 1) 로그인을 할경우 Access Token / Refresh Token을 발급하고 저장 2) access token 만료시 refresh token을 이용해 access token 재발급 *이 때, refresh_token도 재발급하면 좋다고 한다. Q. Refresh Tok..

코딩/expressJs 2022.05.03