코딩항해기

CSS 방법론CSS 방법론은 CSS를 효율적이고 유지보수하기 쉽게 작성하기 위한 일련의 규칙과 가이드라인이다. 대규모 프로젝트에서 CSS를 체계적으로 관리하기 위해 필수적이다. 필요에 따라 여러 방법론을 혼합해 사용한다. CSS 방법론 종류BEM (Block Element Modifier)가장 널리 사용되는 CSS 방법론으로, 클래스 이름을 통해 요소의 구조를 명확히 표현한다./* Block */.card { }/* Element */.card__title { }.card__image { }/* Modifier */.card--featured { }.card__title--large { }/* 실제 사용 예시 */.header { }.header__navigation { }.header__logo { }..

CSS-in-JSCSS-in-JS는 JavaScript를 사용하여 스타일을 컴포넌트에 직접 작성하는 기술이다. 이는 CSS의 전역 네임스페이스 문제를 해결하고, 컴포넌트 기반 개발에 더 적합한 스타일링 방법을 제공한다. Styled-components가장 널리 사용되는 CSS-in-JS 라이브러리다.import styled from 'styled-components';const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; padding: 0.25em 1em; border:..

CAPTCHACompletely Automated Public Turing test to tell Computers and Humans Apart컴퓨터와 인간을 구분하기 위해 개발된 보안 메커니즘이다. 웹사이트에서 봇(Bot)과 자동화된 스크립트로부터 시스템을 보호한다. CAPTCHA의 진화 과정초기 텍스트 기반 CAPTCHA초기 CAPTCHA는 왜곡되고 읽기 어려운 텍스트 이미지로 구성되었다. 사용자는 이미지에 표시된 문자나 숫자를 입력해야 했다. 하지만 이 방식은 시각장애인에게 접근성 문제가 있었고, 기술 발전에 따라 봇을 거르지 못하게 됐다.이미지 선택형 CAPTCHAGoogle의 reCAPTCHA는 이미지 선택 방식을 도입했다. 예를 들어 "신호등이 있는 이미지를 모두 선택하세요"와 같은 과제를 ..

지난번에 확인을 못한 건지 새롭게 발생한 오류인지 이제 막 공부를 시작해서 잘 가늠이 안되지만 오류가 발생하기 시작했다...해당 문제는 의존 문제라고 하는데 검색해보니 버전 업데이트로 안된다는 이야기가 있었다.  https://www.inflearn.com/community/questions/1457785/react-app-%EC%84%A4%EC%B9%98-%EC%8B%9C-%EB%AC%B8%EC%A0%9C?srsltid=AfmBOoqF3_63S8b7Wd4YMv4AWEzImTNrUGnhpSeSIe97P4C4kC8TYd9o React app 설치 시 문제 - 인프런 | 커뮤니티 질문&답변누구나 함께하는 인프런 커뮤니티. 모르면 묻고, 해답을 찾아보세요.www.inflearn.com  yarn을 사용하는 방..

예전에 신청했던 커밋 캘린더가 왔다. 뭔가 동기부여가 되는 느낌! 한 해 동안 할 일도 추천해줘서 2025년 길잡이가 되어 줄 것 같다. 국비 끝나고도 화이팅 :>

DNS의 개념DNS는 Domain Name System의 약자로, 인터넷의 전화번호부와 같은 역할을 한다. 우리가 웹 브라우저에 www.google.com과 같은 도메인 이름을 입력하면, DNS는 이를 컴퓨터가 이해할 수 있는 IP 주소(예: 172.217.161.36)로 변환해준다. 이는 마치 전화번호부에서 이름을 찾아 전화번호를 알아내는 것과 유사하다.  DNS의 구조DNS는 계층적인 구조를 가지고 있다. 최상위에는 루트 도메인(.)이 있고, 그 아래에 .com, .net, .org와 같은 최상위 도메인(TLD), 그리고 그 아래에 google.com, naver.com과 같은 도메인이 존재한다. DNS 동작 과정웹 브라우저에 도메인 주소를 입력하면 다음과 같은 과정으로 IP 주소를 찾는다.브라우저는..

Tailwind CSSTailwind CSS는 유틸리티 우선(utility-first) 접근 방식의 CSS 프레임워크다. 미리 정의된 클래스들을 조합하여 스타일을 구성하는 방식으로, 보다 빠르고 유연한 웹 개발을 가능하게 한다. 환경 세팅# npm으로 설치npm install -D tailwindcssnpx tailwindcss init# PostCSS 설정module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [],}  핵심개념유틸리티 클래스 제목 제목반응형 디자인 반응형 텍스트 항목 1 항목 2 항목 3상태 변형 버튼 다크 모드 지원 콘텐츠커스텀 설정// tailwind.co..

React.memo()로 불필요한 리렌더링 방지함수형 컴포넌트에서 얕은 비교를 통해 불필요한 렌더링을 막을 수 있다.const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {  // 커스텀 비교 로직 구현 가능  return prevProps.value === nextProps.value;}); useMemo()로 복잡한 계산 최적화비용이 높은 계산을 메모이제이션하여 불필요한 재계산을 방지한다.const memoizedValue = useMemo(() => {  return computeExpensiveValue(a, b);}, [a, b]); useCallback()으로 함수 재생성 방지매 렌더링마다 생성되는 함수를 캐싱하..

React 주요 특징컴포넌트 기반 아키텍처UI를 재사용 가능한 독립적인 컴포넌트로 분해한다. 선언적 문법상태에 따라 UI가 어떻게 보여야 하는지 선언한다. 효율적인 렌더링Virtual DOM을 통한 빠르고 최적화된 업데이트를 제공한다.  컴포넌트의 기본 구조함수형 컴포넌트 (Modern Approach)function Welcome(props) { return 안녕하세요, {props.name}님!;} 클래스형 컴포넌트 (Legacy Approach)class Welcome extends React.Component { render() { return 안녕하세요, {this.props.name}님!; }}  React HooksReact 16.8 버전부터 도입된 Hooks는 함수형 컴포넌트에서..

DOM 소개 - Web API | MDN이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한developer.mozilla.org 문서 객체 모델 DOM (The Document Object Model)DOM은 HTML, xml 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경 할 수 있게 돕는다. 퓁 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 문서 중 ..