염딩코

[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)의 시간복잡도로 풀 수 ..

알고리즘 PS/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)..

TIL/인턴

[TIL] setInterval 함수, Event loop 그리고 타이머 - 1편

Hi there ~ 👋 요즘 열심히 블로그를 쓰고 있어요!! ㅎㅎ블로그에 지난 3개월동안 소홀했었는데, 다시 힘을 내고 있습니다!! (아자아자) 오늘의 주제는 바로 타이머에요!저희 회사에는 레거시가 되기 일보직전의 타이머 코드가 있었어요..🥺 회사의 다른 주니어 프론트엔드 개발자분들은 현재 진행중인 프로젝트가 있어서 수정하기에 바쁘신 것 같았어요!그래서 제가 타이머의 구조와 로직을 개선하게 되었답니다..ㅎ 1. Event loop와 사이드 이펙트첫 번째 문제였어요! // 레거시 코드가 될 타이머 코드..const timeRef = useRef(0);useEffect(() => { if (timeRef.current === 0 && startTime !== 0 && statusOfTime !..

TIL/인턴

[TIL] LCP 최적화 도전하기..!

어느 날, 저는 저희 팀 백엔드 개발자에게 연락을 받았습니다. 백엔드 개발자: "형, 우리 웹 사이트 LCP 부분에서 시간을 너무 많이 소모하는 것 같아. 웹 페이지 처음 로딩할 때, 너무 느려! 확인해줘~"본인: "그..그래!! 고마워..!!" 백엔드 개발자님이 주신 https://www.webpagetest.org/ 를 바탕으로 저희 사이트를 분석해보았습니다.확실 LCP 부분에서 빨간색 경고가 있었어요..ㅠㅠ 이를 개선하고자, LCP에 대해서 마구마구 찾아봤어요..!! LCP란 무엇인가?LCP (Largest Contentful Paint)는 웹 페이지 로딩 속도와 사용자 경험을 측정하는 중요한 지표 중 하나입니다.LCP는 페이지의 가장 큰 콘텐츠 요소가 화면에 표시되는 데 걸리는 시간을 측정..

Front-End

여름방학 인턴 회고

Hi~ 👋염딩코입니다! 저는 올해 4학년을 보내면서 여름방학 때, 운이 좋게 인턴 생활을 하고 있어요!인턴이지만, 서류, 코딩테스트, 면접까지!!쉽지 않은 것 같아요..ㅠㅠ 8시에 출근할 때, 찍은 사진이에요(이쁘죠? 🤗) IT 회사답게 비교적 자유롭게 출근했던 것 같아요.(저는 주로 8시 출근해서 5시에 퇴근을 했어요.) 복장도 자유로웠지만, 눈치가 보여서 조금은 챙겨입었어요ㅎㅎ 저는 프론트엔드 개발자를 지망하고 있어서, 해당 직무로 지원을 했고 관련된 일을 했어요!저의 주요 업무는 중계 스코어보드를 제작하고, 조작할 수 있는 기능을 구현하는 것이었고, AI 관련 토이프로젝트도 진행했었어요! 처음 회사에서 일을 하지만, 저는 잘 할 수 있다는 자신감과 모르면 여쭤보면 된다는 생각을 가지고,주어..

TIL/인턴

[TIL] 나 혼자 보는 Cypress 기본편

Cypress 가 뭐지?!회사에서 새로운 기능을 담당하게 되어서 열심히 개발하는 염딩코씨. 그는 기존에 존재하는 코드들을 조금씩 손을 보기 시작했는데,,,테스트 코드가 존재하지 않기 때문에 두려움에 떨고 있었다.. 미래를 위해 테스트 코드를 "밋팀" 프로젝트에 적용해보기로 하고, 테스트 코드 맛보기를 하고 있었다.Cypress는 E2E Test에 용이했고, UI로 테스트 과정을 직접 확인할 수 있어서 끌렸다. TDD의 중요성을 깨닫고 시작하는 Cypress 스터디 레츠고!! 시작진행하고 있는 프로젝트에 cypress 설치 npm install cypress다시 시작npm run dev 새로운 터미널을 열고 cypress를 실행시킨다.npx cypress open(권한 필요) cypress 창이 열리고,..

Front-End

[TIL] 낙관적 업데이트로 누구보다 빠르게 북마크하기(feat. Tanstack-query)

Hi there ~ 👋 오늘은 밋팀의 북마크 기능을 구현하던 중 발생한 일을 공유할까 해요...!😁 인터넷이 느린 환경이나 API 호출 딜레이가 발생할 경우에 북마크가 적용될 때 딜레이가 발생하는 경우가 있었습니다. (오늘도 어김없이 밋팀을 작업하는 johnyeom씨) 클릭 시 바로 적용이 안 되는 것이 보이시나요??..🧐 사용자 경험(UX)의 측면으로 봤을 때, 정말 좋지 않다고 생각했고 열심히 구글링을 해보았습니다!!🔥🔥🔥 이는 바로 '낙관적 업데이트'라는 개념을 통해서 지연 시간에 대한 불편을 해소할 수 있었습니다! 낙관적 업데이트란 무엇인가?낙관적 업데이트는 사용자의 동작에 대한 응답을 기다리지 않고 미리 UI를 업데이트하는 것입니다.낙관적 업데이트가 적용되기 이전의 북마크는 ..

Front-End/React

[JavaScript] 자식 컴포넌트의 클릭 이벤트 (feat. event.stopPropagation())

Hi there~다들 잘 지내고 계신가요??😃저는 최근에 졸업작품을 마무리하고 프로젝트의 기능들을 하나씩 리팩토링하는 과정에 있습니다 :) 최근에 밋팀 메인페이지에 필터 기능을 구현하던 중 특이한 현상을 마주했습니다..! OMG..!! 제가 원하는 모습은 삭제버튼을 눌러도 드롭다운 창이 닫히지 않는 것이었어요!!하지만,,, 닫혔죠? 구글링을 하던 중 저와 비슷한 상황을 겪으신 분을 발견했어요!!! stopPropagation() 이라는 메서드를 통해서 해결할 수 있었습니다 😁 저의 코드는 현재 아래와 같은 구조를 띄고 있어요.부모 컴포넌트의 wrapper에서 클릭 이벤트가 발생하면 창을 닫고 열도록 구현이 되어있고,이 이벤트는 자식 컴포넌트들에게 전파가 되죠. 자식 컴포넌트 1에서는 아무런 문제..

Front-End/Javascript

[JavaScript] 한글 입력 시 이벤트가 두 번 호출되는 오류

며칠전 사이드 프로젝트의 댓글 기능을 작업하고 있었다.정상적으로 동작하는지 확인하기 위해 테스트를 하던 중 아래의 사진과 같은 에러가 발생했다. "안녕"을 입력하면 "녕"까지 추가로 입력이 되었고, "하이"를 입력하면 "이"까지 추가로 입력되었다.원인을 파악하다가 도저히 왜 이벤트가 두 번 실행되는 것인지 알 수 없었다. 구글링을 해서 찾아낸 결과,영어와 다르게 자음과 모음의 조합으로 한 음절이 만들어지는 한글의 특성 때문에 발생하는 오류였다.onKeyDown / onKeyUp 를 onKeyPress로 변경하면서 오류는 해결할 수 있었다. onKeyDown / onKeyUp키를 누르고 때는 동작 자체에 반응한다.문자, 숫자, Ctrl, Shift, Alt, F1~F12, Scroll Lock, Pa..

Front-End/Javascript

[JavaScript] 함수 객체의 프로퍼티

함수 객체의 프로퍼티 함수 객체의 프로퍼티에는 arguments, caller, length, name, __proto__, prototype 프로퍼티가 존재한다. arguments 프로퍼티 함수 객체의 arguments 프로퍼티 값은 arguments 객체 arguments 객체는 함수 호출 시 전달된 인수들의 정보를 담고 있는 순회 가능한 유사 배열 객체 지역변수처럼 사용(외부 참조 불가) 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다. 다음 예제를 살펴보자. 함수를 정의할 때 선언한 매개변수는 함수 몸체 내부에서 변수와 동일하게 취급한다. 즉, 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화된 이후 인수가 할당된다. 그래서, 선언..

Front-End/Javascript

[JavaScript] 함수는 왜 일급객체(First Class Object)일까?

일급객체 일급객체란 무엇일까? 다음의 조건을 만족하는 객체를 일급객체라 한다. 1. 무명의 리터럴로 생성할 수 있음.(즉, 런타임에 생성이 가능함.) 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있음. 3. 함수의 매개변수에 전달할 수 있음. 4. 함수의 반환값으로 사용할 수 있음. 자바스크립트에서 함수는 위의 조건을 모두 만족한다. 그래서 자바스크립트에서는 함수를 일급객체라고 할 수 있다. 다음 예제를 살펴보자. 함수가 일급객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 일급객체로서 함수가 가지는 가장 큰 특징은 일반 객체와 같이 함수의 매개변수에 전달할 수 있으며, 함수의 반환값으로 사용할 수도 있다는 것이다. 그렇다면 일..

Front-End/Javascript

[React] useEffect 훅의 clean-up 함수

React에서 useEffect 훅은 함수 컴포넌트의 side effect를 수행할 수 있도록 한다. side effect: 흔히 부작용으로 알고 있지만, 프로그래밍에서는 "변화가 발생하는 행위"로 이해하면 된다. useEffect의 effect 함수와 clean-up 함수에 대해서 알아보기 전에 React에서 마운트와 언마운트의 개념을 알고 있어야 한다. 마운트(mount): 마운트는 컴포넌트가 최초로 렌더 될 때 거치는 과정이다. 이후 props와 state가 변경될 때는 마운트 과정을 거치지 않는다. 언마운트(unmount): 언마운트는 컴포넌트가 삭제될 때 거치는 과정이다. useEffect의 기본 구조는 아래와 같다. useEffect를 사용하면 함수 컴포넌트에서 side effect를 수행할 ..

Front-End/React

[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입니다. 부분문자열이 아니기 때문에 한번에 이어져있는 문자열만 가능합..

TIL

[JavaScript] 백준 2565번 문제 풀이

문제 풀이 처음에는 가장 많이 겹치는 순으로 제거하면서 겹치지 않는 선들만 남기려고 헀다. 하지만, 이 접근 방식은 DP와 거리가 있다고 생각을 했고 오히려 Greedy 알고리즘에 가깝다는 생각이 들었다. DP의 가장 중요한 특성 중 하나인 bottom-up을 고려하여 다시 생각을 해보는 시간을 가졌다. ⇒ 결과적으로 겹치지 않는 경우를 카운트 첫 번째 줄부터 마지막 줄까지 순차적으로 보면서 겹치는 경우를 고려하려고 했으나 쉽지 않았다. 처음에 입력을 받을 때, 랜덤한 순서로 받기 때문에 오름차순으로 정렬하여 우선 조금 더 쉽게 판단할 수 있도록 했다. (왼쪽을 기준으로 오름차순 정렬) 오름차순으로 정렬하여 가장 긴 수열(경우)를 찾는 것 = 가장 많이 겹치지 않는 경우

알고리즘 PS/Javascript

[JavaScript] 백준 1520번 문제 풀이

풀이를 생각해낸 과정 이 문제는 예전에 알고리즘 과제와 유사하다는 느낌을 받았다. (그래서 예전 알고리즘 수업 자료도 보면서 다시 공부를 했다.) 목적지에 도달을 하면 경우의 수에 1을 더하는 방식을 생각을 했었고, 그 과정에서 지나온 경로들을 모두 처리해줘야 했었다. 지나온 경로는 상하좌우를 따지면서 내리막길인 경우에 다른 표기를 해야한다고 생각했다. 그렇게 목적지에 도달하면 해당 경우의 수를 1씩 증가시키면서 답을 구하려고 했다. 오렌지 부분에서 고민을 많이 했고, 시간이 너무 지체되어서 참고를 하면서 구현을 했다. 풀이에 대한 설명 세부적인 내용은 주석을 통해서 간단하게 설명을 했고 핵심적인 내용 위주로 설명을 하면 각각의 노드에 왔을 때, 상하좌우를 따지면서 범위를 벗어났다면 continue를 하..

알고리즘 PS/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..

알고리즘 PS/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의 가장 큰 특징 중 하나는 작은 단위로부터 문제를 해결하려는 것입니다. 그래서 작은 단위에서부..

알고리즘 PS/Javascript

[JavaScript] 백준 1463번 문제

이 문제는 DP(Dynamic Programming)를 연습하기 좋은 문제입니다. DP(동적 계획법)에 대한 자세한 설명은 추후에 글을 올리겠습니다. DP에 대해서 간단하게 말씀드리면 DP는 하나의 큰 문제를 여러 개의 작은 문제로 나누어서 그 결과를 저장하여 다시 큰 문제를 해결할 때 사용합니다. DP는 재귀와 매우 유사합니다. 하지만, 가장 큰 차이점은 일반적인 재귀를 단순히 사용 시 동일한 작은 문제들이 여러 번 반복 되어 비효율적인 계산될 수 있다는 점입니다. DP를 사용하기 위한 조건으로는 크게 두 가지가 있습니다. 1. Overlapping Subproblems(겹치는 부분 문제) 동일한 작은 문제들이 반복하여 나타나는 경우 2. Optimal Substructure(최적 부분 구조) 부분 문..

알고리즘 PS/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...

Front-End/Javascript

[JS] Property Attribute

내부 슬롯과 내부 메서드 프로퍼티와 어트리뷰트를 이해하기 위해 먼저 내부 슬롯과 내부 메서드를 알아보자. 더보기 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드다. ECMAScript 사양에 등장하는 이중 대괄호([[ ... ]])로 감싼 이름들이 내부 슬롯과 내부 메서드다. 내부 슬롯과 내부 메서드는 ECMAScript 사양에 정의된 대로 구현되어 자바스크립트 엔진에서 실제로 동작하지만, 개발자가 직접 접근할 수 있도록 외부로 공개된 객체의 프로퍼티는 아니다. 내부 슬롯과 내부 메소드는 직접 접근하거나 호출할 수 없다는 의미이다. (단, 일부 내부 슬롯과 내부 메서드에 한하여 간접적으로 접근할 수 있는 수단을..

Front-End/Javascript

[JS] Event loop

자바스크립트는 싱글 스레드 기반 언어이다. Non-blocking 방식의 비동기적인 동시성 언어이며 콜 스택, 이벤트 루프와 콜백 큐, 그리고 여러가지 다른 API들을 가지고 있다. 자바스크립트 엔진인 V8은 콜 스택과 힙을 가지고 있다. 힙은 메모리가 할당되는 부분 콜 스택은 함수가 호출될 때, execution context가 쌓이는 영역 콜 스택(Call Stack) 그림을 보면, 자바스크립트 엔진인 V8이 가지고 있는 힙과 콜 스택이 있고, 웹 브라우저에서 제공하는 Web API가 DOM, Ajax, setTimeout 등을 제공하는 것을 알 수 있다. 하단에는 event loop와 콜백 큐가 있는 것을 확인할 수 있다. 하나의 스레드 = 하나의 콜 스택 = 한 번의 한 작업 자바스크립트는 Sin..

Front-End/Javascript

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" } ..

Front-End/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..

알고리즘 PS/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 키워드로 선언한 변수..

Front-End/Javascript

[JS]전역 변수의 문제점

전역 변수의 무분별한 사용은 위험하다. 전역 변수를 반드시 사용해야 할 이유를 찾지 못한다면 지역 변수를 사용해야 한다. 목표: 전역 변수의 문제점, 전역 변수 사용 억제 방법 변수의 생명 주기 지역 변수의 생명 주기 변수: 선언(생성) -> 초기화 -> 소멸 = 생명 주기(Life Cycle) 이처럼 변수도 생명 주기가 존재한다. 변수에 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 영원히 메모리 공간을 점유하게 된다. // 변수 x의 생명 주기 시작 function foo() { var x = 'local'; // 변수 x 생성 및 값 할당 console.log(x); // local return x; // 변수 x 소멸 } // 변수 x의 생명 주기 끝 foo(); consol..

Front-End/Javascript

[Javascript] 프로그래머스 Lv.2 카펫

문제 설명 Leo는 카펫을 사러 갔다가 아래 그림과 같이 중앙에는 노란색으로 칠해져 있고 테두리 1줄은 갈색으로 칠해져 있는 격자 모양 카펫을 봤습니다. Leo는 집으로 돌아와서 아까 본 카펫의 노란색과 갈색으로 색칠된 격자의 개수는 기억했지만, 전체 카펫의 크기는 기억하지 못했습니다. Leo가 본 카펫에서 갈색 격자의 수 brown, 노란색 격자의 수 yellow가 매개변수로 주어질 때 카펫의 가로, 세로 크기를 순서대로 배열에 담아 return 하도록 solution 함수를 작성해주세요. 제한사항 갈색 격자의 수 brown은 8 이상 5,000 이하인 자연수입니다. 노란색 격자의 수 yellow는 1 이상 2,000,000 이하인 자연수입니다. 카펫의 가로 길이는 세로 길이와 같거나, 세로 길이보다 ..

알고리즘 PS/Javascript

[JS] 블로킹과 논블로킹 / 동기와 비동기

오늘은 블로킹과 논블로킹 그리고 동기와 비동기에 대해서 배워봅시다! 그리고 이들이 서로 어떻게 연관되어 있는지 알아봅시다! 블로킹과 논블로킹, 동기와 비동기에 대해서 공부하기 전에 먼저 알아야 하는 개념이 있습니다. 제어권 함수의 코드를 실행할 권리. 제어권을 가진 함수는 자신의 코드를 끝까지 실행한 후, 자신을 호출한 함수에게 돌려줍니다. 리턴값을 기다리는 것 A 함수에서 B 함수를 호출했을 때, A 함수가 B 함수의 리턴값을 기다리느냐의 여부를 의미합니다. 콜백 함수 비동기 작업이 끝난 후에 실행되며, 해당 작업의 결과를 전달받아 필요한 처리를 수행하는 함수입니다. 블로킹(Blocking) 블로킹은 특정 작업이 완료될 때까지 다른 작업들이 기다려야 하는 상태를 의미합니다. 블로킹 작업은 해당 작업이 ..

Front-End/Javascript

[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 Ignore parent? another child The parent has .parent {..." data-og-host="stackoverflow.com" data-og-s..

Front-End/CSS

[CSS] div내 요소 중 float:right 이탈 문제 해결

오늘은 trello-clone을 하던 중 발생한 에러에 대해서 알아보려고 합니다! 제가 예전에 작업한 프로젝트인 trello-clone입니다. To do list에서 수정 버튼을 추가해줬고, 문자열이 특정 길이가 되면 수정버튼이 아래로 이탈하는 경우가 있었습니다. 위와 같이 이탈하는 경우였습니다. 해결 방법은 간단했습니다. html을 작성할 때, 오른쪽 영역의 코드와 가운데 영역의 코드의 순서를 바꿔주면 해결이 되었습니다. 참고 https://windcjg.blogspot.com/2022/09/align-center.html

Front-End/CSS

캐시(cache)란 무엇인가?

안녕하세요! 오늘은 컴퓨터 성능 향상에 중요한 역할을 하는 '캐시(cache)'에 대해 알아볼까요? 캐시는 여러분도 자주 들어보셨을 텐데, 여기서는 누구나 쉽게 이해할 수 있는 방식으로 이 설명해 드리겠습니다. 그럼 시작해 볼까요? 1. 캐시란 무엇인가요? 캐시는 '고속 저장 장치'로, 컴퓨터에서 중요한 역할을 하는 주요 컴포넌트 중 하나입니다. CPU와 메모리 사이에서 데이터를 빠르게 전달하기 위해 사용되는데, 한마디로 "가까워서 빠른 임시 저장소"라고 생각하시면 됩니다. 캐시가 없다면 CPU는 느린 주변장치인 메모리에서 원하는 데이터를 찾아야 하기 때문에 성능이 저하됩니다. 2. 캐시의 역할은 무엇인가요? 캐시는 컴퓨터 성능을 향상하고 실행 속도를 높이기 위한 역할을 합니다. 메모리에서 자주 사용..

TIL

Prev 1 2 3 4 5 Next

티스토리툴바