문제https://www.acmicpc.net/problem/2669 문제 해석이 문제는 지나간 거리를 구하는 문제처럼 평면의 각 점에 대한 존재 여부를 확인하는 방법으로 구현 가능하다. 각 직사각형의 좌표를 입력하는데 주의할 점은 꼭짓점 좌표를 포함하면 안 된다. 풀이const filePath = process.platform === "linux" ? "dev/stdin" : "../test.txt";const input = require("fs").readFileSync(filePath).toString().trim().split("\n");function solution(input) { const grid = Array.from({ length: 101 }, () => Array(101).fill..

1장 - 프로그래밍프로그래밍이란?프로그래밍이란 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션 이를 위해선 문제 해결 능력이 중요하고, 0과 1밖에 알지 못하는 기계가 실행할 수 있을 정도로 정확하고 상세하게 요구사항을 설명하는 작업을 의미한다. 컴퓨팅 사고컴퓨터의 관점에서 문제를 사고하려면 해결 과제를 작은 단위로 분해하고 패턴화 해서 추출하며, 프로그래밍 내에서 사용될 모든 개념은 평가 가능하도록 정의해야 한다. 프로그래밍 언어기계어는 사람이 사용하는 언어와 체계가 다르기 때문에 직접 명령을 전달하는 것은 매우 어려워서 컴파일러 혹은 인터프리터를 사용해서 컴퓨터와 대화한다. 이러한 프로그래밍 언어는 구문과 의미의 조합으로 표현된다. 구문과 의미문법을 잘 안다고 해서 외국어를 잘한다고 말할 수 없듯이, ..

날씨가 따뜻해지고 있는 요즘 저는 회사에서 B2B용 사이트 새로 만드는 중입니다. 덕분에 웹 사이트의 기초가 되는 여러 작업들을 해 볼 수 있었는데, 오늘은 그중 사이트 URL을 공유했을 때 나오는 오픈 그래프에 대해 글을 작성하려고 합니다.   오픈 그래프(Open Graph)란?오픈 그래프란 (줄여서 og) 사이트를 공유했을 때 접속하기 전 사이트에 대한 정보를 '미리' 확인해 볼 수 있는 미리 보기이며,HTML 문서의 meta 태그 중 "og:XXX"가 있는 태그들을 찾아내서 보여주는 프로토콜입니다. 카카오톡이나 슬랙 같은 메신저에 링크를 공유하면 쉽게 확인할 수 있으며 소셜 미디어에 특화된 프로토콜이라고 할 수 있습니다.(참고로 오픈 그래프에서 사용되는 오픈 그래프 프로토콜..

이번 글은 SSH 키를 이용하여 로컬 환경에서 개발을 할 때 생겼던 (위 사진) 에러를 해결한 방법을 작성해 보려고 합니다. 에러의 원인은 아래 터미널에서 볼 수 있듯이 SSH는 보통 22번 포트를 사용하는데 계정 설정 과정에서 권한이 빠져버리는 탓에 SSH 연결이 되지 않아 git pull은 되지만 git push가 안 되는 상황이었습니다. ('ssh -T 계정'으로 ssh 연결을 확인할 수 있습니다.) 계정 문제가 해결될때까지 기다리는 방법도 있지만, 급하게 작업 내역을 반영해야 하는 상황에서 사용한 방법을 작성하고, 이왕 포스트를 작성하면서 Github의 HTTPS와 SSH의 차이점 또한 같이 알아보려고 합니다. HTTPS vs SSH Github를 사용하다 보면 레포를 로컬로 클론할때 SSH와 H..

이번글은 개발자라면 누구나 사용해 봤을 console에 대해서 좀 더 자세히 작성해보려고 합니다. 콘솔(console)은 브라우저의 디버깅, 테스트, 로깅 등 콘솔 화면에 접근하여 다양한 기능을 수행할 수 있는 객체입니다. 대표적으로 자주 사용되는 메소드는 console.log() 이지만, 아래 사진 처럼 console 자체를 사용해 보면 다양한 메소드들이 있습니다. 이번 글에서는 모든 다 다루지는 않고 자주 쓰이는 메소드들만 정리해 보겠습니다. JS 로그 레벨 및 브라우저에서 로그 level 지정하는 방법 JS에서 제공하는 로그의 형식은 console[level]() 이며 로그 level은 아래와 같습니다. (위 사진에서도 확인 가능합니다.) debug infor warn error 브라우저에서 로그 ..

많은 서비스에서 자사 서비스 유입을 위해 '배너 광고'를 많이 사용합니다. 그중 프로모션 이벤트 형식의 자사 제품 광고를 할 때 관련 이미지나 정보를 직접 하드코딩하여 배포하는 경우가 많습니다. 이때 단순 반복 작업은 개발 리소스 낭비이기에 배포가 아닌 광고 서비스를 많이 사용하는데요. 이번 글에서는 그중 흔하게 사용되는 Google Ad Manager 적용과정을 개발자 관점에서 작성하려 합니다. 우선 Google Ad Manager와 쓰이는 용어를 간단히 설명하고, 고정된 크기의 광고를 설정하는 법, HTML & CSS를 이용해서 반응형 광고를 설정하고 React에서 적용하는 방법들을 설명하도록 하겠습니다. Google Ad Manager 란? Google Ad Manager는 광고주와 발행사가 디지털..

오랜만에 Outlook 시리즈 글을 작성합니다. 사실 이 시리즈는 그만 작성하려 했지만, Outlook 시리즈를 계속 읽어주시는 분들도 있고, 요즘 너무 글을 작성하지 않아서 간단한 내용이라도 글을 작성하려고 합니다. 앞선 글들을 보면 Outlook Add In의 개발 환경은 크게 웹과 데스크탑 앱 두 가지로 나누는 것을 확인할 수 있습니다. 이때, 웹의 경우 인터넷 브라우저의 개발자 도구를 통해서 쉽게 디버깅할 수 있지만, 데스크탑의 경우 같은 방법으로 디버깅할 수 없습니다. 하지만, 웹과 데스크탑은 디자인적으로 차이가 있으며 웹보다는 데스크탑 앱을 사용하는 경우가 많기 때문에 데스크탑 앱에서의 디버깅은 필수적입니다. (예전에는 확인할 방법이 없었지만, 2023년에 처음으로 방법이 생겼습니다) Mac에..

안녕하세요. 추운 날들이 반복되고 있는데 다들 감기 조심하세요. 🤧🤧🤧 이번글은 React에서 children을 다룰 때 유용한 React.Children에 대해서 정리해 보려고 합니다. 사실 React 공식문서에서는 Children의 사용이 코드의 취약성(Fragile Code)로 이어질 수 있어 사용을 추천하지 않습니다. 하지만 오늘도 회사에서 발견했듯이 많은 레거시 코드들이 남아있으며, 당분간 계속 볼 거 같기에 Children API를 정리하려고 합니다. 추가적으로 글의 마지막 부분에서는 React 공식 문서에서 추천하는 Children을 사용하지 않는 방법 등을 작성할 예정입니다. React Children API란? React에서 정말 자주 사용하는 children과 Children API는 ..