최근 자동화나 데이터 관련해서 외주를 받아 작업을 하고 있다. 정적 웹 페이지라고 판단된다면 request, bs4을 이용해 처리했고 동적인 페이지라고 생각이 들면 무조건 selenium으로 페이지에 직접 들어가 태그를 탐색해서 데이터를 가져오곤 했다. 하지만 selenium을 이용하여 코드를 작성하면 속도가 느리다는 문제와 크롬드라이버의 의존성이 크다는 문제가 있었다. 설상가상으로 이번에 외주 받은 프로그램에서 사용하는 크롬 버전은 116.0.5845.140이었는데 이때 크롬에서 [$TBD][1472492] CVE-2023-4572 결함으로 인해서 140 버전의 크롬 드라이버를 다운로드하지 못해 난처한 상황이 맞이하곤 했다. (다행히 패치한 141 버전이 외주 마감일 2일 전에 배포되어서 외주를 성공적..
node로 프로젝트를 진행하다 보면 많이 쓰이는 패키지 관리 툴로는 npm과 yarn이 있다. 나는 주로 npm을 이용하여 패키지를 관리했었는데, 다른 프런트 사람들의 프로젝트를 보니 yarn을 쓰는 사람의 수도 적지 않아서 한번 개념을 정리하고자 글을 작성한다. npm npm(Node Package Manager)은 자바 스크립트 언어를 위한 패키지 관리자로, Node.js의 기본 패키지 관리자이다. 전 세계적으로 많은 사람들이 사용하고 있으며 node.js로 만들어진 모듈을 쉽게 관리하도록 도와주는 프로그램이다. 아래는 주로 사용하는 npm 명령어이다. npm init : package.json 생성 npm install : package.json 파일 및 해당 종속성에 나열된 모든 모듈을 설치 np..
이번에는 원격 API을 간편하게 호출할 수 있도록 브라우저에서 제공하는 fetch() 함수에 대해서 이야기해보고자 한다. Fetch 원래 원격 API 호출하면 제일 먼저 떠오르는 것이 request, axios, jquery와 같은 라이브러리이다. 브라우저에서 fetch()을 지원하기 전까지는 클라이언트 단에서 직접 http요청을 하고 응답받는 게 상당히 복잡해서 이러한 라이브러리 사용이 합리적이었지만 이제는 브라우저에 내장되어 있는 fetch() 함수를 이용한다면 대부분의 경우 충분하게 API을 호출할 수 있다. 사용 방법 fetch() 함수는 첫 번째 인자로 URL, 두 번째 인자로 옵션 객체를 받고, Promise 타입의 객체를 반환한다. 옵션 객체에는 HTTP 방식(method), HTTP 요청헤..
전략 패턴 (Strategy Parttern) 전략 패턴이란 객체들이 할 수 있는 행위에 대해 전략 클래스를 생성하고 유사한 행위들을 캡슐화하는 인터페이스를 정의하여 객체의 행위를 동적으로 바꾸고 싶은 경우 직접 행위를 수정하지 않고 전략만 바꿔 행위를 유연하게 확장하는 방법을 의미한다. 헤드 퍼스트 디자인 패턴 책에서는 이를 오리게임에 비유하여 설명한다. 상황 모든 오리가 "꽥" 소리를 내고 수영을 할 수 있기에 슈퍼클래스로 작성한다. 오리마다 생김새는 다르기 때문에 display는 오버라이드 한다. 슈퍼클래스에 fly() 기능을 추가하고 RubberDuck(고무 오리) 클래스도 추가하였다. Duck의 몇몇 서브 클래스만 날 수 있을 뿐 고무오리는 날지 못한다. 하지만 슈퍼 클래스에 fly()을 작성하..
웹 로그인을 구현하다 보면 세션, 토큰, 쿠키, JWT 등의 생소한 용에 대해서 다루는 이야기를 자주 들을 수 있다. 이번에 DRF-simplejwt을 이용하여 jwt 작업을 했는데 세션과 토큰 쿠키 JWT에 대한 개념이 명확하지 않아 이번 기회에 정리해보고자 한다. 쿠키쿠키는 사용자를 기억하기 위해 서버가 사용자의 브라우저에 전송하는 작은 데이터 조각으로, key=value 형식의 문자열 데이터의 묶음이다. 브라우저는 이 문자열 데이터를 저장해 놓았다가 동일한 서버에 재요청 시 쿠키 데이터를 전송할 수 있다. HTTP 프로토콜은 기본적으로 비연결성과 무상태성을 가지고 있기 때문에 서버와 클라이언트 간의 연결 유지를 구현하기 위해 쿠키를 도입했다. 쿠키는 로컬에 저장되며, 브라우저를 종료해도 파일로 ..
DRF에서 뷰를 나타내기 위해서는 2가지의 방법이 있는데 하나는 함수 기반 뷰(Function Base View)와 다른 하나는 클래스 기반 뷰 CBA(Class Base View)가 있습니다. 기본 속성 함수 기반 뷰와 클래스 기반 뷰를 다루기전에 둘이 공통적으로 제공하는 속성 값이 있는데 아래와 같습니다. renderer_classes (직렬화 클래스) - JSON 직렬화 : rest_framework.renderers.JSONRenderer - HTML 직렬화 : rest_framework.renderers.TemplateHTMLRenderer parser_classes (비직렬화 클래스) - JSON 포맷 처리 :rest_framework.parsers.JSONParser - FormParser ..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/120846 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 자연수 n이 주어질 때, n이하의 합성수의 개수를 반환하는 문제이다. 합성수는 약수의 개수가 3개 이상인 수 이므로 for문을 걸어 처리할 때, 약수의 개수가 3 이상이 되면 for문을 빠져나오는 식으로 코드를 작성했다. def solution(n): answer = 0 for i in range(1, n + 1): cnt = 0 for j in range(1, i + 1): if i..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/181925 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 정수 배열이 주어지게 해당 정수배열과 조건에 맞는 배열을 만들어 반환하는 문제이다. 딱히 어려움 없이 조건에 맞게 구현만 하면 되는 문제이다. def solution(numLog): answer = [] start = numLog[0] for i in numLog[1:]: if start + 1 == i: answer.append("w") elif start - 1 == i: answ..
문제 https://school.programmers.co.kr/learn/courses/30/lessons/181898 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 풀이 정수 배열 arr와 idx가 주어질 때, idx보다 크면서 배열의 값이 1인 가장 작인 인덱스를 반환하는 함수를 작성하는 문제이다. 문제를 해결하기 전에 조건을 보면 "idx보다 크면서 배열의 값이 1인 가장 작은 인덱스를 찾아서 반환하라"라는 조건이 있는데 테스트 케이스에 직접 코드를 넣어보면 이문제는 "idx보다 크거나 같은 배열의 값이 1인 가장 작인 인덱스를 찾아 반환" 해야 ..
