코딩항해기

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 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경 할 수 있게 돕는다. 퓁 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. 웹 페이지는 문서 중 ..

import mathdef solution(arr): return math.lcm(*arr) #최소공배수를 알려주는 lcmarr = [2,6,8,14]print(solution(arr)) lcm는 math 모듈에서 제공되는 함수로 인자로 들어온 정수의 최소공배수를 반환한다.파이썬 3.9 이상에서만 사용 가능한 기능이라 프로그래머스에서는 작동하지 않았다. 반대로 최대공약수를 구할 때는 gcd()가 있다. 배열로 사용할 때는 *연산자를 통해 배열의 요소를 풀어 전달할 수 있으므로, *연산자를 적용했다.

터미널로 리엑트 프로젝트를 생성하려고 하니 에러가 발생했다.   보안에 걸려 발생한 오류로, 먼저 vscode를 관리자 권한으로 재실행한다.Set-ExecutionPolicy Unrestricted를 입력한다. (모든 스크립트 실행 허용)확인 메세지가 뜰 경우 Y를 눌러 확인한다. 이후 다시 명령어를 실행하면 정상적으로 프로젝트가 생성되는 것을 확인할 수 있다.

React todo list 시작하기 - Web 개발 학습하기 | MDN여러분이 React로 개념 증명을 만드는, 곧 사용자가 원하는 작업을 추가, 편집, 그리고 삭제할 수 있으며, 작업을 삭제하지 않고 완료로 표시할 수도 있는 앱을 만드는 작업을 맡게 되었다고 가정developer.mozilla.org  예제 코드를 적용해 보며 구조에 대해 파악하고 있는데 아직은 적응이 어렵다...vscode 재활하면서 터미널도 함께 익히고 있는데 터미널에 대한 이해가 더 필요할 것 같다.

CSS 변수CSS 변수는 기존의 정적인 CSS 스타일링에서 벗어나 동적이고 유연한 스타일 관리를 가능하게 한다. 장점은 코드의 재사용성과 유지보수성을 크게 향상시킨다는 점이다. 단순히 값을 반복해서 작성하는 대신, 한 곳에서 정의하고 전체 스타일에 적용할 수 있다. 변수를 선언하는 기본 문법은 대시 두 개(--) 로 시작한다. 예를 들어 --main-color: #3498db; 처럼 정의할 수 있다. 이 변수는 var() 함수를 통해 호출할 수 있고 전역 변수는 주로 :root 선택자에서 정의한다. 이는 문서 전체에서 접근 가능한 변수를 만드는 방법이다. 예시:root { --primary-color: #007bff; --secondary-color: #6c757d; --font-size-base:..

레이아웃 및 포지셔닝 속성display요소의 표시 방식block, inline, inline-block, flex, grid, table, inline-table, noneposition요소 위치 지정static, relative, absolute, fixed, stickytop, right, bottom, left요소 위치 조정10px, 50%, autovisibility요소 표시 여부visible, hidden, collapseopacity요소 투명도0 ~ 1z-index요소 쌓임 순서0, 1, -1, auto박스 모델 속성width, height요소 크기200px, 50%, auto, fit-contentmax-width, min-width, max-height, min-height요소 크기 제한5..

리엑트 ReactReact는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리이다. 컴포넌트 기반 구조로 UI를 효율적으로 업데이트하고, 상태(state) 관리와 가상 DOM을 사용하여 성능을 최적화한다. Facebook에서 개발되었다.  mdn에서 설명하는 리엑트를 진행해볼 예정이다. React 시작하기 - Web 개발 학습하기 | MDN이 문서에서는 React를 소개합니다. 우리는 React에 대한 약간의 배경지식과 사용 예시, 로컬 컴퓨터에 React 툴체인을 설정하는 방법을 배우고 프로세스에서의 React 동작 원리를 배우기 위해서 간단developer.mozilla.org  환경 구성node.js와 visual studio code를 사용할 예정이므로 설치가 필요하다. No..