데빌 스튜디오 : 포스타입 채널

크리에이터 소개

O612

(O씨, 지구, 06월 12일생) 세상에서 글 쓰는 게 제일 어려웠어요...

메시지 쓰기

macOS의 기본 shell은 z-shell(이하 zsh)입니다. 원래 macOS의 기본 shell은 bash(bash shell)인데 macOS 10.15 Catalina부터 zsh로 변경되었습니다. 단, macOS 10.15 이전의 macOS에서 10.15 이상으로 업데이트 진행시에는 기본 shell이 bash 유지됩니다. 처음부터 10.15 이상의 m...

O612

153 2022.06.07

알쓸없코

React/Next.js에서 내부 링크인지, 외부 링크인지 자동으로 감지하기

router & link

React와 Next.js는 a 태그(anchor)를 만났을 때 내부 링크인 경우에 새로 페이지를 로딩하는 게 아닌, 다른 부분만 DOM을 업데이트 하는 방식을 취해서 로딩 속도를 개선합니다. 그러기 위해서 Link를 사용합니다. html의 <link>와는 전혀 다른 기능입니다. (태그이기 때문에 앞글자 소문자) Component 형태로 지원하기...

react gatsby nextjs link router

React/Next.js에서 내부 링크인지, 외부 링크인지 자동으로 감지하기

O612

873 2022.06.03

react-js between ReactNative

M1 Apple Silicon에 React Native 환경 세팅

homebrew, nodejs, npm, watchman, cocoapods, ...

M1 애플 실리콘 기반의 디바이스에 React Native 관련된 것들을 설치하고 세팅하는 방법을 안내합니다. 시작하기에 앞서 2022년 5월 11일 기준으로 작성되었습니다. Homebrew 설치 방법은 생략하였습니다. Shell은 zsh 쉘 기준으로 설명하였습니다. (중요) Node.js & npm Node.js와 npm은 React와 마찬가지로 ...

react native m1

O612

651 2022.05.31

알쓸없코

React 또는 Next.js에서 이미지가 제대로 적용 안되는 현상 해결하기

Math.random()과 함께 춤을

React/Next.js에서 이미지를 불러오는 방법은 2가지가 있습니다. assets/images/index.js 파일을 만들어서 배열로 만들고 불러오기public/에 이미지 파일 넣어서 불러오기 방식 비교하기 전자는 이미지 교체시 교체한 것을 React/Next.js에서 인식해서 파일명을 랜덤으로 가져오고, 후자는 교체한 것을 인식하지 않습니다. (캐시 ...

nextjs react 이미지

React 또는 Next.js에서 이미지가 제대로 적용 안되는 현상 해결하기

O612

1196 2022.05.27

Devil Styled Sheets

이미지가 뭉개지거나 흐릿해요! 도와줘요!

싫어 안돼 돌아가 <

CSS로 background-image를 사용하거나 img 태그로 이미지를 넣었을 때 이미지가 뭉개지거나 흐릿하게 렌더링되는 현상이 발생할 때가 있습니다. (레티나 디스플레이에서는 발생하지 않습니다) 이 경우 웹킷 벤더를 붙여서 뚜렷하게 처리하는 방법을 쓸 수 있죠. 코드 몇 줄이면 끝! 단 3줄이면 됩니다. (갑자기 박지선님 보고 싶다...) 보너스! S...

이미지 레티나 css sass emotion

O612

846 2022.05.20

알쓸없코

Next.js에서 HoC 사용한 Head 꾸미기

그런데 next/head를 곁들인

이번 포스팅에서는 HoC를 사용하여 Head 컴포넌트를 꾸며볼 겁니다. 모두 준비됐나요~? (준비 됐어요~) HoC? 고차 컴포넌트(HOC, Higher-order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.-...

nextjs hoc component head