본문 바로가기
21. 큐(10845) ,조세퍼스 문제(1158) 문제. 정수를 저장하는 큐를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.명령은 총 여섯 가지이다.push X: 정수 X를 큐에 넣는 연산이다.pop: 큐에서 가장 앞에 있는 정수를 빼고, 그 수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.size: 큐에 들어있는 정수의 개수를 출력한다.empty: 큐가 비어있으면 1, 아니면 0을 출력한다.front: 큐의 가장 앞에 있는 정수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.back: 큐의 가장 뒤에 있는 정수를 출력한다. 만약 큐에 들어있는 정수가 없는 경우에는 -1을 출력한다.첫째 줄에 주어지는 명령의 수 N (1 ≤ N ≤ 10,000)이 주어진다. 둘째 줄부터 N개의 줄에.. 2024. 9. 7.
부트스트랩이란? 사용방법. https://youtu.be/3Az_hKsL9L8?si=CPkIEeBADQeHCgyG(관련 영상 참고.)사이트는 다음과 같다.https://getbootstrap.com/ BootstrapPowerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.getbootstrap.comhtml이나 css를 작업할 때, 비슷한 작업을 할 때가 많다.소위 "노가다"를 하는 경우가 많은데... 이 부분에 대한 효율적 방안이 부트스트랩.. 2024. 9. 7.
3. [Class 6~9챕터] 자바스크립트 완전 끝내기: ES6+ 심화 6. 상속, extends 키워드, 상속 구조, 메소드 오버라이딩이번에는 상속을 배웠다. 자바스크립트에서 상속을 어떻게 하는 것인지 배운 셈이다. 키워드는 extends를 이용해 준다.또한 상속에서는 클래스라는 개념을 사용할 수밖에 없다. 클래스를 명명해 주고 extends 키워드를 이용해서 상속을 구현해 주면 된다.(참고로 oop라는 건 객체 지향 프로그램의 줄임말이다.)이를 기반으로 메소드 오버라이딩을 구현할 수 있다.  오버라이딩(overriding)이란 상속 관계에 있는 부모 클래스에서 이미 정의된 메소드를 자식 클래스에서 같은 시그니쳐를 갖는 메소드로 다시 정의하는 것이다.조건은 다음과 같다.1. 오버라이딩이란 메소드의 동작만을 재정의하는 것이므로, 메소드의 선언부는 기존 메소드와 완전히 같아야.. 2024. 9. 6.
20. 스택 수열 (1874), 에디터(1406) 문제.스택 (stack)은 기본적인 자료구조 중 하나로, 컴퓨터 프로그램을 작성할 때 자주 이용되는 개념이다. 스택은 자료를 넣는 (push) 입구와 자료를 뽑는 (pop) 입구가 같아 제일 나중에 들어간 자료가 제일 먼저 나오는 (LIFO, Last in First out) 특성을 가지고 있다.1부터 n까지의 수를 스택에 넣었다가 뽑아 늘어놓음으로써, 하나의 수열을 만들 수 있다. 이때, 스택에 push 하는 순서는 반드시 오름차순을 지키도록 한다고 하자. 임의의 수열이 주어졌을 때 스택을 이용해 그 수열을 만들 수 있는지 없는지, 있다면 어떤 순서로 push와 pop 연산을 수행해야 하는지를 알아낼 수 있다. 이를 계산하는 프로그램을 작성하라.첫 줄에 n (1 ≤ n ≤ 100,000)이 주어진다. .. 2024. 9. 6.
2. [Class 4~5챕터] 자바스크립트 완전 끝내기: ES6+ 심화 4. constructor, constructor 반환constructor가 무엇인지 배웠다. constructor란 "생성자"를 뜻한다.생성자는 인스턴스를 생성하고 초기화하게 만들 수 있다.또한 생성자는 반환도 가능하다.반환을 하고 싶으면 return을 안 작성하면 된다.5. getter, setter, static 메소드, 호이스팅 getter, setter, static 메소드, 호이스팅에 대해 배웠다.객체의 프로퍼티는 두 종류로 나뉜다.첫 번째 종류는 데이터 프로퍼티(data property) 이다. 지금까지 사용한 모든 프로퍼티는 데이터 프로퍼티이다. 데두 번째는 접근자 프로퍼티(accessor property)라 불리는 새로운 종류의 프로퍼티이다. 접근자 프로퍼티의 본질은 함수인데, 이 함수는.. 2024. 9. 5.
19. 괄호 (9012) 문제.괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 부른다. 한 쌍의 괄호 기호로 된 “( )” 문자열은 기본 VPS 이라고 부른다. 만일 x 가 VPS 라면 이것을 하나의 괄호에 넣은 새로운 문자열 “(x)”도 VPS 가 된다. 그리고 두 VPS x 와 y를 접합(concatenation)시킨 새로운 문자열 xy도 VPS 가 된다. 예를 들어 “(())()”와 “((()))” 는 VPS 이지만 “(()(”, “(())()))” , 그리고 “(()” 는 모두 VPS 가 아닌 문자열이다. 여러분은 입력으로 주어진 괄호 문자열.. 2024. 9. 5.
CSS에서 반응형 웹페이지를 object-fit 속성으로 컨텐츠 제어하기 object-fit 이란? object-fit은 이미지나 비디오와 같은 대체 요소를 부모 요소 크기에 맞게 조절하는 속성이다. 이 속성은 다양한 값들을 통해 콘텐츠의 크기와 비율을 유연하게 제어할 수 있어, 반응형 레이아웃에 많이 활용되는 속성이다.https://dev-chim.tistory.com/entry/CSS-object-fit [CSS] 반응형 웹페이지, object-fit 속성으로 미디어 컨텐츠를 완벽히 제어하기반응형 디자인은 현대 웹 개발에서 필수적인 요소로 자리 잡았습니다. 다양한 디바이스와 화면 크기에 맞게 웹 페이지를 최적화하는 것은 사용자 경험을 향상하는 중요한 과제 중 하나입니다.dev-chim.tistory.comhttps://www.daleseo.com/css-object-fit.. 2024. 9. 4.
1. [Class 1~3챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. 객체 지향 프로그래밍: 객체 구성 요소, 객체의 구체화, 자바스크립트로 OOP 구현첫 챕터에서는 객체의 구성 요소, 객체의 구체화, 자바스크립트로 OOP를 구현하는 것에 대해 알아보았다.기본적으로 자바스크립트는 객체 지향 프로그램이다.2. Class 선언, Class 구조: Class 선언문, Class 표현식두 번째 챕터에서는 클래스의 선언, 구조, 어떻게 선언하는지, 그리고 표현식은 어떻게 되는지 배웠다.참고로 상수와 변수도 배웠다. 상수일 때에는 const, 변수일 때에는 let으로 선언해 주면 된다.그리고, 전체적으로 클래스라는 건 결국 객체를 잘 다루기 위함이라는 것을 기억해야 한다.3. Class 작성 기준, computed name세 번째 챕터에서는 클래스의 작성 기준 그리고 compu.. 2024. 9. 4.
18. 단어 뒤집기(9093) 문제.문장이 주어졌을 때, 단어를 모두 뒤집어서 출력하는 프로그램을 작성하시오. 단, 단어의 순서는 바꿀 수 없다. 단어는 영어 알파벳으로만 이루어져 있다.첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있으며, 문장이 하나 주어진다. 단어의 길이는 최대 20, 문장의 길이는 최대 1000이다. 단어와 단어 사이에는 공백이 하나 있다.각 테스트 케이스에 대해서, 입력으로 주어진 문장의 단어를 모두 뒤집어 출력한다.답:n = int(input())for i in range(n): s = list(input().split()) for j in s: print(j[::-1], end=' ') '''전체 설명'''# a = ['a', 'b', 'c', 'd',.. 2024. 9. 4.
(2024) 리액트 트렌드 라이브러리 정리 https://youtu.be/k0oqyokMm5Y?si=XJvgDYyccSvdI9eq영상 참고하자. 2024. 9. 4.
React Spring(애니메이션 라이브러리) https://youtu.be/jOSu8VzJbpQ?si=Dgv7v-blQvQuYozP(출처 ㅣ 코딩 알려주는 누나)리액트 프로젝트를 좀 더 풍성하게 만들어 줄 수 있다.리액트 스프링을 이용해서 라이브러리를 세팅, 이후 편하게 애니메이션을 줄 수 있다. 세세한 것은 영상 참고. 2024. 9. 4.
CSS 애니메이션 사이트 https://youtu.be/OWaHfpHxgb8?si=NxfAguBRGPu8U2Lx(사용방법)https://animista.net/play Animista - On-Demand CSS Animations LibraryAnimista is a CSS animation library and a place where you can play with a collection of ready-made CSS animations and download only those you will use.animista.net(사이트) 2024. 9. 3.
알아두면 좋은 자바스크립트 애니메이션 라이브러리 (드림코딩을 참고함)https://www.youtube.com/watch?v=wbDpZwDRgRk 이런 라이브러리 등, 애니메이션을 주면 뭔가 있어보이는 사이트가 탄생한다...+ (리액트에서도 잘 적용하게 만들 수 있다. 리액트는 자바스크립트을 잘 빌딩하기 위한 "라이브러리"라는 것을 기억해두자. 그건 알아서 구글링하고, 사이트를 참고해보자.)  - (리액트의 풀 네임은 React.js임 ㅇㅇ) 2024. 9. 3.
리액트에서 외부링크 열기 온클릭 이벤트를 이용해서 외부링크 여는 법. React에서 클릭시 외부링크로 열기React에서 Link태그는 Router와 연관되어 내부의 route로 이동시키기 때문에 다른 외부 링크를 연결하기위해 a태그를 사용할 수 있다. 그렇지만 a태그 없이 클릭 이벤트로 외부링크를 연결하고 싶다면velog.io window.open("외부링크 URL")} ~~ 2024. 9. 3.
자바스크립트 - Intersection Observer(무한스크롤) 자바스크립트에서 스크롤 관련 이벤트 함수를 복기함.(스크롤에 따라 특정 이벤트를 발생시킴, 무한스크롤을 만들 수 있고, 이벤트가 일어나는 시간, 지연 시간도 전부 컨트롤할 수 있게 됨.)https://youtu.be/OrG1wGgGfcI?si=D5850ERYMdg-OtJF(자세한 건 영상을 참고하자.) 2024. 9. 3.
0. 자바스크립트 완전 끝내기: ES6+ 심화 [강좌 소개, 범위] 리액트가 끝나서, 자바스크립트에 대한 심화과정의 강좌를 더 듣게 되었다. 베이스는 리액트라서, 조금은 가벼운 마음으로 듣고자 한다. (그러나 내용은 가볍지 않다...)1. 강좌 소개, 범위: 바이블 강좌, 강좌의 상위 레벨 키워드, 비동기 11단계앞으로 강좌는 어떻게 진행이 될 것인지, 비동기가 무엇인지, 어떤 식으로 단계가 이루어지는지 알려준 강좌였다.2. 강좌 접근, ES6+ 위치, 저서 강좌를 접근할 때 어떤 식으로 접근을 할 건지를 알려주었다.또한 API에 대한 이야기를 많이 할 것이며, API를 가져오고 또 서버에 전송하는 "통신"에 대한 이야기도 한다.결론자바스크립트의 심화버전이며, API에 대한 이야기를 많이 할 것이다. 2024. 9. 2.
17. 스택(10828) 스택을 풀기 전, 스택이 무엇인지 짧게 배우고, 이 부분을 코드로 구현해보자. (구글링은 사랑입니다. 구글링 없이 자신이 직접 바로 코드를 노베이스로 짤 수 있다면, 아마 당신은 천재일 것이다.)스택이란 일종의 "그릇"이다. 그릇에는 데이터가 저장되어 있고, push나 pop을 이용해 데이터를 삽입하거나 뺄 수 있게 된다. 또한 가장 마지막에 들어간 데이터가 가장 처음 나오는 성질을 가지고 있는 자료구조이다.재귀적인 함수, 알고리즘에 사용되며, 웹 브라우저 방문 기록등에도 사용이 된다. 삽입 및 삭제에 O(1), 탐색에 O(n)이 걸리는 시간 복잡도를 가지고 있다.이런 자료들을 로우적인 부분부터 제어하고 싶으면 c언어를 써주면 된다. 그러나 난 백준을 파이썬 언어로 설정해두고 풀어왔으니, 일단은 파이썬으.. 2024. 9. 2.
자바스크립트 복습 (심화버전) - 모듈 시스템 / 버블링&캡쳐링 모듈 시스템모듈(Module) 이란?개발하는 애플리케이션의 규모가 커지면 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 하나의 파일을 모듈(module)이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 여러 개의 함수를 포함하는 라이브러리로 구성되어 있다. 이 모듈을 이용해서 코드를 효율적으로 제어할 수 있게 된다.모듈 장점유지보수용이 - 기능들이 모듈화가 잘 되어 있는 경우, 의존성을 줄일 수 있기 때문에 기능을 개선이나 수정이 용이.네임스페이스화 - 코드의 양이 많아질수록 전역스코프에 존재하는 변수명이 겹치는 경우가 존재. 이때 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제를 해결할 수 있음.재사용성 - 같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 .. 2024. 8. 29.
16. [12단계] 제목: 브루트 포스 (5~6챕터) 5단계. 종말의 수란 어떤 수에 6이 적어도 3개 이상 연속으로 들어가는 수를 말한다. 제일 작은 종말의 수는 666이고, 그 다음으로 큰 수는 1666, 2666, 3666, .... 이다. 따라서, 숌은 첫 번째 영화의 제목은 "세상의 종말 666", 두 번째 영화의 제목은 "세상의 종말 1666"와 같이 이름을 지을 것이다. 일반화해서 생각하면, N번째 영화의 제목은 세상의 종말 (N번째로 작은 종말의 수) 와 같다.숌이 만든 N번째 영화의 제목에 들어간 수를 출력하는 프로그램을 작성하시오.첫째 줄에 N이 주어진다. N은 10,000보다 작거나 같은 자연수이다.첫째 줄에 N번째 영화의 제목에 들어간 수를 출력한다.답:n = int(input())theEndNumber = 666 #종말번호count .. 2024. 8. 29.
CSS 전체적인 복습 (시작하기에 앞서서, 짐코딩님의 무료 강의를 참고하였음을 알림)https://github.com/gymcoding/learn-html-css GitHub - gymcoding/learn-html-cssContribute to gymcoding/learn-html-css development by creating an account on GitHub.github.com(오픈 소스는 다음과 같음. 고마워요 짐코딩!!) HTML/CSS 강의 www.youtube.com  CSS란? CSS란?Cascading Style Sheets의 약자로, HTML문서를 꾸밀 때 사용하는 스타일을 잘 정리한 시트(문서)이다. HTML로 웹 페이지의 뼈대를 만들고, CSS로 웹 페이지를 예쁘게 꾸미는 역할을 한다.CSS 구조C.. 2024. 8. 28.