![]()
개요문제 이름: 최소직사각형 (86491) 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/86491플랫폼: 프로그래머스알고리즘 분류: 완전탐색소요 시간: 10분(...) 문제 전문설명제한사항입출력 문제 풀이해설이 문제는 2차원 배열로 주어진 명함의 가로, 세로 길이를 이용하여 모든 명함을 수납할 수 있는 가장 작은 지갑의 크기를 구하는 알고리즘 문제입니다. 문제 해결을 위해서는 다음과 같은 접근 방식을 사용할 수 있습니다.각 명함의 가로와 세로 길이를 비교하여 긴 쪽을 가로로, 짧은 쪽을 세로로 회전시킵니다.회전시킨 명함들 중 가장 긴 가로 길이와 가장 긴 세로 길이를 찾습니다.찾은 가장 긴 가로 길이와 세로 길이를 곱하여 지갑의 크기..
![]()
개요문제 이름: K번째수 (42748) 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42748플랫폼: 프로그래머스알고리즘 분류: 정렬소요 시간: 30분 문제 전문설명제한사항입출력 문제 풀이해설이 문제는 배열과 정렬, 인덱싱을 다루는 알고리즘 문제입니다. 주어진 배열에서 특정 구간을 잘라내고, 잘라낸 부분을 정렬한 후, 정렬된 배열에서 지정된 인덱스의 값을 찾아내는 것이 목표입니다. 문제에서 요구하는 사항을 정리하면 다음과 같습니다.배열 array와 2차원 배열 commands가 주어집니다.commands의 각 원소는 [i, j, k]로 이루어져 있습니다.array의 i번째부터 j번째까지 자릅니다. (i, j는 1부터 시작)자른 배열을..
![]()
개요문제 이름: 같은 숫자는 싫어 (12906) 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/12906플랫폼: 프로그래머스알고리즘 분류: 스택/큐소요 시간: 1시간 15분 문제 전문설명제한사항입출력 문제 풀이해설이 문제는 배열에서 연속적으로 나타나는 중복 숫자를 제거하고 남은 숫자들을 원래 순서대로 반환하는 알고리즘 문제입니다. 문제에서 요구하는 사항을 정리하면 다음과 같습니다.배열에서 연속적으로 나타나는 숫자는 하나만 남기고 제거한다.제거된 후 남은 숫자들은 기존 배열의 순서를 유지해야 한다.이 문제를 해결하기 위해 스택(Stack) 자료구조를 활용할 수 있습니다. 스택은 후입선출(LIFO - Last In First Out)의 특..
![]()
개요문제 이름: 완주하지 못한 선수 (42576) 문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/42576플랫폼: 프로그래머스알고리즘 분류: 해시소요 시간: 50분 문제 전문설명제한사항입출력 문제 풀이해설이 문제는 마라톤 경기에 참가한 선수들 중 완주하지 못한 한 명의 선수를 찾아내는 알고리즘 문제입니다. 참가자 배열과 완주자 배열이 주어지며, 완주하지 못한 선수의 이름을 반환해야 합니다.문제를 해결하기 위해 '해시 알고리즘'을 사용할 수 있습니다. 해시 알고리즘은 키(key)와 값(value)을 매핑하여 데이터를 저장하고 검색하는 알고리즘으로, 빠른 검색 속도를 제공합니다. 이 문제에서는 참가자의 이름을 키로, 참가자의 수를 값으로 ..
![]()
개요문제 이름: 폰켓몬 (1845)문제 링크: https://school.programmers.co.kr/learn/courses/30/lessons/1845플랫폼: 프로그래머스알고리즘 분류: 해시소요 시간: 20분 문제 전문설명제한사항입출력 문제 풀이해설해당 문제는 배열에서 주어진 조건에 맞게 원소를 선택하여 최대한 많은 종류의 원소를 포함하도록 하는 알고리즘 문제입니다. 이를 해결하기 위해서는 '해시(Hash) 알고리즘'을 활용할 수 있습니다. 해시 알고리즘이란 키(key)와 값(value)을 매핑하여 데이터를 저장하고 검색하는 알고리즘입니다. 해시 함수를 사용하여 키를 해시값으로 변환하고, 이를 인덱스로 사용하여 데이터에 접근합니다. 해시 알고리즘을 사용하면 데이터의 중복을 효율적으로 제거하고 빠른..
![]()
서론FFmpeg은 오디오 및 비디오를 다루는 라이브러리로, 다양한 멀티미디어 형식의 인코딩, 디코딩, 변환, 스트리밍 등의 작업을 수행할 수 있도록 도와준다. 그리고 FFmpeg WASM은 FFmpeg(FFmpeg)을 웹 어셈블리(WebAssembly) 형식으로 컴파일한 라이브러리이다. 즉, 오디오 및 비디오와 관련된 라이브러리를 웹 클라이언트에서도 나름 자유롭게 쓸 수 있게 만든 것이다. 나는 최근 프로젝트가 이것과 관련되어 있어서 이리저리 만지던 참이었다.그러다가 FFmpeg WASM의 디코딩/인코딩 속도를 과연 높일 수 있을지에 대한 의문이 문뜩 들었다. FFmpeg WASM의 디코딩/인코딩 속도가 워낙 CPU를 학대하는데다가, 워낙 느리기 때문이었다.그렇기에 트랜스코드(특정 형식의 파일을 다른 형..
![]()
서론 가계부 개발의 마지막이다. 이제 이게 끝나면 보다 더 심화적인 개발에 들어간다고 해도 무방하다. 그렇기에 기왕 개발하는 김에 이것저것 수정도 해볼 생각이다. 참고로 이번 TIL은 개발 지식보다는 소감이 위주이다. 이번 일자의 프로그래머스 데브코스는 가계부 기능 개발이다. 관리자 권한 실행 이제야 깨달은 것 중에 하나인데, json-server는 관리자 권한으로 실행된 터미널이 필요한 것 같다. 이건 일부 사람에만 해당할 수도 있지만, 어쨌거나 나의 경우에는 관리자 권한으로 실행한 뒤에야 서버가 작동했다. 그 전까지는 'Network Error', name: 'AxiosError'라는 것이 발생했었다. 소감 솔직하게 말하자면 따라치는 것 이상의 수준에는 도달하지 못한 것 같다. 워낙 쉴세 없이 코드들..
![]()
서론 이번 일자 서론은 생략이다...! 분량이 많은 관계로 어서 써야하기 때문이다. 이번 일자의 프로그래머스 데브코스는 Tech Spec 및 프로젝트 세팅이다. 기술 설명서 (Tech Spec) Tech Flow 기술적인 Flow는 다음과 같은 다섯 가지 단계로 나눌 수 있다. 서비스에 접근한다. 유저가 액션을 하면, 서비스는 액션을 입력받는다. 입력받은 데이터를 서버에 저장한다. 현재 자산을 서버로부터 받아온다. 서버로부터 받은 자산 데이터를 화면에 보여준다. 이러한 내용을 상세하게 설명하도록 하겠다. (1) 서비스에 접근 서비스에 접근한다. 구현 목표: 유저가 브라우저에서 화면을 확인할 수 있도록 한다. 필요 유저가 브라우저에 접근한다. 유저가 확인할 수 있는 화면이 그려진다. Tech Flow 1...
![]()
서론 개인적인 사정 + 귀차니즘으로 미뤘던 나머지 며칠 치 분량이나 밀리게 되었다. 그나마 다행인 점은 실습으로 넘어가고 있는지라 쓸 것이 그리 많지 않다는 점이다. 그래도 당장 밀린 것은 변치 않으니 향후 서론과 사족은 가능한 한 최소화할 생각이다. 참고로 당분간은 실습 내용이 주를 이룬다. 코드를 여기에 작성했다간 화끈하게 삭제 조치가 이뤄질 가능성이 크다. 개발 지식보다는 정석적인 TIL(학습 주제, 주요 메모 사항 소개, 공부하며 어려웠던 내용) 혹은 팁이 대부분 내용을 이룰 예정이다. 이번 일자의 프로그래머스 데브코스는 가계부 구현하기 & 자바스크립트 기초이다. 느낌표 두 개(!!) true //true !true //false !!true //true false //false !false //..
![]()
서론 프로그래머스 데브코스 11일차의 마지막 파트이다. 이걸 적느라 3일치 분량 정리가 밀렸다니 믿기지 않을 정도다. 일단 어서 파트 3 TIL을 시작하도록 하겠다. 이번 일자의 프로그래머스 데브코스는 자바스크립트 기초 - 객체와 빌트인 객체 그리고 매커니즘이다. 스코프 (Scope) 스코프(Scope)에는 범위 혹은 시야라는 의미가 있다. 이는 변수 접근 규칙에 따른 유효 범위라고 할 수 있다. 더 쉽게 설명하자면 그냥 변수가 어디에서 선언되었으냐에 따른 변수 자체의 유효 범위이다. 이 내용은 사실 9일차 TIL에 이미 한 번 나온바가 있다. 스코프 규칙 // 전역 스코프 var globalVar = "전역"; function outer() { // outer 함수 스코프 var outerVar = "..
![]()
서론 파트 1에 이은 파트 2이다. 지난 파트의 절반 정도밖에 안 되는 분량이니 빨리 진행하도록 하겠다. 이번 일자의 프로그래머스 데브코스는 자바스크립트 기초 - 객체와 빌트인 객체 그리고 매커니즘이다. 객체 지향 프로그래밍 (Object-Oriented Programming; OOP) 객체 지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화를 통해 모델링하려는 프로그래밍 패러다임을 말한다. 즉, 우리가 주변의 실세계에서 사물을 인지하는 방식을 프로그래밍에 접목하려는 사상이다. 이러한 객체 지향 프로그래밍은 클래스 기반 언어와 프로토타입 기반 언어로 나뉜다. 클래스 기반 언어 클래스 기반 언어(Java, C++,..
![]()
서론 어제도 많았는데 오늘도 많다. 이러다가 줄줄이 밀릴지도 모르겠다. 그래도 의미없는 내용은 아닌 것 같다. 어제가 기초였다면 오늘은 프로젝트의 핵심이 되는 요소들이 많기 때문이다. 기초가 없는 사람으로서 이런 건 확실하게 익히고 가는 게 맞다. 물론 그렇다고 해도 너무 많다. 아무래도 파트1, 2가 분리되어서 올라가지 않을까 싶다. 이번 일자는 자바스크립트 기초 - 객체와 빌트인 객체 그리고 매커니즘이다. 객체 (Object) 자바스크립트는 객체(object) 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것이 객체이다. 원시 타입을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다. 또한, 객체는 키(Key)과 값(Value)으로 구성된 프로퍼티(속성)들의 집합이다...
![]()
서론 할 말은 없다. 워낙 급하기 때문에 나머지 말은 사족에 다 몰아서 적도록 하겠다. 강의는 산더미이고, 정리할 것 또한 산더미이다. 지금 당장 안 끝내면 두고두고 밀릴 것이 뻔하다. 이번 일자는 자바스크립트 기초 - 기본 및 control flow이다. 연산자 연산자(Operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(Operand)라 한다. 또한, 다양한 종류의 연산자가 존재한다. - 단항 연산자, 산술 연산자, 관계 연산자, 이진 논리 연산자, 삼항 연산자, 할당 연산자, 옵셔널 연산자, 쉼표 연산자 등등... 산술 연산자 (Arithmetic operator) 피연산자를 대상으로 수학적 계산을 통..
본 글은 추가적인 정리 및 별도의 글로 분리할 주제 및 별도로 해야 할 일에 대해 적어놓는 공간입니다. 미완료 S급 기업에 취업! [CSS] 그리드 [JS] 화살표 함수 표현식 [JS] spread 연산자(...) [JS] 콜백 함수 [JS] 정규 표현식, Array 객체, 컬렉션, JSON, 국제화 [Tistory] 블로그 디자인 수정 [HTML/CSS] 간단한 웹디자인 예시 해보기 [JS] 노션 클로닝 [GIT] 깃 및 깃허브 관련 정보글 쓰기 완료 [CSS] 플렉스박스 ...없음
![]()
서론 아무래도 하늘이 날 버린 것 같다. 작성하던 9일차 글이 날라갔다. 😱 인터넷이 연결되어 있는 줄 알았는데 제대로 연결이 안 되어있던 탓이다. 이제 오늘 중으로 30000~50000자 정도를 전부 써야 TIL을 맞춰서 따라갈 수 있다. 살려ㅈㅜㅓ... 이번 일자는 자바스크립트 기초 - 데이터와 형태다. 메모리와 변수 메모리 데이터를 처리하는 과정에서 처리 흐름마다 값들을 기억해둘 필요가 있다. 컴퓨터는 데이터를 기억하기 위해 메모리를 활용한다. 메모리 데이터를 담아 기억하는 곳. 각 데이터마다 위치 주소값이 존재. 위치를 찾는데에는 메모리의 주소값이 사용. 즉, 메모리라는 것은 컴퓨터의 기억장치를 뜻한다. 이러한 메모리는 물리적으로 다양한 종류가 있으며, 용도면에서도 크게는 2가지 종류(주기억장치,..
![]()
서론 마침내 프로그래머스 데브코스에서의 자바스크립트 학습이 시작되었다. 그리고 나는 아직까지 그리드 정리를 마치지 못했다. 앞으로도 마치지 못할 것 같다. 농담이고 이 속도라면 React 학습에 들어갈 즈음이 돼서야 그리드 정리를 마치지 않을까. 그래도 오늘 공부할 내용은 문제의 그리드보다는 양이 적다고 할 수 있다. 오늘은 어제처럼 좀 일찍이 끝낼 수 있지 않을까 싶다. 이번 일자는 자바스크립트 기초다. 강의 목적 자바스크립트 학습의 근본적인 이유...? 1. 유저들의 불만사항을 해결하기 위해 서비스를 만든다. 2. 서비스를 만들기 위해 웹 개발을 배운다 3. 웹을 개발하기 위해 자바스크립트를 배운다! 파트별 학습 내용 [1부] 데이터 처리 - 변수, 형태, 함수, 실행. [2-1부] 인터렉션(inte..
![]()
서론 큰일 났다. 그리드를 아직 제대로 안 썼는데 7일 차로 넘어가는 TIL 글이다. 처음에는 그리드가 이틀 정도면 다 쓸 것이라고 생각했었는데, 생각보다 그리드 내용이 너무 방대해서 어떻게 해야 할지 감조차 안 온다. 그래도 7일차 내용을 써야 하니 열심히 쓰도록 하겠다. 그런데 하필 7일 차는 학습이라기보다는 지금까지 배운 내용을 총 망라해서 쓰는 쪽에 가까웠다. 그런 관계로 오늘 분량은 프로그래머스 데브코스 강사님께서 중간중간 언급하신 팁이나 개인적으로 중요하다고 생각한 내용 위주로 서술하도록 하겠다. 실습 내용은 정리해서 안 올리냐고 할 수도 있지만, 솔직히 이미 이전 일차들에서 설명한 내용들이 대부분이다. 그리고 그건 아무리 봐도 저작권에 걸릴 것 같다. 코드의 극히 일부라면 모를까, 한 움큼씩..
![]()
서론 일정이 너무나 밀렸다. 이럴 줄 알았으면 진작 마우스를 바꾸는 것인데, 다소 후회되는 감이 적잖다. 일단 오늘 분량은 적은 편이라고 하니 빠르게 진행하도록 하겠다. 이번 일자는 반응형 코드 학습이다. 적응형 웹 vs 반응형 웹 아무리봐도 비슷하게 들리는 두 용어. 그러나 이 둘은 명백히 다른 의미를 지닌 웹 사이트 제공 방식이다. 적응형 웹(Responsive Web Design) 접속하는 기기에 따라 PC용 웹사이트, 테블릿용 웹사이트, 모바일용 웹사이트를 따로 보여주는 기법이다. HTTP GET의 user-agent에서 사용자가 어떤 기기를 쓰는지 확인 후, 해당 기기에 맞추어서 해당 뷰포트에 최적화된 페이지로 넘겨준다. 여러 템플릿을 기반으로 하기에, 필요한 것만 다운로드 받으면 되기에 용량이..
![]()
서론 5일차에서 이어지는 CSS 학습이다. 사실 강의 자체는 5일차에 다 들었으니, 이것도 5일차라고 하는 게 맞지 않나 싶기도 하지만... 문제는 정리하고 추가로 공부하는 게 생각보다 많다는 점이다. 그리고 실질적으로는 바로 다음 날 올라왔어야 했는데, 여러 개인적인 사정으로 일주일이나 거의 미뤄진 뒤에 올라오게 되었다. 살다살다 usb 과전압으로 컴퓨터가 안 켜지고, 키보드&마우스가 고장나고, 감기 때문에 앓아누울 줄이야... 아무튼, CSS 공부 겸 TIL을 계속 이어가도록 하겠다. 오늘은 프로그래머스 데브코스의 강사님들도 중요하다고 말하신 그리드라는 내용이 나온다. 이번 일차는 CSS 학습이다. 표시 유형과 레이아웃 Display 없음 인라인 요소인라인 요소 블록 요소블록 요소 인라인-블록 요소인..
![]()
서론 Flexible Box module. 일명 flexbox라고 불리는 모델은 인터페이스 내의 요소 간 공간 배분과 각종 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 쉽게 말하자면 요소들을 자유 자재로 옮겨 놓는, 그냥 레이아웃 배치 전용 속성이다. 개인적으로는 레이아웃 정렬 옵션 정도로 생각하고 있다. 첫 번째 div 두 번째 div 세 번째 div 네 번째 div 다섯 번째 div 여섯 번째 div 일곱 번째 div .mains { background-color : orange; border : solid 5px brown; margin : 15px; padding : 15px; display: flex; } .box1 { /* 다른 박스 번호들도 동일 */ background-color..
