My Boundary As Much As I Experienced

https://www.acmicpc.net/problem/11729 문제 수준: 실버1, DFS 문제 요약: 유명한 하노이탑 문제이다. 1번 영역에서 3번 영역으로 모든 탑을 옮기면 되는 문제이다. 조건은 2가지 있다. 1. 한 번에 1개의 디스크만 옮길 수 있다. 2. 자신보다 작은 디스크 위에 더 큰 디스크를 올려놓을 수 없다. 이때 탑의 높이가 주어지면 최소 몇 번의 이동으로 3번까지 옮길 수 있는지를 구하여라. 입출력 예 (입력 / 출력): 문제 풀이 전략: 결국 가장 아래에 깔린 가장 큰 디스크가 3번 영역에 도달을 해야 나머지를 옮길 수 있다. 그 말인 즉슨 N개의 디스크가 있다면 N-1개의 디스크를 2번 영역(보조영역, Auxiliary)에 옮겨놔야(step1 -> step2) 1번의 맨마지..

https://www.acmicpc.net/problem/1992 문제 수준: 실버1 문제 요약: 흑백 영상을 압축하여 표현하는 데이터 구조로 쿼드 트리라는 방법이 있다. 주어진 영상이 모두 흰색이면 '0'을 출력하고, 모두 검은색이면 '1'을 출력한다. 주어진 영상이 흰색과 검은색이 섞여있으면, 화면을 4등분으로 나눠서 괄호 안에 좌상단, 우상단, 좌하단, 우하단 순서로 숫자를 기입한다. 자세한 예는 아래와 같다. 위의 그림에선 4x4 픽셀에 우측 상단에만 흰색이고 나머지 영역은 검은색이다. 이는 (0111)이라고 표현할 수 있다. 이런 경우에는 어떻게 표기할까? 좌상단을 기준으로 봤을때도 한 픽셀이 검은 영역이 되어 깔끔하게 흰색이 아닌 상황이다. 이럴땐 좌상단을 기운으로 또 한번 4분면을 나눠 괄호..

https://www.acmicpc.net/problem/10799 문제 유형: 스택 문제 요약: '()'되어 있는 곳이 레이저로 자르는 곳. 그 이외의 괄호는 한 판때기의 시작점 혹은 끝점을 나타낸다. 레이저로 자른 판때기는 총 몇 개가 나오는가? 입출력 예 (입력 / 출력): 총 몇 개인지를 출력값으로 내보낸다. 문제 풀이 전략: 판때기의 시작점인 '('은 판이 현재 열마나 깔려있나를 보여주는 갯수이다. 판때기의 끝점인 ')'은 깔려있는 칸이 하나 줄어든다는 뜻이다. 그리고 잘리고 남은 나머지 조각 1개가 발생한다는 뜻이다. 레이저를 뜻하는 '()'은 현재까지 판때기가 얼마나 깔려있는지를 카운팅하라는 뜻으로 볼 수 있다. 이 문제는 stack을 이용해 풀 수 있다. '('을 계속 카운팅하다가 '()'..

https://www.acmicpc.net/problem/3986 문제 유형: stack 문제 요약: 평석이는 단어 위로 아치형 곡선을 그어 같은 글자끼리(A는 A끼리, B는 B끼리) 쌍을 짓기로 하였다. 만약 선끼리 교차하지 않으면서 각 글자를 정확히 한 개의 다른 위치에 있는 같은 글자와 짝 지을수 있다면, 그 단어는 '좋은 단어'이다. 평석이가 '좋은 단어' 개수를 세는 것을 도와주자. 입출력 예 (입력 / 출력): 좋은 단어와 나쁜 단어 설명: 나쁜 단어는 A끼리, B끼리 연결 시켰을 때, 서로 교차하는 단어를 뜻한다. 좋은 단어는 겹치지 않는 단어이다. 이렇게 보면 회문을 찾으라는 문제처럼 생각할 수 있는데 이런 경우는 회문이 아니어도 중첩되지 않는다. 문제 풀이 및 전략: 예시로 보아 단지 A..

GSAP이란? GSAP은 자바스크립트 애니메이션 라이브러리이다. CSS로도 transition이나 애니메이션을 만들 수 있고, JS로도 어느정도 동적인 웹사이트를 만들 수 있지만, GSAP을 이용하면 훨씬 더 쉽게 애니메이션을 만들 수 있다. 반복적이거나 yoyo효과같은 것도 만들 수 있다. 기본적인 사용법 (조작할 수 있는 속성) 더보기 위치 및 크기: x: 요소의 가로 축 위치를 이동합니다. y: 요소의 세로 축 위치를 이동합니다. left: 요소의 왼쪽 위치를 이동합니다. top: 요소의 위쪽 위치를 이동합니다. right: 요소의 오른쪽 위치를 이동합니다. bottom: 요소의 아래쪽 위치를 이동합니다. width: 요소의 너비를 조절합니다. height: 요소의 높이를 조절합니다. scale: ..

공통점 .append()와 .appendChild() 모두 대상 객체에 자식 노드를 추가하는 메소드이다. .append() append메소드를 사용하면 노드 객체(Node Object)나 DOMstring을 사용할 수 있다. 1. 바로 텍스트를 추가할 수 있다. 2. 여러 개를 한꺼번에 추가할 수 있다. .appendChild() 1. 텍스트를 추가하려면 createTextNode를 만들어서 첨부해야 된다. 2. 한 번에 하나의 요소만 추가 가능하다. 결론 여러모로 append를 쓰는게 낫겠다. appendchild를 여러번 쓸걸 한 번에 처리할 수 있을거같다.

정의: Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다. Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 말이 너무 어려운데, 쉽게 말하자면, 외부 API를 호출했는데 값이 아직 안 왔다는지, 의도적으로 setTimeout(시간 지연)하고나서 그 값을 활용해야된다는지 등등.. 다른 모종의 이유로 아직 값이 할당되지 않은 변수를 활용하는 방법 중 하나이다. 예를 들어 날씨 API를 활용하여 기상 예보를 보여주는 사이트가 있다고 해보자. 이 사이트에는 이런 로직이 있다. 1. 날씨 API를 사용해서 오늘의 날씨를 조회한다. 2..

인터넷 프로토콜의 한 종류로서 2010년에 페이스북이 발표했다. 대부분의 웹페이지가 메타 정보 중 decription과 title정도는 표출해주기도 하지만, 그것만으로 링크의 정보를 파악하기 힘든 경우가 많다. 이 문제점을 개선하기 위해 웹페이지에 대한 정보를 담고 있는 메타 정보의 사용 방식을 표준화하여 페이스북을 포함한 모든 sns 링크 공유 시 통일된 형식으로 정보를 표출하게 설계되었다. sns에 특화된 프로토콜이다. SEO에 도움이 되는가 SEO에 직접적인 영향을 주지는 않는다. 하지만 오픈 그래프 태그를 사용했을 때 웹사이트의 사용자 유입, 전환률에 확실한 영향을 준다는 점에서 SEO 못지않은 큰 장점을 가지고 있다. 기본형 og:title - 웹 페이지 제목 og:type - 웹 페이지 유형 ..

Callback 콜백이란? 함수가 끝나고 난 뒤에 실행되는 함수. 자바스크립트에서 함수는 객체이다. 따라서 함수는 함수를 인자로 받고 다른 함수를 통해 반환될 수 있다. 인자로 대입되는 함수를 콜백함수라고 부른다. 다른 함수에 콜백 함수를 대입하는 방법 1. 익명함수로 전달 myDiv.addEventListener("click", function (){ console.log("익명함수를 넣어서 동작!") }) // 사실 기명함수를 선언해서 넣어도 똑같다. 이름이 있으나 없으나 상관없다. 2. 화살표 함수로 전달 myDiv.addEventListener("click", () => console.log("화살표 함수를 넣어서 동작!")}) 3. 선언/표현한 함수를 전달 myDiv.addEventListene..

패리티 비트란? 패리티 비트(Parity Bit)는 정보 전달 과정에서 오류가 생겼는 지 검사하기 위해 추가하는 비트를 말한다. 즉, 오류 검출을 위해 전송하고자 하는 데이터의 끝에 1비트를 더하여 전송하는 방법이다. (1바이트(8비트) 구조에서 피리티 비트는 7비트 크기의 ASCII 코드를 제외한 나머지 1비트이다.) 120이라는 수가 있다고 해보자 실수로 맨 앞의 1이 소실 되면 56으로 읽힌다. 이걸 방지하기 위해 1의 갯수가 몇 개 였는지 확인하는 패리티비트를 만들어 1bit 할당한다. 짝수면 0, 홀수면 1 을 할당한다. 그러면 1bit 정도 손실되어도 예측가능하다. (패리티 비트가 짝수라고 했으니 손실된 데이터는 1이겠지? 식으로) 데이터 송수신 과정에서 일어날 수 있는 데이터 손실을 어느 정..