오늘도 개발로그

개발로그 (15)

CSS의 선택자로 자식 선택하기: 첫 번째, 마지막, N번째

들어가며웹 개발에서 CSS 선택자는 HTML 요소에 효율적으로 스타일을 적용하는 데 필수적인 도구이다. 특히 자식 선택자인 :first-child, :last-child, :nth-child()는 목록이나 구조화된 데이터에서 특정 위치의 자식 요소에 스타일을 적용하는 데 매우 유용하다. 이러한 CSS 자식 선택자는 첫 번째 자식 요소, 마지막 자식 요소, 그리고 N번째 자식 요소와 같이 HTML 구조 내에서 특정 요소에 선택적으로 스타일을 적용할 수 있도록 도와준다. 이번 글에서는 이러한 CSS 자식 선택자를 활용하여 첫 번째, 마지막, N번째 자식 요소에 스타일을 적용하는 방법을 자세히 알아본다. 첫 번째 자식 요소 선택하기(:first-child)CSS의 :first-child 선택자는 부모 요소의 ..

더 읽기

HTML에서 form을 원격으로 제출하는 방법

서론웹 개발에서 사용자로부터 입력받은 데이터를 서버로 전송하는 작업은 흔한 일이다. 일반적으로는 HTML의 form 요소를 사용하여 아래와 같이 간단히 구현할 수 있다. 작성이 방식은 직관적이지만, 더 복잡한 요구사항이 생기는 동적인 웹 애플리케이션에서는 제약이 생길 수 있다. 예를 들어, form 내부가 아닌 웹 애플리케이션의 GNB의 영역에도 “작성” 버튼을 추가해야 한다면 어떻게 해결할 수 있을까? 이 글에서는 submit 타입의 버튼이 form 내부에 없어도, HTML의 form을 원격으로 제출하는 방법들을 살펴본다. JavaScript를 이용해 form을 원격으로 제출하기JavaScript는 form과 제출 버튼이 부모-자식 관계가 아닐 때에도 form을 원격으로 제출할 수 있는 방법을..

더 읽기

네이밍 컨벤션(Naming Convention)이란? - 변수의 이름을 짓는 규칙

서론협업을 하면 좋은 변수 이름을 짓기 위해 노력하는 것은 더 이상 선택의 문제가 아니게 된다. 변수 이름은 코드의 가독성, 유지보수성, 그리고 업무의 효율성에 큰 영향을 미치는 중요한 요소이다. 잘못된 변수 이름은 코드를 이해하기 어렵게 만들고, 팀의 생산성을 저하시킬 수 있다. 그래서 개발자들 사이에서는 코딩 시간의 절반 이상을 변수 이름에 짓는데 쓴다는 농담이 있을 정도이다. 이 문제를 해결하기 위한 대표적인 방법들 중 하나가 네이밍 컨벤션(Naming Convention)이다. 변수 이름은 보통 여러 개의 영어 단어들로 이루어지는데, 네이밍 컨벤션은 이 단어들을 어떻게 결합할지에 대한 규칙을 제공한다. 일관성 있는 네이밍 컨벤션을 따르면, 변수 이름만 보고도 그 변수가 어떤 역할을 하는지 쉽게 예..

더 읽기

HSL 색상 모델이란? - RGB보다 직관적인 색상 모델

HSL 색상 모델의 등장 배경빨간색, 초록색, 파란색 빛을 결합해 색상을 만드는 RGB 색상 모델은 컴퓨터 그래픽스와 웹 디자인에서 널리 사용되는 색상 표현 방식이다. RGB 색상 모델은 다양한 색상을 만들 수 있다는 장점이 있지만, 각 색상이 최종 색에 어떤 영향을 미치는지 직관적으로 이해하기 어렵다는 단점이 있다. 예를 들어 R = 255, G = 0, B = 0의 선명한 빨간색에서 채도를 낮춘 빨간색을 만들고자 한다면, R 값을 64 낮추고, G와 B 값을 각각 64씩 올려야 한다. RGB 값을 직접 조정하는 것은 많은 시행착오가 필요로 하며, 직관적이지 않아 상당히 불편하다. 아래 RGB 팔레트를 이용해 원하는 색상을 만드는 것이 얼마나 어려운 일인지 직접 경험해 볼 수 있다. See the Pe..

더 읽기

JavaScript에서 배열의 원소들을 그룹핑하는 방법들

그룹핑의 필요성웹 애플리케이션을 개발하다 보면 데이터를 특정 기준에 따라 그룹화해야 하는 상황이 자주 발생한다. 예를 들어 게시판에서 사용자들이 작성한 글을 카테고리별로 묶어서 보여주거나, 사용자 로그를 시간대별로 분류해서 보여줘야 하는 경우가 있다. 이 글에서는 JavaScript에서 배열의 원소들을 그룹핑하는 다양한 방법들을 소개한다. 방법 1. Lodash의 groupBy 함수 이용하기JavaScript에서 널리 사용되는 라이브러리인 Lodash는 배열의 원소들을 그룹화할 수 있는 groupBy 함수를 제공한다. 이 함수는 데이터를 특정 기준에 따라 손쉽게 그룹핑할 수 있는 직관적인 인터페이스를 제공한다.// 인터페이스_.groupBy(데이터, 함수 혹은 프로퍼티키)// 방법 1)_.groupBy(..

더 읽기

React에서 useState의 인자로 함수 반환값 대신 함수를 넘겨준다면?

React에서 useState의 인자로 함수 반환값을 사용할 때 생길 수 있는 퍼포먼스 이슈React에서 useState 훅을 사용하여 상태를 관리할 때, 대부분은 단순한 primitive 값을 초기값으로 설정한다. 그러나 때로는 복잡한 연산이 필요한 경우도 있다. 예를 들어, 100개의 랜덤 한 Todo 아이템을 초기값으로 설정해야 한다고 가정해 보자. 일반적으로는 다음과 같은 방식으로 이를 해결한다.function createInitialTodoList() { const ret = []; for (let i = 0 ; i 처음 이 코드를 보면 아무런 문제가 없어 보일 수 있다. 초기 렌더링 시, createInitialTodoList 함수가 실행되어 Todo 리스트를 생성하고 이를 useSta..

더 읽기

React에서 비동기 작업을 할 때 Race Condition을 방지하는 효과적인 해결 방법들

Race Condition이란?Race Condition이란 두 개 이상의 비동기 작업이 예상치 못한 순서로 실행되면서 의도하지 않은 결과를 만들어내는 상황을 의미한다. 보통 백엔드에서 멀티스레드 프로그래밍을 할 때 Race Condition을 주로 이야기하지만, React에서도 비동기 API 호출을 여러 번 할 때 이러한 상황이 발생할 수 있다. 그렇다면 구체적으로 어떤 상황에서 Race Condition이 발생하고, 이를 해결하기 위한 효과적인 해결 방법들을 알아보자. React에서 발생할 수 있는 Race ConditionReact에서 흔히 발생할 수 있는 Race Condition의 예로, 유저의 id를 props로 받아 해당 유저의 데이터를 fetch해 보여주는 컴포넌트를 생각해 볼 수 있다. ..

더 읽기

[TypeScript] infer를 이용해 배열의 구성요소 타입 추출하기

배경TypeScript로 개발하다 보면 배열을 구성하는 요소의 타입을 추출해야 할 때가 종종 있다. 예를 들어, 서버에서 아래와 같은 응답 타입을 정의했다고 가정해 보자.interface Response { posts: { userId: number; title: string; text: string; }[];}이 응답을 받아 리스트 아이템을 렌더링 하는 컴포넌트를 만들 때, 해당 컴포넌트의 Prop 타입에는 보통 posts 배열을 구성하는 요소의 타입인 Post를 정의하고 싶을 것이다. 이때 가장 쉽게 생각할 수 있는 방법 중 하나는 아래와 같이 Post 타입을 별도로 분리하는 것이다.interface Post { userId: number; ..

더 읽기

[MobX] "There are multiple, different versions of MobX active" 에러 원인과 해결 방법

MobX 다중 버전 에러MobX를 이용해 개발하다 보면 다음과 같은 에러 메시지를 마주칠 수 있다.1. [MobX] minified error nr: 35.2. There are multiple, different versions of MobX active. Make sure MobX is loaded only once or use `configure({ isolateGlobalState: true })` 1번 에러는 production 환경에서 볼 수 있는 메시지로, MobX 소스코드를 보면 2번과 똑같은 에러라는 것을 알 수 있다. 이 에러는 무엇이고, 어떻게 해결할 수 있는지 알아보자. 에러 발생 원인이 에러는 버전이 서로 다른 버전의 MobX들을 동시에 사용할 때 발생한다. 여기서 이야기하는 버전..

더 읽기

한 번쯤 들어봤을 Reset CSS와 Normalize CSS, 무슨 차이가 있을까?

왜 Reset CSS와 Normalize CSS가 필요한가웹 개발을 하다 보면 HTML에 아무런 스타일을 작성하지 않았는데도 스타일이 적용된 것을 본 적이 있을 것이다. 이는 브라우저가 HTML 태그들에 대해 기본적으로 적용하는 마진, 패딩, 폰트 크기 등이 있기 때문이다. 문제는 각 브라우저마다 기본적으로 적용하는 스타일이 다를 수 있다는 점이다. 이로 인해 동일한 HTML 코드가 브라우저마다 다르게 보일 수 있다. 이를 해결하기 위해 등장한 개념이 바로 Reset CSS와 Normalize CSS이다. 이 두 개념은 모두 스타일의 일관성을 유지하는 것을 목표로 하지만, 이를 달성하기 위한 방식에 차이가 있다. 이제 Reset CSS와 Normalize CSS의 차이점과 각각의 장단점을 살펴보자. Re..

더 읽기

HTML에서 DOCTYPE을 꼭 사용해야 하는 이유

HTML에서 DOCTYPE의 역할과 중요성HTML을 작성할 때 첫 번째 줄에 코드를 꼭 작성해야 한다. 이 코드는 브라우저에게 HTML을 최신 스펙에 맞게 표시해야 한다고 알려준다. 또한 검색엔진들이 문서를 수집할 때 DOCTYPE이 있는 문서에 더 높은 점수를 준다고 비공식적으로 알려져 있다. 올바르게 UI 표시와 더 높은 SEO 점수를 고려할 때, HTML 첫 번째 줄에 을 넣지 않을 이유가 없다. 그런데 우리는 HTML 문서를 작성하는 것이 명확한데도 불구하고 왜 브라우저에게 이 문서가 HTML로 만들어졌다고 알려줘야 하는 것일까? DOCTYPE이 무엇이고, 그리고 왜 등장했는지에 대해 알아보자. DOCTYPE이 등장한 배경HTML과 브라우저가 처음 등장했을 당시에는 브라우저마다 HTML을 해석하..

더 읽기

티스토리에서 MathJax가 동작하지 않을 때 해결방법

티스토리에서 MathJax 스크립트를 삽입했는데도 MathJax가 동작하지 않을 때 사용할 수 있는 방법을 소개하려고 한다. 기존에 사용하던 티스토리 기본 스킨을 hELLO 스킨으로 변경하고 난 다음에 멀쩡히 동작하던 MathJax가 동작하지 않기 시작했다. 구글링을 해도 마땅한 해결 방법을 찾지 못해, 온리 영어로 되어있어 최후의 보루로 남겨놓은 공식 문서를 열었는데 결국 그곳에서 힌트를 발견할 수 있었다. 방법 1. Lazy typesetting"Lazy typesetting"은 페이지에 있는 수식들이 실제로 브라우저 뷰포트에 진입할 때까지 그 렌더링을 지연시키는 설정인데, 보는 순간 이거 된다라는 생각이 들었다. 자세한 내용은 공식 문서에서 읽을 수 있다. 방법 2. MathJax 강제로 한 번 더..

더 읽기

Copyright © 오늘도 개발로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바