전체 글

프론트엔드 개발 전반을 다루는 기술 블로그입니다.
TIL/html

vsc(vs code) html 유용한 단축키와 한번에 여러 태그 수정하기

html은 어렵다기보다는 처음에 설계를 잘못하면 시간을 많이 빼앗기는 것 같습니다. 처음부터 어떻게 구조를 짤지 생각을 해두고 마크업을 하면 좋은데 저는 멍청해서 그런지 경험이 부족해서 그런지 (둘 다인 것 같긴함) 계속 수정사항이 생기더라구요 그래서 수정해야될사항이 있을 때 빠르게 수정할 수 있는 단축키들을 공유합니다.. 실질적인 용례는 아래 자세히 서술해두었습니다. 대충 뭔 기능인지 아는데 단축키만 기억 안나시는 똘똘이들은 그냥 표만 보고 대충 써도 될 것 같습니다. ! html구조 자동 완성 link::css css 스타일시트 연결 () 괄호로 묶어주면 한개로 취급됨 뭔가를 반복하고싶을때 효과적 * 태그를 반복시켜줌 tag.클래스이름 클래스명을 가진 태그를 생성해줌 tag > tag 부모,자식요소로..

leetcode

77. Combinations javascript leetcode

문제링크 https://leetcode.com/problems/combinations/ Combinations - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제정보 간단하게 문제를 설명하자면 이렇습니다. 정수 n,k가 매개변수로 주어지고 조합을 구현해야합니다. 각 배열요소는 k만큼의 길이를 가지며. 1부터 n까지의 조합을 반환해야합니다. k만큼의 길이가 주어지는데 k가 정해진값이 아니니 단순 for문 중첩으로 풀기는 꽤 힘들 것 같습니다. 따라서 재귀적인 ..

leetcode

46. Permutation

문제정보 https://leetcode.com/problems/permutations/ 정수로 이루어진 배열이 주어집니다. 배열의 순열을 모두 담은 2차원 배열을 리턴합니다. 예시 Input: nums = [1,2,3] Output: [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]] 정수로 이루어진 배열이 주어지고 그에대한 순열을 구하면 되는 문제입니다. 조건 자체는 굉장히 심플한데 제한사항을 보면 nums.length가 1 [1,2] -> [1,2,3] -> [[1,2,3]] -> [1,2] -> [1] -> [1,3] -> [1,3,2] -> [[1,2,3][1,3,2]] 이런식으로 코드가 진행됩니다. 하나하나 console.log()를 찍어보면서 코드 동작 흐..

react

react 실행오류 - npm ERR! errno -4058 해결방법

항상 느끼는거지만 처음 해보는 것들은 설치부터가 문제입니다. 또 다른 컴퓨터에 설치할 상황을 고려해서 미리 지금의 시행착오를 적어두면서 영어로밖에 나오지않는 해결책 사이에서 저말고 다른분들은 한글로 해결할 방법을 찾기를.. 결론부터 말하자면 맨처음 react를 설치하고 싱글벙글 실행시켜보려는데 실행이 제대로 되지 않는 경우의 대부분은 별거아닌 이유일것 같습니다. 우선 리액트를 사용하기위해서 윈도우 이용자의 경우 shift + 우클릭으로 Powershall을 띄우고 npx create-react-app 폴더명 위 명령어를 통해서 프로젝트를 생성합니다. 싱글벙글 npm start를 해보면 npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\q..

leetcode

448. Find All Numbers Disappeared in an Array

문제링크 https://leetcode.com/problems/find-all-numbers-disappeared-in-an-array/ Find All Numbers Disappeared in an Array - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제정보 정수로 이루어진 배열 nums가 매개변수로 주어집니다. nums에는 1부터 nums.length만큼의 범위의 숫자들이 모두 들어가있었어야 했습니다. nums의 요소 중 빠져있는 숫자들을 모은 배열..

leetcode

39. Combination Sum javascript leetcode

문제정보 요약하자면 다음과 같습니다. 1. 정수를 담은 배열 candidates , 정수 target이 매개변수로 주어짐 2. candidates의 배열요소들을 조합해 target값을 만들 수 있는 경우의 수를 모두 return할 것 3. output은 2차원배열형태로 return 다양한 솔루션이 있겠지만 저는 재귀를 통한 방법을 선택했습니다. 나의풀이(가 아닌) var combinationSum = function(candidates, target) { let index = 0 let tempDataStruct = [] let result = [] function backtracking(index, target, tempDataStruct) { if(target === 0) { result.push([..

leetcode

1365. How Many Numbers Are Smaller Than the Current Number javascript leetcode

문제링크 https://leetcode.com/problems/how-many-numbers-are-smaller-than-the-current-number/ How Many Numbers Are Smaller Than the Current Number - LeetCode Level up your coding skills and quickly land a job. This is the best place to expand your knowledge and get prepared for your next interview. leetcode.com 문제정보 간단히 해석하면 이렇습니다. 숫자로 이루어진 배열 nums가 주어지고요. 배열 nums[i]각각에 대하여 nums[i]보다 값이 작은 배열 요소의 총 개..

javascript

자바스크립트 JS Map()자료구조 정리!

코딩테스트를 준비하면서 array 관련 메서드들이나 재귀함수,이진탐색 등 알고리즘 위주로 공부를 하다보니 상대적으로 자료구조에 소홀하게 되는 것 같습니다. 그래서 그래도 조금이나마 익숙한 Map()부터 보려고요.. ES6에 도입된 문법 Map() 먼저 짚고 넘어가야할 것이 array의 메서드 중 하나인 Array.prototype.map()과 Map()은 이름만 같고 완전히 다르다는것 Map은 굳이 비교하자면 Object에 더 가깝다고 할 수 있는데 메서드가 제한적인 Object에 비해 유용한 메서드들이 많이 구현되어 있다는 특징이 있다. 그래서 object로 풀 수 있는 문제를 Map으로도 풀 수 있는 경우가 꽤 있었던걸로 기억이 나는듯 Map key - value로 이루어짐 key값을 이용해서 val..

leetcode

7. Reverse Integer Javascript Leetcode

문제를 해석하면 다음과 같습니다. 32-bit의 정수가 부호와 함께 주어집니다. 토막지식으로 32비트에서 표현될 수 있는 수는 -2,147,483,647 ~ 2,147,483,647 이에요 이 정수를 뒤집은 형태의 정수로 리턴해주는데 만약에 x를 뒤집은 결과가 32bit로 표현할 수 없다면 0을 return해라~ 라는 문제네요 만약 x = 2000000003 이상인 경우에는 x를 뒤집어버리면 32비트를 초과할것입니다. 저 32bit 이상을 표현할 수 없다면에서 예전에 강의를 들으면서 봤던 Number.MAX_VALUE가 떠올라서 이걸 활용할 수 있지않나?? 하면서 설레는 마음으로 MDN에 들어가보니.. https://developer.mozilla.org/en-US/docs/Web/JavaScript/R..

leetcode

1678. Goal Parser Interpretation leetcode javascript

정답률이 아주 높으면서 쉬운 문제입니다. 인자인 command는 string형태로주어지며 string의 패턴은 G / () / (al) 셋입니다. 주어진 패턴을 각각 G는 G ()는 o (al)은 al로 바꿔주기만하면되는 문제 패턴이 적으니까 for문과 if문만으로도 처리할 수 있을것같네요 /** * @param {string} command * @return {string} */ var interpret = function(command) { let answer = '' for(i=0;i

냠냠맨
React와 TypeScript를 좋아하는 개발자