분류 전체보기 179

Q. 세균 증식

어떤 세균은 1시가에 두배만큼 증식한다고 합니다. 처음 세균의 마리수 n과 경과한 시간 t가 매개변수로 주어질 때 t시간 후 세균 수를 return 하도록 solution 함수를 완성해주세요. 🚫제한 사항 1 ≤ n ≤ 10 1 ≤ t ≤ 15 ❗입출력 예 n t result 2 10 2048 7 15 229,376 😀 내가 푼 답 const solution = (n, t) => { return n * (2 ** t) } 😊 문제풀이 답안 OR 다른사람들 답안 function solution(n, t) { return n

개발자 도구 Network tab

📌 Network tab의 기능 개발자도구의 네트워크 탭은 서버와 데이터를 주고 받을 때 편리하게 디버깅을 할 수 있도록 도와주는 도구. 각 소스들을 불러올 때 속도, 응답 등 네트워크 측면에서 확인 가능하며, 문제시 비교, 분석을 할 수 있게 해줌 http 네트워크 통신 확인, API 크롤링, 페이지 로딩 성능 테스트, 이미지, 영상 등의 소스(mock data 활용)등에서 사용할 수 있음 ❗Network 패널의 여러 가지 탭의 종류와 기능 살펴보기 📚 탭 최상단 왼쪽 상단에 빨간 불이 들어와 있으면 통신을 기록하고 있다는 뜻 빨간 불 옆에 삭제 버튼을 눌러 받아온 리소스 기록을 삭제할 수 있음 필터를 통해 모든 리소스를 확인하거나, Fetch/XHR, JS, CSS 등 여러가지 데이터를 형태별로 걸러..

공부/CS 2024.02.02

::before, ::after 가상 요소(Pseudo-elements)

📌 가상 요소(Pseudo-elements)란? - CSS 가상 요소는 선택자에 추가하는 키워드로 선택한 요소(elements)의 일부에만 스타일을 적용할 수 있고 선택한 요소 전체에 스타일을 적용하는 것이 아니라, 요소의 일부에만 스타일을 적용할 수 있음!! - HTML에 새로운 엘리먼트를 추가한 것처럼 동작함 - 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함 📕 가상 요소 문법 선택자::의사요소이름 {속성: 속성값;} - 하나의 HTML 요소에 여러개의 의사 요소를 동시에 적용 가능함 ❗❗ 주의점 - CSS1과 CSS2에서는 하나의 콜론(:)으로 가상 요소를 나타내어 CSS3를 지원하지 않는 브라우저에서는 적용되지 않을 수 있음 - CSS3에서는 가상 클래스는 하나의 ..

IT/CSS 2024.01.31

Q. 문자 반복 출력하기

문자열 my_string과 정수 n이 매개변수로 주어질 때, my_string에 들어있는 각 문자를 n만큼 반복한 문자열을 return 하도록 solution 함수를 완성해보세요. 🚫제한 사항 2 ≤ my_string 길이 ≤ 5 2 ≤ n ≤ 10 "my_string"은 영어 대소문자로 이루어져 있습니다. ❗입출력 예 my_string n result "hello" 3 "hhheeellllllooo" 😀 내가 푼 답 const solution = (my_string, n) => [...my_string].map(i => i.repeat(n)).join("") repeat() 문자열을 주어진 횟수만큼 반복해 붙인 새로운 문자열을 반환함 😊 문제풀이 답안 OR 다른사람들 답안 function soluti..

Q. 모음 제거

영어에선 a, e, i, o, u 다섯 가지 알파벳을 모음으로 분류합니다. 문자열 my_string이 매개변수로 주어질 때 모음을 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 🚫제한 사항 my_string은 소문자와 공백으로 이루어져 있습니다. 1 ≤ my_string의 길이 ≤ 1,000 ❗입출력 예 my_string result "bus" "bs" "nice to meet you" "nc t mt y" 😀 내가 푼 답 const solution = my_string => my_string.replace(/[aeiou]/g, "") 😊 문제풀이 답안 OR 다른사람들 답안 function solution(my_string) { return [...my_string] .filte..

Q. 문자열안에 문자열

문자열 str1, str2가 매개변수로 주어집니다. str1 안에 str2가 있다면 1을 없다면 2를 return하도록 solution 함수를 완성해주세요. 🚫제한 사항 1 ≤ str1의 길이 ≤ 100 1 ≤ str2의 길이 ≤ 100 문자열은 알파벳 대문자, 소문자, 숫자로 구성되어 있습니다. ❗입출력 예 str1 str2 result "ab6CDE443fgh22iJKlmn1o"" "6CD" 1 "ppprrrogrammers" "pppp" 2 "AbcAbcA" "AAA" 2 😀 내가 푼 답 const solution = (str1, str2) => { return str1.includes(str2) ? 1 : 2 } includes() 특정 값이 반환되거나 포함되어있는지 여부를 true false로 ..

Q. 특정 문자 제거하기

문자열 my_string과 문자 letter이 매개변수로 주어집니다. my_string에서 letter를 제거한 문자열을 return하도록 solution 함수를 완성해주세요. 🚫제한 사항 1 ≤ my_string의 길이 ≤ 100 letter은 길이가 1인 영문자입니다. my_string과 letter은 알파벳 대소문자로 이루어져 있습니다. 대문자와 소문자를 구분합니다. ❗입출력 예 my_string letter result "agcdef" "f" "abcde" "BCBdbe" "B" "Cdbe" 😀 내가 푼 답 const solution = (my_string, letter) => my_string.replaceAll(letter, ""); replaceAll() 문자열에서 특정 문자를 지정한 문자열..

Q. 편지

머쓱이는 할머니께 생신 축하 편지를 쓰려고 합니다. 할머니가 보시기 편하도록 글자 한 자 한 자를 가로 2cm 크기로 적으려고 하며, 편지를 가로로만 적을 때, 축하 문구 message를 적기 위해 필요한 편지지의 최소 가로길이를 return 하도록 solution 함수를 완성해주세요. 🚫제한 사항 공백도 하나의 문자로 취급합니다. 1 ≤ message의 길이 ≤ 50 편지지의 여백은 생각하지 않습니다.message는 영문 알파벳 대소문자, ‘!’, ‘~’ 또는 공백으로만 이루어져 있습니다. ❗입출력 예 message result "happy birthday!" 30 "I love you~" 22 😀 내가 푼 답 const solution = message => message.length * 2 😊 문제..

Q. Static Site Generator란?

❓SSG(Static Site Generator)란? - 정적 웹사이트를 생성하기 위해 사용되는 도구 - 정적 웹사이투는 서버 사이드에서 동적으로 콘텐츠를 생성하고 데이터베이스 호출을 하지 않는 대신, 사전에 빌드 과정을 거쳐 HTML, CSS, JavaScript 같은 정적 파일들로 변환됨 - 이 파일들은 CDN(Content Delivery Network)과 같은 정적 파일 서버에 호스팅 되어 사용자에게 전달됨 ❓SSG 장점 ⅰ) 보안 -> 데이터베이스나 서버 사이드 코드가 없기 때문에 보안 취약점이 상대적으로 적음 ⅱ) 속도 -> 모든 페이지가 사전에 생성되어 있으므로, 서버 사이드 처리가 필요 없어 로딩 시간이 빠름 ⅲ) 확장성 -> 트래픽이 증가하더라도, 장적 파일을 제공하는 것은 동적 콘텐츠를..

IT/면접 2023.11.01

Q. 이벤트 버블링에 대해 설명

❓이벤트 버블링(Event Bubbling) - DOM 요소들의 이벤트 전파방식 중 하나로, 특정 요소에서 이벤트가 발생했을 때 해당 요소의 부모 요소로 이벤트가 순차적으로 전파되는 현상 => ex) 버튼을 클릭하면 해당 버튼의 클릭 이벤트 뿐만 아니라 그 버튼을 감싸고 있는 부모 요소들의 클릭 이벤트도 순차적으로 실행됨 - React는 실제 DOM 이벤트와는 약간 다른 방식으로 이벤트를 처리함 - React는 합성이벤트(Synthetic Event)라는 자체 이벤트 시스템을 사용하여 크로스 브라우징 이슈를 해결하고, 성능을 최적화 함 => but!, 이 합성 이벤트도 실제 DOM의 이벤트 버블링과 캡처링 방식을 따름 - React에서 이벤트를 처리할 때, 일반적으로 이벤트 핸들러를 특정 컴포넌트의 특정..

IT/면접 2023.10.31