상현

개발 덕후

Next.js tsconfig 절대경로 설정시 Module not found: Can’t resolve ‘fs’

Next.js --typescript를 세팅하고 절대경로를 적용을 하였다. Advanced Features: Absolute Imports and Module Path Aliases | Next.js 절대경로를 설정하고 src/pages/products/[slug].tsx에 getStaticProps와 getStaticPaths가 있는 파일에서 절대경로를 통해서 컴포넌트를 가져와서 사용했다. fs 등등 여러개의 모듈을 찾을 수 없다는 에러메세지가 나온다. 무엇 때문일까? Next.js의 문제가아니었다. 오류에도 나와있는데 twin.macro 라이브러리 때문에 발생하는 문제였다. https://twitter.com/HamatoYogi/status/1428225954531393537 https://github.com/ben-rogerson/twin.macro/discussions/516 현재 Next.js 12버전부터는 컴파일러를 SWC를 … Continued

기준색상에 따른 white/black PHP

Luminosity Contrast Algorithm YIQ Algorithm (덜 정확함) RGB 색상 공간은 YIQ로 변환하기 때문에 가장 간단하고 덜 정확한 방법 php – Given a background color, black or white text? – Stack Overflow

Prettier 설정 파일이 있을시에만 활성화

VS Code를 사용해서 .js .html .css 등등 여러 파일을 작성할 때 코드의 포맷을 자동으로 맞춰주는 플러그인인 Prettier 아주 유용하다. 하지만 어느 때는 내가 설정한 코드 포맷이 맞는가? 헷갈릴 때도 있다. .prettierrc .prettierrc.json .prettierrc.js 등등 Prettier를 설정하는 파일이 있을때만 VS Code의 Prettier 플러그인이 활성화 되게 하고싶다. VS Code의 환경설정(⌘ + ,)에서 Prettier > Require Config 이 … Continued

Carbon 현재 날짜가 두 날짜사이 유무 확인

Carbon 에서 두 날짜 사이의 현재 날짜를 확인하는 방법을 보여 드리겠습니다. 두 날짜 사이의 현재 날짜는 Carbon을 사용하여 확인합니다. 시작날짜와 종료날짜를 비교하여 현재 날짜가 두 날짜 사이라면 true를 반환하고 그렇지 않으면 false를 반환합니다.

VSCode 확장자 별 탭 사이즈 설정하기

코드의 가독성과 일관성 유지를 위해 표준화된 Code Style, Code Rule이 중요하다. 그중에 들여쓰기 규칙(Indentation Rule)을 VSCode에서 파일 확장자 별로 설정하는 방법을 알아보자. Google HTML/CSS Style Guide와 JavaScript Standard Style에 따라 .html .css .js의 경우 하나의 tab 을 2 spaces로 설정하고, 나머지 파일에 대해서는 기본값인 4 spaces로 유지한다. VSCode 편집기 설정 기본 설정 Preferences ➡️ Settings … Continued

PHP로 이미지를 기준으로 텍스트 색상 정하기

웹사이트의 디자인에서 light 테마는 검은색 텍스트를 dark 테마는 흰색 텍스트를 정하고 텍스트 스타일을 정한다. 어느정도 규칙이 정해져있고 해당하는 규칙에 따라 텍스트 색상을 정한다면 코드로 가능하다. 이미지를 가져와 분석해서 어떤 텍스트 색상이다 정해주면 작성자가 하나하나 검토해서 직접 색상을 지정하지 않아도 된다. 참고 image – Formula to determine perceived brightness of RGB color – Stack Overflow

Laravel Sail을 사용하여 Laravel 8.x 프로젝트

Laravel Sail이란? 8.x이전 버전에서는 Laravel을 개발하기 위해서 로컬 컴퓨터에 소프트웨어를 설치해야 했습니다. Laravel 8.x 부터는 Laravel Sail이 함께 제공됩니다. 이 패키지는 docker를 사용하여 Laravel 프로젝트를 실행하기 위한 빌드 솔루션입니다. 새로운 라라벨 프로젝트 생성 이 명령으로 폴더에 새로운 Laravel 애플리케이션을 생성합니다. 이 URL의 example-app은 원하는대로 변경할 수 있습니다. 프로젝트가 생성되면 애플리케이션 폴더로 이동하여 Laravel Sail을 시작할 … Continued

워드프레스 작성자 페이지에 작성한 모든 게시물 표시하기

워드프레스 작성자 템플릿을 사용하여 사용자 게시물을 표시하는 방법중 제가 생각한 제일 최고의 솔루션은 pre_get_posts 필터를 통해 기본 쿼리를 변경하는 것입니다.

2021년 되돌아보기

정말정말 찐 프리랜서로서 2021년 한해를 보냈다. 이것저것 많은 프로젝트를 진행했지… 회사를 나오고, 되돌아 갔고, 다시 취준생으로? 2020년 취준생으로 보내기도 했고, 취직을 하기도 했고 하지만 수습 기간에 회사와 맞지 않는 것 같다고 느꼈다. 예전 피터오세아 실장님께 연락하고 고민을 나누다 다시 연이 이어져 2020년 12월부터 직장인이 아닌 프리랜서로 피터오세아와 같이 일을 시작하게 되었다. 2018년 프리랜서 시절 일하면서 … Continued

워드프레스 루프쿼리 변경하기

워드프레스에는 Archive, Single, home 등등 페이지에서 3가지 루프쿼리가 이루어진다. 그중에 secondary Loops에 WP_Query를 변경하는 행동으로 쿼리의 일부를 바꿀 수 있다. 워드프레스 쿼리에 대해서 더 자세히 알고싶다면 워드프레스 쿼리 기능을 이해하기 | 개발자 상현에 하루하루 살펴보는 것을 추천한다. 쿼리 기능을 읽어봤다면 어떤 방법으로 쿼리를 변경해야할까? Quest: 여러가지의 커스텀 포스트 타입 아카이브 만들기 만약의 insight, life, story라는 … Continued