프론트엔드 개발자 엄성준 블로그

JavaScript 프로젝트 과제 MISSION 4를 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 후.. 이번 과제를 진행하면서 이틀 동안 정말 왜 안될까 왜 안될까 생각만 하면서 지낸 것 같습니다. 이번 과제는 비동기 통신 axios를 이용해서 데이터를 가져온 후 조건에 맞게 나열하고 기능을 구현하는 과제였는데 axios를 사용한 경험이 없었어도 이전에 강의에서 최신 문법인 fetch를 사용해 본 적이 있어서 쉽게 한 것 같습니다. 다음으로 무한 스크롤 구현이였는데 처음 접하는 observer방식이어서 인터넷 서칭도 해보고 유튜브 강의를 따라 하기도 하면서 학습한 것 같습니다. 아래는 제가 이번에 참고했던 유튜브 강의입니다. https://www.youtube.com/watch?v=Cq_UG1MHN6..

문제 설명 1937년 Collatz란 사람에 의해 제기된 이 추측은, 주어진 수가 1이 될 때까지 다음 작업을 반복하면, 모든 수를 1로 만들 수 있다는 추측입니다. 작업은 다음과 같습니다. 1-1. 입력된 수가 짝수라면 2로 나눕니다. 1-2. 입력된 수가 홀수라면 3을 곱하고 1을 더합니다. 2. 결과로 나온 수에 같은 작업을 1이 될 때까지 반복합니다. 예를 들어, 주어진 수가 6이라면 6 → 3 → 10 → 5 → 16 → 8 → 4 → 2 → 1 이 되어 총 8번 만에 1이 됩니다. 위 작업을 몇 번이나 반복해야 하는지 반환하는 함수, solution을 완성해 주세요. 단, 주어진 수가 1인 경우에는 0을, 작업을 500번 반복할 때까지 1이 되지 않는다면 –1을 반환해 주세요. 입출력 예 n ..

JavaScript 프로젝트 과제 MISSION 4를 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 이번 과제에서는 제공되는 template이 없어서 font import부터 icon import까지 제 몫이었는데요. 달력 만들기에 앞서서 정말 감이 잡히지 않아서 여러 블로그도 찾아보고 유튜브도 찾아보고 검색 검색을 통해서 완성한 것 같습니다. 이런 학습을 유도하셨던 걸까요? 먼저 저는 HTML을 작성 후 CSS를 입히고 JS 완성을 한 뒤 HTML의 flex방식으로 되어있던 달력을 grid 방식으로 수정하였고 반응형으로 제작하라는 요구 사항이 처음에는 이해가 되지 않았는데 grid의 1fr로 주었기 때문에 자동으로 width에 반응해서 줄어들긴 해서 이대로 마무리 지었습니다. 다음으로 이번 과제를 통해..

JavaScript 프로젝트 과제 MISSION 3을 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 이번 과제에서 제공해주는 template을 보면서 구조를 파악하는데 시간이 좀 걸렸었고 완성을 하긴 했지만 코드가 간결하지 못하고 반복되는 부분이 많은 것 같습니다. 이번 미션에서는 두 부분에서 좀 막혔었는데 하나는 forEach()를 통해서 받아온 객체요소를 따로따로 분리해야 하는 부분이 있었는데 그 부분에서 애를 좀 먹었던 것 같은데 스코프영역을 파악하고 cascading에 주의하면서 배치하니까 해결되었던 것 같습니다. 다음은 CustomEvent를 발생해야 하는 부분인데 이 부분에 대해서는 학습한 적이 없어서 mdn 등등 많은 검색을 통해서 많은 시도를 한 후 해결했던 것 같습니다. 번쩍 하고 생각이..

JavaScript 프로젝트 과제 MISSION 2를 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 먼저 아직도 스코프 영역에 대한 부분이 미흡한 것 같습니다. Utils나 Modul의 대한 개념은 강의를 학습하면서 꽤 많이 알게 된 것 같습니다. 이번 프로젝트에서는 Utils를 사용했으면 좋겠다 해서 이전에 우희은 선생님에게 배운 DOM객체 생성 util과, DOMList생성 util을 사용해 봤습니다. 또한 지정된 시간마다 사용하는 setInerval() 함수를 사용했고 현재 시간을 가져올 수 있는데 Date() 함수 또한 사용했습니다. 이전에 강의에서 stopwatch를 만든 경험이 있어서 크게 어렵지는 않았지만 가장 어려웠던 부분이 여러 개의 시계를 생성해도 똑같이 작동하게 하는 부분이었는데 많이..

You are given a string s consisting of lowercase English letters. A duplicate removal consists of choosing two adjacent and equal letters and removing them. We repeatedly make duplicate removals on s until we no longer can. Return the final string after all such duplicate removals have been made. It can be proven that the answer is unique. Example 1: Input: s = "abbaca" Output: "ca" Explanation:..

ㅋA decimal number is called deci-binary if each of its digits is either 0 or 1 without any leading zeros. For example, 101 and 1100 are deci-binary, while 112 and 3001 are not. Given a string n that represents a positive decimal integer, return the minimum number of positive deci-binary numbers needed so that they sum up to n. Example 1: Input: n = "32" Output: 3 Explanation: 10 + 11 + 11 = 32 E..

문제 설명 길이가 같은 배열 A, B 두개가 있습니다. 각 배열은 자연수로 이루어져 있습니다. 배열 A, B에서 각각 한 개의 숫자를 뽑아 두 수를 곱합니다. 이러한 과정을 배열의 길이만큼 반복하며, 두 수를 곱한 값을 누적하여 더합니다. 이때 최종적으로 누적된 값이 최소가 되도록 만드는 것이 목표입니다. (단, 각 배열에서 k번째 숫자를 뽑았다면 다음에 k번째 숫자는 다시 뽑을 수 없습니다.) 예를 들어 A = [1, 4, 2] , B = [5, 4, 4] 라면 A에서 첫번째 숫자인 1, B에서 첫번째 숫자인 5를 뽑아 곱하여 더합니다. (누적된 값 : 0 + 5(1x5) = 5) A에서 두번째 숫자인 4, B에서 세번째 숫자인 4를 뽑아 곱하여 더합니다. (누적된 값 : 5 + 16(4x4) = 21..

문제 설명 문자열 s에는 공백으로 구분된 숫자들이 저장되어 있습니다. str에 나타나는 숫자 중 최소값과 최대값을 찾아 이를 "(최소값) (최대값)"형태의 문자열을 반환하는 함수, solution을 완성하세요. 예를들어 s가 "1 2 3 4"라면 "1 4"를 리턴하고, "-1 -2 -3 -4"라면 "-4 -1"을 리턴하면 됩니다. 입출력 예 s return "1 2 3 4" "1 4" "-1 -2 -3 -4" "-4 -1" "-1 -1" "-1 -1" 나의 풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function solution(s) { const arr = s.split(' ').map((item)=>{ return Number(item) }).sort((a,b)=>{ retur..

Given two 0-indexed integer arrays nums1 and nums2, return a list answer of size 2 where: answer[0] is a list of all distinct integers in nums1 which are not present in nums2. answer[1] is a list of all distinct integers in nums2 which are not present in nums1. Note that the integers in the lists may be returned in any order. Example 1: Input: nums1 = [1,2,3], nums2 = [2,4,6] Output: [[1,3],[4,6..