전체 글 41

BOJ 12904 A와 B

문제 12904번: A와 B 수빈이는 A와 B로만 이루어진 영어 단어가 존재한다는 사실에 놀랐다. 대표적인 예로 AB (Abdominal의 약자), BAA (양의 울음 소리), AA (용암의 종류), ABBA (스웨덴 팝 그룹)이 있다. 이런 사실에 놀란 수 www.acmicpc.net 예시 코드 function solution() { const S = input(); let T = input().split(""); while (S.length !== T.length) { if (T.at(-1) === "A") T = T.slice(0, -1); else if (T.at(-1) === "B") T = T.slice(0, -1).reverse(); else break; } return S === T.joi..

웹 페이지 렌더링 방식: CSR, SSR, SSG 이해하기

들어가며 웹 개발에 있어서 렌더링은 웹 페이지의 HTML, CSS, JavaScript 등을 해석하여 사용자가 보는 최종적인 화면을 생성하는 과정을 의미합니다. 이번 글에서는 CSR(Client Side Rendering), SSR(Server Side Rendering), 그리고 SSG(Static Site Generation)라는 세 가지 주요 렌더링 방식에 대해 알아보겠습니다. CSR (Client Side Rendering) CSR은 클라이언트(브라우저)에서 자바스크립트를 이용해 동적으로 페이지를 렌더링하는 방식입니다. 작동 방식 사용자가 웹 페이지에 접속하면 서버로부터 최소한의 HTML과 모든 자바스크립트 파일을 받아옵니다. 브라우저에서 자바스크립트가 실행되며 필요한 데이터를 API를 통해 받아..

Web 2023.11.20

그리디 알고리즘 이해하기 - 매 순간 최적의 선택으로 문제 해결하기

들어가며 이번 시간에는 알고리즘 중 하나인 '그리디 알고리즘'에 대해 알아보려고 합니다. 소개 그리디(Greedy) 알고리즘, 또는 탐욕법 알고리즘은 매 순간에서 가장 최적의 선택을 통해 문제를 해결하는 방식입니다. 그리디라는 단어는 '탐욕적인'이라는 의미를 가지고 있죠. 이 알고리즘의 핵심은 각 단계에서 '현재 가장 좋은 선택'을 하는 것입니다. 주요 특징 그리디 알고리즘이 가지는 주요 특징은 다음과 같습니다. 탐욕적 선택 속성 알고리즘이 진행되는 동안, 각 단계에서 최적의 선택을 합니다. 이 선택은 이후의 선택 전략에 영향을 주지 않습니다. 최적 부분 구조 문제 전체에 대한 최적해(global optimum)가 부분 문제에 대해서도 최적해(local optimum)를 포함하고 있습니다. 접근 방법 그..

Algorithm/Greedy 2023.11.13

Jorma Sajaniemi의 '변수 역할' 프레임워크

들어가며변수가 어떤 종류의 정보를 담고 있는지 이해하는 것은 코드를 추론하고 수정하는 데 결정적인 역할을 합니다. 이스턴 핀란드 대학교의 Jorma Sajaniemi 교수에 따르면, 변수를 이해하기 어려운 이유는 대부분의 프로그래머가 변수를 연관 지을 좋은 스키마를 자신들의 LTM(Long Term Memory)에 가지고 있지 않기 때문이라고 합니다.Sajaniemi  따르면 우리는 '변수'나 '정수'처럼 너무 많은 것을 포함하는 청크를 사용하거나 numberOfCustomer 같이 너무 적은 것을 포함하는 청크를 사용하는 경향이 있다고 하는데요. 그 중간을 유지하기 위해 변수 역할 role of variables이라는 프레임워크를 만들었다고 합니다. 11가지 역할Sajaniemi는 다음과 같은 11개의..

Programming 2023.10.30

JavaScript에서 Queue 구현하기: 배열 vs 연결 리스트 vs 두 개의 스택

들어가며큐(Queue)는 중요한 자료구조 중 하나로, FIFO(First-In-First-Out) 특성을 가지는데요. 첫 번째로 들어간 요소가 가장 먼저 나옵니다. 이번 포스트에서는 자바스크립트를 사용하여 큐를 구현하는 세 가지 방법에 대해 알아보겠습니다. 1. 배열을 이용한 구현자바스크립트에서 가장 간단하게 큐를 구현하는 방법은 배열(Array)을 사용하는 것입니다.push 메서드로 새 요소를 추가하고, shift 메서드로 첫 번째 요소를 제거합니다. enqueue는 O(1)에 수행됩니다.dequeue는 O(n)에 수행됩니다. 배열에서 첫 번째 요소를 제거하면 모든 요소가 한 칸씩 앞으로 이동해야 하기 때문입니다. 아래는 구현 코드입니다.class Queue { constructor() { th..

Javascript 2023.10.23

JavaScript에서 얕은 복사와 깊은 복사 이해하기

들어가며 JavaScript를 사용하다 보면 객체나 배열과 같은 참조형 데이터를 다루게 되는데요. 참조형 데이터를 복사할 필요가 있을 때, 얕은 복사와 깊은 복사라는 개념이 중요하게 작용합니다. 이번 포스트에서는 JavaScript에서 얕은 복사와 깊은 복사에 대해 알아보겠습니다. 얕은 복사 (Shallow Copy) 얕은 복사는 이름처럼 복사하는 깊이가 얕은데요. 객체를 한 단계까지만 복사할 수 있습니다. 객체를 복사할 때 원시 값의 경우 값을 그대로 복사하지만, 객체의 경우 참조 값, 즉 객체가 저장되어 있는 메모리 주소를 복사하는데요. 그렇기 때문에 얕은 복사를 통해 만들어진 객체를 수정하면 원본 객체에 영향을 미칠 수 있으므로 주의해야 합니다. 몇 가지 예시를 들어볼게요. 1. 배열의 slice ..

Javascript 2023.10.16

JavaScript의 데이터 타입에 대해 알아보자!

이번 시간에는 자바스크립트의 데이터 타입에 대해 알아보도록 하겠습니다. 데이터 타입이란 데이터 타입이란 프로그래밍에서 변수 또는 객체가 가질 수 있는 값의 종류를 말합니다. 예를 들어, Number 타입은 숫자 값을, String 타입은 텍스트 문자열 값을 가질 수 있습니다. 데이터 타입의 필요성 데이터 타입은 다음과 같은 이유로 필요합니다. 1. 값을 저장하고 참조할 때 필요한 메모리 크기를 정해야 합니다. 2. 메모리에서 읽어 들인 2진수 값을 어떻게 해석해야 할지 알아야 합니다. 3. 연산자는 종종 피연산자의 데이터 타입에 따라 다르게 동작합니다. 예를 들어, "+" 연산자는 Number 타입에 대해서는 덧셈을 수행하지만, String 타입에 대해서는 두 문자열을 연결합니다. 데이터 타입의 종류 자..

Javascript 2023.10.09

JavaScript에서 변수란 무엇일까?

들어가며 이번 시간에는 가장 기본이 되는 개념 중 하나인 변수에 대해 간단히 알아보도록 하겠습니다. 변수란 무엇인가 변수는 하나의 값을 저장하는 메모리 공간을 가리키는 이름입니다. 변수는 식별자이기도 한데요. 식별자란 무언가(변수, 함수, 클래스 등)를 식별하기 위한 이름입니다. 우리가 어떤 값을 쓰고자 한다면 먼저 변수를 선언하고 값을 할당해주어야 합니다. 변수 선언이란 변수를 생성하는 것을 말합니다. 값을 저장할 수 있는 크기만큼의 메모리 공간을 확보하고, 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있도록 준비하는 건데요. 이렇게 확보된 공간은 해제되기 전까지 누구도 사용할 수 없도록 보호되어 안전합니다. 자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 걸쳐 수행합니다. 선언 단계: ..

Javascript 2023.09.25

JavaScript에 대해 알아보자!

들어가며 "웹 개발" 하면 빼놓을 수 없는 자바스크립트! 그럭저럭 사용하고는 있지만 아직 잘 모르겠다고 느끼시진 않나요? 이번 시간에는 알듯 말듯 잘 모르겠는 자바스크립트에게 한 발짝 다가가 보도록 하겠습니다. 자바스크립트란? 자바스크립트는 웹 브라우저에서 동작하는 유일한 프로그래밍 언어입니다. 웹 페이지에 동적인 요소들을 추가하고, 사용자와 상호작용 할 수 있도록 도와줍니다. 예를 들어 다음과 같은 일들을 할 수 있습니다. 버튼을 클릭하면 팝업창이 나타납니다. 어떤 항목을 선택하면 관련 정보가 화면에 표시됩니다. 스크롤 위치나 브라우저 크기 변화 등 사용자의 화면 조작에 따라 다른 내용이 표시됩니다. 폼 데이터를 검증하여 올바르지 않은 입력 시 경고 메시지를 보여줍니다. 이런 자바스크립트 없이 HTML..

Javascript 2023.09.16