본문 바로가기

전체 글

 (134)
CSS: Transition 트랜지션은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것이다. 이벤트에 맞추어 즉시 일어나는 것이 아니라 서서히 변화가 일어나기 때문에 더욱 자연스러워 보이는 효과가 있다. transition: all 2s; 위 코드에 대해서 설명을 해보자면 첫 번째 값을 transition을 적용할 이벤트의 범위를 의미한다. all은 모든 프로퍼티 변화에 트렌지션을 적용하겠다는 의미가 된다. 두 번째 값인 2s은 2초의 지연 시간을 준다는 의미를 지니고 있다. transition이 지정된 범위 역시 중요하다. div:hover와 같이 특정 이벤트 안에 지정한 경우에는 해당 이벤트가 발생할 때에만 트렌지션이 적용되고 hover-off가 되는 경우에는 트렌지션이 적용되지 않..
백준 1149번: RGB거리 C++ Code 직관적인 해설을 하기 힘든 문제이다. dp를 이용해 최적의 경우를 구하는 문제인데 하나의 선택이 미치는 영향이 크고 예측할 수 없기 때문에 경우의 수를 가지치기 하기 힘들다. 다만 영향을 끼치는 범위가 전후 1개 노드로 좁기 때문에 시간, 공간 복잡도가 그렇게 심해지지는 않는다.
백준 1904번: 01타일 C++ Code dp는 점화식 문제에도 자주 응용되지만 경우의 수와도 큰 연관이 있다. 그리고 놀랍게도 이 문제는 점화식 문제이면서도 경우의 수와도 연관이 있다. n이 4인 경우를 생각해보자. xxxx는 00xx 또는 1xxx 두 경우로 나누어진다. 이렇게 작은 식으로 쪼개지다 보면 n이 1인 경우와 2인 경우로 나뉘어진다. 따라서 가장 작은 단위를 정의해놓고 반복문으로 처리해준다. 코드를 써놓고 보니 피보나치 수열이라는 것을 알 수 있었다. 경우의 수에 대한 표현이 점화식으로 연결되었다.
백준 1003번: 피보나치 함수 C++ Code dp문제는 탐색으로 푸는 것도 가능하다. 다만 값들을 저장해놓는다는 점에서 시간효율이 우수하다. 또한 데이터 간의 연결을 표현하는 점화식 풀이에도 자주 사용된다. 때문에 dp의 대표적인 예가 피보나찌인 이유가 여기에 있다. i번 째 피보나찌 수열이 가지고 있는 0과 1의 개수는 i-1번 째와 i-2번 째를 더한 수와 같다 따라서 pair형태의 배열을 통해 단순 피보나치 연산을 했다.
백준 2748번: 피보나치 수 2 C++ Code DP 카테고리의 첫 번째 문제이다. 피보나찌 수열은 문제 풀이 방식이 다양하다. 재귀로 해결할 수도 있고 단순 반복 연산으로도 해결할 수 있다. 하지만 가장 메모리 효율이 좋은 방식은 dp이다. dp방식은 자주 사용되는 데이터를 저장해두어 연산의 중복을 막아 시간효율을 증대 시키는 알고리즘이다. 첨부한 코드를 보면 반복문을 통해 아래순번부터 차근차근 쌓아 올렸다. 사실 단순한 연산이지만 재귀로 풀이하는 것 보다는 빠르다.
Project03: Naver API 응용 이번 프로젝트의 주제는 naver의 open api를 이용한 싱글페이지 웹 애플리케이션을 만드는 것이였다. 이때까지 작성했던 단순 html css js로는 해당 작업을 수행할 수 없었고 네이버에서 발급해준 코드를 담은 요청을 하여야만 응답을 받을 수 있었다. 네이버 Open API에 대한 사용은 다음 링크에서 더 자세히 적어놨다. seyoung8239.tistory.com/28 오랜만에 node.js의 express을 사용해보았다. 코딩에 앞서 Udemy 강의의 Section 24 ~ 27에 해당하는 강의를 부분적으로 들으며 짧게 복습했으며, Section 27에서 작성한 코드와 네이버 Open API에서 제공한 레퍼런스와 구현예제 코드를 참고했다. developers.naver.com/docs/papa..
Naver API 사용하기 이번 프로젝트에서 네이버 api를 응용한 페이지를 만들어 보기로 했다. 네이버 오픈 API목록은 다음과 같다. 이번 프로젝트에서 내가 사용할 API는 파파고 번역 api로 번역 인공신경망 기반의 기계 번역을 처리해준다고 한다. 단순 스태틱한 웹으로는 해당 api를 사용할 수 없다. 따라서 서버요청을 통해서 해당 작업을 수행해야 하는데, 본인은 node.js의 express를 활용했다. 서버요청시 네이버에서 발급해준 Client ID와 Client Secret코드를 입력해야만 code 200의 response를 받을 수 있는데, 위 코드는 상단 navigation bar의 Application 안의 애플리케이션 등록을 하면 발급된다. 그리고 서버요칭 시 위 코드를 req의 option란에 담아서 보내면 된다.
Flexbox Display Property display의 프로퍼티는 레이아웃 정의에 사용되는 아주 중요한 프로퍼티이다. 해당 프로퍼티에 속하는 키워드는 다음과 같다. flex 프로퍼티 키워드 설명 block -새로운 라인에서 시작한다 -width: 100%, height: auto (default) -width, height, margin, padding 프로퍼티 지정이 가능하다. inline -다른 요소들과 같은 행에 위치한다 -width, height, margin등의 프로퍼티를 저정할 수 없다. -content의 너비만큼 가로폭을 차지한다. line-block inline 요소와 같이 한 줄에 표현되면서 width, height, margin과 같은 프로퍼티를 설정할 수 있다. display 프로퍼티는 상속되..

티스토리툴바