티스토리

console.log("Hello, World!");

검색하기

블로그 홈

console.log("Hello, World!");

seolbinn.tistory.com/m

설빈 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

[JavaScript] 이벤트 루프(Event Loop) 📚 자바스크립트의 이벤트 루프(Event Loop)란 무엇인가요?자바스크립트는 싱글 스레드 언어예요. 이는 자바스크립트가 한 번에 하나의 작업만을 처리할 수 있다는 뜻이에요. 하지만 실제로는 자바스크립트가 비동기 작업을 아주 효율적으로 처리할 수 있어요. 이는 이벤트 루프(Event Loop)라는 메커니즘 덕분이에요. 자바스크립트의 이벤트 루프는 요리사 한 명이 있는 레스토랑과 같아요. 요리사는 한 번에 하나의 요리만 만들 수 있지만, 요리를 준비하는 동안 다른 일도 처리할 수 있어요. 예를 들어, 요리사가 면을 끓이는 동안 그 시간에 샐러드를 준비하거나, 주문을 받는 식으로 여러 작업을 동시에 처리할 수 있죠. 요리사(자바스크립트)는 요리를 하는 도중(동기 작업) 다른 일이 생기면 주방 밖에서 손님들.. 공감수 3 댓글수 1 2024. 10. 27.
[CSS] Position 📚 Position이란 무엇인가요?CSS Position 속성은 HTML 요소를 문서 안에서 어떻게 배치할지를 정의하는 중요한 속성이에요. 이 속성을 사용하면 요소를 정확한 위치에 배치하거나, 고정된 위치에 머물도록 만들 수 있어요. 특히 레이아웃을 구성할 때 고정 배치, 상대 배치, 절대 배치 등을 사용하여 요소를 제어하는 것이 매우 중요해요. Position 속성을 이해하면 웹 페이지에서 요소를 자유롭게 배치하고 레이아웃을 더 정교하게 다룰 수 있어요. Position 속성은 화면 위에서 요소를 원하는 위치로 옮기는 조종 도구와 같아요. 어떤 요소는 고정되어 움직이지 않게 만들고, 어떤 요소는 다른 요소에 따라 움직이게 만들 수 있죠.🖥️ CSS Position의 기본 속성과 활용 예시Positi.. 공감수 0 댓글수 0 2024. 10. 26.
[React] 생명 주기 📚 컴포넌트의 생명 주기란 무엇인가요?리액트 컴포넌트는 탄생에서부터 소멸까지 생명 주기(lifecycle)를 가지고 있어요. 이를 컴포넌트 생명 주기라고 불러요. 생명 주기 메서드는 컴포넌트가 어떻게 생성되고, 업데이트되며, 제거되는지를 정의해주는 메서드들이에요. 리액트에서는 클래스형 컴포넌트에서 주로 생명 주기 메서드를 사용하며, 함수형 컴포넌트에서는 주로 훅(Hooks)을 사용해 동일한 동작을 구현할 수 있어요. 비유를 들자면, 컴포넌트의 생명 주기는 사람이 태어나고 자라고 결국 생을 마치는 과정과 비슷해요. 컴포넌트는 생성되고, 사용자 상호작용이나 데이터 변경에 따라 업데이트되며, 더 이상 필요하지 않으면 소멸되죠. 이 모든 과정에서 특정 시점마다 실행되는 메서드나 동작을 생명 주기 메서드라고 해.. 공감수 2 댓글수 0 2024. 10. 20.
[React] JSX 📚 JSX란 무엇인가요?JSX는 JavaScript XML의 약자로, 자바스크립트 안에서 HTML과 유사한 문법을 사용할 수 있게 해주는 리액트의 특별한 문법이에요. JSX를 사용하면 UI를 정의할 때 가독성이 높아지고 더 직관적으로 코드를 작성할 수 있어요. 사실 JSX는 자바스크립트의 확장 문법으로, 자바스크립트 코드로 변환돼요. 그 결과, 자바스크립트와 HTML의 장점을 결합한 형태라고 볼 수 있어요. JSX는 자바스크립트와 HTML이 결혼한 것과 같아요. 각각 따로 사용할 수 있지만, JSX를 통해 둘을 함께 사용하면 더 편리하고 강력한 힘을 발휘하게 되죠.🖥️ JSX의 기본 개념과 HTML과의 차이점1. JSX의 기본 문법JSX는 HTML과 매우 유사한 구조를 가지고 있지만, 실제로는 자바스.. 공감수 0 댓글수 0 2024. 10. 19.
[JavaScript] 배열 메서드(map, filter, reduce) 📚 배열 메서드(map, filter, reduce)란 무엇인가요?자바스크립트에서 배열을 다루는 것은 매우 중요해요. 특히 map, filter, reduce 같은 배열 메서드는 배열을 간편하고 효과적으로 처리할 수 있는 방법을 제공해요. 이 세 가지 메서드는 각각 배열을 변환, 필터링, 축소하는 작업을 수행해요. 비유하자면, map은 원래의 배열에서 무언가를 변형해서 새로운 배열을 만드는 작업이고, filter는 원하는 조건에 맞는 요소만 걸러내는 작업, 그리고 reduce는 배열을 한 덩어리로 축소하여 단일 값으로 만드는 작업이에요.🖥️ 배열 메서드(map, filter, reduce)의 개념과 예시1. map: 배열을 변형하는 메서드map 메서드는 배열의 각 요소에 동일한 작업을 수행하여, 새로.. 공감수 1 댓글수 3 2024. 10. 13.
[Web] HTTP와 HTTPS의 차이 📚 HTTP와 HTTPS의 차이점은 무엇인가요?웹 브라우저에서 인터넷을 통해 정보를 주고받을 때 사용하는 가장 기본적인 프로토콜 중 하나가 HTTP (HyperText Transfer Protocol)예요. HTTP는 웹사이트에서 HTML, 이미지, 비디오 등의 데이터를 주고받기 위한 규칙을 정의해요. 반면, HTTPS (HyperText Transfer Protocol Secure)는 HTTP에 보안을 더한 프로토콜로, 주고받는 데이터를 암호화하여 해커나 중간 공격자가 데이터를 엿보지 못하게 보호해요. 비유하자면, HTTP는 편지를 우편으로 보내는 것과 같아요. 편지는 누구나 쉽게 읽을 수 있기 때문에 보안에 취약하죠. 반면에, HTTPS는 이 편지를 봉투에 넣고 잠금 장치로 봉인해서 보내는 것과 같.. 공감수 0 댓글수 0 2024. 10. 12.
[Data] 스택(Stack)과 큐(Queue) 📚 스택(Stack)과 큐(Queue)란 무엇인가요?스택(Stack)과 큐(Queue)는 컴퓨터 공학에서 매우 중요한 데이터 구조 중 하나예요. 이 두 구조는 데이터를 저장하고 처리하는 방식을 정의하며, 각각의 사용 방식이 다르지만 순서에 초점을 맞추고 있어요. 특히, 스택은 "마지막에 넣은 것이 가장 먼저 나온다"는 LIFO (Last In, First Out) 원칙을 따르고, 큐는 "먼저 넣은 것이 가장 먼저 나온다"는 FIFO (First In, First Out) 원칙을 따르죠. 비유를 들어 설명하자면, 스택은 접시를 쌓아 올리는 것과 비슷해요. 마지막에 쌓은 접시를 먼저 꺼내야 하죠. 반면, 큐는 줄을 서는 것과 같아요. 먼저 줄을 선 사람이 먼저 서비스를 받는 원칙을 따르죠. 이제 스택과 큐.. 공감수 0 댓글수 0 2024. 10. 9.
[TypeScript] Never 타입 📚 Never 타입이란 무엇인가요?타입스크립트에서 Never 타입은 절대 발생하지 않는 값을 나타내요. 즉, 어떤 값도 가질 수 없는 타입을 의미해요. 주로 함수가 절대 정상적으로 반환되지 않거나, 항상 오류를 발생시키거나 무한 루프를 도는 경우 사용되죠. 비유를 들어보자면, Never 타입은 끝이 없는 길 같아요. 이 길을 따라가더라도 도착점은 없기 때문에, 그 길 위에서 무엇인가를 찾을 수 없는 상태죠. 즉, 해당 코드가 절대 실행을 마칠 수 없다는 것을 명시적으로 나타냅니다.🖥️ Never 타입의 사용 예시Never 타입은 다양한 상황에서 나타날 수 있어요. 특히 예외를 던지는 함수나 끝나지 않는 함수에 자주 사용돼요.1. 오류를 던지는 함수Never 타입은 함수가 정상적으로 끝나지 않고, 항상.. 공감수 1 댓글수 1 2024. 10. 6.
[TypeScript] 열거형(Enums) 📚 열거형(Enums)이란 무엇인가요?열거형(Enums)은 관련된 상수들의 집합을 하나의 이름으로 묶어주는 타입스크립트의 기능이에요. 예를 들어, 요일이나 방향처럼 제한된 값들의 목록을 정의할 때 유용해요. 이렇게 하면 가독성이 높아지고, 코드 내에서 상수들을 효과적으로 관리할 수 있어요.비유를 들어보자면, 여러 가지 맛이 있는 아이스크림 가게에서 메뉴를 고를 때, 각 맛에 번호를 붙여서 주문하는 것과 같아요. 번호만 보고도 그게 어떤 맛인지 쉽게 이해할 수 있죠. 열거형은 이런 번호를 의미 있게 부여하는 것과 비슷해요.🖥️ 열거형의 종류타입스크립트에서 열거형은 크게 두 가지 종류로 나뉘어요: 숫자형 열거형과 문자열 열거형이에요.1. 숫자형 열거형숫자형 열거형은 숫자 값에 이름을 붙이는 데 사용돼요... 공감수 1 댓글수 2 2024. 10. 5.
[JavaScript] 화살표 함수와 일반 함수의 차이 📚 화살표 함수(Arrow Functions)와 일반 함수의 차이는 무엇인가요?자바스크립트에서 화살표 함수(Arrow Functions)는 ES6에서 도입된 새로운 함수 정의 방식이에요. 기존의 일반 함수 표현식과 달리, 더 간결한 문법을 제공하며, this 바인딩과 관련된 중요한 차이점이 있어요. 비유를 들어보면, 일반 함수는 새로운 맥락을 형성하여 독립적인 행동을 하는 주체라면, 화살표 함수는 그저 주변 환경을 따라가는 형태의 행동을 해요. 이 때문에 this를 다루는 방식에 큰 차이가 있답니다.🖥️ 화살표 함수와 일반 함수의 차이점1. 문법의 차이일반 함수는 function 키워드를 사용해 정의하고, 화살표 함수는 =>를 사용해 정의해요.// 일반 함수function greet(name) { .. 공감수 0 댓글수 0 2024. 10. 2.
[JavaScript] 구조 분해 할당(Destructuring) 📚 구조 분해 할당이란 무엇인가요? 구조 분해 할당은 복잡한 배열이나 객체로부터 데이터를 추출하여, 이를 새로운 변수에 간단히 할당하는 자바스크립트의 표현식이에요. 이 방식을 사용하면 코드를 더 깔끔하고 가독성 있게 작성할 수 있어요. 비유를 들어보자면, 한 상자에 여러 가지 과일이 들어 있을 때, 각 과일을 하나씩 꺼내서 따로따로 접시에 담는 것과 비슷해요. 구조 분해 할당은 이러한 과정을 코드 상에서 매우 심플하게 해줍니다. 🖥️ 구조 분해 할당의 종류 구조 분해 할당은 주로 배열과 객체에서 사용돼요. 1. 배열의 구조 분해 할당 배열의 구조 분해 할당은 배열의 요소들을 변수에 할당할 때 사용돼요. 순서대로 할당되며, 원하는 요소만 선택적으로 추출할 수도 있어요. const fruits = ["사과".. 공감수 0 댓글수 0 2024. 4. 21.
[TypeScript] 타입 가드(Type Guard) 📚 타입 가드란 무엇인가요? 타입 가드란 특정 스코프 내에서 변수의 타입을 보장하는 표현식을 의미해요. 이를 활용하면 타입 안전성을 보장하면서도 유연하게 코드를 작성할 수 있어요. 타입 가드는 typeof, instanceof, 사용자 정의 타입 가드 등 여러 형태로 사용할 수 있으며, 이를 통해 런타임에 객체의 타입을 좁혀 나가는 역할을 해요. 비유를 들어보자면, 여러 종류의 과일이 섞인 바구니에서 사과만 골라내는 것과 유사해요. 타입 가드는 과일의 종류를 확인하여 사과인 경우에만 특정 작업을 수행하도록 하는 조건문과 같은 역할을 해요. 🖥️ 타입 가드의 종류 1. typeof 가드 typeof 연산자는 자바스크립트의 기본 연산자로, 변수의 타입을 문자열로 반환해요. 타입스크립트에서는 이 연산자를 사용.. 공감수 0 댓글수 0 2024. 4. 20.
[React] useEffect 📚 useEffect란 무엇인가요? useEffect 훅은 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있도록 해주는 기능이에요. 클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount 생명주기 메서드와 유사한 역할을 하죠. 하지만 useEffect는 이 모든 생명주기를 하나의 API로 통합하여 제공해요. 여러분이 한 카페에 앉아 있고, 카페의 분위기나 다른 손님들의 대화에 따라 여러분의 기분이나 행동이 달라진다고 상상해 보세요. 이때, 카페의 분위기나 대화는 useEffect 훅의 의존성 배열(dependency array)에 해당하고, 여러분의 기분이나 행동의 변화는 훅 내부에서 실행되는 부수 효과(side effec.. 공감수 0 댓글수 0 2024. 4. 4.
[HTML] 웹 소켓(WebSocket) 📚 웹 소켓(WebSocket)이란 무엇인가요? 웹 소켓은 실시간, 양방향 통신을 가능하게 해주는 기술이에요. 웹 페이지와 서버 간에 지속적인 연결을 유지하며, 데이터를 실시간으로 주고받을 수 있어요. 이는 채팅 애플리케이션, 온라인 게임, 실시간 거래 플랫폼 등에서 널리 사용돼요. 웹 소켓을 사용하는 것은 마치 전화 통화를 하는 것과 비슷해요. 전화를 걸면 상대방과 바로 대화를 시작할 수 있듯이, 웹 소켓을 통해 웹 페이지와 서버가 실시간으로 '대화'를 나눌 수 있죠. 이전의 기술들은 마치 편지를 주고받는 것처럼 일방적이고 느렸지만, 웹 소켓은 양방향 통신을 통해 정보를 즉각적으로 교환할 수 있게 해 줘요. 🖥️ 웹 소켓의 사용 웹 소켓을 사용하면 웹 애플리케이션에서 실시간으로 데이터를 주고받을 수 있.. 공감수 0 댓글수 0 2024. 3. 30.
[JavaScript] 클로저 📚 클로저란 무엇인가요? 클로저는 함수와 그 함수가 선언될 때의 렉시컬 환경과의 조합이에요. 이는 내부 함수가 외부 함수의 스코프에 접근할 수 있게 해 주며, 외부 함수가 실행을 마친 후에도 외부 함수의 변수에 접근할 수 있게 해요. 클로저는 '백팩'에 비유할 수 있어요. 함수가 실행될 때마다, 그 함수는 자신만의 '백팩'을 가지게 돼요. 이 '백팩' 안에는 함수가 생성될 때의 환경, 즉 외부 함수의 변수들이 들어 있어요. 함수가 어디로 가든, 이 '백팩'을 들고 다니면서 필요할 때마다 외부 함수의 변수들을 사용할 수 있게 되죠. 🖥️ 클로저의 사용 1. 데이터 은닉과 캡슐화 클로저를 사용하면, 함수 외부에서 접근할 수 없는 private 변수를 만들 수 있어요. 이는 데이터 은닉과 캡슐화를 가능하게 해.. 공감수 0 댓글수 0 2024. 3. 23.
[JavaScript] this 📚 this란 무엇인가요? 자바스크립트에서 this는 현재 실행 컨텍스트의 객체를 가리키는 키워드예요. 함수나 메서드가 어떻게 호출되었느냐에 따라 this의 값이 결정돼요. this를 사용하는 것은 마치 레스토랑에서 웨이터가 주문을 받는 고객을 정확히 알아야 하는 것과 비슷해요. 여기서 웨이터는 자바스크립트 함수이고, 고객은 this가 가리키는 객체예요. 어떤 테이블(컨텍스트)에서 호출되었는지에 따라, 웨이터(함수)는 다른 고객(this)에게 서비스를 제공하게 돼요. 🖥️ this의 사용 1. 전역 컨텍스트에서의 this 전역 컨텍스트에서 this는 전역 객체를 가리켜요. 브라우저에서는 window, Node.js에서는 global 객체가 돼요. console.log(this.document === wi.. 공감수 0 댓글수 1 2024. 3. 18.
[TypeScript] 조건부 타입 📚 조건부 타입이란 무엇인가요? TypeScript의 조건부 타입(Conditional Types)은 타입 시스템 내에서 조건문을 사용할 수 있게 해주는 기능이에요. 이를 통해 입력된 타입에 따라 다른 타입을 반환할 수 있으며, 이는 TypeScript의 타입 시스템을 더욱 유연하고 동적으로 만들어 줘요. 조건부 타입은 TypeScript에서 T extends U ? X : Y와 같은 형태로 표현돼요. 여기서 T가 U 타입에 할당 가능한지 여부에 따라 X 타입을 반환하거나, 그렇지 않으면 Y 타입을 반환해요. 이는 프로그래밍에서의 일반적인 조건문(if-else)과 유사한 개념이에요. 조건부 타입은 '도로의 분기점'에 비유할 수 있어요. 여러분이 운전을 하다가 도로가 두 갈래로 나뉘는 지점에 도달했다고 상.. 공감수 0 댓글수 0 2024. 2. 19.
[CSS] CSS 방법론 📚 CSS 방법론이란 무엇인가요? CSS 방법론은 CSS 코드를 구조화하고 조직화하는 일련의 규칙이나 가이드라인이에요. 이는 스타일 시트가 커지고 복잡해짐에 따라 발생할 수 있는 문제들, 예를 들어 선택자의 충돌, 코드의 중복, 유지보수의 어려움 등을 해결하는 데 목적이 있어요. 주요 CSS 방법론에는 BEM(Block Element Modifier), OOCSS(Object-Oriented CSS), SMACSS(Scalable and Modular Architecture for CSS) 등이 있어요. 🖥️ 주요 CSS 방법론 1. BEM (Block Element Modifier) 개념: BEM은 '블록(Block)', '요소(Element)', '수정자(Modifier)'의 약자로, CSS 클래스 .. 공감수 0 댓글수 1 2024. 2. 13.
[React] useRef 📚 useRef란 무엇인가요? useRef는 리액트 훅 중 하나로, 변경 가능한 ref 객체를 반환해요. 이 ref 객체는 .current 속성을 가지고 있어요. 가장 흔한 사용 예는 DOM 요소에 직접 접근하는 것이지만, 값이 변경되어도 컴포넌트가 재렌더링되지 않는 변수를 저장하는 데에도 사용할 수 있어요. 여러분이 큰 도서관에 있다고 상상해 보세요. 이 도서관에는 수많은 책들이 있고, 각각의 책은 특정한 위치에 있어요. 여기서 '책'은 DOM 요소나 컴포넌트를 대표하고, '책의 위치'는 그 요소나 컴포넌트에 대한 참조(Reference)를 상징해요. useRef는 마치 책갈피처럼 특정한 책(요소/컴포넌트)을 쉽게 찾아갈 수 있는 방법을 제공해요. 여러분이 그 책갈피를 가지고 있다면, 도서관 어디서든 .. 공감수 0 댓글수 0 2024. 1. 31.
[JavaScript] ES6 📚 ES6란 무엇인가요? ES6, 공식적으로는 ECMAScript 2015라고 불리는 이 업데이트는 2015년에 발표되었어요. 자바스크립트를 표준화하는 ECMAScript 사양의 여섯 번째 주요 버전이죠. ES6는 자바스크립트 언어에 많은 새로운 기능과 개선사항을 도입했어요. 이러한 변화는 개발자들이 더 효율적이고 간결한 코드를 작성할 수 있게 도와줘요. ES6는 마치 스마트폰이 이전의 피처폰에 비해 가진 혁신적인 기능들처럼, JavaScript의 코딩 경험을 획기적으로 개선한 것으로 볼 수 있어요. 🖥️ ES6의 새로운 기능들 1. let과 const var 대신 let과 const를 사용하여 변수를 선언할 수 있어요. 이는 블록 스코프 변수를 가능하게 하며, 코드를 더 안전하고 이해하기 쉽게 만들어줘.. 공감수 0 댓글수 0 2024. 1. 25.
[React] State 📚 State란 무엇인가요? 리액트에서 state는 컴포넌트의 상태를 나타내는 데이터예요. 이는 사용자의 상호작용이나 시간의 경과에 따라 변경될 수 있는 정보를 말해요. state의 변화는 리액트가 컴포넌트를 다시 렌더링 하게 만들어, 사용자 인터페이스가 최신 상태를 반영하도록 해요. 식당에서 주문서는 손님이 현재 주문한 음식을 나타내죠. 손님이 주문을 변경하면, 주문서의 내용도 그에 맞게 바뀌어요. 주문서가 변경되면, 주방은 변경된 주문에 맞춰 새로운 음식을 준비하고 손님에게 제공해요. 리액트의 state도 이와 비슷해요. state는 컴포넌트의 현재 상태(예: 사용자가 입력한 텍스트, 선택한 옵션 등)를 나타내요. 사용자가 상호작용(예: 버튼 클릭, 폼 입력)을 통해 state를 변경하면, 리액트는 .. 공감수 1 댓글수 1 2024. 1. 8.
[프로그래머스] 다항식 더하기 (JavaScript 문제 풀이) 📝 문제 설명 한 개 이상의 항의 합으로 이루어진 식을 다항식이라고 합니다. 다항식을 계산할 때는 동류항끼리 계산해 정리합니다. 덧셈으로 이루어진 다항식 polynomial이 매개변수로 주어질 때, 동류항끼리 더한 결괏값을 문자열로 return 하도록 solution 함수를 완성해보세요. 같은 식이라면 가장 짧은 수식을 return 합니다. 🔍 제한사항 0 < polynomial에 있는 수 < 100 polynomial에 변수는 'x'만 존재합니다. polynomial은 양의 정수, 공백, ‘x’, ‘+'로 이루어져 있습니다. 항과 연산기호 사이에는 항상 공백이 존재합니다. 공백은 연속되지 않으며 시작이나 끝에는 공백이 없습니다. 하나의 항에서 변수가 숫자 앞에 오는 경우는 없습니다. " + 3xx + .. 공감수 0 댓글수 0 2023. 12. 25.
[프로그래머스] 직사각형 넓이 구하기 (JavaScript 문제 풀이) 📝 문제 설명 2차원 좌표 평면에 변이 축과 평행한 직사각형이 있습니다. 직사각형 네 꼭짓점의 좌표 [[x1, y1], [x2, y2], [x3, y3], [x4, y4]]가 담겨있는 배열 dots가 매개변수로 주어질 때, 직사각형의 넓이를 return 하도록 solution 함수를 완성해보세요. 🔍 제한사항 dots의 길이 = 4 dots의 원소의 길이 = 2 256 < dots[i]의 원소 < 256 잘못된 입력은 주어지지 않습니다. 📥 입출력 예 dots result [[1, 1], [2, 1], [2, 2], [1, 2]] 1 [[-1, -1], [1, 1], [1, -1], [-1, 1]] 4 💻 나의 풀이 가로 길이 구하기: x 좌표들 중 최대값과 최소값의 차이를 구합니다. 세로 길이 구하기:.. 공감수 1 댓글수 1 2023. 12. 21.
[TypeScript] Interface와 Type의 차이 📚 Interface와 Type은 무엇인가요? 이 두 구문은 타입을 정의하는 방법으로, TypeScript 코드의 가독성과 유지보수성을 크게 향상해요. 이 둘은 데이터의 형태와 계약을 정의하는 데 사용되지만, 그 사용 목적과 방법에서 약간의 차이가 있어요. Interface: interface는 객체의 형태를 정의하고, 클래스와의 계약을 설정하는 데 주로 사용돼요. 이는 객체 지향 프로그래밍의 개념과 밀접하게 연관되어 있으며, 확장 가능한 구조를 제공해요. Type: type은 interface보다 더 다양한 타입 표현을 가능하게 해요. 이는 기본적인 객체 형태뿐만 아니라, 유니온, 인터섹션, 기본 타입 등 복잡한 타입 조합을 정의하는 데 사용돼요. interface는 건물의 청사진과 같아서, 객체의 구.. 공감수 0 댓글수 0 2023. 12. 21.
[프로그래머스] 문자열 계산하기 (JavaScript 문제 풀이) 📝 문제 설명 my_string은 "3 + 5"처럼 문자열로 된 수식입니다. 문자열 my_string이 매개변수로 주어질 때, 수식을 계산한 값을 return 하는 solution 함수를 완성해주세요. 🔍 제한사항 연산자는 +, -만 존재합니다. 문자열의 시작과 끝에는 공백이 없습니다. 0으로 시작하는 숫자는 주어지지 않습니다. 잘못된 수식은 주어지지 않습니다. 5 ≤ my_string의 길이 ≤ 100 my_string을 계산한 결과값은 1 이상 100,000 이하입니다. my_string의 중간 계산 값은 -100,000 이상 100,000 이하입니다. 계산에 사용하는 숫자는 1 이상 20,000 이하인 자연수입니다. my_string에는 연산자가 적어도 하나 포함되어 있습니다. return type.. 공감수 0 댓글수 0 2023. 12. 19.
[Web] API 📚 API란 무엇인가요? API(Application Programming Interface)는 간단히 말해, 서로 다른 소프트웨어나 시스템 간에 정보를 주고받을 수 있도록 하는 '중개자' 같은 역할을 하는 도구예요. API를 이해하기 쉬운 비유로 설명하자면, 레스토랑의 웨이터에 비유할 수 있어요. 레스토랑에서 손님은 주방장과 직접 음식을 주문하거나 대화하지 않아요. 대신, 웨이터를 통해 주문을 하고, 웨이터는 주방장에게 주문을 전달해요. 마찬가지로, 웨이터는 주방장이 만든 음식을 손님에게 가져다줘요. 여기서 웨이터가 API의 역할을 해요. 컴퓨터 프로그래밍에서 API는 한 프로그램이 다른 프로그램의 기능이나 데이터를 사용할 수 있게 해주는 '중개인'이에요. 예를 들어, 소셜 미디어 플랫폼의 API를 사.. 공감수 2 댓글수 1 2023. 12. 18.
[프로그래머스] 영어가 싫어요 (JavaScript 문제 풀이) 📝 문제 설명 영어가 싫은 머쓱이는 영어로 표기되어있는 숫자를 수로 바꾸려고 합니다. 문자열 numbers가 매개변수로 주어질 때, numbers를 정수로 바꿔 return 하도록 solution 함수를 완성해 주세요. 🔍 제한사항 numbers는 소문자로만 구성되어 있습니다. numbers는 "zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine" 들이 공백 없이 조합되어 있습니다. 1 ≤ numbers의 길이 ≤ 50 "zero"는 numbers의 맨 앞에 올 수 없습니다. 📥 입출력 예 numbers result "onetwothreefourfivesixseveneightnine" 123456789 "onefourz.. 공감수 0 댓글수 0 2023. 12. 18.
[JavaScript] async/await 📚 async/await란 무엇인가요? async/await는 자바스크립트에서 비동기 작업을 처리하는 현대적이고 간결한 방법이에요. ES2017에서 도입된 이 문법은 비동기 코드를 동기 코드처럼 읽고 쓸 수 있게 해주어, 개발자가 비동기 로직을 더 쉽게 이해하고 작성할 수 있게 도와줘요. async/await는 레스토랑에서 주문한 음식을 기다리는 과정과 유사해요. 먼저, async 함수는 레스토랑에 들어가서 주문을 하는 것과 같이 특정 비동기 작업(예: 데이터 요청)을 시작해요. 그리고 await는 주문한 음식이 준비될 때까지 기다리는 것처럼, 비동기 작업의 완료를 기다리며 그 동안 함수의 실행을 일시 정지해요. 작업이 완료되고 결과가 준비되면, 마치 서빙된 음식을 받아 식사를 시작하는 것처럼, awai.. 공감수 0 댓글수 0 2023. 12. 15.
[프로그래머스] 소인수분해 (JavaScript 문제 풀이) 📝 문제 설명 소인수분해란 어떤 수를 소수들의 곱으로 표현하는 것입니다. 예를 들어 12를 소인수 분해하면 2 * 2 * 3 으로 나타낼 수 있습니다. 따라서 12의 소인수는 2와 3입니다. 자연수 n이 매개변수로 주어질 때 n의 소인수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. 🔍 제한사항 2 ≤ n ≤ 10,000 📥 입출력 예 n result 12 [2, 3] 17 [17] 420 [2, 3, 5, 7] 💻 나의 풀이 2부터 시작하여 n의 제곱근까지의 모든 수로 나누어 보며 소인수를 찾습니다. 소인수를 찾을 때마다 n을 그 소인수로 나눕니다. n이 1이 될 때까지 반복합니다. 최종적으로 남은 n이 1보다 크면 이는 n 자체가 소수임을 의미하므로 소인수 목록에 .. 공감수 0 댓글수 0 2023. 12. 15.
[프로그래머스] 한 번만 등장한 문자 (JavaScript 문제 풀이) 📝 문제 설명 문자열 s가 매개변수로 주어집니다. s에서 한 번만 등장하는 문자를 사전 순으로 정렬한 문자열을 return 하도록 solution 함수를 완성해보세요. 한 번만 등장하는 문자가 없을 경우 빈 문자열을 return 합니다. 🔍 제한사항 0 < s의 길이 < 1,000 s는 소문자로만 이루어져 있습니다. 📥 입출력 예 s result "abcabcadc" "d" "abdc" "abcd" "hello" "eho" 💻 나의 풀이 문자열 s를 순회하며 각 문자의 등장 횟수를 계산합니다. 등장 횟수가 1인 문자만을 선택합니다. 선택된 문자들을 사전 순으로 정렬합니다. function solution(s) { const frequency = {}; for (const char of s) { frequ.. 공감수 0 댓글수 0 2023. 12. 15.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.