코딩항해기

터미널로 리엑트 프로젝트를 생성하려고 하니 에러가 발생했다.   보안에 걸려 발생한 오류로, 먼저 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..

C드라이브를 포맷 한 후 git을 재설치 해서 D드라이브에 있는 파일을 git에 업로드하기 위해 init을 진행했는데 브랜치가 추가되지 않는 문제가 발생했다. (기본 브랜치)  원인은 포맷을 진행하며 git이 이전 사용자(포맷 전) 현재 사용자(포맷 후)가 다르다고 판단해 보안상으로 잠궜기 때문이다.  이러한 문제를 해결하기 위해서는 git에게 해당 디렉토리가 안전하고, 수정할 것임을 알려주면된다. 개인 드라이브이고, 다양한 폴더를 사용할 것이기 때문에 D드라이브를 통으로 추가했다. git config --global --add safe.directory D:  신뢰할 수 있는 디렉토리로 추가에 성공하자 브랜치가 정상적으로 뜨는 것을 확인할 수 있다.

OOP 5가지 원칙SOLID 원칙은 객체 지향 설계의 핵심 원칙으로, 소프트웨어의 유지보수성과 확장성을 높이기 위한 지침이다. 단일 책임(SRP), 개방-폐쇄(OCP), 리스코프 치환(LSP), 인터페이스 분리(ISP), 의존성 역전(DIP) 원칙을 통해 더 robust하고 flexible한 코드 구조를 만들 수 있다. SRP (Single Responsibility Principle, 단일 책임 원칙)한 클래스는 하나의 책임만을 가져야하며, 클래스는 단 하나의 변경 이유만을 가져야한다. 각 클래스는 하나의 특정 기능에 집중해야하며, 여러 책임을 동시에 지지 않아야 한다는 원칙이다. OCP (Open/Closed Principle, 개방-폐쇄 원칙)소프트웨어 엔티티(클래스, 모듈, 함수 등)는 확장에는 ..

캐노니컬 태그 Canonical tagSEO 개선을 위한 중요한 기능 중 하나로 한 페이지가 가리키는 여러 개의 주소가 존재할 때, 검색 엔진에게 어떤 주소가 원본인지 알 수 있도록 사용하는 태그이다. 캐노니컬 태그 필요성파라미터(쿼리스트링)를 사용하거나, 모바일 주소와 같이 여러 주소가 나오게되면 검색엔진 로봇은 어떤 주소가 페이지를 가리키는 좋은 주소인지 알지 못한다. (https://test.com/page=1, http://m.test.com/index.jsp 와 같은 경우 외에도 쿼리스트링만 달라지는 경우에도 검색 엔진은 다른 주소로 인식한다.)  이러한 문제를 해결하는 방법으로 크게 두 가지가 있는데, 검색 엔진이 스스로 어떤 URL이 표준(캐노니컬)인지 판단하도록 하는 방법과 페이지에 표기하..

검색 엔진 최적화 SEO SEO - MDN Web Docs 용어 사전: 웹 용어 정의 | MDNSEO(검색 엔진 최적화)는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정입니다. 검색 순위 개선이라고도 합니다.developer.mozilla.org SEO는 웹사이트가 검색 결과에 더 잘 보이도록 최적화하는 과정으로 검색 순위 개선이라고도 한다. 검색 엔진은 웹을 크롤링하면서 찾은 컨텐츠의 색인을 생성한다. 검색 결과로 보이는 것이 색인된 컨텐츠이다. 크롤러는 일정한 규칙을 띠르기 때문에 해당 규칙을 따라가면 웹사이트 검색 결과 최상위에 노출될 가능성이 높아지는 것이다. 검색 엔진에 대한 SEO 가이드라인을 제공하긴하지만 대형 검색 엔진의 경우 순위가 공개되지 않으므로 공식 지침에 경험, 논문과 특..

인덱스 [리뷰/우아한테크] 데이터베이스 INDEX인덱스색인 기능을 수행한다. 색인은 쉽게 찾아볼 수 있도록 일정한 순서에 따라 놓은 목록을 의미한다. 인덱스 없이 저장된 데이터는 기준이 없어 select 할 때 모든 데이터를 비교해야하므로 느minibcake.tistory.com  인덱스 사용 이유DB에서 성능 최적화는 디스크 I/O와 관련된 것이 많다. 조회 성능을 개선한다는 것은 디스크 I/O를 줄이는 것이 핵심이다. 하드디스크의 I/O는 메모리 I/O에 비해 속도가 현저히 느리다.  다만 인덱스는 조회에서는 좋지만 수정, 삭제 등에서는 성능이 저하된다는 단점이 있다. 그러나 일반적인 웹사이트에서 R CUD의 비율은 8:2에서 9:1정도 조회가 많기 때문에 조회에서 성능이 좋아진다면 약간의 저하가 있..