♀ 6월 12일생 O모씨.일 좀 주세요 사장님들...
- 2023 회고
![featured image thumbnail for post 2023 회고]()
올해는 최고의 해'였'습니다. 과거형. 대전에 있는 회사에서 일했고, 내가 서울러인 것을 감안하여 대표는 리모트근무라는 편의를 봐줬습니다. 회사는 돈을 벌지 못했지만 그것만 빼면 좋은 직장이었습니다. 일단, 같이 일하는 동료들이 좋았고, 근무 조건도 썩 괜찮았기 때문이죠. 회사가 돈이 없는 것을 감안해서 연봉이 높진 않았습니다. 이 부분에 대해서 특별히 불만은 없었습니다. 그런데. 추락 2분기부터 회사 자금이 급격히 내리막으로 추락하고 있었습니다. 리모트근무자라서 내부 사정을 A to Z까지 모두 알 수는 없었지만 느낌은 있었습니다. 애초 입사할 때는 웹퍼블리셔로 입사했지만 회사를 살리기 위해 프로젝트 PM도 하고, 기획부터 UX…
- 일반공격이 전체공격에 2회 공격인 유튜브는 좋아하세요?
![featured image thumbnail for post 일반공격이 전체공격에 2회 공격인 유튜브는 좋아하세요?]()
React와 Next.js에서는 react-youtube를 사용하여 YouTube iFrame API를 사용할 수 있습니다. 이번 포스팅에서는 react-youtube 패키지를 사용하여 유튜브 동영상을 가져오는 방법을 제시합니다. 플레이어 컴포넌트 @/styles/designSystem은 스타일링 컴포넌트입니다. 스타일링에 대한 것은 맨 마지막에 추가로 설명드리겠습니다. isPlayList가 true값을 가진다면 플레이리스트 방식으로 재생되고, false갑을 가지고 있거나, 생략이 된다면 <YouTube videoId={videoId} opts={opts} /> 이 코드가 작동합니다. 이 경우에는 비디오 아이디값과 옵션값만 적용하여 작동됩니다. Props interface에서 videoId…
- 마크다운을 잡으면서 300년, 모르는 사이에 레벨MAX가 되었습니다
![featured image thumbnail for post 마크다운을 잡으면서 300년, 모르는 사이에 레벨MAX가 되었습니다]()
이 포스팅에서는 단순히 텍스트만 들어간 마크다운 파일인 경우에만 처리하는 코드를 알려드립니다. 필요한 패키지 내장된 패키지이므로 별도로 설치하시면 안됩니다. (별도 설치시 에러 뜰 수 있음) next.js getStaticProps 사용 return 내부 최종 코드 사용 예: https://jejeup.dev1stud.io/open-sources Github: https://github.com/naninyang/jejeup/blob/main/pages/open-sources.tsx
- Head를 거치고 말을 내뱉자 (?)
![featured image thumbnail for post Head를 거치고 말을 내뱉자 (?)]()
React/Gatsby와 Next.js는 <head /> 작성법에 다소 차이가 있습니다. 내용 부분은 같지만 컴포넌트가 다릅니다. 이번 포스팅에서는 React/Gatsby 그리고 Next.js에서 <head /> 작성법을 알아봅니다. React/Gatsby React와 Gatsby는 react-helmet을 사용합니다. 패키지를 설치 후, 패키지를 import 합니다. <Helmet />은 return 내부에서 사용합니다. Next.js Next.js에서는 자체적으로 <head />를 처리할 수 있습니다. Next.js 역시 마찬가지로 return 내부에서 Head를 사용합니다. 변수 받아서 처리하는 자세한 방법은 시간 날 때 언젠가 포스팅 해보도록 할께요~
- OMG? OMZ! oh-my-zsh의 세계로
![featured image thumbnail for post OMG? OMZ! oh-my-zsh의 세계로]()
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 이상의 macOS로 설치를 하였을 때에만 zsh가 기본 shell이 됩니다. 이 글에서는 zsh 및 oh-my-zsh 세팅하는 방법을 설명합니다. 그럼 시작해볼까요? 준비물은 macOS입니다. Windows에서는 power shell을 쓰세요... 포기하면 편해... 사용 가능한 shell 확인 및 zsh 설정하기 M1 이상 장비를 사용 중이거나 macOS…
- React/Gatsby/Next.js 환경에서 외부링크와 내부링크 자동으로 인식
![featured image thumbnail for post React/Gatsby/Next.js 환경에서 외부링크와 내부링크 자동으로 인식]()
React와 Next.js는 a 태그(anchor)를 만났을 때 내부 링크인 경우에 새로 페이지를 로딩하는 게 아닌, 다른 부분만 DOM을 업데이트 하는 방식을 취해서 로딩 속도를 개선합니다. 그러기 위해서 Link를 사용합니다. 주의 html의 와는 전혀 다른 기능입니다. React / Gatsby Next.js JavaScript TyepScript 응용 React/Gatsby/Next.js 경로만 다르고 사용하는 방법은 동일 바로 위 코드에서 href 값이 http 또는 https 프로토콜이 사용되면 자동으로 target과 rel이 붙습니다. emotion에서 LinkButton에 스타일링을 하고싶다면 AnchorLink를 감싸는 태그에 스타일링을 지정해서 사용해야 합니다. CSS/SASS…
- 이미지가 뭉개지거나 흐릿해요! 도와줘요!
![featured image thumbnail for post 이미지가 뭉개지거나 흐릿해요! 도와줘요!]()
CSS로 background-image를 사용하거나 img 태그로 이미지를 넣었을 때 이미지가 뭉개지거나 흐릿하게 렌더링되는 현상이 발생할 때가 있습니다. (레티나 디스플레이에서는 발생하지 않습니다) 이 경우 웹킷 벤더를 붙여서 뚜렷하게 처리하는 방법을 쓸 수 있죠. 시작하기 전 안내 사항 이미지는 대개 블럭 형태로 사용합니다. 그래서 display: block을 추가했습니다. 코드 몇 줄이면 끝! image-rendering, transform, backface-visibility를 사용하면 border-radius가 동작하지 않습니다. border-radius 사용할 것을 대비하여 overflow: hidden…
- 아픈 건 싫으니까 HoC에 올인하려고 합니다
![featured image thumbnail for post 아픈 건 싫으니까 HoC에 올인하려고 합니다]()
이번 포스팅에서는 HoC를 사용하여 Head 컴포넌트를 꾸며볼 겁니다. 모두 준비됐나요~? (준비 됐어요~) HoC? 고차 컴포넌트(HOC, Higher-order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. (출처: Reactjs) 주의사항 ref는 전달되지 않습니다. render 또는 return 안에서의 사용은 금지됩니다. (export default에서만 사용 가능) 저거 사탄이네? withHead.js HoC 파일명은 with가 앞에 붙습니다. index.js _app.js, _document.js는 건드실 게 없습니다. 이 외에 pages…
- 쩍벌.txt
![featured image thumbnail for post 쩍벌.txt]()
특정 인물과 상관 없습니다.
- 브라우저 가로폭에 따라서 세로 박스 비율 유지하는 2가지 방법
![featured image thumbnail for post 브라우저 가로폭에 따라서 세로 박스 비율 유지하는 2가지 방법]()
이번 포스팅에서는 브라우저 가로폭에 따라서 자식 요소의 박스 비율 유지해서 개발하는 기법에 대해 설명합니다. 이 기법은 대개 유튜브 영상을 반응형으로 넣는다거나, 썸네일 비율을 일정하게 맞춰서 반응형 처리하게 한다던가 할 때 주로 씁니다. 비율은 1920 by 1080 기준으로 설명합니다. (16/9 비율) relative + padding-top 56.25%는 새로 / 가로 100을 한 값입니다. 즉 위 경우에는 1080 / 1920 100 입니다. aspect-ratio 16 / 9, 1920 / 1080 둘 다 됩니다. 주의사항 relative + padding-top 방식에서 반드시 감싸는 영역의 height는 0을 지정해 줘야 합니다. aspect-ratio 방식은 부모가 flexbox…
