게시물 (왼쪽 상단의 버튼을 클릭해보세요!)
-
Javascript
[JavaScript] 최소직사각형 - 완전탐색
프로그래머스 - 알고리즘 고득점 Kit 완전탐색 편 제한사항* sizes의 길이는 1 이상 10,000 이하입니다.* sizes의 원소는 [w, h] 형식입니다.* w는 명함의 가로 길이를 나타냅니다.* h는 명함의 세로 길이를 나타냅니다.* w와 h는 1 이상 1,000 이하인 자연수입니다. function solution(sizes) { let maxX = 0; let maxY = 0; for (let i = 0; i b - a); maxX = Math.max(maxX, w); maxY = Math.max(maxY, h); } return maxX * maxY;} 1단계 문제로써 쉽게 이해하고 접근할 수 있었습니다.재귀형식을 굳이 사용하지 않고 O(n)의 시간복잡도로 풀 수 ..
-
Javascript
[TIL] setInterval, 시간보장 그리고 타이머 - 2편
지난 시간까지 setInterval이 왜 시간 보장을 해주지 않는지, event loop에 대한 개념과 이로 인해 발생한 사이드 이펙트까지 알아봤어요! 이번 시간에는 timeRef(useRef)에 매초 +1 씩 더하는 로직을 어떻게 수정했는지, 시간 계산을 어떻게 하여 시간 보장이 되었는지 공유해볼게요! ☺️ 1. Date.now()를 활용한 시간보장JavaScript를 다뤄보신 분들이라면 모두 한 번쯤은 보신 Date.now()를 활용했어요! // MEMO :: 타이머 시작// 참고만 해주세요! const start = useCallback(async () => { if (intervalRef.current !== null) { return; } if (isCountUp)..
-
Javascript
[TIL] setInterval 함수, Event loop 그리고 타이머 - 1편
Hi there ~ 👋 요즘 열심히 블로그를 쓰고 있어요!! ㅎㅎ블로그에 지난 3개월동안 소홀했었는데, 다시 힘을 내고 있습니다!! (아자아자) 오늘의 주제는 바로 타이머에요!저희 회사에는 레거시가 되기 일보직전의 타이머 코드가 있었어요..🥺 회사의 다른 주니어 프론트엔드 개발자분들은 현재 진행중인 프로젝트가 있어서 수정하기에 바쁘신 것 같았어요!그래서 제가 타이머의 구조와 로직을 개선하게 되었답니다..ㅎ 1. Event loop와 사이드 이펙트첫 번째 문제였어요! // 레거시 코드가 될 타이머 코드..const timeRef = useRef(0);useEffect(() => { if (timeRef.current === 0 && startTime !== 0 && statusOfTime !..
-
Front-End
[TIL] LCP 최적화 도전하기..!
어느 날, 저는 저희 팀 백엔드 개발자에게 연락을 받았습니다. 백엔드 개발자: "형, 우리 웹 사이트 LCP 부분에서 시간을 너무 많이 소모하는 것 같아. 웹 페이지 처음 로딩할 때, 너무 느려! 확인해줘~"본인: "그..그래!! 고마워..!!" 백엔드 개발자님이 주신 https://www.webpagetest.org/ 를 바탕으로 저희 사이트를 분석해보았습니다.확실 LCP 부분에서 빨간색 경고가 있었어요..ㅠㅠ 이를 개선하고자, LCP에 대해서 마구마구 찾아봤어요..!! LCP란 무엇인가?LCP (Largest Contentful Paint)는 웹 페이지 로딩 속도와 사용자 경험을 측정하는 중요한 지표 중 하나입니다.LCP는 페이지의 가장 큰 콘텐츠 요소가 화면에 표시되는 데 걸리는 시간을 측정..
-
TIL
여름방학 인턴 회고
Hi~ 👋염딩코입니다! 저는 올해 4학년을 보내면서 여름방학 때, 운이 좋게 인턴 생활을 하고 있어요!인턴이지만, 서류, 코딩테스트, 면접까지!!쉽지 않은 것 같아요..ㅠㅠ 8시에 출근할 때, 찍은 사진이에요(이쁘죠? 🤗) IT 회사답게 비교적 자유롭게 출근했던 것 같아요.(저는 주로 8시 출근해서 5시에 퇴근을 했어요.) 복장도 자유로웠지만, 눈치가 보여서 조금은 챙겨입었어요ㅎㅎ 저는 프론트엔드 개발자를 지망하고 있어서, 해당 직무로 지원을 했고 관련된 일을 했어요!저의 주요 업무는 중계 스코어보드를 제작하고, 조작할 수 있는 기능을 구현하는 것이었고, AI 관련 토이프로젝트도 진행했었어요! 처음 회사에서 일을 하지만, 저는 잘 할 수 있다는 자신감과 모르면 여쭤보면 된다는 생각을 가지고,주어..
-
Front-End
[TIL] 나 혼자 보는 Cypress 기본편
Cypress 가 뭐지?!회사에서 새로운 기능을 담당하게 되어서 열심히 개발하는 염딩코씨. 그는 기존에 존재하는 코드들을 조금씩 손을 보기 시작했는데,,,테스트 코드가 존재하지 않기 때문에 두려움에 떨고 있었다.. 미래를 위해 테스트 코드를 "밋팀" 프로젝트에 적용해보기로 하고, 테스트 코드 맛보기를 하고 있었다.Cypress는 E2E Test에 용이했고, UI로 테스트 과정을 직접 확인할 수 있어서 끌렸다. TDD의 중요성을 깨닫고 시작하는 Cypress 스터디 레츠고!! 시작진행하고 있는 프로젝트에 cypress 설치 npm install cypress다시 시작npm run dev 새로운 터미널을 열고 cypress를 실행시킨다.npx cypress open(권한 필요) cypress 창이 열리고,..
-
React
[TIL] 낙관적 업데이트로 누구보다 빠르게 북마크하기(feat. Tanstack-query)
Hi there ~ 👋 오늘은 밋팀의 북마크 기능을 구현하던 중 발생한 일을 공유할까 해요...!😁 인터넷이 느린 환경이나 API 호출 딜레이가 발생할 경우에 북마크가 적용될 때 딜레이가 발생하는 경우가 있었습니다. (오늘도 어김없이 밋팀을 작업하는 johnyeom씨) 클릭 시 바로 적용이 안 되는 것이 보이시나요??..🧐 사용자 경험(UX)의 측면으로 봤을 때, 정말 좋지 않다고 생각했고 열심히 구글링을 해보았습니다!!🔥🔥🔥 이는 바로 '낙관적 업데이트'라는 개념을 통해서 지연 시간에 대한 불편을 해소할 수 있었습니다! 낙관적 업데이트란 무엇인가?낙관적 업데이트는 사용자의 동작에 대한 응답을 기다리지 않고 미리 UI를 업데이트하는 것입니다.낙관적 업데이트가 적용되기 이전의 북마크는 ..
-
Javascript
[JavaScript] 자식 컴포넌트의 클릭 이벤트 (feat. event.stopPropagation())
Hi there~다들 잘 지내고 계신가요??😃저는 최근에 졸업작품을 마무리하고 프로젝트의 기능들을 하나씩 리팩토링하는 과정에 있습니다 :) 최근에 밋팀 메인페이지에 필터 기능을 구현하던 중 특이한 현상을 마주했습니다..! OMG..!! 제가 원하는 모습은 삭제버튼을 눌러도 드롭다운 창이 닫히지 않는 것이었어요!!하지만,,, 닫혔죠? 구글링을 하던 중 저와 비슷한 상황을 겪으신 분을 발견했어요!!! stopPropagation() 이라는 메서드를 통해서 해결할 수 있었습니다 😁 저의 코드는 현재 아래와 같은 구조를 띄고 있어요.부모 컴포넌트의 wrapper에서 클릭 이벤트가 발생하면 창을 닫고 열도록 구현이 되어있고,이 이벤트는 자식 컴포넌트들에게 전파가 되죠. 자식 컴포넌트 1에서는 아무런 문제..
-
Javascript
[JavaScript] 한글 입력 시 이벤트가 두 번 호출되는 오류
며칠전 사이드 프로젝트의 댓글 기능을 작업하고 있었다.정상적으로 동작하는지 확인하기 위해 테스트를 하던 중 아래의 사진과 같은 에러가 발생했다. "안녕"을 입력하면 "녕"까지 추가로 입력이 되었고, "하이"를 입력하면 "이"까지 추가로 입력되었다.원인을 파악하다가 도저히 왜 이벤트가 두 번 실행되는 것인지 알 수 없었다. 구글링을 해서 찾아낸 결과,영어와 다르게 자음과 모음의 조합으로 한 음절이 만들어지는 한글의 특성 때문에 발생하는 오류였다.onKeyDown / onKeyUp 를 onKeyPress로 변경하면서 오류는 해결할 수 있었다. onKeyDown / onKeyUp키를 누르고 때는 동작 자체에 반응한다.문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pa..
-
Javascript
[JavaScript] 함수 객체의 프로퍼티
함수 객체의 프로퍼티 함수 객체의 프로퍼티에는 arguments, caller, length, name, __proto__, prototype 프로퍼티가 존재한다. arguments 프로퍼티 함수 객체의 arguments 프로퍼티 값은 arguments 객체 arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체 지역변수처럼 사용(외부 참조 불가) 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다. 다음 예제를 살펴보자. 함수를 정의할 때 선언한 매개변수는 함수 몸체 내부에서 변수와 동일하게 취급한다. 즉, 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화된 이후 인수가 할당된다. 그래서, 선언..
-
Javascript
[JavaScript] 함수는 왜 일급객체(First Class Object)일까?
일급객체 일급객체란 무엇일까? 다음의 조건을 만족하는 객체를 일급객체라 한다. 1. 무명의 리터럴로 생성할 수 있음.(즉, 런타임에 생성이 가능함.) 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있음. 3. 함수의 매개변수에 전달할 수 있음. 4. 함수의 반환값으로 사용할 수 있음. 자바스크립트에서 함수는 위의 조건을 모두 만족한다. 그래서 자바스크립트에서는 함수를 일급객체라고 할 수 있다. 다음 예제를 살펴보자. 함수가 일급객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 일급객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다는 것이다. 그렇다면 일..
-
React
[React] useEffect 훅의 clean-up 함수
React에서 useEffect 훅은 함수 컴포넌트의 side effect를 수행할 수 있도록 한다. side effect: 흔히 부작용으로 알고 있지만, 프로그래밍에서는 "변화가 발생하는 행위"로 이해하면 된다. useEffect의 effect 함수와 clean-up 함수에 대해서 알아보기 전에 React에서 마운트와 언마운트의 개념을 알고 있어야 한다. 마운트(mount): 마운트는 컴포넌트가 최초로 렌더 될 때 거치는 과정이다. 이후 props와 state가 변경될 때는 마운트 과정을 거치지 않는다. 언마운트(unmount): 언마운트는 컴포넌트가 삭제될 때 거치는 과정이다. useEffect의 기본 구조는 아래와 같다. useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 ..
-
TIL
[Algorithm] LCS: Longest Common Substring와 Longest Common Subsequence
Longest Common Substring 과 Longest Common Subsequence 란? LCS는 주로 최장 공통 부분 수열(Longest Common Subsequence)을 말합니다만, 최장 공통 문자열(Longest Common Substring)을 말하기도 합니다. 문자열 ABCDEF와 GBCDFE를 이용하여 차이점을 예시로 들어보면 해당 예시에서 최장 공통 부분수열(Longest Common Subsequence)은 BCDF, BCDE가 될 수 있습니다. 부분수열이기 때문에 문자 사이를 건너뛰어 공통되면서 가장 긴 부분 문자열을 찾으면 됩니다. 최장 공통 문자열(Longest Common Substring)은 BCD입니다. 부분문자열이 아니기 때문에 한번에 이어져있는 문자열만 가능합..
-
Javascript
[JavaScript] 백준 2565번 문제 풀이
문제 풀이 처음에는 가장 많이 겹치는 순으로 제거하면서 겹치지 않는 선들만 남기려고 헀다. 하지만, 이 접근 방식은 DP와 거리가 있다고 생각을 했고 오히려 Greedy 알고리즘에 가깝다는 생각이 들었다. DP의 가장 중요한 특성 중 하나인 bottom-up을 고려하여 다시 생각을 해보는 시간을 가졌다. ⇒ 결과적으로 겹치지 않는 경우를 카운트 첫 번째 줄부터 마지막 줄까지 순차적으로 보면서 겹치는 경우를 고려하려고 했으나 쉽지 않았다. 처음에 입력을 받을 때, 랜덤한 순서로 받기 때문에 오름차순으로 정렬하여 우선 조금 더 쉽게 판단할 수 있도록 했다. (왼쪽을 기준으로 오름차순 정렬) 오름차순으로 정렬하여 가장 긴 수열(경우)를 찾는 것 = 가장 많이 겹치지 않는 경우
-
Javascript
[JavaScript] 백준 1520번 문제 풀이
풀이를 생각해낸 과정 이 문제는 예전에 알고리즘 과제와 유사하다는 느낌을 받았다. (그래서 예전 알고리즘 수업 자료도 보면서 다시 공부를 했다.) 목적지에 도달을 하면 경우의 수에 1을 더하는 방식을 생각을 했었고, 그 과정에서 지나온 경로들을 모두 처리해줘야 했었다. 지나온 경로는 상하좌우를 따지면서 내리막길인 경우에 다른 표기를 해야한다고 생각했다. 그렇게 목적지에 도달하면 해당 경우의 수를 1씩 증가시키면서 답을 구하려고 했다. 오렌지 부분에서 고민을 많이 했고, 시간이 너무 지체되어서 참고를 하면서 구현을 했다. 풀이에 대한 설명 세부적인 내용은 주석을 통해서 간단하게 설명을 했고 핵심적인 내용 위주로 설명을 하면 각각의 노드에 왔을 때, 상하좌우를 따지면서 범위를 벗어났다면 continue를 하..
-
Javascript
[JavaScript] 프로그래머스 Lv.0 영어가 싫어요
풀이 function solution(numbers) { const arr = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine']; for (let i = 0; i < arr.length; i++) { numbers = numbers.split(arr[i]).join(i); } return Number(numbers); } arr로 각 숫자를 구분하기 위해서 나열하는 것은 필수의 과정인 것 같다. 다만, 이것을 객체로 할 것인지 혹은 배열로 할 것인지에 따라 풀이 과정이 달라진다. 배열로 푼다면 replaceAll 메서드를 활용할 수도 있다. function solution(numbers) { const word..
-
Javascript
[JavaScript] 백준 11727번 문제 풀이
DP 점령 2일차. 지난 포스팅에 간단하게 DP에 대한 특징을 정리했습니다. 그것을 기억하면서 이 문제를 풀어봅시다. 2023.09.13 - [알고리즘 PS/Javascript] - [JavaScript] 백준 1463번 문제 [JavaScript] 백준 1463번 문제 이 문제는 DP(Dynamic Programming)를 연습하기 좋은 문제입니다. DP(동적 계획법)에 대한 자세한 설명은 추후에 글을 올리겠습니다. DP에 대해서 간단하게 말씀드리면 DP는 하나의 큰 문제를 여러 개의 yeomyeom.tistory.com 처음에 주어진 것은 1인 경우에는 1가지이고, 2인 경우에는 3가지가 나오는 구나. DP의 가장 큰 특징 중 하나는 작은 단위로부터 문제를 해결하려는 것입니다. 그래서 작은 단위에서부..
-
Javascript
[JavaScript] 백준 1463번 문제
이 문제는 DP(Dynamic Programming)를 연습하기 좋은 문제입니다. DP(동적 계획법)에 대한 자세한 설명은 추후에 글을 올리겠습니다. DP에 대해서 간단하게 말씀드리면 DP는 하나의 큰 문제를 여러 개의 작은 문제로 나누어서 그 결과를 저장하여 다시 큰 문제를 해결할 때 사용합니다. DP는 재귀와 매우 유사합니다. 하지만, 가장 큰 차이점은 일반적인 재귀를 단순히 사용 시 동일한 작은 문제들이 여러 번 반복 되어 비효율적인 계산될 수 있다는 점입니다. DP를 사용하기 위한 조건으로는 크게 두 가지가 있습니다. 1. Overlapping Subproblems(겹치는 부분 문제) 동일한 작은 문제들이 반복하여 나타나는 경우 2. Optimal Substructure(최적 부분 구조) 부분 문..
-
Javascript
[JS] 생성자 함수에 의한 객체 생성
객체를 생성하는 방법 중 객체 리터럴에 의한 객체 생성은 가장 일반적이고 간단한 객체 생성 방식이다. 그 외에도 다양한 객체 생성 방식이 있는데, 그 중 생성자 함수를 사용하여 객체를 생성하는 방식에 대해 살펴보자. Object 생성자 함수 new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'April'; person.sayHello = function () { console.log('Hi! My name is ' + this.name); }; console.log(person); // {name: "April", sayHello: ƒ} person...
-
Javascript
[JS] Property Attribute
내부 슬롯과 내부 메서드 프로퍼티와 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드를 알아보자. 더보기 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호([[ ... ]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만, 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 내부 슬롯과 내부 메소드는 직접 접근하거나 호출할 수 없다는 의미이다. (단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을..
-
Javascript
[JS] Event loop
자바스크립트는 싱글 스레드 기반 언어이다. Non-blocking 방식의 비동기적인 동시성 언어이며 콜 스택, 이벤트 루프와 콜백 큐, 그리고 여러가지 다른 API들을 가지고 있다. 자바스크립트 엔진인 V8은 콜 스택과 힙을 가지고 있다. 힙은 메모리가 할당되는 부분 콜 스택은 함수가 호출될 때, execution context가 쌓이는 영역 콜 스택(Call Stack) 그림을 보면, 자바스크립트 엔진인 V8이 가지고 있는 힙과 콜 스택이 있고, 웹 브라우저에서 제공하는 Web API가 DOM, Ajax, setTimeout 등을 제공하는 것을 알 수 있다. 하단에는 event loop와 콜백 큐가 있는 것을 확인할 수 있다. 하나의 스레드 = 하나의 콜 스택 = 한 번의 한 작업 자바스크립트는 Sin..
-
Javascript
[JS] Prototype
Prototype은 뭘까? 오늘은 prototype에 대해서 공부해봅시다! Prototype에 대해서 공부하기 전에 JavaScript에서 class에 대한 내용을 잠시 설명하고 가겠습니다. 아래의 코드를 보시면 기계라는 것을 통해서 object를 마음껏 찍어낼 수 있습니다. 비슷한 object를 쉽게 만들고 싶을 때, 아래와 같은 문법을 사용할 수 있습니다. // object 복사 기계(부모) function 기계() { // 복사된 object가 기본으로 가질 속성 this.q = 'strike'; this.w = 'snowball'; } // object 생성(자식) var nunu = new 기계(); console.log(nunu); // { q: "strike", w: "snowball" } ..
-
Javascript
[Javascript] 프로그래머스 Lv.2 구명 보트
이 문제는 크게 어렵지 않았는 데, 자꾸 틀렸다. 테스트케이스는 바로 맞았지만 문제는 한 구명보트에 최대로 2명만 탈 수 있다는 조건을 뒤늦게 확인했다는 점이다. 제한사항에 없는 조건도 문제에서 있기 때문에 꼼꼼하게 따져야 할 것 같다. 코드를 작성할 때, 주석으로 달아놓는 것도 좋은 습관인 것 같다. 나의 풀이 function solution(people, limit) { let cnt = 0; people.sort((a,b) => (a-b)); while(people.length > 0) { const lastPerson = people.pop(); let lastWeight = limit - lastPerson; if (people[0] b-a) for(let i =0, j = people.leng..
-
Javascript
[JS]let, const 키워드와 블록 레벨 스코프
var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var 키워드로 선언한 변수는 중복 선언이 가능하다. var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x) // 100 console.log(y) // 1 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생할 수 있다. 함수 레벨 스코프 var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서, 함수 외부에서 var 키워드로 선언한 변수..
-
Javascript
[JS]전역 변수의 문제점
전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 목표: 전역 변수의 문제점, 전역 변수 사용 억제 방법 변수의 생명 주기 지역 변수의 생명 주기 변수: 선언(생성) -> 초기화 -> 소멸 = 생명 주기(Life Cycle) 이처럼 변수도 생명 주기가 존재한다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. // 변수 x의 생명 주기 시작 function foo() { var x = 'local'; // 변수 x 생성 및 값 할당 console.log(x); // local return x; // 변수 x 소멸 } // 변수 x의 생명 주기 끝 foo(); consol..
-
Javascript
[Javascript] 프로그래머스 Lv.2 카펫
문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 ..
-
Javascript
[JS] 블로킹과 논블로킹 / 동기와 비동기
오늘은 블로킹과 논블로킹 그리고 동기와 비동기에 대해서 배워봅시다! 그리고 이들이 서로 어떻게 연관되어 있는지 알아봅시다! 블로킹과 논블로킹, 동기와 비동기에 대해서 공부하기 전에 먼저 알아야 하는 개념이 있습니다. 제어권 함수의 코드를 실행할 권리. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려줍니다. 리턴값을 기다리는 것 A 함수에서 B 함수를 호출했을 때, A 함수가 B 함수의 리턴값을 기다리느냐의 여부를 의미합니다. 콜백 함수 비동기 작업이 끝난 후에 실행되며, 해당 작업의 결과를 전달받아 필요한 처리를 수행하는 함수입니다. 블로킹(Blocking) 블로킹은 특정 작업이 완료될 때까지 다른 작업들이 기다려야 하는 상태를 의미합니다. 블로킹 작업은 해당 작업이 ..
-
CSS
[CSS] display: flex와 float: right가 함께 적용되지 않을 때
https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right" target="_blank" rel="noopener" data-mce-href="http:// https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right">http:// https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right Making a flex item float right I have a Ignore parent? another child The parent has .parent {... stackover..
-
CSS
[CSS] div내 요소 중 float:right 이탈 문제 해결
오늘은 trello-clone을 하던 중 발생한 에러에 대해서 알아보려고 합니다! 제가 예전에 작업한 프로젝트인 trello-clone입니다. To do list에서 수정 버튼을 추가해줬고, 문자열이 특정 길이가 되면 수정버튼이 아래로 이탈하는 경우가 있었습니다. 위와 같이 이탈하는 경우였습니다. 해결 방법은 간단했습니다. html을 작성할 때, 오른쪽 영역의 코드와 가운데 영역의 코드의 순서를 바꿔주면 해결이 되었습니다. 참고 https://windcjg.blogspot.com/2022/09/align-center.html
-
TIL
캐시(cache)란 무엇인가?
안녕하세요! 오늘은 컴퓨터 성능 향상에 중요한 역할을 하는 '캐시(cache)'에 대해 알아볼까요? 캐시는 여러분도 자주 들어보셨을 텐데, 여기서는 누구나 쉽게 이해할 수 있는 방식으로 이 설명해 드리겠습니다. 그럼 시작해 볼까요? 1. 캐시란 무엇인가요? 캐시는 '고속 저장 장치'로, 컴퓨터에서 중요한 역할을 하는 주요 컴포넌트 중 하나입니다. CPU와 메모리 사이에서 데이터를 빠르게 전달하기 위해 사용되는데, 한마디로 "가까워서 빠른 임시 저장소"라고 생각하시면 됩니다. 캐시가 없다면 CPU는 느린 주변장치인 메모리에서 원하는 데이터를 찾아야 하기 때문에 성능이 저하됩니다. 2. 캐시의 역할은 무엇인가요? 캐시는 컴퓨터 성능을 향상하고 실행 속도를 높이기 위한 역할을 합니다. 메모리에서 자주 사용..
-
TIL
가상 메모리(Virtual memory)란?
가상 메모리는 컴퓨터 시스템에서 물리적 메모리의 용량을 초과하여 프로그램의 메모리 공간을 가상적으로 늘이는 기술입니다. 주요 이점은 크게 메모리 관리 향상, 컴퓨터 자원의 효율적 사용 및 프로세스 구현 단순화 등입니다. 가상 메모리는 페이징 및 세그먼테이션 방식으로 구현되며, 사용하는 주소 공간은 물리적 메모리 넘어서어 하드 디스크 또는 SSD에 저장되어 있습니다. 가상 메모리의 주요 동작 과정은 다음과 같습니다: 1. 주소 변환: 프로그램이 실행되기 위해 가상 주소가 참조됩니다 이 때, 가상 주소를 물리적인 메모리 주소로 변환하는 단계가 필요합니다. 이 과정에서 MMU(Memory Management Unit)가 주소 변환 역할을 수행합니다. 2. 메모리의 데이터 로드 및 저장: 변환된 물리 주소에 대..
-
TIL
[C#] get, set 이란?
안녕하세요! 오늘은 C# 프로그래밍 언어에서 중요한 개념인 get과 set 속성에 대해 알아보려고 합니다. get과 set은 C#에서 속성을 정의하고 접근하는 방법을 제공합니다.이를 통해 데이터의 캡슐화와 접근 제어를 유연하게 할 수 있습니다. 1. get 속성get 속성은 해당 속성의 값을 반환하는 역할을 합니다. 속성의 값을 가져오는데 사용되며, 일반적으로 public으로 선언됩니다. get 속성은 속성 이름 앞에 get 키워드를 사용하여 정의합니다. 예시를 통해 살펴보겠습니다:private int age; // 필드public int Age{ get { return age; } // get 속성}위의 예시에서 Age 속성은 age라는 private 필드의 값을 반환합니다. 다른 클래스나 메서..
-
Front-End
웹어셈블리(WebAssembly)란?
오늘은 웹어셈블리에 대한 내용을 다뤄보려고 합니다. 아마 처음 들으시는 분들도 있을 거라고 생각합니다. 저도 얼마전에 지인을 통해서 알게된 개념이고 정리하고 싶어서 글을 작성하게 되었습니다. 웹어셈블리란? WebAssembly는 최신 웹 브라우저에서 실행할 수 있는 새로운 유형의 코드이며 새로운 기능과 성능에서 큰 이점을 제공합니다. 직접 코드를 작성하는 것이 아니라 C, C++, RUST 등의 저급 소스 언어를 효과적으로 컴파일 하도록 고안되었습니다. 이는 웹 플랫폼에 큰 영향을 미칩니다. 이전에 불가능했던 웹에서 실행되는 클라이언트 응용 프로그램을 사용하여 웹에서 여러 언어로 작성된 코드를 네이티브에 가까운 속도로 실행하는 길을 제공합니다. 게다가 웹어셈블리 코드를 사용하여 이를 활용하는 방법을 알 ..
-
TIL
[Algorithm] Backtracking이란?
이번 시간에는 Backtracking에 대해서 알아봅시다! Backtracking이란 해를 찾는 도중 해가 아니어서 막히면, 되돌아가서 다시 해를 찾아가는 기법을 말합니다. 최적화 문제와 결정 문제를 푸는 방법이 됩니다. DFS와 Backtracking DFS DFS는 가능한 모든 경로(후보)를 탐색합니다. 따라서, 불필요할 것 같은 경로를 사전에 차단하거나 하는 등의 행동이 없으므로 경우의 수를 줄이지 못합니다. 따라서 N! 가지의 경우의 수를 가진 문제는 DFS로 처리가 불가능할 것입니다. Backtracking 해를 찾아가는 도중, 지금의 경로가 해가 될 것 같지 않으면 그 경로를 더 이상 가지 않고 되돌아갑니다. 즉, 코딩에서는 반복문의 횟수까지 줄일 수 있으므로 효율적입니다. 이를 pruning..
-
TIL
[Algorithm] 허프만 코드(Huffman code)
안녕하세요! 여러분 오늘은 허프만 코드(Huffman code)에 대해서 공부해 봅시다:) Huffman code란 무엇일까? 압축(compression)은 자료의 크기를 줄이기 위해서 사용합니다. 이 압축을 하는 방식에 따라서 압축된 파일의 용량이 달라질 수 있는데, 그 중 Huffman code는 문자의 출현 빈도에 따라서 다른 길이를 사용하여 압축하는 그리디 알고리즘(greedy algorithm)입니다. Huffman code는 데이터를 매우 효율적으로 압축합니다. 경우에 따라 20%~90%의 용량을 아낄 수 있습니다. Huffman code는 prefix-free* codes로 표현됩니다. prefix-free코드는 어떠한 문자라도 항상 최적의 데이터 압축을 보장합니다. (*prefix code..
-
NextJs
[NextJs] Component
Client Component 파일 최상단(중간x)에 **‘use client’**라 적으면 그 아래 생성한 컴포넌트는 모두 client 컴포넌트이다. HTML에 Javascript 기능넣기가 가능하다. useState, useEffect 등 사용 가능 Server Component 아무 곳에서 만든 component는 모두 server 컴포넌트가 될 수 있다. HTML에 Javascript 기능넣기가 불가능하다. ex) onClick={} useState, useEffect 등 사용할 수 없음. 그럼 그냥 Client Component가 좋은거 아닌가? 기능적 제한이 server component에 비해 없어서 개발하기는 편하다. Page 로딩 속도 느리다. Javascript가 많이 필요하기 때문이다..
-
C++
백준 4779번 c++ 풀이
문제 칸토어 집합은 0과 1사이의 실수로 이루어진 집합으로, 구간 [0, 1]에서 시작해서 각 구간을 3등분하여 가운데 구간을 반복적으로 제외하는 방식으로 만든다. 전체 집합이 유한이라고 가정하고, 다음과 같은 과정을 통해서 칸토어 집합의 근사를 만들어보자. 1. -가 3N개 있는 문자열에서 시작한다. 2. 문자열을 3등분 한 뒤, 가운데 문자열을 공백으로 바꾼다. 이렇게 하면, 선(문자열) 2개가 남는다. 3. 이제 각 선(문자열)을 3등분 하고, 가운데 문자열을 공백으로 바꾼다. 이 과정은 모든 선의 길이가 1일때 까지 계속 한다. 예를 들어, N=3인 경우, 길이가 27인 문자열로 시작한다. --------------------------- 여기서 가운데 문자열을 공백으로 바꾼다. ---------..
-
C++
백준 24060번 c++ 풀이
문제 오늘도 서준이는 병합 정렬 수업 조교를 하고 있다. 아빠가 수업한 내용을 학생들이 잘 이해했는지 문제를 통해서 확인해보자. N개의 서로 다른 양의 정수가 저장된 배열 A가 있다. 병합 정렬로 배열 A를 오름차순 정렬할 경우 배열 A에 K 번째 저장되는 수를 구해서 우리 서준이를 도와주자. 크기가 N인 배열에 대한 병합 정렬 의사 코드는 다음과 같다. merge_sort(A[p..r]) { # A[p..r]을 오름차순 정렬한다. if (p < r) then { q
-
C++
백준 25501번 c++ 풀이
문제 정휘는 후배들이 재귀 함수를 잘 다루는 재귀의 귀재인지 알아보기 위해 재귀 함수와 관련된 문제를 출제하기로 했다. 팰린드롬이란, 앞에서부터 읽었을 때와 뒤에서부터 읽었을 때가 같은 문자열을 말한다. 팰린드롬의 예시로 AAA, ABBA, ABABA 등이 있고, 팰린드롬이 아닌 문자열의 예시로 ABCA, PALINDROME 등이 있다. 어떤 문자열이 팰린드롬인지 판별하는 문제는 재귀 함수를 이용해 쉽게 해결할 수 있다. 아래 코드의 isPalindrome 함수는 주어진 문자열이 팰린드롬이면 1, 팰린드롬이 아니면 0을 반환하는 함수다. #include #include int recursion(const char *s, int l, int r){ if(l >= r) return 1; else if(s[l..
-
C++
백준 27433번 c++ 풀이
문제 0보다 크거나 같은 정수 N이 주어진다. 이때, N!을 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 정수 N(0 ≤ N ≤ 20)이 주어진다. 출력 첫째 줄에 N!을 출력한다. 풀이 이 문제는 재귀에 대한 기본적인 내용을 담고 있다. 다만 주의할 점은 입력의 범위를 확인하고 int로 표현할 수 있는 수의 범위를 넘어가는 것을 알아야 한다.
-
TIL
What is Database?
Database Organized collection of inter-related data that models some aspect of the real-world. Databases are the core component of most computer applications. Flat File Strawman (strawman은 잘 동작하지 않을 것을 의미함.) Store our database as comma-separated value(CSV) files that we manage ourselves in our application code. Use a separate file per entity. The application must parse the files each time they w..
-
CSS
[CSS] vw, vh란?
☺️ vw와 vh란? CSS 작업을 할 때, 주로 사용하는 단위는 픽셀(px)이다. 하지만, px는 고정 단위이고 이를 대신해 유동 단위인 %를 사용하면 조금 더 유연한 코드를 만들 수 있다. 예를 들어, width: 50%로 지정해두면 항상 부모의 절반 사이즈를 가지니까 이것 역시 좋은 반응형 CSS이다. %말고도 유연한 값을 가지는 단위들 중 vw, vh를 알아보자. v, 뷰포트를 기준으로 하다. 이들의 풀네임은 Viewport Width / Viewport Height 이다. 이름에서 유추할 수 있듯이 뷰포트를 기준으로 한 단위이다. 뷰포트는 ‘보여지는 영역’이라고 했으니, 결국 보여지는 영역에서 얼마만큼 차지할 것인지를 지정하는 단위라 할 수 있다. 1vw = 뷰포트 너비의 1%로 계산된다. 그렇..
-
TIL
[Algorithm] Merge sort & Quick sort
Merge sort Implementation Divide 하나의 배열을 반으로 나눠 2개의 배열로 만든다. Conquer Subarray가 충분히 작아졌다면, 정렬시킨다. Subarray가 충분히 작지 않다면, Recursion Merge 정렬된 subarray를 합쳐서 하나의 배열로 만든다. Pseudo code // 위의 그림과 함께 보면 이해하기 쉽다. public static void mergeSort(int n, keytype[] S) { if(n > 1) { // 1개일 때는 할 것이 없음. const int h = floor(n/2), m = n-h; // 반으로 나눔. keytype[] U = new keytype[1...h]; keytype[] V = new keytype[1...m];..
-
Javascript
Optional Chaining(옵셔널 체이닝)이란?
const name = person && person.name; JavaScript에서 optional chaining은 프로퍼티나 메소드를 참조할 때 발생할 수 있는 에러를 방지하기 위한 문법입니다. 이전에는 다음과 같은 방식으로 프로퍼티를 참조했습니다. const name = person && person.name; 위와 같은 코드는 person이 null이나 undefined일 경우, name 변수는 undefined가 되어 프로그램이 중단될 수 있습니다. 이 문제를 해결하기 위해 optional chaining 연산자(?.)가 등장하였습니다. optional chaining을 사용하면 다음과 같은 코드로 에러를 방지할 수 있습니다. const name = person?.name; 위 코드에서 p..
-
React
[React] useRef란?
useRef란 뭘까요? React는 사용자 인터페이스를 만드는 데 필요한 많은 기능을 제공합니다. 그 중 하나가 useRef입니다. useRef는 React Hook 함수 중 하나로, DOM 노드나 다른 React 요소에 대한 참조를 만들기 위해 사용됩니다. React를 처음 시작하는 사람들은 이 개념이 어려울 수 있지만, 간단한 예제를 통해 이해해 보도록 하겠습니다. 예제를 위해, 다음과 같은 코드를 작성합니다. import React, { useRef } from 'react'; function TextInput() { const inputRef = useRef(null); const handleClick = () => { inputRef.current.focus(); }; return ( Focus..
-
TIL
동기 vs 비동기
동기와 비동기는 프로그래밍에서 중요한 개념 중 하나입니다. 이 둘은 서로 다른 실행 방식을 갖고 있고, 이를 이해하는 것은 프로그래밍에서 매우 중요합니다. 동기적 실행은 각 작업이 순서대로 실행되는 것을 의미합니다. 이것은 일련의 작업 중 하나가 완료될 때까지 다음 작업이 시작되지 않음을 의미합니다. 즉, 코드의 실행이 차단될 수 있습니다. 이는 작업이 오래 걸리거나 중단되는 경우에 문제가 될 수 있습니다. 비동기적 실행은 작업이 순차적으로 실행되지 않는 것을 의미합니다. 대신, 작업은 병렬로 실행됩니다. 비동기 코드는 대개 콜백 함수나 프로미스를 사용하여 처리됩니다. 이러한 방식으로 비동기적 실행은 코드의 차단을 방지할 수 있으므로 응용 프로그램의 반응성을 향상하고, 더 많은 작업을 더 빠르게 처리할 ..
-
React
React Hook Form에 대해 알아보자.
React Hook Form은 간편하고 유연한 방식으로 React 애플리케이션에서 폼을 다룰 수 있는 라이브러리입니다. 이를 사용하면 복잡한 폼 로직을 작성하는데 드는 시간과 노력을 줄일 수 있습니다. 이번 글에서는 React Hook Form의 사용법과 예시를 소개하겠습니다. React Hook Form 사용법 React Hook Form은 useForm이라는 Hook 함수를 제공합니다. 이 Hook 함수를 사용하여 폼을 관리하고, 입력값의 유효성 검사와 전송 처리를 수행할 수 있습니다. 아래는 React Hook Form을 사용하여 간단한 폼을 만드는 예시입니다. import React from 'react'; import { useForm } from 'react-hook-form'; functio..
-
Javascript
콜백 함수란? (Callback function)
콜백 함수(Callback Function)는 함수를 매개변수로 받아들여 다른 함수 내에서 실행되는 함수입니다. 이는 JavaScript에서 비동기 프로그래밍을 가능하게 하는 핵심적인 개념 중 하나입니다. 예를 들어, JavaScript에서 setTimeout() 함수는 일정 시간이 지난 후에 함수를 실행합니다. 이 함수는 첫 번째 매개변수로 실행할 함수를 받고, 두 번째 매개변수로 지연 시간(밀리초)을 받습니다. 이때, 첫 번째 매개변수로 전달하는 함수는 콜백 함수입니다. setTimeout(() => { console.log('Hello, world!'); }, 1000); 위 예제에서는 setTimeout() 함수가 1초(1000밀리초) 후에 실행되고, 첫 번째 매개변수로 전달된 함수가 실행됩니다...
-
React
DOM이란?
DOM이란 무엇일까요? DOM (Document Object Model)은 HTML, XML 및 XHTML 문서를 나타내는 표준 프로그래밍 인터페이스입니다. 이를 사용하여 웹 페이지의 모든 콘텐츠, 구조 및 스타일을 변경하고 조작할 수 있습니다. DOM은 문서를 노드 (node)로 나눕니다. 각 노드는 객체로 표현되며, 문서의 요소, 속성, 텍스트 노드, 주석 등을 포함합니다. 이러한 노드들은 계층 구조로 구성되어 있으며, 부모 노드와 자식 노드 간의 관계를 가집니다. DOM API는 다양한 방법으로 문서의 노드를 선택하고 조작할 수 있습니다. 이를 통해 특정 요소의 콘텐츠를 변경하거나 스타일을 조정할 수 있습니다. DOM API는 또한 이벤트 처리, 애니메이션 및 AJAX와 같은 고급 기술에 사용됩니다..
-
CSS
Flexbox의 모든 것 (display: flex)
Flexbox란? Flexbox는 아이템들을 행 또는 열로 자유자재로 배치시킬 수 있는 정말 정말 유연한 녀석입니다. CSS의 꽃이라고 불리는 Flexbox 녀석을 오늘 자세하게 뜯어보겠습니다. ex) 박스가 커지면 박스 속의 각각의 아이템들이 어떤 식으로 커지면서 박스의 공간을 메워야 하는지 박스가 작아지면 박스 속의 아이템들이 어떻게 작아져서 유연하게 박스 안에서 배치되어야 하는지 위의 두 가지를 자유롭게 정의할 수 있고 너무너무 쉽게 이 모든 것들을 가능하게 해주는 것이 바로 “Flexbox”입니다. flexbox만 잘 이해하셔도 웹사이트의 layout을 아주 쉽게 구성할 수 있습니다. 너무나 쉽고 간단한 flexbox… 저와 같이 오늘 부숴버리도록 해보겠습니다. 예전에는 position, floa..
-
CSS
Layout: display와 position
웹사이트를 만들 때, 가장 중요한 것은 무엇일까요? ⇒ 우리가 이전 시간에 정의했던 박스들을 원하는 위치에 원하는 사이즈로 배치할 수 있는 것이 가장 중요합니다. 이것을 하기 위해서는 CSS에서 가장 기본이 되는 display와 position에 대해서 아는 것이 중요합니다. 이것이 사실 간단해 보여서 쉬워 보일 수 있지만, 현업에서는 박스 위에 박스가 올려져 있는 stacking이 많은 상태에서 display와 position을 잘 이해하지 못하면 금방 무너져 내릴 수 있습니다. (라고 현업에 계신 분이 말함.) display와 position은 끝낸다는 마음으로 정리를 시작해 보겠습니다. display 오늘은 실습을 통해서 진행해 보겠습니다. (같이 실습을 하고 싶다면 jsbin.com에서 하실 수 ..
-
CSS
Selector란? (feat. margin, padding)
Selectors란? html에 어떤 tag들을 고를 것인지에 대한 규정하는 문법입니다. * : 모든 태그에 적용 Tag : 해당 태그만 적용 #id : 해당 id만 적용 .class : 해당 class만 적용 : :태그 옆에 state 작성 가능 [] : 태그 옆에 attribute 작성 가능 다음과 같은 형식으로 작성하면 끝! CSS 문법은 어려운 것이 없습니다 :) /*selector { property: value; }*/ * { color: green; } li { color: pink; } .red { width: 100px; height: 100px; background: yellow; } button:hover { color: red; background: beige; } a[href^="..
-
CSS
CSS란?
CSS란? Cascading Style Sheet의 약자입니다. Style Sheet은 스타일을 잘 정리한 문서 한 장을 의미합니다. Cascading은 작은 폭포, 연속화 등등 연속해서 떨어지는 느낌을 준다고 생각하면 됩니다. Cascading은 세부적으로 정의된 것이 있다면 그것을 사용하고 정의된 것이 없다면 기본으로 정의된 다음 것으로 넘어가는 것을 얘기합니다. 웹 사이트를 스타일링할 때, 총 크게 3가지로 나뉩니다. Author style 우리가 작성하는 style sheet(.css 파일) User style 사용자의 취향에 맞게 스타일링의 변경하는 것(ex. 다크모드) Browser 브라우저 상에서 기본적으로 지정된 스타일 Cascading은 우리가 지정한 스타일(Author style)이 최..
-
TIL
백트래킹(Backtracking)
모든 경우의 수를 전부 고려하는 알고리즘. 백트래킹(backtracking)이란? : 해를 찾는 도중 해가 아니어서 막히면, 되돌아가서 다시 해를 찾아가는 기법을 말합니다. 최적화 문제와 결정 문제를 푸는 방법이 됩니다. 상태공간을 트리로 나타낼 수 있을 때 적합한 방식입니다. 일종의 트리 탐색 알고리즘이라고 봐도 됩니다. 방식에 따라서 * 깊이우선탐색(Depth First Search, DFS) * 너비우선탐색(Breadth First Search, BFS) * 최선 우선 탐색(Best First Search/Heuristic Search) (그냥 뇌없이 짤 수 있다는 것이 장점입니다.) DFS와 Backtracking * DFS(깊이 우선 탐색) : DFS는 가능한 모든 경로(후보)를 탐색합니다. 따..
-
TIL
시간복잡도(Time Complexity)
알고리즘의 시간복잡도 우리는 살면서 어떤 목적지로 이동할 때 대부분 최단거리를 찾아서 이동을 합니다. 프로그래밍에서도 시간복잡도가 가장 낮은 알고리즘을 채택하여 실행시간을 단축하려고 노력합니다. 시간 복잡도는 알고리즘의 수행 시간을 나타내는 측정 방법입니다. 특정 입력 크기에 대한 알고리즘의 수행 시간을 분석하여, 알고리즘의 효율성을 판단하는 데 사용됩니다. 보통 "O(n)" 표기법을 사용하여 표시하며, n은 입력 크기를 나타냅니다. 예를 들어, O(1) - 상수 시간 복잡성: 입력 크기에 관계없이 항상 동일한 시간이 걸리는 알고리즘입니다. (예: 인덱스를 사용하여 배열에서 요소 검색) O(n) - 선형 시간 복잡성: 입력 크기에 따라 실행 시간이 선형으로 증가하는 알고리즘입니다. (예: 배열의 선형 검..
-
TIL
구현(Implementation Algorithm)
구현이란? 구현이란 말 그대로 문제를 파악하고 소스코드로 바꾸는 과정입니다. 사실 어떤 문제를 풀든 생각한 것을 소스코드로 바꾸는 과정은 필수입니다. 그렇기 때문에 구현 문제 유형은 모든 범위 코딩 테스트 유형을 포함하고 있는 개념입니다. [문제] 다음과 같이 문자열을 선언했다고 하고 아래의 문제를 풀어보겠습니다. Q1. 앞에서부터 3개의 문자열을 출력하라. Q2. 해당 문자열을 거꾸로 해서 출력하라. Q3. 해당 문자열 끝에 "Yeom"이란 문자열을 추가하라. 라고 하면 다음과 같이 코드를 구현할 것입니다. [풀이 1] 위의 코드에서는 크게 어려운 점이 없습니다. [풀이 2] 풀이 2와 풀이 1의 차이는 함수의 사용 여부입니다. 범위가 크거나 복잡한 문제였다면 풀이 2의 소스코드처럼 함수를 사용하는 것..
-
TIL
누적합 Prefix Sum
누적합이란 누적합이란 요소들의 누적된 합의 의미로 어떠한 배열을 기반으로 앞에서 부터 요소들의 누적된 합을 저장해 새로이 배열을 만들어서 이를 활용하는 것을 말합니다. 항상 문제를 풀 때는 최대, 최소 범위를 확인하고 생각을 해봅시다. "구간 쿼리" 하면 2가지가 생각나야 합니다. 팬윅트리(동적 배열) pSum(정적 배열) [핵심] 처음과 끝의 합은 변하지 않습니다.(정적 배열이기 때문입니다.) 매번 더할 필요없이 각 구간에 맞게 뺄셈만 해주면 됩니다. [코드 1] 이 코드는 위의 핵심을 완전히 파악하지 못하고 작성한 코드입니다. 처음에 문제를 풀 때, 입력 받는 인덱스를 임의로 tempStart/tempEnd에 저장하고 다음에 입력받는 인덱스와 비교했을 때 경우를 나누어서 진행했습니다. 예를 들어, '..
-
C++
백준 2581번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 두 수를 입력받고 그 두 수 사이에서 소수를 골라서 소수들의 합과 소수들의 최솟값을 구하는 문제이다. 아래의 코드의 메커니즘은 이렇다. 먼저 두 수를 입력받으면 두 수 사이에서 반복문을 시행한다. 이중반복문을 이용하여 i 변수를 j 변수로 나눠서 나머지가 0이라면 cnt값을 증가시켜준다. 이유는 간단하다. 소수는 나누어서 나머지가 0인 수가 자기자신 밖에 없기 때문이다. 1은 기본적으로 소수가 아니기 때문에 제외시켰다. 그래서 j도 2부터 시작하는 것이다. 2부터 시작했기 때문에 cnt가 1일 때, sum 변수에 값들을 더해준다. 그리고 이전에 초기화해놓았던 min 변수와 비교하면서 min보다 더 작은 수라면 min변수를 계속 업데이트 시켜준다. 그렇게 sum이 ..
-
C++
백준 2501번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 제목에서 알 수 있듯이 어떤 특정 수의 약수를 구하는 문제이다. 문제에서 보면 약수의 특성을 알려주는데, 바로 특정한 수를 특정한 수의 약수로 나누면 나머지가 0인 것이다. 그런데, 문제는 단순히 약수가 무엇인지 묻는 것이 아니라 K번째로 작은 수를 출력하도록 원한다. K번째로 작은 수를 출력하기 위해서는 데이터가 정렬되어있거나 약수를 작은 순서대로 저장해놓는 방법이있다. 필자는 두 번째 방법을 이용했다. 그래서 vector을 이용해 반복문 i=1부터 비교해가면서 vector에 값을 저장했다. if(n%i==0)을 보면 이 조건을 만족할 때, vector에 저장하는 것을 알 수 있다. cnt는 출력의 세부 조건에 특정한 수의 약수의 개수가 K보다 작을 때 0을 출..
-
C++
백준 2576번 c++ 문제 풀이
[문제] & [결과] [해결] 이 문제는 벡터를 이용해서 홀수를 만족했을 때, 벡터에 넣어준다. 그리고 홀수가 없을 경우를 대비해, cnt라는 변수를 만들어줘 cnt가 0이면 -1을 출력한다. algorithm 라이브러리에 있는 min함수를 이용해 최솟값을 구한다.
-
C++
백준 10995번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 별 찍에서 층이 홀수일 때와 짝수일 때를 나눠서 해결하면 쉽습니다. 홀수일 때는 앞에 공백이 없고, 짝수일 때는 앞에 공백이 있는 별을 만들어주면 됩니다.
-
자료조사
[자료조사] 메타버스의 다양한 활용
안녕하세요! 오늘은 메타버스의 다양한 활용에 대한 자료조사입니다. 메타버스에 대한 두 번째 자료조사입니다. 1. 세미나, 설명회, 마케팅 넥슨: 바람의 나라를 이용해서 온라인 취업설명회를 함. (게더타운 응용) 하나 은행: 제페토에서 연수원, 인천에 위치한 실제 연수원 구현 조 바이든: 동물의 숲에서 선거캠프 롯데 하이마트: 동물의 숲에서 하이메이드라는 섬 만들어 인기 상품 홍보 Roomkey: VR 컨퍼런스/패널토론 가능 -> 교육,세미나,설명회 등에서 활용 가능 2. 디지털 휴면/버추얼 인플루언서 활용 JYP, YG: 제페토를 이용해서 팬사인회, 콘서트 진행 루시: 실제 모델 모습에 가상의 얼굴 합성한 방식(홍보) 3. 교육 안전사고예방 교육 GS건설: 국내 최초 ‘메타버스 기반 안전교육 시스템’ 구..
-
C++
백준 2747번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 피보나치 수열을 구현하는 문제입니다. 피보나치 수열에 대한 간단한 설명은 위의 문제 설명에 있습니다. 그럼 바로 아래의 코드를 보시면, FIbo라는 함수에 첫 번째, 두 번째 값들은 초기화해주었습니다. 그리고 첫 번째, 두 번째일 때는 각각의 값들을 반환하도록 적어주었습니다. num까지의 수중에서 첫 번째와 두 번째를 제외한 부분은 반복문을 통해서 하나씩 옮겨가면서 처리해줍니다. c언어를 공부하면 자주 연습했던 swap이랑 비슷하지만 n2=n1+n2으로 처리해줬기 때문에 조금 다릅니다. 그렇게 하고 마지막에 n2를 반환해주면 끝! 참고로 Fibo함수에 주석처리되어 있는 부분은 반복문이 아니라 재귀함수로 풀은 것입니다. 재귀함수를 이용하면 코드의 길이는 더 짧아지고..
-
C++
백준 10569번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 문제에서 규칙을 알려주기 떄문에 어렵지 않습니다.
-
C++
백준 9295번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제도 기본적인 덧셈 문제입니다. 아래의 코드를 참고하세요! 그리고 저는 이 문제를 풀다가 Case 부분을 처리해주지 못해서 한 번 틀렸습니다. 어려분은 실수하지마세요!
-
C++
백준 10178번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제에서는 몫과 나머지를 이용한 문제입니다. 크게 어렵지는 않지만, 예제 출력 1을 보시면 알 수 있듯이, 출력하는 문장이 긴 편입니다. 그래서 출력 문장을 작성해주는 데 있어서 틀리지 않는다면 쉽게 풀 수 있는 문제입니다!
-
C++
백준 5522번 c++ 문제 풀이
[문제] & [결과] [해설] 매우 쉬운 덧셈 문제입니다. 너무 쉽기 때문에 자세한 설명은 넘어가도록 하겠습니다. 질문이 있으시다면 댓글에 남겨주세요!
-
C++
백준 2010번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제에도 규칙이 있습니다. 바로 (멀티탭의 개수-1) 를 전체 플러그를 꽂을 수 있는 곳에서 빼주는 값이 바로 저희가 원하는 값입니다. 전체 플러그를 꽂을 수 있는 수 - (멀티탭의 개수 - 1) = 원하는 값 간단히 표현하자면 위와 같습니다. 그래서 크게 어려운 문제는 아닙니다. 코드를 참고하세요!
-
C++
백준 2446번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 딱보고 어떤 생각이 드셨나요? 바로 이전 문제, 2445번이 떠오르셨다면 잘 하고 계신 것입니다. 조금 어려울 수도 있지만, 별 찍기에서 별이 우선인지 공백이 우선인지를 정해주는 '순서'. 그리고 계단을 만들거나 특정 모양을 만드는 '규칙'을 떠올리는 것이 핵심입니다. 규칙은 예제 출력 1을 참고해서 만들면 됩니다.
-
C++
백준 2445번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제도 크게 어렵지 않습니다. 지금까지 저희가 함께 풀어왔던 별 찍기 문제가 있기 때문입니다! 예제 출력 1의 결과를 보시면 가로로 한 줄씩 봤을 때, 별이 먼저 나오고 공백이 나오고 그리고 다시 별이 나오는 것을 확인할 수 있습니다. 그래서 순서는 별 -> 공백 -> 별 이렇게 됩니다. 규칙은 아래의 코드에 있습니다. 여러분들이 직접한 생각해보시는 것이 큰 도움이 될 것 같습니다.
-
C++
백준 9325번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 덧셈을 활용하는 쉬운 문제입니다. 혹시라도 질문이 있으신 분들은 댓글에 남겨주세요!
-
C++
백준 2523번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 바로 이전 게시글에 실린 2522번 문제와 매우 유사합니다. 자세한 설명은 2522번 문제 풀이를 참고하시면 됩니다!
-
C++
백준 2522번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제도 아래의 코드를 보면 알 수 있겠지만 '층'을 나눠서 처리하면 된다. 예제 출력 1을 보면 위에서부터 3'층'을 첫 번째 i 반복문으로 처리했다. 나머지 2'층'은 두 번째 i 반복문으로 처리한 것을 확인할 수 있다.
-
자료조사
[자료조사] 메타버스(Metaverse) 시장 간단하게 보기
1. 인프라: 초연결 네트워크 환경(5G), 몰입적 경험을 지원하는 실감형 디바이스 네트워크, 클라우드: Asure(MS), AWS(Amazon) … 실감형 디바이스: Oculus, Google Glass, Gear, Vive … 2. 플랫폼: 실감형 콘텐츠의 개발, 유통, 서비스를 구현하고 경험하게 해주는 운영 기반 운영, 서비스 기반: Microsoft, Meta, UNITY, NVIDIA … 3. 콘텐츠: VR,MR,XR 등을 통해 즐길 수 있는 문화, 교육, 의료, 산업 분야 등의 실감형 창작물 실감형 창작물: Fortnite, Roblox, Animal Crossing, ZEPETO … 4. ip(지식재산권) 브랜드 가치: YG, SM, GUCCI, NIKE … 현재 성장이 가속화되고 있는 메타..
-
C++
백준 2444번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 2442번의 결과와 2443번의 결과를 합한 것과 유사하게 생겼다. 하지만, 2442번의 결과와 2443번의 결과를 합하면 *********가 두 줄 생기게 된다. 그럼 두 줄이 생기게 되는 것을 해결하기 위해 2442번의 결과와 2443번의 결과 중 하나의 결과에서 한 줄을 없애면 원하는 결과를 얻을 수 있다.
-
C++
백준 2443번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 바로 이전 게시글은 2442번을 다룬 문제와 유사하다. 예제 출력 1의 결과를 보면 2442번의 예제 출력 1의 결과를 뒤집어놓은 것과 같다. 처음에는 아래의 모양을 만들어주면 된다. ********* ******* ***** *** * 그리고 공백을 이용해 계단을 만들어주면 원하는 결과를 얻을 수 있다.
-
C++
백준 2442번 c++ 문제 풀이
[문제] & [결과] [해설] 별 찍기 문제이다. 처음하는 사람들에게는 어려울 수 있지만 이것도 많이 접하다보면 자연스럽게 풀 수 있게 될 것이다. 이 문제를 보면 아래의 별 찍기에서 조금 더 변형된 것이다. * *** ***** ******* ********* 각 층마다 앞부분에 공백을 규칙에 맞게 넣어주면 예제 출력 1과 같은 모양이 나온다. 아래의 코드에서 규칙을 확인해보자.
-
C++
백준 10833번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 두 수들의 기본 연산을 시험하는 문제이다. 아래의 코드에서 temp와 left를 보면 알 수 있듯이, temp은 몫을 저장하는 변수이고 left는 나머지를 구하는 변수이다. 한 학교에 대한 값이 두 개이기 때문에 pair를 이용해서 쉽게 풀 수 있었다.
-
Python
백준 9610번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제에서는 출력하는 부분이 조금 까다로웠다고 생각합니다. 모든 자신을 제외한 모든 약수를 출력해줘야 하기 때문에 중간 리스트를 넣어서 문제를 해결했습니다. join 함수는 ''.join(리스트)의 형식으로 사용되거나 '구분자'.join(리스트)의 형식으로 사용됩니다. join 함수를 사용하면 매개변수로 들어온 리스트들을 하나하나 합쳐 하나의 문자열로 반환합니다.
-
Python
백준 9610번 파이썬 문제 풀이
[문제] & [결과] [해설] 각 사분면에 맞춰 조건만 잘 맞춰주고 해당조건에 맞는 x, y값이 입력되었을 때, 사분면에 맞는 변수를 1씩 증가시켜주면 끝!
-
Python
백준 5717번 파이썬 문제 풀이
[문제] & [결과] [해설] 이번 문제는 이전 문제의 하위호환이기 때문에 자세한 설명은 넘어갔게습니다! 설명이 필요하신 분들은 이전 게시글인 5086번 문제를 참고해주세요!
-
Python
백준 5086번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 일단 문제에서 종료조건을 주어줬기 때문에 무한반복으로 진행합니다. 그리고 특정 조건을 만족하면 종료하는 식으로 코드를 작성해줍니다. 분류를 해주는 것이 두 번째 포인트입니다. 첫 번째 숫자가 클 때와 두 번째 숫자가 클 때를 기준으로 나눠서 진행해주면 끝!
-
Python
백준 10988번 파이썬 문제 풀이
[문제] & [결과] [해설] 이번 문제에서 핵심은 반복문에서 반복범위를 어떻게 설정해줄 것인지 그리고 어떻게 비교하여 문제를 해결할 것인지입니다. 아래의 코드에서 보면 len(w)//2로 작성한 것을 볼 수 있습니다. 이렇게 설정한 이유는 바로 다음 코드에서 확인할 수 있습니다. w[i] == w[len(w)-1-i] 때문에 위와 같이 범위를 설정했습니다. i에 0부터 len(w)//2 길이까지를 위 조건에 넣어보시면 알 수 있습니다. 가끔씩 이렇게 비슷한 문제가 나오기 때문에 문제를 자주 푸시다보면 나중에는 자연스럽게 해결되는 문제였습니다.
-
Python
백준 10886번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 이전 게시글에 올렸던 10102번 문제와 거의 똑같은 문제입니다! 자세한 설명은 10102번 문제에 있으니 참고하시면 됩니다!
-
Python
백준 10102번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제도 앞의 문제들을 풀었다면 크게 어려움없이 풀 수 있을 것입니다! 간략하게 설명해드리자면, 처음에 투표의 개수를 입력받고 varr에는 공백없이 투표들을 입력해줍니다. varr을 처음부터 훑어보면서 A가 나왔을 때는 Acnt을 하나씩 추가해주고 B가 나왔을 때는 Bcnt을 하나씩 추가해줍니다. 그래서 Acnt와 Bcnt의 값을 비교하고 결과를 조건에 맞게 적어서 출력해주면 끝!
-
Python
백준 5063번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 예제 출력으로부터 조건을 파악하고 파악한 조건을 코드에 적어주면 끝이다. 광고를 하지 않았을 때 수익(r)이 광고를 했을 때의 수익(e)과 광고 비용(c)의 합보다 큰 것인지, 작은 것인지, 같은 것인지를 파악하면 된다.
-
Python
백준 7567번 파이썬 문제 풀이
[문제] & [결과] [해설] input().split() 이 아니라 input()으로 작성하였기 때문에 예제 입력처럼 공백으로 구분하는 것이 아니라 단어가 입력되면 구분되는 것이다. 처음에 그릇의 높이가 10이기 때문에 새로운 변수에 10을 초기화해준다. 그리고 조건에 따라 5를 더하든지 10을 더하든지 한다.
-
Python
백준 2754번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 딕셔너리를 이용하여 해결했다.
-
Python
백준 2476번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 지난 2480번 문제에서 조금 더 변형된 문제이다. 기본적으로 2480번과 비슷한 구조로 풀이를 했고 다만, arr이라는 리스트를 만들어서 각 사람들의 상금을 저장하고 arr 중 가장 큰 값을 출력하는 식으로 진행했다.
-
Python
백준 10156번 파이썬 문제 풀이
[문제] & [결과] [해설] 이전 문제 4101번과 유사하게 조건만 잘 설정해준다면 쉬운 문제이다.
-
Python
백준 4101번 파이썬 문제 풀이
[문제] & [결과] [해설] 무한반복문을 이용하여 특정 조건을 만족했을 때 반복문을 탈출하는 방식으로 진행한다.
-
Python
백준 2480번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 3개의 변수들의 관계를 적절하게 이용하여 비교 연산자를 통해 쉽게 풀 수 있는 문제.
-
C++
백준 10984번 c++ 문제 풀이
[문제] & [결과] [해설] fixed를 이용하여 숫자의 소수 부분을 고정시킨다. precision(n)은 소수점 n의 자리수까지 반올림을 해준다. 위 코드에서는 precision(1)이므로 소수점 1의 자리수까지 반올림을 해주면 된다.
-
C++
백준 5635번 c++ 문제 풀이
[문제] & [결과] [해설] 이 문제는 vector와 pair을 이용하면 쉽게 풀 수 있는 문제다. sort 함수를 이용하면 기본적으로 오름차순 정렬이기 때문에 나이가 가장 많은 학생이 가장 낮은 년도와 월의 pair에 해당하여 가장 앞으로 오게 된다.
-
Python
백준 1934번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 백준 2609번 문제에 나왔던 유클리드 호제법을 이용해 최대공약수를 먼저 구해야한다. 최소공배수는 두 수를 곱하고 최대공약수로 나누면 얻을 수 있기 때문이다. 그래서 gcd라는 함수를 만들어 두 정수를 매개변수로 받는다. 이전 게시글 중 2609번을 참고하면 gcd, 최대공약수에 대한 추가 설명이 있다. 그렇게 최대공약수를 반환하고 반환된 값을 곱한 두 수로부터 나누면 최소공배수를 얻을 수 있다.
-
Python
백준 10039번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제를 배열에 요소들을 추가하는 방식으로 풀었지만, 변수에 바로 저장하고 더하는 식으로 해결해도 좋다. [추가] append를 사용할 때, 1차원 배열이라면 arr[i]식으로 사용할 수 없다.
-
Python
백준 1789번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 서로 다른 값들의 합이 가장 많을 때, N의 값이 최대가 된다는 것을 알 수 있다. 그렇다면, 1부터 1씩 키운 값들을 더하면 되는 것이다. 1+2+3+4+5+ ... 이렇게 더한 값들이 N보다 작거나 같으면 된다. 1부터 N까지의 합은 밑에서 볼 수 있듯이 i*(i+1)/2로 작성할 수 있다. 마지막에 while반복문의 조건을 벗어나게 되었을 때 i의 값에서 1을 빼줘야 N보다 작거나 같은 조건을 만족하는 i값이 된다.
-
Python
백준 10817번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제는 파이썬의 리스트에 내장되어 있는 sort() 메소드를 이용하면 아주 쉽게 풀 수 있다. 그리고 문제 특성상 세 개의 정수라고 했기 때문에 중간에 있는 값은 인덱스 1로 구해주면 된다.
-
Python
백준 2935번 파이썬 문제 풀이
[문제] & [결과] [해설] 이번 문제는 딱히 어려운 것이 없어서 해설은 생략하도록 하겠다. 5355번 문제의 하위 문제라고 생각하면 좋을 것 같다.
-
Python
백준 5355번 파이썬 문제 풀이
[문제] & [결과] [해설] 이 문제에서 까다로웠던 부분은 입력받을 때, 자료형 구분이 필요한지, 필요없는지였다. 하지만, 그렇게 하면 더 어려워질 것 같아서 문자열로 입력을 받고 인덱스 0인 부분의 자료형만 소수형으로 변환시켜주면 됐다.
