본문 바로가기

전체 글182

[알고리즘 자습] 문제 해결 접근법 알고리즘이란? 특정 작업을 달성하기 위한 혹은 문제를 해결하기 위해 수행해야 하는 일련의 과정이나 단계를 의미한다. 알고리즘 문제를 풀기 위해, 1. 문제 해결을 위한 계획을 생각해본다. 2. 일반적인 문제 해결 패턴을 파악하고 익힌다. 1. 문제의 이해 ① 내 자신의 말로 문제를 다시 파악하고 설명해보도록 한다. ② 문제에 사용되는 입력값들은 무엇인지 파악한다. ③ 문제의 해답으로 나와야하는 출력값들은 무엇인지 파악한다. ④ 입력값이 출력값을 결정하게 되는지, 문제를 해결할 정보가 충분히 주어졌는지 생각해본다. ⑤ 문제로 제시된 데이터들 중 중요한 부분들이 무엇인지, 어떻게 분류해야 할지, 어떤 이름(용어)을 붙일지 생각해본다. ex) 두 수를 가지고 그들의 총합을 반환하는 함수를 작성하라. ① 내 자.. 2022. 11. 30.
[알고리즘 자습] 빅오 표기법(big O notation), 로그(Logarithms) 프로그램의 연산자의 개수로 계산 1. 상수 개의 연산자 : O(1) ... 처리할 자료 개수 n개에 영향받지 않음. ex) 산술 연산자, 변수 할당, 인덱스를 사용한 배열 요소로의 접근이나 키를 이용한 객체 요소로의 접근, 2. 계수 x의 크기에 상관없이 xn 개의 연산자 : O(n) => 빅오 표현식의 단순화 ... ex) 반복문 but 반복문 조건에 따라 다름 ! 3. 계수 x의 크기에 상관없이 x*n*n 개의 연산자 : O(n^2) => 빅오 표현식의 단순화, 최고차항 ... ex) 중첩(nested) 반복문 입력(n)이 커질수록 알고리즘이 얼마나 얼마나 공간을 많이 사용하게 되는지 cf. 보조 공간 복잡도(auxiliary space complexity) : 입력(n)은 제외하고 알고리즘 자체가 .. 2022. 11. 25.
[백준] 기본 탐색 - 기초 문제 (1543, 1568, 1302, 1668, 1236) 1543번 문서 검색 ◈ 생각해야할 포인트 - 문서의 길이는 최대 2,500이고 단어의 길이는 최대 50로 다루어야할 데이터 양이 적으므로 시간복잡도에 구애받지 않고 문제를 풀면 되겠다. - 문서의 길이 * 단어의 길이로 모든 경우를 살펴보는 시간복잡도 O(NM)의 프로그램 작성해도 괜찮겠다. 1568번 새 문제이해 : 새가 14마리가 있을 때 1부터 숫자를 외치는데 1을 외칠 때는 한 마리가 날아가면서 외치고, 2를 외칠 때는 두 마리가 날아가고 하다가 4를 외칠 때에는 10마리가 날아가 4마리 밖에 안남아서 그 다음 수 5를 외칠 수가 없다. 그래서 다시 처음인 1부터 외치면서 1마리, 그 다음에 2마리가 날아가고 남은 한 마리는 다시 1을 외치며 날아가서 총 7번의 횟수를 통해 모든 새가 날아가게 .. 2022. 11. 17.
VSCode의 확장 프로그램 Comment tagged templates VSCode Plugin 중에 Comment tagged templates를 설치해 사용하면, JS를 작성할 때 JS를 통해 만드는 HTML 부분이나 CSS 부분을 특정하여 하이라이트 되게 해 가독성을 높여주는 프로그램이다 ! 실제로 작성해서 살펴보니, 내가 설정해놓은 테마때문인지 하이라이트는 아니었고, 원래 HTML 파일 작성시의 스타일(색상)으로 변하는 것을 확인할 수 있었다. HTML 코드를 작성할 때에는 /* html */로, CSS 코드를 작성할 때에는 /* css */로 백틱 전에 명시해주면 하이라이트 된다 ! 2022. 11. 9.
CSS 관련 라이브러리와 프레임워크 CSS 전처리기(Post-/ Pre-processors) 1. PostCSS : 91% 2. Sass : 84% 3. Stylus : 35% 4. Less : 34 % CSS Frameworks 1. Tailwind CSS : 78% 2. PureCSS : 70% 3. Ant Design : 56% 4. Bulma : 54% CSS-in-JS 1. vanilla-extract : 87% 2. CSS Modules : 86% 3. Windi CSS : 84% 4. Styled Components : 77% 참고 사이트 : https://2021.stateofcss.com/en-US/technologies The State of CSS 2021: Technologies With nearly 50% of re.. 2022. 11. 7.
1006note SCSS @mixin 키워드를 이용해 매개변수로 SCSS에서 사용할 변수(와 기본값)를 넣어주고, 공통적으로 사용할 스타일을 이름을 정해 @include + 이름으로 불러 사용한다. 변수: size와 color이고, 사용시에는 앞에 const나 let 대신 $를 붙여 사용하면 된다. 기본적으로 변수로 인해 적용될 값은 변수 옆에 : 값 형태로 작성하면 되고, 여러 개의 변수를 사용하고 싶을 때는 , 콤마로 여러 개의 매개변수 형태로 사용하면 된다. 지정한 기본값을 사용하고 싶으면, ( )를 사용하지 않고 @include와 이름만 작성하면 된다. 기본값이 아닌 값을 사용하고 싶을 때에는 명시해서 이름(값, 값) 과 같이 넣어주되, 단 매개변수에 지정한 순서(위치)대로 값을 넣어줘야 원하는 변수의 값으로 사용할 수 .. 2022. 11. 4.
클래스 이름 container? wrapper? 웹페이지 클로닝을 하다 클래스 이름으로 자주 등장하는 container와 wrapper에 대해서 궁금해졌다. 둘다 요소를 감싸거나 포함한다는 의미를 담고 있는 줄은 아는데, 어떨 때 container라는 이름을 붙이는지 어떨 때 wrapper라는 이름을 붙이는지 궁금했다. 애매한건 또 못 참지. 검색을 하다 보니, 어느 블로거 분이 두 명칭 차이를 이해하는데 도움이 되었다는 stack overflow의 글. https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper CSS Language Speak: Container vs Wrapper? What's the difference between container an.. 2022. 11. 4.
[백준] (정렬) 좌표 정렬하기 2, 단어 정렬, 좌표 압축 https://www.acmicpc.net/problem/11651 11651번: 좌표 정렬하기 2 첫째 줄에 점의 개수 N (1 ≤ N ≤ 100,000)이 주어진다. 둘째 줄부터 N개의 줄에는 i번점의 위치 xi와 yi가 주어진다. (-100,000 ≤ xi, yi ≤ 100,000) 좌표는 항상 정수이고, 위치가 같은 두 점은 없다. www.acmicpc.net https://www.acmicpc.net/problem/1181 1181번: 단어 정렬 첫째 줄에 단어의 개수 N이 주어진다. (1 ≤ N ≤ 20,000) 둘째 줄부터 N개의 줄에 걸쳐 알파벳 소문자로 이루어진 단어가 한 줄에 하나씩 주어진다. 주어지는 문자열의 길이는 50을 넘지 않는다. www.acmicpc.net https://ww.. 2022. 10. 31.
JS 표준 내장 객체 - String 메서드 String .charCodeAt() / String.fromCharCode(아스키번호) .includes(str) .indexOf(str) .match(RegExp) .padStart() / .padEnd() .replace() .slice(시작 인덱스, 끝 부분의 다음 인덱스) .split('구분자') / .join('구분자') .startsWith() .substring(begin index) / .substring(begin index, end index) toUpperCase() / toLowerCase() .trim() . 2022. 10. 28.
완주하지 못한 선수 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수들의 이름이 담긴 배열 completion이 주어질 때, 완주하지 못한 선수의 이름을 return 하도록 solution 함수를 작성해주세요. 제한사항 마라톤 경기에 참여한 선수의 수는 1명 이상 100,000명 이하입니다. completion의 길이는 participant의 길이보다 1 작습니다. 참가자의 이름은 1개 이상 20개 이하의 알파벳 소문자로 이루어져 있습니다. 참가자 중에는 동명이인이 있을 수 있습니다. 입출력 예 participantcompletionreturn ["leo", "kiki", "ede.. 2022. 10. 21.
번들러(Bundler) Parcel 번들러의 종류 : Parcel, Webpack, Rollup ... 순수하게 HTML, CSS, JS를 가지고 웹페이지를 만드는데 있어서는 비효율적인 부분이 있기 때문에 다양한 라이브러리를 사용해 작성하게 되지만, 그 라이브러리들이 직접 그 기능을 수행하는게 아니고 그 라이브러리를 통하여 작성된 코드를 가지고 다시 HTML, CSS, JS로 변환하는 작업을 거쳐 웹페이지가 작성된다. 각 라이브러리를 번들러를 통하여 동작할 수 있도록 변환시켜준다. 하지만 번들러가 모든 것을 변환시켜줄 수 없기 때문에 외부 패키지(ex. sass, postcss, typescript, @babel/core, vue-template-compiler 등을 자동으로 설치해준다. Parcel : 구성 옵션 없는 단순한 자동 번들링.. 2022. 10. 19.
VSCode에서 주석 단축키가 적용되지 않을 때 VSCode에서 CSS를 작업하다 한 줄을 주석 처리하려고 ctrl + / 를 눌렀더니 작동을 안하고 위와 같이 되버리는 것이다. 키 입력 모드가 한국어 한컴 입력기로 되어 있었는데, 그 아래의 한국어 Microsoft 입력기 모드로 전환한 뒤, 다시 주석 처리 단축키를 적용해보니 제대로 적용이 되었다 ! 2022. 10. 15.

티스토리툴바