제로베이스 프론트엔드 스쿨

해당 글 13건

[JavaScript] strict mode(엄격 모드) 왜 사용해야 할까?

strict mode란? strict mode는 ES5(ECMA Script 5)에 추가된 키워드입니다. 출현 배경으로, 자바스크립트는 꽤나 긴 시간동안 호환성 이슈없이 새로운 기능이 추가되며 발전해왔습니다. 하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결과물이 언어에 묻혀있었습니다. ES5(ECMA Script 5)가 등장하며 새롭게 개정되고 기능이 추가되었습니다. 그렇지만 하위 호환성 문제가 생길 수 있기 때문에, ES5는 기본 모드에서는 동작하지 않도록 설계되었습니다. strict mode를 활성화시에만 동작하며, 그동안 자바스크립트가 묵인했던 불완전한 코드들의 에러 메세지를 발생시켰습니다. // 'use strict'; function test() { x = 10; } test(); con..
프론트엔드 개발[Front-End Development]/JavaScript 2022. 11. 22. 10:59

[CT-L] 75. Sort Colors

문제 설명 Medium 빨간색, 흰색 또는 파란색으로 칠해진 n개의 객체가 있는 배열 nums가 주어지면 동일한 색상의 객체가 인접하도록 빨간색, 흰색, 파란색 순서로 색상을 정렬합니다. 정수 0, 1, 2를 사용하여 각각 빨간색, 흰색, 파란색을 나타냅니다. 라이브러리의 정렬 기능을 사용하지 않고 이 문제를 해결해야 합니다.(sort 함수를 사용 x) **문제에서 요구하는 풀이는 정수 0, 1, 2가 주어지는데 빨간색, 흰색, 파란색이다. 해당 순서대로 정렬을 하는 것으로 오름차순으로 정렬 후 반환하는 것. 하지만 sort() 함수를 사용하지 않고 해결하는 것이 포인트이다. 접근 var sortColors = function(nums) { let temp; for (let i=0; i
프론트엔드 개발[Front-End Development]/Coding Test 2022. 11. 22. 09:16

[CT-L] 49. Group Anagrams

문제 설명 Medium 문자열 strs의 배열이 주어지면 애너그램을 함께 그룹화합니다. 어떤 순서로든 답변을 반환할 수 있습니다. 애너그램은 일반적으로 모든 원래 문자를 정확히 한 번만 사용하여 다른 단어나 구의 문자를 재배열하여 형성된 단어 또는 구입니다. **문제에서 요구하는 풀이는 제시된 strs 배열의 요소들이 애너그램(문자 재배열)을 하여도 같은 종류들을 분류하여 배열화한다. 그리고 분류된 배열 내에서 문자열 오름차순으로 정렬하여 반환한다. 접근 var groupAnagrams = function(strs) { let map = {} let result = []; for (let word of strs) { //배열에 내 각 요소에 접근하여 모든 문자열들을 오름차순하여 anagram 변수에 넣는..
프론트엔드 개발[Front-End Development]/Coding Test 2022. 11. 22. 08:50

[CT-L] 347. Top K Frequent Elements

문제 설명 Medium 정수 배열 nums와 정수 k가 주어지면 가장 빈도가 높은 k개의 요소를 반환합니다. 어떤 순서로든 답변을 반환할 수 있습니다. **문제에서 요구하는 풀이는 제시된 nums 배열의 요소들의 개수를 구하고 개수의 큰 수를 기준으로 반환하는 것이다. 변수 k는 반환할 배열의 요소 개수이다. 접근 var topKFrequent = function(nums, k) { let numObj = {} nums.forEach((v, idx) => { //배열을 요소들을 종류별로 고유 키를 설정하며, 키에 해당되는 값의 개수를 증가시켜 numObj 객체에 할당한다. nums.indexOf(v) !== undefined ? numObj[v] = (numObj[v] || 0)+1 : null; });..
프론트엔드 개발[Front-End Development]/Coding Test 2022. 11. 21. 16:51

[CT-L] 88. Merge Sorted Array

문제 설명 Easy 감소하지 않는 순서로 정렬된 두 개의 정수 배열 nums1 및 nums2가 제공된다. 각각 nums1 및 nums2의 요소 수를 나타내는 두 개의 정수 m 및 n이 제공됩니다. nums1과 nums2를 감소하지 않는 순서로 정렬된 단일 배열로 병합합니다. 최종 정렬된 배열은 함수에 의해 반환되지 않고 대신 배열 nums1 내부에 저장되어야 합니다. 이를 수용하기 위해 nums1의 길이는 m + n입니다. 여기서 첫 번째 m 요소는 병합해야 하는 요소를 나타내고 마지막 n 요소는 0으로 설정되므로 무시해야 합니다. nums2의 길이는 n입니다. **문제에서 요구하는 풀이는 새로운 배열을 생성하지 않고, 제시된 nums1과 nums2의 배열만을 이용하여 풀이를 해야하며 Output은 nu..
프론트엔드 개발[Front-End Development]/Coding Test 2022. 11. 21. 15:18

[CT-L] 215. Kth Largest Element in an Array

문제 설명 Medium 정수 배열 nums와 정수 k가 주어지면 배열에서 k번째로 큰 요소를 반환합니다. k번째 개별 요소가 아니라 정렬된 순서에서 k번째로 큰 요소입니다. O(n) 시간 복잡도로 풀어야 합니다. **문제에서 요구하는 풀이는 nums의 배열에서 제시된 k번째로 큰 수를 구하면 된다. 접근 var findKthLargest = function(nums, k) { //크기별 큰 수를 순서를 구해야 하기 때문에 내림차순으로 배열을 정렬시킨다. nums = nums.sort((a, b) => b-a); // 정렬 후, 배열은 0부터 시작하므로 제시된 k에 -1을 하여 값을 반환한다. return nums[k-1]; }; 솔직히 Medium 문제는 아닌 것 같다... Kth Largest Elem..
프론트엔드 개발[Front-End Development]/Coding Test 2022. 11. 21. 14:55

[CT-L] 122. Best Time to Buy and Sell Stock II

문제 설명 Medium price[i]가 i번째 날의 주어진 주식 가격인 정수 배열 price가 주어집니다. 매일 주식을 매수 및/또는 매도하기로 결정할 수 있습니다. 언제든지 최대 한 주식만 보유할 수 있습니다. 단, 매수 후 당일 매도가 가능합니다. 달성할 수 있는 최대 이익을 찾아 반환해보자 Example : 2일에 매수(가격 = 1)하고 3일에 매도(가격 = 5), 이익 = 5-1 = 4. 그런 다음 4일째에 매수하고(가격 = 3) 5일째에 매도합니다(가격 = 6), 이익 = 6-3 = 3. 총 이익은 4 + 3 = 7입니다. Example : 1일에 매수(가격 = 1)하고 5일에 매도(가격 = 5), 이익 = 5-1 = 4. 총 이익은 4입니다. Example : 플러스 수익을 낼 수 있는 방법..
프론트엔드 개발[Front-End Development]/Coding Test 2022. 11. 21. 14:15

[JavaScript] 타입 체크의 필요성

타입 체크가 왜 필요할까? 개발 중 항상 직면하는 문제는 바로 type error이다. 가장 흔하면서도 중, 대규모 개발에서는 많은 코드가 연동하기 때문에, 초기 단계부터 중, 후반까지 항상 체크하고 정리 해야한다. 자바스크립트는 동적 타입(dynamic typed) 언어이므로 변수에 어떤 값이 할당될 지 예측이 힘들기 때문에 변수 및 함수에는 주석 기입을 필수로 해야 공동 개발자들이나 나에게 오류를 방지할 수 있게 해준다. function sum(a, b) { return a + b; } 한가지 예로, 해당 sum 함수는 Number 타입의 a, b 인수를 넣어 2개의 인수를 더해 반환하는 것으로 추측된다. 하지만 정확히 어떠한 타입의 인수가 들어가는지 한눈에 확인을 할 수 없기 때문에, 타입을 기입한..
프론트엔드 개발[Front-End Development]/JavaScript 2022. 11. 20. 23:11

[CT-L] 692. Top K Frequent Words

문제 설명 Medium 문자열 배열 단어와 정수 k가 주어지면 가장 자주 사용되는 k 문자열을 반환합니다. 가장 높은 빈도에서 가장 낮은 빈도로 정렬된 답변을 반환합니다. 빈도가 같은 단어를 사전순으로 정렬합니다. 접근 첫번째. var topKFrequent = function(words, k) { let obj = {} let result = [] words.forEach((val, idx)=>{ if (obj[val] === undefined) { obj[val] = (obj[val] | 0) + 1; } else { obj[val] = obj[val] + 1; } }); let max = 0; let sortable = [] for (var name in obj) { if (max { if (obj..
프론트엔드 개발[Front-End Development]/Coding Test 2022. 11. 14. 23:47

[CT-L] 11. Container With Most Water

문제 설명 Medium 길이가 n인 정수 배열 높이가 제공되며, i번째 선의 두 끝점이 (i, 0) 및 (i, height[i])가 되도록 n개의 수직선이 그려집니다. 컨테이너에 가장 많은 물이 포함되도록 x축과 함께 컨테이너를 형성하는 두 개의 선을 찾으십시오. 컨테이너가 저장할 수 있는 최대 물의 양을 반환합니다. 접근 첫번째. var maxArea = function(height) { let result = []; for (let i=0; i
프론트엔드 개발[Front-End Development]/Coding Test 2022. 11. 14. 21:58

[JavaScript] 날짜와 시간을 어떻게 구해야 할까?

1. 객체 생성 실시간 날짜와 시간을 가져오기 위해서는 제일 먼저 Date 객체를 만드는 것이 선행되어야 합니다. 그리고 객체 내 담겨있는 정보들을 여러가지 Date 메서드를 통해 반환시켜야 합니다. 2. 다양한 메서드 수 많은 Date 메서드가 존재하나, 기본적으로 자주 사용되며 활용성이 높은 것들 위주로 정리 해보았다. 연도 / 월 / 일 / 요일 Date.prototype.getFullYear() : 주어진 날짜의 현지 시간 기준 연도를 반환합니다. Date.prototype.getMonth() : 주어진 날짜의 현지 시간 기준 월을 반환합니다. (0 ~ 11 : 0부터 시작하므로 1을 더하여 처리 해주어야 한다.) Date.prototype.getDate() : 주어진 날짜의 현지 시간 기준 일을..
프론트엔드 개발[Front-End Development]/JavaScript 2022. 11. 13. 22:16

[CSS] Media Query - 미디어 쿼리의 예시와 활용

Media Query 란? 디바이스의 유형이나, 어떤 특성과 수치(화면 해상도, 뷰포트 너비)에 따라 웹과 앱의 스타일을 유동적으로 변경하고 싶을 때 사용 사용방법 미디어쿼리 사용방법에는 크게 2가지가 있습니다. 하기 내용과 같이 사용을 원하는 페이지 및 조건에 의해 활용을 달리할 수 있습니다. 1. Link 태그를 통해 사용 Link 태그 내 media 내 조건을 삽입하여 성립 시, css 파일이 실행이 된다. 설정한 조건과 같이 최대 360px 까지의 가로 사이즈 내에서만 작동되는 것을 확인할 수 있다. 360px 이상 사이즈 360px 이하 사이즈 2. CSS 코드를 통해 직접 적용 방식 @media only screen and (max-width: 700px) { * { background-col..
프론트엔드 개발[Front-End Development]/CSS 2022. 11. 6. 12:18