웹 애플리케이션에서 탭(Tab) UI는 다양한 콘텐츠를 한 페이지에서 쉽게 전환할 수 있도록 도와주는 중요한 UI 요소이고 자주 사용하는 만큼, 정리를 해두면 좋을 거 같다는 생각을 했습니다. Tab UI의 구조 탭 UI는 보통 다음과 같은 구조를 가집니다. 이 구조를 구현하기 위해 상태 관리가 필요합니다. 선택된 탭을 State로 관리하고, 해당 값에 따라 콘텐츠를 동적으로 변경하면 됩니다. 기본적인 … Read more
워드프레스는 PHP를 사용하기 때문에 기초 정도는 정리해서 볼 필요가 있다고 생각했습니다. PHP 연습 사이트 연습사이트: https://www.mycompiler.io/ko/new/php 공부사이트: https://codingeverybody.kr/category/php 공부사이트: https://www.tcpschool.com/php/intro PHP(Hypertext Preprocessor)란 PHP는 대표적인 서버사이드 언어이며 현재는 범용 프로그래밍 언어이다. PHP 기본 문법 코드 작성 방법 PHP 코드는 <?php … ?>태그 안에 작성 주석 echo와 print (출력하기) echo는 PHP에서 텍스트, 변수, HTML 태그 등을 출력하는 가장 … Read more
여러 사람들과 작업을 하다보면, 병합을 해야하는 상황이 많이 발생한다. 그때마다 해당 글을 보려고 정리 충돌하는 이유 간단하게 생각해서 여러 사람이 같은 파일을 수정한다고 치자, 병합을 해야 할 것이다. 그런데 깃은 어떤 파일을 유지해야 하는지 결정할 수 없다. 예시 해당 오류는 하나의 브랜치를 여러 사람들이 작업하는 경우 자주 볼 수 있는 오류이다. 원격 저장소(git)의 히스토리와 로컬 … Read more
해당 메시지가 뜨면서 컴파일이 안되는 경우가 있음. 아래와 같은 코드가 있다. 아래 코드는 현재 build를 하면 mode 변수를 사용하지 않아서 컴파일 오류가 발생함 tsconfig.json > noUnusedParameters값 false 설정 // @ts-nocheck 사용하기 사용하지 않는 변수에 _붙이기 void 연산자 사용하기 // @ts-ignore 사용하기 ts-ignore의 경우 사용하지 않는 변수 윗 줄에 사용하면 적용됨
블록 에디터를 사용해서 HTML에 &&입력을 했는데 이스케이프되어 동작하지 않는 오류가 있었다. 예를 들어서, 사용자 정의 HTML 기능에 이런 코드가 있었는데, && 부분이 && 이렇게 HTML 엔티티 코드로 파싱되어 입력되는 문제가 있었다. 따라서 자바스크립트가 동작하지 않는 오류가 있었다. 해결 방법은 아래처럼 입력을 하면 파싱되지 않는건지, 올바르게 동작을 함 참조 https://wordpress.org/support/topic/ampersands-being-escaped-in-html-block
한국식 나이는 태어나자마자 1살로 간주하고 매년 1월 1일 한 살씩 나이를 더하는 방식이다. 만 나이는 생일을 기준으로 계산한 나이로서 출생한 순간 0세부터 시작하며, 생일이지나면 1세가 증가하는 방식이다. 예를 들어(25년 2월 12일 기준): 만 나이 계산기 생년월일 입력: 만 나이: –세
작성하는 이유라고하면, 코드펜에서 React를 사용하려다가 한참 헤맸기 때문 나는 일단 Add Packages 부분에서 React와 ReactDom을 추가 했다. 추가를 하면 아래 코드처럼 되었을텐데 이때 ReactDom의 from부분을 client를 경로를 추가해야 하고, 19버전 이므로, createRoot를 사용해야 한다.
이메일 전송 기능을 구현할 때 처음에는 플러그인을 사용했었다. 하지만 설정 과정이 복잡하고, 이후에도 주기적으로 상태를 점검해야 하는 번거로움이 있었다. 그래서 보다 단순하고 안정적인 방법을 찾다가 구글 SMTP를 활용하는 방식으로 전환했다. SMTP를 설정하면 메일 전송 과정이 보다 원활해지고, 외부 메일 서비스를 사용할 때 발생할 수 있는 오류들도 줄어든다. 특히 한 번 설정해 두면 이후 별다른 관리가 … Read more
블로그에 글을 작성하다 보면 이미지 캡처를 자주 사용하게 된다. 하지만 매번 캡처 이미지가 스크린샷 폴더에 저장되는 게 번거롭다. 이미지 파일을 따로 관리하는 나로서는 캡처한 이미지를 계속 옮기는 일이 비효율적으로 느껴진다. 그래서 작업 시작 시 캡처 저장 경로를 설정해 두는 방법을 정리해 본다. 캡처 도구를 열면 설정을 클릭
프론트엔드 개발을 하다 보면 API를 사용하면서 CORS (Cross-Origin Resource Sharing) 문제가 자주 발생하곤 한다. 개발 환경에서는 Vite의 Proxy 서버를 통해 CORS 문제를 임시로 해결할 수 있다. Proxy를 사용하면 로컬 환경에서 외부 API 요청을 안전하게 포워딩할 수 있어 개발 중에는 편리하다. 그러나 이 과정에서 중요한 불편함이 하나 있다. 개발 환경과 배포 환경의 설정 차이 개발 단계에서는 … Read more