회고

기본적인 JS의 자료구조에 Big-O를 적용해 성능을 평가해본다. 내부에서 어떻게 작동하는 지는 자세히 다루지 않는다. 여기에서 중요한 것은, 배열과 객체를 사용한 코드에서 작업할 때, 얼마나 시간이 걸리는 지 파악하는 것이다.즉 Big-O의 시간복잡도를 적용한 성능을 알아보자.객체의 성능 평가// 예시 객체let student = { name: "yujin", favoriteAnimal: "fish", favoriteNumbers: [4,4,4]}삽입 - O(1)제거 - O(1)탐색 - O(N)접근 - O(1)객체는 정렬되어 있지 않다. 따라서 값을 삽입하거나, 제거하고 접근할 때는 키나 값을 지정하는 상수값만이 필요하다.그러나 탐색의 경우에는 어떨까?탐색이란 무엇일까? 탐색이란. 어떤 특정한 정..

PHP는 웹 개발에 특화된 서버-사이드 스크립트 언어이다. 보안 취약점이 많고, 대규모 웹 사이트 개발에는 적합하지 않다는 단점이 있지만 현재 한국의 많은 웹 사이트는 PHP로 구성되어 있다. 또한 쇼핑몰 웹 페이지 제작 지원 사이트(cafe24)에서 PHP를 지원하기 때문에, 영세 쇼핑몰 사이트나 개인 홈페이지의 PHP코드를 마주칠 확률이 높아진다. 나 또한 친구회사의 쇼핑몰 사이트 코드가 작동하지 않아서 도움을 요청 받은 적이 있고, 이번에도 PHP 홈페이지 제작을 요청 받아서 한 번 필요한 부분을 공부해 보았다. PHP 개념 PHP는 대표적인 서버-사이드 스크립트 언어 중 하나이다. 웹 서버에 PHP가 설치되어 있다면, PHP 스크립트는 웹 서버에서 해석되고 실행된다. 이때, PHP 스크립트는 HT..

Big-O 표기법은, '좋은', '그저 그런', '엉망인' 등의 주관적인 표현법 대신, 숫자로 코드의 성능을 표기할 수 있다.때로는 코드가 작동하기만 하면 충분하다고 생각할 수 있지만, 우리가 정량화된 측정도구인 Big-O 표기법을 사용하는 이유는 무엇일까?Big-O 표기법의 필요성수천개의 데이터가 있는 큰 데이터셋을 다룰 때, 한 알고리즘이 다른 알고리즘보다 실행하는데 한시간이 더 빠르다면 성능을 중요시 해야한다.해결책이 만족스럽다고 해도, 다른 해결책과 비교하고 성능이 어떤지 이해하는 것은 성장에 도움이 된다.여러 접근법의 장단점을 얘기할 때도 유용하다. 어떤 해결책은 많은 데이터량을 잘 다룰 수 있고, 다른 하나는 더 오랜 시간이 걸리지만, 데이터값이 달라질 때 변동량이 적을 수 있다.디버깅을 할 ..

Next.js에서 앱 라우터를 사용할 때, 요청(Request) 및 응답(Response) API를 사용하여 특정 라우트(Route)*에 대한 커스텀 요청 핸들러(request handler)를 작성할 수 있다. 이를 라우트 핸들러(Route handlers) 라고 부른다. * API(Application Programming Interface): 애플리케이션 프로그래밍 인터페이스를 뜻하며, 소프트웨어 간에 데이터를 교환할 수 있도록 하는 규칙이나 프로토콜  * 라우트(Route) : 웹 애플리케이션에서 특정 URL 경로. 이 글에서는 주로 통신할 서버 URL(슈퍼베이스 등)라우트 핸들러 사용 규칙 1. 앱(app) 폴더 안에서만 라우트 핸들러가 작동되며 라우트(route) 파일로 정의할 수 있다.  2..

컴포넌트 간 State 공유하기 : 끌어올리기지난 시간, 상위 컴포넌트에서 아래의 컴포넌트의 상태를 관리하기 위한 전략인 끌어올리기에 대해 간략히 설명했다. 이번에는 예시를 통해 상태를 끌어올리는 과정을 확인해보자.Accordion이 두 개의 Panel을 렌더링하는 예시AccordionPanelPanel각 Panel 컴포넌트는 콘텐츠 표시 여부를 결정하는 Boolean형 isActive 상태를 각각 가지고 있다.import { useState } from 'react';function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? (..

상태컴포넌트는 컴포넌트 안에서만 접근 가능한 로컬 데이터인 "상태(state)"를 가질 수 있다. 이 데이터를 다른 컴포넌트와 공유하려면 React의 단방향 데이터 흐름에 따라 두 컴포넌트 보다 상위 위치에 자리 잡은 컴포넌트로부터 속성(props)으로 전달받아야 한다. 상태 관리 전략 : 끌어올리기React 컴포넌트 로컬 데이터인 상태를 관리하는데 사용되는 가장 주요한 전략 중 하나는 상태를 끌어 올리거나 끌어 내리는 것이다. 우선은 끌어올리기에 대해 알아보자.  상태 끌어 올리기(↑) 전략 A와 C는 상태를 관리 중이고, A는 B컴포넌트와 연관된 상태 관리 중. 만약 B가 C에서 관리 중인 State에 접근할 수 있어야 하고, C의 상태가 변경될 때마다 B에서도 변경된 값을 표시해야한다면, 현재 상황..