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

문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 입출력 예 N answer 123 6 987 24 나의 풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 function solution(n){ let answer = 0; let stringN = n.toString(); stringN = stringN.split(''); stringN.forEach((num)=>{ answer += Number(num); }) return answer; } Colored by Color Scripter cs 문제를 풀며 느낀 점 - 먼저 answer이라는 변수..

HTML/CSS를 공부하면서 느낀점 - 저는 HTML / CSS를 공부하면서 기초가 중요하다는 점을 느꼈던 것 같습니다. HTML/CSS 공부하면서 어려웠던 개념과 이유 - 가장 어려웠던 부분은 animation이나 grid였던 것 같습니다. 졸업 작품을 제작할 때 grid를 사용하지 않고 익숙한 flex만 사용하다 보니 그랬던 것 같고 animation 또한 익숙치 않았던 것 같습니다. 나만의 공부팁? - 제가 이번에 제로베이스 프론트엔드 스쿨을 신청한 이유는 졸업 작품 중에 제 실력에 대해서 너무 많은 현타가 와서 이번 6개월 동안 정말 열심히해서 죽이되든 밥이되든 한번 해보자 마음을 먹고 하고 있는데 이번 HTML/CSS미션을 하면서 1, 2, 3, 4 는 비교적 쉽게 했는데 mission 5에서 ..

자연수(10진수)를 8진수와 16진수로 변환하려면 toStirng() 함수의 매개변수로 원하는 진수의 값을 넣어주면 된다. const NUM = 250; NUM.toString(2~36) 만약 toString() 에 2와 36의 사잇 값이 아닌 radix 가 주어지면, RangeError 가 발생하게 된다. 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Number/toString Number.prototype.toString() - JavaScript | MDN toString() 메서드는 특정한 Number 객체를 나타내는 문자열을 반환합니다. developer.mozilla.org 다음으로 피..

문제 설명 군 전략가 머쓱이는 전쟁 중 적군이 다음과 같은 암호 체계를 사용한다는 것을 알아냈습니다. 암호화된 문자열 cipher를 주고받습니다. 그 문자열에서 code의 배수 번째 글자만 진짜 암호입니다. 문자열 cipher와 정수 code가 매개변수로 주어질 때 해독된 암호 문자열을 return하도록 solution 함수를 완성해주세요. 입출력 예 cipher code result "dfjardstddetckdaccccdegk" 4 "attack" "pfqallllabwaoclk" 2 "fallback" 나의 풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 function solution(cipher, code) { let answer = []; let test = cipher.split(..

먼저 user 객체를 생성합니다. let user = { name: "sungjun", age: 50, size: { height: 200, weight: 70, } }; 다음으로 deepCopy 객체를 생성한 후 JSON.stringify() 함수를 통해 user객체를 문자열로 변환합니다. 그 후 JSON.parse() 함수를 통해 문자열 user를 다시 object 형태로 변환해줍니다. (정말 간편한 방법인 것 같습니다.) let deepCopy = JSON.parse(JSON.stringify(user)); 다음으로 deepCopy.size.height의 값을 250으로 변경하신 후 결과를 보시면 user객체와 별개로 값이 변경되는 걸 확인하실 수 있습니다. deepCopy.size.height =..

문제 설명 정수 n이 매개변수로 주어질 때, n의 약수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. 입출력 예 n result 24 [1, 2, 3, 4, 6, 8, 12, 24] 29 [1, 29] 나의 풀이 1 2 3 4 5 6 7 8 9 10 function solution(n) { let answer = []; for(let i=0; i

네 번째 미션을 진행하면서 학습한 점에 대해서 적어보겠습니다. 일단 이번 미션을 진행할 때 피그마로 시안을 봤을 때는 굉장히 쉽겠다라고 생각을 했었는데 flex로만 layout구조를 잡다 보니 grid는 좀 생소해서 이번 기회에 제대로 복습을 한 것 같습니다. 또한 JS를 이용한 Toggle이 구현되어 있었는데 그 함수 안에 동작을 추가해서 구성하는 줄 알았으나 이미 구현된 JS에 css를 통해서 미션을 해결해야 된다는 생각이 들어서 가상 요소 before after를 이용해서 문제를 해결했습니다. 또한 아래는 제가 이번 미션을 하면서 참고한 사이트 입니다. https://projects.verou.me/bubbly/ Bubbly — CSS speech bubbles made easy projects.v..

문제 설명 가위는 2 바위는 0 보는 5로 표현합니다. 가위 바위 보를 내는 순서대로 나타낸 문자열 rsp가 매개변수로 주어질 때, rsp에 저장된 가위 바위 보를 모두 이기는 경우를 순서대로 나타낸 문자열을 return하도록 solution 함수를 완성해보세요. 입출력 예 rsp result "2" "0" "205" "052" 나의 풀이 1 2 3 4 5 6 7 8 9 10 11 12 13 14 function solution(rsp) { let answer = ''; for(let i=0; i

지금 까지 여러 강의를 수강하면서 잘 이해가 되지 않았는데 이번에는 이해가 되어서 글 작성을 해보려고 합니다. const obj = { property1: "1", property2: { subProperty1: '2-1', subProperty2: '2-2', } } 먼저 위와 같이 obj를 생성해 줬습니다. const obj2 = Object.assign({}, obj); //shallow copy(얕은 복사) 다음으로 obj2를 생성하고 Object.assign() 함수를 사용해 {} 빈 객체에 obj를 복사하였습니다. 이것이 바로 shallow copy를 의미합니다. 얕은 복사를 했을 경우 obj2의 property1의 값을 변경했을 경우 obj1의 값과는 무관합니다. 하지만 obj2 객체에 있는..

세 번째 미션을 진행하면서 학습한 점에 대해서 적어보겠습니다. 일단 이번 미션은 요소가 꽤나 많아서 진행시간이 현제까지 한 미션 중 가장 오래걸렸던 것 같습니다. WAI-ARIA에 대해서 학습한 적이 없었었는데 제로베이스 강의를 통해서 클론 코딩 중 예시를 찾게되어 이번 프로젝트에 적용하였습니다. 또한 가상 요소 선택자 ::befor, ::after를 통해서 요소를 넣었을 때 표현이 되지 않아서 무엇이 문제일까 했었는데 position:absolute를 사용하면 적응이 되는 점을 알게되었습니다. 다른 부분에서는 크게 어려운 점이 없었던 것 같습니다.