분류 전체보기

[프로그래머스] 거리두기 확인하기

문제 코딩테스트 연습 - 거리두기 확인하기 [["POOOP", "OXXOX", "OPXPX", "OOXOX", "POXXP"], ["POOPX", "OXPXP", "PXXXO", "OXXXO", "OOOPP"], ["PXOPX", "OXOXP", "OXPOX", "OXXOP", "PXPOX"], ["OOOXX", "XOOOX", "OOOXX", "OXOOX", "OOOOO"], ["PXPXP", "XPXPX", "PXPXP", "XPXPX", "PXPXP"]] [1, 0, 1, 1, 1] programmers.co.kr 코드 function solution(places) { const w = 5; const h = 5; function checkDistance(x, y, place) { const [dx..

[HTML] script 태그의 async, defer 속성

Script 태그 DOM이 생성될 때, Script 태그를 만나면 DOM 생성을 멈추고 Script를 실행한다. src 속성을 포함한 외부 스크립트를 만났을 때에도 마찬가지이다. 해당 스크립트를 다운 받고 실행할 때 까지 Script 태그 아래에 선언된 DOM 요소들은 대기해야 한다. 여기서 DOM 생성을 중단하지 않고, 스크립트를 동시에 내려받게 할 수 있는 방법으로 defer, async가 있다. DOM 생성 중단이 일어난다면 어떤 문제가 발생하는가. 위에서 언급한 대로, 스크립트 태그 아래에 있는 DOM 요소는 대기하므로, 해당 DOM 요소들에 접근할 수 없다. querySelector와 같이 DOM을 직접적으로 조작하여 핸들러등을 추가하는 등의 행위가 불가능하다. 스크립트의 용량이 크다면, 페이지..

[CORS] 다른 출처간 CORS 에러 해결과 웹팩 개발 서버의 Proxy 설정

Why? 부스트캠프 멤버십에서 최종 프로젝트를 진행하면서 기술공유를 할 기회가 있었는데, 프로젝트를 ncloud 인스턴스에 배포하면서 겪은 문제를 정리한 글이다. 개발을 하면서 상당히 짜증나는 이슈인 CORS 에러를 해결하기 위해 학습하면서 웹팩 개발 서버의 proxy 옵션에 대해서 더 이해하였고, 설정하는 방법 등을 포함 해 정리하였다. CORS? 배포 환경 뿐 아니라 심지어 로컬 환경에서도 자주 보이는 녀석 아니 친구.. CORS. 일명 코스는 Cross Origin Resource Sharing의 약자이다. mdn에 의하면 CORS는 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제이다. 웹 애플리케이션은 리소스가 자신의 ..

웹 크롤링과 웹 크롤러 봇

웹 크롤링 웹 사이트에 있는 데이터를 추출해서 사용하기 위한 목적으로 홈페이지 내용을 수집하고, 추출하는 것 특정한 규칙에 맞춰서 웹 페이지에 방문해서 내용에 포함된 데이터를 가져오는 것이다. 요약 : 사용자가 검색해서 결과로 나온 정보를 노트에 써놓는 것과 비슷한 행동을 프로그램이 반복해서 저장하도록 만드는 것 웹 크롤러 봇 스파이더, 검색 엔진 봇이라고도 한다. 인터넷에서 콘텐츠를 다운로드하고 색인을 생성하여 웹 페이지가 무엇에 대한 것인지를 파악하고, 필요할 때 정보를 추출하기 위해 존재한다. 검색 엔진은 웹 크롤러가 수집한 데이터에 검색 알고리즘을 적용한다. 예를 들어, 구글에서 검색 키워드를 입력하면 보여지는 결과는 이러한 방식으로 수집되어 보여지는 것! 웹 크롤러 봇은, 마치 도서관 사서와 비..

[SourceTree] 소스트리에서 깃허브 private 저장소 가져오기

소스트리 소스트리는 Git GUI 툴이다. 이전 포스팅 중에, Github Desktop을 다룬 글도 있는데 이 역시 Git GUI다. -> 깃헙 데스크톱은 처음 깃을 접할 때 매우 유용하게 사용했다. 깃 커맨드에 대해 조금 공부하고 나서는 그냥 cli에서 깃 명령어를 사용했었는데 이번에 소스트리를 접하게 되었고, 소스트리가 궁금해서 우선 설치했다. 현재 private 저장소를 이용해 프로젝트를 수행중인데, 소스트리의 기본 Oauth를 이용하면 public 저장소만 보이기 때문에, private 저장소를 가져오는 방법에 대해 정리하였다. 소스트리 설치 Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual represent..

[자바스크립트] 비동기 작업의 동기 처리를 위한 Async/Await

첫 비동기 글로 돌아가기 [자바스크립트] 동기와 비동기 동기와 비동기 동기 Synchronous : 동시에 발생하는 순차적, 직렬적으로 태스크를 수행한다. 요청을 보냈다면, 응답을 받아야 다음 동작이 이루어진다. 순차적으로 실행되기 때문에, 어떤 작업이 수 gobae.tistory.com 이전 글 [자바스크립트] 마이크로 태스크 큐 이전 글 [자바스크립트] 프로미스를 이용한 비동기 작업 병렬 처리 이전 글 [자바스크립트] 프로미스 객체 이전 글 [자바스크립트] 비동기로 데이터 가져오기, 콜백 헬 이전 포스팅 [자바스크립 gobae.tistory.com 비동기 시리즈 마지막이다. 지금까지 1. 동기와 비동기 작업을 구분하고, 2. 자바스크립트에서 비동기 작업을 실행할 수 있는 이유 3. 비동기 작업의 콜백..