에브리 저장소

문제 링크 이 문제는 배열로 표현된 2진수를 10진수로 변환하는 문제입니다. Testing: [0, 0, 0, 1] ==> 1 Testing: [0, 0, 1, 0] ==> 2 Testing: [0, 1, 0, 1] ==> 5 Testing: [1, 0, 0, 1] ==> 9 Testing: [0, 0, 1, 0] ==> 2 Testing: [0, 1, 1, 0] ==> 6 Testing: [1, 1, 1, 1] ==> 15 Testing: [1, 0, 1, 1] ==> 11 문자열 이진수를 십진수로 변환하는 방법 자바스크립트에는 문자열을 숫자로 바꿔주는 메서드인 parseInt가 존재합니다. parseInt에 인자로 숫자로 변환할 문자열과 radix를 적어, 몇 진수로 표현되어 있는지 알려주면 변환하여..

문제 링크 이 문제는 올바른 PIN 코드 입력을 찾아내는 문제입니다. string으로 들어오는 입력을 받아 올바른 PIN 코드인지 아닌지를 boolean으로 반환하면 됩니다. validatePIN("1234") === true validatePIN("12345") === false validatePIN("a234") === false 정규표현식을 써서 간단하게 해결할 수 있습니다. 정규표현식 문법(?) 중, \d는 digit를 의미하여 0~9 사이가 존재하는지 검사가 가능합니다. 그리고 중괄호를 사용하여, 몇 개 포함되어 있는지를 검사할 수 있습니다. 이 문제를 풀기 위해 다음과 같은 정규표현식을 만들 수 있겠습니다. /^(\d{4}|\d{6})$/ ^, $는 각각 시작과 끝을 의미하고 |는 또는(OR)..

문제 링크 이 문제는 설명이 없습니다.(?) accum이라는 메서드에 문자열 인자를 넣었을 때의 출력 값 예시를 보여주고 동일하게 동작하도록 구현하는 문제입니다. 규칙을 찾아내기 어려운 문제는 아니었습니다. accum("abcd") -> "A-Bb-Ccc-Dddd" accum("RqaEzty") -> "R-Qq-Aaa-Eeee-Zzzzz-Tttttt-Yyyyyyy" accum("cwAt") -> "C-Ww-Aaa-Tttt" 규칙을 분석하면 각 글자들의 순서만큼 해당 글자를 나열하고, 제일 앞일 때는 대문자가 됩니다. 그리고 이 문자들은 '-' 로 연결된다. 정리하면 다음과 같습니다. 입력받은 문자열을 한 글자씩 나눠 배열을 만든다. 각 글자마다 대문자, 소문자를 만들어 저장합니다. 반환할 변수에 대문자를..

최근 면접 스터디를 진행하며 받은 질문 중, 클로저를 사용할 때 주의해야 할 점에 대해 질문을 받았으나 선뜻 대답하지 못했습니다. 😢 이에 메모리 누수를 주의해야 한다.라는 피드백을 받고 알아보니 클로저인 내부 함수가 참조하는 외부 함수의 객체들을 더 이상 사용하지 않아도 가비지 콜렉터가 수집하지 못한다는 내용이 있었습니다. 키워드만 정리해놓고 잊고 있었는데, 다른 분께서 자바스크립트의 가비지 콜렉터 동작 방식에 대해 내용이 있으면 좋을 것 같다는 피드백을 주셨고, 이를 계기로 정리해서 공유합니다. 틀린 내용 지적 등의 피드백은 언제나 감사히 받겠습니다. 참고 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management https:/..

문제 링크 https://leetcode.com/problems/longest-substring-without-repeating-characters/ 풀이 이 문제는 문자열에서 중복 없이 가장 긴 substring의 길이를 반환하는 문제이다. 내가 접근한 방식은 완전 탐색이다. 자신보다 뒤에 있는 문자열들을 순회하면서 중복이 발생하기 전까지의 길이를 찾아 저장해놓은 max length와 비교하는 로직을 작성했다. O(N^2)의 시간 복잡도를 가지기 때문에 상대적으로 너무 느리다. 다른 사람들의 풀이를 보았고, O(N)으로 푸는 코드를 찾았다. 이 코드는 각 문자열을 map이라는 객체에 저장하면서 value로 이 문자가 가장 마지막으로 나온 index를 저장한다. 이로 인해 한번 순회로 중복 없는 최대 길..

문제 링크 https://leetcode.com/problems/sum-of-two-integers/ 풀이 이 문제에서는 +, - 연산자를 사용하지 않고 두 인자의 합을 반환하는 함수를 만들어야 한다. 문제의 조건을 확인하고 비트 연산자를 써야겠다고 생각했으나, 어떤 연산자를 써야 할까 고민했다. 정확한 덧셈을 위해서 Carry와 이를 제외한 합을 알아야 한다. Carry를 알기 위해 사용할 수 있는 비트 연산자는 AND이다. 둘 다 1일 때만 1이므로 AND의 결과가 1이라면 Carry가 발생했음을 알 수 있다. Carry를 제외한 합은 XOR 연산자로 알 수 있다. 둘 중 하나만 1일 때 XOR의 결과가 1이기 때문이다. 실제로 컴퓨터가 덧셈을 AND, XOR 연산자를 통해서 한다고 한다. 덧셈을 실..

반응형 웹 설계 - 미디어 쿼리(Media Queries) 미디어 쿼리란 무엇인가? 미디어 쿼리는 CSS3에서 소개된 CSS 기술입니다. 미디어 쿼리는 특정 조건이 true인 경우에만 CSS 속성 블록을 적용하도록 @media 규칙을 사용합니다. 아래 코드는 브라우저 창의 width가 600px 이하인 경우, body의 배경색을 lightblue로 적용하겠다는 의미를 갖습니다. @media only screen and (max-width: 600px) { body { background-color: lightblue; } } Breakpoint 추가하기 이 전 글에서 Row와 Column을 가진 웹 페이지를 작성했습니다. 브라우저 크기에 따라 화면을 보여주지만, 아주 작은 화면에서는 레이아웃이 보기 좋지..

반응형 웹 설계 - 그리드 뷰(Grid-View) 그리드 뷰 ? 많은 웹 페이지가 그리드 뷰 기반으로 만들어져 있습니다. 그리드 뷰란 column(열)으로 나누어져 있는 웹 페이지 뷰를 의미합니다. 웹 페이지를 설계할 때, 그리드 뷰를 사용하면 HTML 요소를 배치하는 데 매우 도움이 됩니다. 반응형 그리드 뷰는 보통 12개의 column을 가지고 있고, 100%의 width를 가지며, 브라우저 창의 크기가 재조정됨에 따라, 축소되거나 확장됩니다. 반응형 그리드 뷰 만들기 첫 번째로, padding 및 border 속성이 각 요소의 전체 width, height에 포함되도록 모든 HTML 요소의 box-sizing 속성을 border-box로 설정해줍니다. const AppContainer = style..

최근 저의 관심사는 반응형 웹 익히기였습니다. 이는 8월 15일에 코드스쿼드에서 진행한 해커톤에서 시작되었는데, 반응형 웹으로 UI를 구성해볼까? 하는 생각은 했지만 반응형 웹에 필요한 미디어 쿼리 등을 React, styled-components와 함께 사용해본 적이 없었고 이를 팀원들과 진행하는 해커톤에서 하나하나 공부하며 적용하기엔 속도가 매우 더뎌질 것 같았습니다. 언젠간 반응형을 공부해야지, 하고 미뤄왔던 것이 부메랑으로 돌아오자 공부를 시작할 마음이 생겨 나름대로 공부해보았고, 이를 정리해서 남깁니다. 참고 CSS Responsive - W3Schools 반응형 웹 디자인 기본 사항 - Google developers How to create responsive UI with styled-co..

heroku를 사용해 github에 올린 node app을 아주 쉽게 배포하는 방법에 대해 알아보겠습니다. 저는 github-pages, heroku, netlify를 사용해 봤는데 이 세 가지 중 node app 배포는 heroku만 지원해서 heroku로 배포하는 방법에 대해 작성해 보았습니다. heroku에 로그인하면 메인 화면에 배포한 앱 목록을 확인할 수 있습니다. 우측 상단 new 버튼을 누르면 나오는 Create new app을 누릅니다. App name을 설정해주고 지역을 설정해줍니다. 지역은 United States, Europe 두 개뿐입니다. Create app을 눌러줍니다. 다음 화면에서 배포하는 방법을 선택할 수 있습니다. 이미 github에 올라간 프로젝트를 배포할 것이기 때문에..