본문 바로가기

전체보기

(62)
Remove Nth Node From End of List - leetcode var removeNthFromEnd = function (head, n) { // Two pointers - fast and slow let slow = head; let fast = head; // Move fast pointer n steps ahead for (let i = 0; i < n; i++) { if (fast.next === null) { // If n is equal to the number of nodes, delete the head node if (i === n - 1) { head = head.next; } return head; } fast = fast.next; } // Loop until we reach to the end. // Now we will move both f..
Valid Anagram - leetcode Given two strings s and t, return true if t is an anagram of s, and false otherwise. case1: Input: s = "anagram", t = "nagaram" Output: true case2: Input: s = "rat", t = "car" Output: false Hash를 이용한 접근법 주어진 길이를 비교하고 같지 않으면 false를 반환합니다. 빈 객체를 만들어 s문자열에 있는 모든 문자를 키로 저장합니다. 저장할 때 이미 존재하는 키가 있다면 value를 1씩 증가합니다. t문자열은 위에서 만든 객체에서 비교합니다. t문자열이 위의 객체의 키로 존재하지않으면 false를 리턴하고 존재하면 value를 1씩 감소합니다. 최종적..
react & styled-components로 스크롤 꾸미기 웹 사이트에서 왠만해서는 스크롤 기능을 넣지 않으려고 했다. 스크롤이 계속 남으면 거슬리기도 하고 제대로 꾸미지 않으면 사용자는 내용이 짤린 영역을 어떻게 봐야될지 모를 수도 있다. (경험담..ㅠㅠ) 그래서 간단하지만 스크롤에 대해서 정리해보면서 어떻게 꾸몄는지 정리를 해보려고 한다. 1. 스크롤바 스타일에 관한 웹 표준은 존재하지 않는다. 다만, webkit에 한해서 가상요소를 사용하여 스타일을 적용할 수 있다. https://caniuse.com/?search=-webkit-scrollbar 우선 스크롤을 다루기 위해서 아래와 같은 요소를 신경써주면 좋다. (참고: 가상 요소는 이것 보다 더 있다.) ::webkit-scrollbar: 스크롤바 전체 ::webkit-scrollbar-thumb: 스크..
Single Number - XOR 연산자 문제- leetcode Given a non-empty array of integers nums, every element appears twice except for one. Find that single one. You must implement a solution with a linear runtime complexity and use only constant extra space. 방법 2진수로 변환해 각 숫자가 같으면 0, 다르면 1로 나타내어지는 연산자이다. 예를 들어 배열 [4,1,2,1,2]가 있다고 할 때 중복되지 않는 숫자만 받고 싶다면 아래와 같이 사용할 수 있다. const singleNumber = nums ⇒ { return nums.reduce((sum, current) ⇒ (..
Bundle json files with Webpack 웹팩에서 파일을 다루게 되어 module 옵션에 아래와 같이 url-loader을 사용하였다. 참고: url-loader는 파일을 base64 URL로 변환하는 처리를 한다. 즉, 파일을 옮기는 작업이 아니라 변환해서 output directory에 저장하는 역할을 한다. module.exports = [{ mode: 'production', context: __dirname, entry: { app: './src/js/milsymbol/index.js', }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist') }, resolve: { mainFields: ['module', 'main'] }, module: { rules: [..
Best Time to Buy and Sell Stock II 매일 주식을 사고팔기를 할 수 있는데 한 번에 주식을 최대 1주만 보유할 수 있다. 매수 후 당일 즉시 매도할 수 있다. 달성할 수 있는 최대 이익을 찾아 반환하는 문제다. 예1 Input: prices = [7,1,5,3,6,4] Output: 7 Explanation: Buy on day 2 (price = 1) and sell on day 3 (price = 5), profit = 5-1 = 4. Then buy on day 4 (price = 3) and sell on day 5 (price = 6), profit = 6-3 = 3. Total profit is 4 + 3 = 7. 예2 Input: prices = [1,2,3,4,5] Output: 4 Explanation: Buy on day ..
modal popup 구현 순수 자바스크립트로 modal popup을 구현해보려고 합니다. 기능 요구사항 1. "open modal" 버튼을 누르면 팝업이 뜬다. 2. "X" 버튼을 누르면 팝업이 닫힌다. 3. 팝업 이외 부분을 누르면 닫힌다. 4. 팝업 안을 눌렀을 때 닫히면 안된다. index.html open modal 팝업 제목 팝업 내용 123 팝업 내용 123 팝업 내용 123 팝업 내용 123 팝업 내용 123 .body-blackout은 모달 바탕화면이고, modal보다 z-index가 낮게 만들 예정이다. 즉, .body-blackout 위로 modal을 띄운다. style.css html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit..
script 태그의 async와 defer 속성 defer script는 다운로드와 실행이 순차적으로 진행되는 것과 달리 브라우저가 defer 속성을 가진 script를 만났을 때 다운로드를 시작하고 html 파싱을 막지 않는다. 을 만났을 때 실행된다. 의 맨 마지막 줄에 작성하는 것과 같이 스크립트가 DOM을 조작하는 내용을 포함하는 것이 좋다. 참고: https://caniuse.com/?search=defer "defer" | Can I use... Support tables for HTML5, CSS3, etc IntersectionObserver API that can be used to understand the visibility and position of DOM elements relative to a containing elemen..