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

문제 설명 다음과 같이 출력하도록 코드를 작성해 주세요. 출력 예시 !@#$%^&*(\'"?:; 나의 풀이 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); rl.on('close', function () { console.log('!@#$%^&*(\\\'"?:;') // console.log('\') SyntaxError });

문제 설명 영어 알파벳으로 이루어진 문자열 str이 주어집니다. 각 알파벳을 대문자는 소문자로 소문자는 대문자로 변환해서 출력하는 코드를 작성해 보세요. 제한사항 1 ≤ str의 길이 ≤ 20 str은 알파벳으로 이루어진 문자열입니다. 입출력 예 입력 #1 aBcDeFg 출력 #1 AbCdEfG 나의 풀이 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); let input = []; rl.on('line', function (line) { input = [line]; }).on('close',function(){ str = input..

갑자기 운동을 하다가 효율적인 이벤트 관리에 대해서 생각해 보고 코드를 작성하게 되었다. 먼저 button 100개를 생성해서 bodyDOM에 추가해 주었다. 이후 두 가지 방법으로 접근을 하였는데 위에 주석처리 된 부분은 버튼 100개에 전부 addEventListener()을 추가해 주었다. 이렇게 했을 때 굉장한 메모리 손실이나 효율성이 떨어질 거라고 생각이 들었다. 그래서 click event가 발생한 bodyDOM의 요소만 출력할 순 없을까 생각하였고 아래의 코드와 같이 생각해냈다. bodyDOM.addEventListener("click", (e) => { console.log(e.target.innerText); }); 갑자기 이런 생각이 들어서 실습을 해보았다. ㅋㅋ

먼저 면접 기회를 제공해 주신 오토위니에 대단히 감사합니다. 다음으로 오늘 면접 내용에 대해서 간단하게 적어볼까 합니다. 오늘 면접은 2시 대면 면접이었고 20분 전에 회사에 도착한 것 같습니다. 2시에 면접을 시작하였고 면접관 세분이 들어오셨는데 먼저 처음에 인사를 할 때부터 분위기가 되게 좋았던 것 같습니다. 그 후에 사전에 없던 라이브 코딩을 진행하게 되었는데요. 첫 번째 문제는 라이브 코딩으로 API통신을 통해서 값을 형태에 맞게 예외처리를 통해서 출력하는 내용이었습니다. 두 번째 문제는 주어진 코드를 보고 어떤 점이 문제인지 확인하고 해결하는 문제였습니다. 난이도는 NHN 면접과 크게 다를 바 없는 것 같습니다. 그 후로 간단한 자기소개, 개발을 하며 어려웠던 점, 개발 방식, 어느 때에 개발을..

클로저란? 내부 함수에서 외부 함수에 맥락에 접근할 수 있는 권한입니다. 그렇다면 일반적인 함수에서 전역 변수를 가리키는 것도 모두 클로저일까요? - 당연히 아닙니다. 외부 함수 안에 내부함수가 묶여있는 느낌과 같이 폐쇄적인 느낌을 주는 것이 클로저입니다. 다음은 클로저 예제입니다. function outer() { const x = 0; function inner() { console.log(`inside inner: ${x}`); // closures라는 특성 때문에 외부 함수의 변수에 접근할 수 있음 } return inner; } const func = outer(); // inner함수만 할당 받는 것이 아닌 외부 함수의 렉시컬 환경까지 참조 받음 func(); func라는 변수에 outer()..

문제 설명 수웅이는 매달 주어진 음식을 빨리 먹는 푸드 파이트 대회를 개최합니다. 이 대회에서 선수들은 1대 1로 대결하며, 매 대결마다 음식의 종류와 양이 바뀝니다. 대결은 준비된 음식들을 일렬로 배치한 뒤, 한 선수는 제일 왼쪽에 있는 음식부터 오른쪽으로, 다른 선수는 제일 오른쪽에 있는 음식부터 왼쪽으로 순서대로 먹는 방식으로 진행됩니다. 중앙에는 물을 배치하고, 물을 먼저 먹는 선수가 승리하게 됩니다. 이때, 대회의 공정성을 위해 두 선수가 먹는 음식의 종류와 양이 같아야 하며, 음식을 먹는 순서도 같아야 합니다. 또한, 이번 대회부터는 칼로리가 낮은 음식을 먼저 먹을 수 있게 배치하여 선수들이 음식을 더 잘 먹을 수 있게 하려고 합니다. 이번 대회를 위해 수웅이는 음식을 주문했는데, 대회의 조건..

NHN면접에서 자바스크립트 기본 적인 기능도 구현 못하는 나를 보고 크게 현타를 맞은 이후 다시 한번 자바스크립트를 복습하게 되었다. 마크업 한 요소를 토대로 util함수를 통해 DOM을 구성해 주었다. 오랜만에 작업을 하다 보니 느낀 점은 정말 정말 React의 소중함에 대해 깨닫고 있다. innerHTML과 innerText의 차이 점 - innerText는 `Hello World ` 과 같은 구조에서 innerText를 사용하면 "Hello World"를 반환합니다. - Hello World 와 같은 구조에서 innerHTML을 사용하면 전체 HTML 문자열인 World 를 반환합니다. 또한, innerHTML을 사용하여 HTML을 수정할 수도 있습니다. 예를 들어, element.innerHTML..

브라우저 렌더링 과정은 다음과 같다. 1. HTML 파일 다운로드 : 브라우저는 HTML 파일을 서버로부터 다운로드합니다. 2. HTML 파싱 : 브라우저는 다운로드한 HTML 파일을 파싱 하여 DOM(Document Object Model) 트리를 생성합니다. 3. CSS파일 다운로드 및 처리 : 브라우저는 HTML 파싱 중에 CSS파일을 만나면 해당 파일을 다운로드하고 처리합니다. CSS 파일을 처리하여 스타일 규칙이 생성되고, DOM 요소에 스타일 규칙이 적용됩니다. 이 단계에서 이미지의 크기와 위치등의 계산이 이루어집니다. 4. JavaScript 파일 다운로드 및 실행 : 브라우저는 HTML파싱 중에 script태그를 만나면 해당 JavaScript파일을 다운로드하고 실행합니다. 결론은 이미지의..

프로토타입(prototype)은 원래의 형태 또는 전형적인 예, 기초 또는 표준이다. 모든 객체는 내부에 숨겨진 [[Prototype]]을 가지고 있습니다. 쉽게 말해서 객체와 배열 모두 프로토타입 체인으로 연결되어 있기 때문에 Array는 Object 메서드를 상속받고 Array에서는 배열 메서드 concat(), filter(), map()과 Object의 toString(), valueOf(), watch() 메서드를 사용할 수 있는 겁니다. 아래는 프로토 타입을 VSC에서 연습한 것 입니다. const dog = { name: "멍멍이", age: 3, owner: { name: "jun" } }; console.log(Object.keys(dog)); // object의 key값들을 배열로 re..

얕은 복사와 깊은 복사 그리고 완벽한 깊은 복사를 하는 법에 대해서 알아보려고 합니다. 먼저 얕은 복사 예제 입니다. object1 객체에는 이름, 나이, 세계의 음식, 함수 가 들어있습니다. 이때 object2는 object1을 할당받았습니다. 일치 연산자('===')를 통해서 object를 비교하였을 때 true가 출력됩니다. 이 의미는 같은 주소를 가리키고 있기 때문입니다. 그렇게 때문에 아래서 object2.food.us 값을 buger로 수정하게 되면 원본 객체인 object1의 요소도 바뀌게 됩니다. 이게 바로 얕은 복사 Shallow Copy입니다. 다음으로 일반적인 깊은 복사를 해보았습니다. object1을...(spread) 연산자를 통해서 object3에 복사해 주었습니다. 이후 obj..