본문 바로가기
24. 오등큰수(17299) 문제. 크기가 N인 수열 A = A1, A2, ..., AN이 있다. 수열의 각 원소 Ai에 대해서 오등큰수 NGF(i)를 구하려고 한다.Ai가 수열 A에서 등장한 횟수를 F(Ai)라고 했을 때, Ai의 오등큰수는 오른쪽에 있으면서 수열 A에서 등장한 횟수가 F(Ai)보다 큰 수 중에서 가장 왼쪽에 있는 수를 의미한다. 그러한 수가 없는 경우에 오등큰수는 -1이다.예를 들어, A = [1, 1, 2, 3, 4, 2, 1]인 경우 F(1) = 3, F(2) = 2, F(3) = 1, F(4) = 1이다. A1의 오른쪽에 있으면서 등장한 횟수가 3보다 큰 수는 없기 때문에, NGF(1) = -1이다. A3의 경우에는 A7이 오른쪽에 있으면서 F(A3=2) 답:from collections import Cou.. 2024. 9. 12.
6. [Proxy Trap 5~7챕터] 자바스크립트 완전 끝내기: ES6+ 심화 5. defineProperty(), preventExtensions() , isExtensible() 트랩 Object.defineProperty() 정적 메서드는 객체에 새로운 속성을 직접 정의하거나 이미 존재하는 속성을 수정한 후, 해당 객체를 반환합니다. Object.preventExtensions() 메서드는 새로운 속성이 이제까지 객체에 추가되는 것을 방지합니다 (즉 객체의 장래 확장을 막습니다). Object.isExtensible() 메서드는 객체가 확장 가능한지(객체에 새 속성을 추가할 수 있는지 여부)를 결정합니다. 6. getPrototypeof(), setPrototypeof() 트랩 Object.getPrototypeOf() 메서드는 지정된 객체의 프로토타입(가령 내부 [[Pr.. 2024. 9. 11.
23. 쇠막대기(10799), 오큰수(17298) 문제. 여러 개의 쇠막대기를 레이저로 절단하려고 한다. 효율적인 작업을 위해서 쇠막대기를 아래에서 위로 겹쳐 놓고, 레이저를 위에서 수직으로 발사하여 쇠막대기들을 자른다. 쇠막대기와 레이저의 배치는 다음 조건을 만족한다.쇠막대기는 자신보다 긴 쇠막대기 위에만 놓일 수 있다. - 쇠막대기를 다른 쇠막대기 위에 놓는 경우 완전히 포함되도록 놓되, 끝점은 겹치지 않도록 놓는다. 각 쇠막대기를 자르는 레이저는 적어도 하나 존재한다. 레이저는 어떤 쇠막대기의 양 끝점과도 겹치지 않는다.아래 그림은 위 조건을 만족하는 예를 보여준다. 수평으로 그려진 굵은 실선은 쇠막대기이고, 점은 레이저의 위치, 수직으로 그려진 점선 화살표는 레이저의 발사 방향이다.답:n= input()stack=[]cnt = 0for i in .. 2024. 9. 11.
[9/10] 프론트엔드 스터디 후기 1. 참여한 과정구름톤 유니브에 프론트엔드로 지원하게 되었고, 운이 좋게도 뽑히게 되었다.이후 리액트를 배우게 되었다. 지금은 자바스크립트 심화버전을 듣고 있다.2. 어떻게 진행했는가진행은 파트 스터디와 전체 스터디로 나뉘게 되었다.두 개의 스터디 모두 일단은 온라인으로 진행이 되었으며, 일요일에 파트 스터디, 화요일에 전체 스터디를 진행한다. 시간은 오후 6시이다. (파트는 다름)또한, 개강 이후에 전체 스터디는 오프라인으로 진행하고 있다.이후 시간은 바뀔 수 있다. (지금 오후 6시임)3. 어떤 내용을 공부했는가 자바스크립트 심화 버전에 대한 공부를 진행하였다.(물론 이 전 내용도 포함되지만, 일단 주간에 대한 것만 올리겠다. 그 동안 배운 것은 티스토리에 전부 기록을 해두었다.)다만 내용이 좀 심화.. 2024. 9. 11.
VITE / React / VUE / NEXT 프레임워크를 이용한 포트폴리오 사이트 만들기 <프로젝트> VITE / React / VUE / NEXT 프레임워크/라이브러리를 이용한 포트폴리오 사이트 만들기https://www.youtube.com/playlist?list=PL4UVBBIc6giLabEb4ygOmKDWCnsSKq2uP 포트폴리오 사이트 만들기 2023안녕하세요! 웹스토리보이입니다. 이 강의는 Vite, React, Vue, 그리고 Next.js를 사용하여 멋진 포트폴리오 사이트를 만드는 방법을 소개합니다. 다양한 프레임워크를 활용하여 프론트엔드 개발자로www.youtube.com관련 영상이다. (이런 게 있었다니.. 역시 유튜브와 구글의 세계는 엄청 큰 거 같다.)나의 경우 가장 많이 쓰이는 리액트를 배웠기 때문에, 일단은 리액트로 진행할 거 같다.다만, 다른 라이브러리를 배운 분들도 참고가.. 2024. 9. 10.
배달의 민족 폰트 css 적용법 (배달의 민족뿐 아니라 다른 폰트들도 이런 식으로 적용해 주면 됩니다. 원리는 똑같음)https://youtu.be/wWa-iDiZG44?si=ezGRiPHJanN3wUb8(영상 참고)> 핵심은 "배달의 민족 폰트"를 검색하고, 이후 사이트에 가서 TTF를 다운(윈도우 용이라고 생각하면 편함.) - (맥이면 OTF를 다운로드하면 됨)이후 얻은 파일을 적용하고 싶은 파일로 이동시켜주면 됨.(나의 경우, 아예 외부 폴더로 "font"를 만들고 거기에 넣어 두었다. 이러면 관리가 굉장히 쉽고, 추가하기도 좋다.)보면 비주얼 스튜디오 코드라는 "메인 폴더" 밑에 font라는 폴더를 만들었다. 그리고 다운로드를 받은 BMJUA_ttf.ttf을 font 폴더 안에 넣어주었다.이후 @font-face 구문을 사용해 .. 2024. 9. 9.
5. [Proxy Trap 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. set() 트랩-1: set(), set() 트랩 호출, set() 트랩 준수사항 세트(Set)는 자바스크립트에서 고유한 값들의 집합을 다루는 자료구조이다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있다.세트(set)는 한마디로 순서가 없는 중복되지 않은 데이터의 집합이다. 배열(array)과 차이점을 이해하는 것이 무엇보다 중요하다.배열은 데이터를 순서 있게 저장한다. 그래서 인덱스(index)를 통해서 특정 위치에 저장되어 있는 데이터에 접근이 가능하다. 그리고 배열에는 동일한 값을 여러 번 저장할 수 있다. 값이 동일하더라도 인덱스가 틀리기 때문에 데이터의 중복이 문제 되지 않는다.반면에 세트는 얼핏 보기에는 배열과 비슷해보일 수 있지만 사실 결이 아주 다른 자.. 2024. 9. 8.
22. 덱(10866) ,단어 뒤집기2(17413) 문제.정수를 저장하는 덱(Deque)를 구현한 다음, 입력으로 주어지는 명령을 처리하는 프로그램을 작성하시오.명령은 총 여덟 가지이다.push_front X: 정수 X를 덱의 앞에 넣는다.push_back X: 정수 X를 덱의 뒤에 넣는다.pop_front: 덱의 가장 앞에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력한다.pop_back: 덱의 가장 뒤에 있는 수를 빼고, 그 수를 출력한다. 만약, 덱에 들어있는 정수가 없는 경우에는 -1을 출력한다.size: 덱에 들어있는 정수의 개수를 출력한다.empty: 덱이 비어있으면 1을, 아니면 0을 출력한다.front: 덱의 가장 앞에 있는 정수를 출력한다. 만약 덱에 들어있는 정수가 없는 경우에는 -1을 출력.. 2024. 9. 8.
4. [Proxy 1~4챕터] 자바스크립트 완전 끝내기: ES6+ 심화 1. 기본 오퍼레이션: Proxy란, 기본 오퍼레이션 논리이번에는 proxy를 배워보았다. (오퍼레이션은 연산자를 뜻함.) Proxy는 특정 객체를 감싸 프로퍼티 읽기, 쓰기와 같은 객체에 가해지는 작업을 중간에서 가로채는 객체로, 가로채진 작업은 Proxy 자체에서 처리되기도 하고, 원래 객체가 처리하도록 그대로 전달되기도 한다.let proxy = new Proxy(target, handler)target – 감싸게 될 객체로, 함수를 포함한 모든 객체가 가능하다.handler – 동작을 가로채는 메서드인 '트랩(trap)'이 담긴 객체로, 여기서 프락시를 설정한다.(예시: get 트랩은 target의 프로퍼티를 읽을 때, set 트랩은 target의 프로퍼티를 쓸 때 활성화됨).2. Proxy 논리.. 2024. 9. 7.
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.