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...
React와 Next.js는 a 태그(anchor)를 만났을 때 내부 링크인 경우에 새로 페이지를 로딩하는 게 아닌, 다른 부분만 DOM을 업데이트 하는 방식을 취해서 로딩 속도를 개선합니다. 그러기 위해서 Link를 사용합니다. html의 <link>와는 전혀 다른 기능입니다. (태그이기 때문에 앞글자 소문자) Component 형태로 지원하기...
M1 애플 실리콘 기반의 디바이스에 React Native 관련된 것들을 설치하고 세팅하는 방법을 안내합니다. 시작하기에 앞서 2022년 5월 11일 기준으로 작성되었습니다. Homebrew 설치 방법은 생략하였습니다. Shell은 zsh 쉘 기준으로 설명하였습니다. (중요) Node.js & npm Node.js와 npm은 React와 마찬가지로 ...
React/Next.js에서 이미지를 불러오는 방법은 2가지가 있습니다. assets/images/index.js 파일을 만들어서 배열로 만들고 불러오기public/에 이미지 파일 넣어서 불러오기 방식 비교하기 전자는 이미지 교체시 교체한 것을 React/Next.js에서 인식해서 파일명을 랜덤으로 가져오고, 후자는 교체한 것을 인식하지 않습니다. (캐시 ...
CSS로 background-image를 사용하거나 img 태그로 이미지를 넣었을 때 이미지가 뭉개지거나 흐릿하게 렌더링되는 현상이 발생할 때가 있습니다. (레티나 디스플레이에서는 발생하지 않습니다) 이 경우 웹킷 벤더를 붙여서 뚜렷하게 처리하는 방법을 쓸 수 있죠. 코드 몇 줄이면 끝! 단 3줄이면 됩니다. (갑자기 박지선님 보고 싶다...) 보너스! S...
이번 포스팅에서는 HoC를 사용하여 Head 컴포넌트를 꾸며볼 겁니다. 모두 준비됐나요~? (준비 됐어요~) HoC? 고차 컴포넌트(HOC, Higher-order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다.-...
힌트: image. png. base64 아래 코드를 이미지로 변환에 성공하신 분들은 댓글 달아 주세요. 맨 하단에 쿠키 이미지 있습니다. iVBORw0KGgoAAAANSUhEUgAAAVAAAACWCAYAAACILtDEAAAAAXNSR0IArs4c6QAAAFBlWElmTU0AKgAAAAgAAgESAAMAAAABAAEAAIdpAAQAAAABAAAAJgAAAA...
이와 관련된 글은 2편에 나누어서 포스팅을 이미 했습니다. (전편, 후편) 그런데 이다래 님이 댓글로 알려주신 방법이 있어서 추가 글을 작성하게 되었습니다. (배꼽감사 배꼽감사) ::before, ::after 사용하기 지원하지 않는 브라우저에서 position: relative 사용하지 않고 ::before, ::after 가상 선택자 사용해서 비율 유지...
특정 인물과 상관 없습니다. (사실 상관있음)
지난 번에는 padding-top의 %를 사용해서 비율 유지하는 방법을 알아보았는데 이번에는 aspect-ratio 사용하는 방법을 알아볼게요. 참고로, 지난 번에 알려드린 방법은 IE 및 모바일, PC 웹 올드 브라우저, 모던 브라우저 모든 브라우저에서 지원하는 방식이니 업무에 참조하세요. 페이스북 React Korea의 김태곤 님 아이디어로 이 글을 포...
이번 포스팅에서는 브라우저 가로폭에 따라서 자식 요소의 박스 비율 유지해서 개발하는 기법에 대해 설명합니다. 이 기법은 대개 유튜브 영상을 반응형으로 넣는다거나, 썸네일 비율을 일정하게 맞춰서 반응형 처리하게 한다던가 할 때 주로 씁니다. padding-top의 %로 지정하는 방법이 있고 aspect-ratio로 몇 대 몇의 비율인지 지정하는 방법이 있는데...
전에 이런 글을 포스팅한 적이 있어요. 네... CNA(Create Nextjs App)이 아닌 CRA(Create React App)일 때 쓸 수 있는, 정확히는 webpack 환경에서 쓸 수 있는 방식이었는데 최근에 CNA 프로젝트를 진행하면서 Autoprefixer 붙일 일이 생겼어요! 환경세팅 일단 autoprefixer 패키지를 설치했습니다. au...
(O씨, 지구, 06월 12일생) 세상에서 글 쓰는 게 제일 어려웠어요...
자유로운 창작이 가능한 기본 포스트
한 컷씩 넘겨보는 카툰 포스트
직접 만든 영상을 올리는 동영상 포스트
소장본, 굿즈 등 실물 상품을 판매하는 스토어
멤버십에 가입하시겠습니까?
설정한 기간의 데이터를 파일로 다운로드합니다. 보고서 파일 생성에는 최대 3분이 소요됩니다.
포인트 자동 충전을 해지합니다. 해지하지 않고도 ‘자동 충전 설정 변경하기' 버튼을 눌러 포인트 자동 충전 설정을 변경할 수 있어요. 설정을 변경하고 편리한 자동 충전을 계속 이용해보세요.
중복으로 선택할 수 있어요.
