본문 바로가기

Web Development

 (78)
[algorithm] Big O 표기법 1. Big O 표기법이란?  • 정의: Big O 표기법은 컴퓨터 과학에서 알고리즘의 실행 시간 복잡도 또는 최악의 경우 시나리오를 입력 크기에 따라 설명하는 수학적 표기법입니다. 2. Big O 표기법을 사용하는 이유  1. 알고리즘 효율성 비교: 동일한 문제를 해결하기 위해 여러 알고리즘의 효율성을 비교합니다. 2. 알고리즘 동작 예측: 입력 크기 증가에 따른 알고리즘의 성능 변화를 예측합니다. 3. 코드 최적화 지표: 성능을 최적화하는 데 참고할 수 있는 지표로 사용됩니다. 4. 자원 관리 지표: 메모리 사용, CPU 성능 등을 고려한 자원 관리에 유용합니다. 5. 효율적인 문제 접근법 제시: 효율적인 해결 방법을 찾는 데 도움을 줍니다. 3. 직접 시간을 측정해서 코드 성능 평가의 어려움  • ..
[C] C 언어의 자료형 정의 bit : 컴퓨터가 처리할 수 있는 최소의 데이터 단위, 하나의 bit는 0 또는 1의 값을 가질 수 있다.byte : 하나의 비트만으로는 값을 표현하기가 어렵기 때문에 여러개의 비트를 모아 하나의 값을 표현한다. (8bit = 1byte) 자료형이란? 저장되는 데이터의 종류에 따른 형태.사용하는 이유? 저장되는 값의 종류와 범위에 따라 다르게 표현함으로써, 컴퓨터가 데이터의 형태에 대해 인식할 수 있도록 하기 위해서사용 방법?종류자료형메모리 크기값의 범위상세정수형 변수char8bit (1byte)-128 ~ 128최소 2byte이상인 정수형int32bit (4byte)-2,147,483,648 ~ 2,147,483,647최소 2byte 이상인 정수형unsigned int32bit (4byte)0 ~ 4..
[Web] 서버 컴포넌트 서버 컴포넌트란? 서버에서 렌더링 되는 컴포넌트이다.왜 사용하는가?번들 파일이 작아진다.(TTI 개선 효과) → 번들로 보낸 js파일이 렌더링하던 부분을 서버에서 대신 렌더링 해주기 때문이다.getServerSideProps, getStaticProps 가 필요없어진다. →RSC 내부에서 fetching이 가능하다.자동적으로 코드 스플리팅이 된다. → RSC가 실행될 때, RSC는 보류되기 떄문에 굳이 RCC를 미리 import 할 이유가 없다.Progressive Rendering → RSC의 결과값은 Stream형태로 전달된다. 클라이언트에서 먼저 수신된 부분부터 렌더링 해 줄 수 있다.컴포넌트 단위의 Refetching → SSR의 경우, 서버에서 html을 완성해서 보내주기 때문에, 수정사항이 있..
[Web] Light house를 이용한 페이지 최적화 Light house의 성능 지표 분석 결과First Contentful Paint (FCP): 1.9초 사용자가 처음으로 페이지의 콘텐츠를 볼 수 있는 시간. 50~89 사이이므로 평범Largest Contentful Paint (LCP): 17.6초 Lighthouse, Google의 웹 성능 지표에 따르면, LCP의 적정 시간은 2.5초 이하 : 우수, 2.5 ~ 4 : 개선 필요, 4 ~ : 성능 저조 이다. 2.5초 이하로 LCP를 떨어뜨려야 한다.LCP는 페이지의 주요 콘텐츠가 완전히 렌더링되는 시간이다. 여기서 말하는 주요 콘텐츠는 아래와 같다.- 이미지 요소(태그)- 비디오 포스터 이미지(태그의poster속성)- 백그라운드 이미지(CSSbackground-image속성)- 텍스트 블록 (,..
[algorithm] 하노이탑 문제 하노이탑 문제는 재귀 알고리즘을 설명하는 데 자주 사용된다.하노이탑 문제의 규칙한 번에 하나의 디스크만 옮길 수 있다.각 이동은 디스크를 한 막대에서 다른 막대로 옮겨야 한다.어떤 막대 위에도 더 작은 디스크 위에 더 큰 디스크를 놓을 수 없다재귀적 해결 방법A에서 C로 3개의 원반을 옮겨야 한다고 생각하면, 가장 큰 문제는 A의 3번째 원반을 C로 옮기는 것이다. 이를 위해서는 1, 2번 원반을 B로 옮겨야 한다. 그 이후 A를 C로 옮겼다고 가정하자. 이후 B의 원반들을 C로 옮기기 위한, 생각할 수 있는 가장 큰 문제는 B의 2번째 원반을 C로 옮기는 것이다. 이를 위해서는 B의 첫번째 원반을 A로 옮겨야 한다. 그 이후 B를 C위로 옮긴다고 가정하자. 이 상황에서는 A의 원반을 C로 옮기기만 하면..
[algorithm] 재귀와 재귀함수에 대한 이해 재귀는 어떤 것을 정의할 때, 자기 자신을 참조하는 것을 의미합니다. 프로그래밍에서는 주로 함수가 자기 자신을 호출하는 방식으로 구현됩니다. 이를 재귀함수라고 합니다. 재귀는 문제를 더 작은 하위 문제로 나누어 해결하는 데 유용합니다.콜스택(Call Stack) 이해하기콜스택은 함수 호출이 이루어질 때마다 함수의 정보를 저장하는 메모리 영역입니다. 함수가 호출되면 콜스택에 등록되고, 함수가 종료되면 콜스택에서 제거됩니다. 이 과정을 통해 함수 호출 순서와 현재 실행 중인 함수를 관리합니다.예제: 콜스택 동작function a() { console.log('a'); b();}function b() { console.log('b'); c();}function c() { console.log('c');}a()..
[Web] 페이지에 잔상이 남는 현상 처리 회사 업무 중, 페이지 전환 시 이전 페이지의 잔상을 보이지 않게 해달라는 요청을 받았습니다. 예를 들어, A 세미나 상세 페이지에서 세미나 목록 페이지로 이동한 후 B 세미나 상세 페이지로 이동할 때, B 세미나 상세 페이지에서 A 세미나 상세 페이지의 이미지가 보이는 현상이 발생했습니다.문제 원인 분석세미나 상세 페이지는 전역 변수를 주요 데이터로 사용하는 페이지였습니다. 페이지 이동 시, 이전 페이지의 데이터가 전역 변수에 남아 있어 잠시 동안 이전 페이지의 잔상이 남는 현상이 발생했습니다.초기 시도 및 문제점처음에는 전역 변수 사용을 배제하고, 페이지 내에서 새로운 state를 만들어 문제를 해결하려고 했습니다. 그러나 해당 전역 변수는 세미나 페이지 컴포넌트 외부에서 사용하는 컨트롤바에서도 사용..
[Web] dangerouslySetInnerHTML 사용 시 나타날 수 있는 문제점 dangerouslySetInnerHTML을 사용하여 동적으로 HTML 콘텐츠를 삽입할 때, 예상치 못한 태그 생략이나 삭제 문제가 발생할 수 있습니다. 이는 주로 다음과 같은 이유로 발생합니다:1. HTML 구조의 오류잘못된 HTML 구조로 인해 브라우저가 자동으로 수정하면서 태그가 생략되거나 변경될 수 있습니다. 예를 들어, 닫히지 않은 태그, 잘못된 중첩 등이 있을 경우 브라우저는 이를 자동으로 수정하며, 이 과정에서 의도치 않은 변경이 발생할 수 있습니다.2. 브라우저의 보안 정책일부 태그는 보안상의 이유로 브라우저에서 필터링되거나 제거될 수 있습니다. 특히 태그는 dangerouslySetInnerHTML로 삽입하더라도 대부분의 브라우저에서 실행되지 않거나 제거될 수 있습니다.3. React의..

티스토리툴바