티스토리

zineeworld

검색하기

블로그 홈

zineeworld

zinee-world.tistory.com/m

10년째 마크업 개발을 하고 있습니다.

구독자: 27

방명록 방문하기

주요 글 목록

기술 블로그 10주년 정든 나의 블로그 벌써 10년이 되었습니다. (2014~2024)최근에는 너무 방치한 것 같아서 양심에 찔렸는데,스킨 업데이트 하고 나니 자잘한 버그들이 해결되어서 블로그 들어올 맛이 생겼네요! 카테고리도 연도별로 정리해봤어요.2014년부터 10년동안 포스팅한 글 개수만 봐도 마크업 개발에 진심이었던 때가 확연하게 보이네요 ㅎㅎGPT 덕에 블로그보다는 프롬프트를 더 자주 들여다보게 되었지만 예전엔 이런 걸 궁금해 했구나 하고 돌아보게 되네요. 예전에는 모르는 게 너무 많았고, 찾아가는 과정이 쉽지 않았는데요즘은 쉽게 많은 것들을 알 수 있는 세상이 되었네요. 2034년의 저는 뭘하고 있을까요...?여러분은 안녕하신가요? 공감수 2 댓글수 2 2024. 11. 15.
[Canvas] Vue로 복권 긁기 기능 구현 (LottoScratch) 공감수 0 댓글수 0 2024. 10. 24.
[인터랙션개발] CSSWinner에서 발견한 재밌는 효과들 https://13322566869.com/ Digital Producer - Specialised in DesignNavigating your digital transformation through bespoke creative solutions, providing a personal touch.13322566869.com #1- 스크롤 타이밍 맞춰서 배경 캔버스가 좌->우로 채우짐- 글자색이 배경색과 반전됨 #2스크롤 타이밍 맞춰서 라벨 하나씩 fadeIn 됨 #3조각난 이미지들이 스크롤 타이밍에 맞춰 원상태로 맞춰짐 조각난 이미지 8장을 비틀어놨다가 맞춰놓는 개념임 (너무 궁금해서 찾아냄) 그런데 이렇게 이미지를 개별적으로 다 만들지 않고, `background-clip`을 이용한다던가.. 공감수 0 댓글수 0 2024. 6. 28.
[Fonts] 독특한 무료 한글 폰트, HS산토끼체 2.0 이번주 노마드코더 웹진을 읽다가 발견한 사이트에서 폰트가 너무 눈에 들어오길래 찾아봤다. 약간 히라가나 같기도 한 모양이 특이하고 게다가 절대 무료폰트로 풀릴 만한 퀄리티가 아니어서 너무 탐이 났다. HS산토끼체 2.0 | 산돌구름무료폰트 사용 산돌구름 PC가 설치되어 있는지 확인해주세요. 산돌구름이 실행중인 상태에서 폰트를 사용할 수 있습니다. 확인 취소www.sandollcloud.com:443 HS산토끼체 2.0 해당 폰트의 지적 재산권은 토끼네활자공장에 있습니다. 사용 가능 라이선스를 확인하지 않아서 발생하는 손해에 관한 책임은 사용자에게 있습니다.[무료 한글폰트] HS산토끼체 2.0(2024) : 네이버 블로그 (naver.com) [무료 한글폰트] HS산토끼체 2.0(2024)HS산토끼체 .. 공감수 0 댓글수 0 2024. 6. 28.
[인프런] Vue 3 시작하기 / Vue.js 중급 강좌 수료 공감수 0 댓글수 0 2024. 6. 24.
기술 블로그가 필요 없는 세상 10여년 전에 처음 일을 시작했을 땐, 모르는 것도 너무 많고 새로 알게 되는 것들도 많아서 블로그 하는게 즐거웠다. 처음에는 나를 위해 아카이빙 하는 용도였는데 하다보니 나랑 비슷한 어려움을 겪는 사람들이 원하는 정보를 얻어가는 창구가 되기도 했었다. 그런데 세월이 지나서 지금은 개발을 하다가 문제에 부딪히면 구글에 검색해서 기술블로그나 공식문서를 먼저 보기보다는 챗GPT에 제일 먼저 검색을 하게 된다. 구글 검색창은 내가 원하는 결과값을 정확히 보여주지 못하고, 페이지를 눌러 일일이 이 정보가 내가 원하는 정보인지 아닌지를 판독해야한다. 반면, 그 공수에 비해 챗GPT 프롬프트에 입력한 요청이 훨씬 더 정확한 답변을 내어준다. 양질의 기술 블로그는 여전히 각광받겠지만 단순히 나처럼 문제상황고 해결법만.. 공감수 0 댓글수 0 2024. 6. 21.
[Error] Warning: Received `true` for a non-boolean attribute `className`. Warning: Received `true` for a non-boolean attribute `className`. If you want to write it to the DOM, pass a string instead: className="true" or className={value.toString()}. 리액트에서 이런 에러가 콘솔에 찍히고 있었다.검색해보면 스타일드 컴포넌트를 사용할 때 뜨는 에러라고만 나오는데내 경우에는 간단하게 그냥 클래스네임을 attribute값만 적어놔서 생기는 오류였다. className을 지워주고 나니 에러가 사라졌다! 공감수 0 댓글수 0 2024. 6. 21.
2024-06-19 #오늘의영감 <Glean, 회사 내부 정보를 쉽게 검색할 수 있는 AI 서비스> https://eopla.net/magazines/17636 창업 5년 만에 연매출 500억 찍은 AI 서비스#MVP검증 #프로덕트 #마인드셋 창업 5년 만에 연매출 500억을 찍고 있는 AI 스타트업이 있습니다. 투자 잘 받은 AI 회사는 정말 많아요. 하지만 수백억씩 돈을 벌고 있는 회사는 적고요. Glean은 2조가eopla.net Q. 어떤 서비스인가요? 회사 내부 정보를 쉽게 검색할 수 있도록 도와주는 소프트웨어에요. 지난 10년 동안 SaaS 서비스들이 쏟아져 나왔어요. 슬랙, 노션, 지라, 구글 드라이브 같은 서비스들 말이죠. 팀원들이 많아지면서 누가 어떤 정보를 어디에 적어 놓았는지 파악하는 게 어려워지는 문제가 생겼고요. Glean은 수많은 SaaS 서비스들의 데이터를 통합해서 회사 내부.. 공감수 0 댓글수 0 2024. 6. 21.
keyup 이벤트와 input 이벤트의 차이 keyup 이벤트와 input 이벤트는 HTML 폼 요소(특히 및 요소)와 상호작용할 때 발생하는 두 가지 주요 이벤트로, 각기 다른 시점과 용도를 가지고 있습니다. 이들 이벤트의 차이점을 이해하는 것은 사용자 입력을 다룰 때 중요합니다. keyup 이벤트발생 시점: 사용자가 키보드 키를 눌렀다가 뗄 때 발생대상: 주로 , , 및 기타 키보드 이벤트를 수신할 수 있는 요소포함 정보: 어떤 키가 눌렸는지에 대한 정보 (event.key, event.code 등)사용 사례: 특정 키 입력을 감지하거나 키보드 단축키를 처리할 때 유용 input 이벤트발생 시점: 사용자가 입력 필드의 내용을 변경할 때마다 발생이는 키보드 입력, 마우스 붙여넣기, 드래그 앤 드롭 등 모든 입력 방식에 대해 작동대상: 주로 ,.. 공감수 0 댓글수 0 2024. 5. 29.
2024-02-23 #오늘의영감 <티빙 CEO, 최주희 님> 기업 고민 해결사, 국내 OTT 최초 여성 CEO가 되다 (rememberapp.co.kr) 기업 고민 해결사, 국내 OTT 최초 여성 CEO가 되다 코로나 불경기에도 연이은 기업 성장을 만들어낸 하버드 출신 '기업 고민 해결사'가 있습니다. 혹독하기로 소문난 글로벌 컨설팅 펌에서 7년간 굵직한 기업 프로젝트들을 해결하며 베테랑 컨설 now.rememberapp.co.kr ‘한국 OTT 업계 최초의 여성 CEO’ ‘1982년생 신진 기업 리더’란 타이틀로 조명받고 있죠. 순탄치 않은 여정이었고 이후로도 도전이 만만치 않을 듯합니다. 티를 잘 내는 스타일은 아니었지만 사실 많이 힘들었죠. 지금도 마찬가집니다. 아직 부임 1년도 안 된 CEO라 그런지 성장통을 겪는 중이죠. ‘잘해낼 수 있을까’ ‘역량이 될.. 공감수 0 댓글수 0 2024. 2. 23.
2024-02-21 #오늘의영감 <다음, 7년만의 개편 예고> 7년 만에 확 바뀌는 다음 PC 화면…"실시간 이슈 한눈에" (msn.com) 7년 만에 확 바뀌는 다음 PC 화면…"실시간 이슈 한눈에" '이 시각 이슈' 박스 등 신설…'날씨'·'오늘의 숏' 우측에 추가 (서울=연합뉴스) 최현석 기자 = 카카오[035720]가 포털사이트 다음의 PC용 화면을 7년 만에 전면 개편한다. 21일 ICT업계에 따르면 카카 www.msn.com 공감수 0 댓글수 0 2024. 2. 21.
[Git] 실수로 삭제한 브랜치 복구하기 (reflog) 금융권에서 일하다보니까 인터넷망에서 작업하고, 망간 전송을 시켜서 시스템망(내부폐쇄망)에 완성된 코드를 올린다. 이렇게 작업하다보면 양쪽 레포에 동일하게 관리를 해야하는데 일이 많다보니 정신이 없어서 시스템망에는 잘 올렸는데, 인터넷망의 로컬 브랜치를 리모트 푸시를 안하고 그냥 다 지워버렸다. 순간 멘붕이 와서 멍 때리고 있다가, git 에는 분명 복구방법이 있을 것 같아서 찾아봤다. git refloggit reflog 이렇게 지난 로그가 나온다. // branch 복구git checkout -b 삭제된 브랜치 이름 HRAD@{INDEX}// commit 복구git reset --hard COMMIT-ID 참고https://7942yongdae.tistory.com/161 Git - 삭제한 b.. 공감수 0 댓글수 0 2024. 2. 15.
키워드로 되돌아보는 2023년 #코로나종식올해의 사회적 키워드는 아무래도 '코로나 종식'이 될 것 같다. 2020년 2월부터 시작된 코로나가 2023년에는 종식이라고 부를 수 있을 만큼 완화되었다. 이 재난이 언제 끝날 수 있을까 암담하던 시절이 있었지만 코로나가 믿기지 않게 전 세계를 덮쳤듯이, 믿기지 않게 우리는 또 이 재난을 헤쳐나가 일상을 회복하고 있었다. 웨딩홀 계약을 하던 2022년 9월에는 2023년 7월에는 하객들이 마스크에서 자유로워지겠지? 란 기대를 했었는데 예상대로 되어서 다행이었다. 코로나 3년이 나에게 남긴 것들은 기나긴 재택근무로 인한 사회성 감소....? #결혼올해의 개인적 키워드는 '결혼'이다. 2023년 7월에 결혼을 했다. 결혼 준비 할 때는 너무너무 힘들고, 이걸 누구 좋으라고 하는 결혼식일까 그런.. 공감수 0 댓글수 0 2023. 12. 31.
[Error] input type="number" maxlength is not working maxlength 속성은 주로 텍스트 및 비밀번호와 같은 입력 유형에 사용되어 입력 필드에서 허용되는 최대 문자 수를 지정하는 데 사용됩니다. 그러나 "number" 입력 유형에 대해 maxlength 속성은 지원되지 않습니다. 숫자 입력 필드의 경우 max 속성을 사용하여 허용되는 최대 값을 지정할 수 있습니다. 다음은 예제입니다. 이 예제에서 입력 필드는 100까지의 숫자 값만 허용합니다. 숫자 자체의 값이 아닌 자릿수를 제한하려면 maxlength와 같은 직접적인 속성이 없으므로 JavaScript를 사용하여 이러한 제약을 강제할 수 있습니다. 다음은 숫자 입력의 자릿수를 제한하기 위한 JavaScript를 사용한 간단한 예제입니다. 이 예에서 limitDigits 함수는 사용자가 숫자 입력에 값을.. 공감수 0 댓글수 0 2023. 12. 4.
[Warning] Type '{'--box-gap: string;}' has no properties in common with type 'Properties<string | number, string & {}>'. 리액트 컴포넌트에서 받은 숫자값을 CSS 변수로 지정하고 싶은데, style={{'--box-gap': `${gap}`px} 이렇게 넣으니, Warning이 떴다. 해결책은 as React.CSSProperties를 넣어주면 된다. style={{'--box-gap': `${gap}`px} as React.CSSProperties} 공감수 0 댓글수 0 2023. 11. 30.
[Error] React Hook "useState" is called conditionally. Error React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render. Did you accidentally call a React Hook after an early return? ✅ function component은 본문의 최상위 수준에서 호출하세요 . ✅ custom Hook은 본문의 최상위 수준에서 호출하세요 . ❌ 조건이나 루프 내에서 Hook을 호출하지 마세요. ❌ 조건문 다음에 Hooks를 호출하지 마세요 return. ❌ 이벤트 핸들러에서 Hooks를 호출하지 마세요. ❌ 클래스 구성 요소에서 Hooks를 호출하지 마세요. ❌ .. 공감수 0 댓글수 0 2023. 11. 29.
[Storybook] React18+Webpack5+Storybook7 alias 설정 Error Module not found: Error: Can't resolve '@utils/~~~' in '~~~~~~~~~' 리액트 프로젝트에서 이미 path alias를 사용할 수 있도록 설정이 되어있었다. 그런데 스토리북에서는 모듈을 찾을 수 없다고 나오는게 아닌가? ㅠㅠ 찾아보니 스토리북은 별도의 빌드환경을 사용하기 때문에 webpack 설정을 따로 해주는 것이 필요한 것으로 보인다. 웹팩 설정해주면 된다는 건 알겠는데 뭔가 찾아보는 코드마다 조금씩 달라서 계속 안되서 하루종일 삽질...ing 뭔가 될듯 말듯 하는게 더 짱나........... tsconfig.json { "compilerOptions": { { ..... }, // 당신의 기존 설정값들... "include": ["src"].. 공감수 0 댓글수 0 2023. 11. 24.
[Error] input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. History 뷰에서 리액트 컴포넌트로 옮기는 중이라 타입스크립트 에러부터 시작해서 자잘하게 계속해서 크고 작은 에러들을 마주하고 있다. 위 에러의 원인은 input 안에 다른 태그를 포함할 수 없다는 내용이다. 당연한 소리인데 옮기다가 태그 여닫는 걸 잘못한 모양이다. 이런걸로 에러떠서 시간 낭비할때 진짜 현타온다 ㅎ Problem .... Solution 리액트는 label for 대신에 htmlFor 를 사용한다. checked 도 그냥 쓸 수 없고 defaultCheck={isCheck} 로 만들어서 useState, useEffect 엮어서 쓴다. 아......... svelt >>>> vue >>>>>>>>>>> react 선호인데 리액트 간만에 하려니 귀찮....... 번거롭다. .... 공감수 0 댓글수 1 2023. 11. 24.
이미지 최적화 Lazy Loading을 쉽게 구현하는 방법 자바스크립트를 사용하지 않고도 가장 쉽고 간편하게 레이지로딩을 구현할 수 있습니다. lazy attribute loading 브라우저가 이미지를 불러올 때 사용할 방식을 지정합니다. eager: 뷰포트 안에 위치하는지 여부에 상관하지 않고 이미지를 즉시 불러옵니다. (기본값) lazy: 이미지가 뷰포트의 일정 거리 안으로 들어와야 불러옵니다. 거리는 브라우저가 정의합니다. 이미지를 보게 될 것으로 충분히 예상 가능한 상황에만 불러옴으로써, 불필요하게 네트워크와 저장소 대역폭을 낭비하지 않을 수 있습니다. 또한 일반적인 사용처에서는 대개 성능을 향상할 수 있습니다. 찾아본 글 중에 제일 좋았던 글 번역 : 웹 성능 최적화를 위한 Image Lazy Loading 기법 :: 이뇽의세상 (tistory.com.. 공감수 0 댓글수 0 2023. 11. 17.
2023-11-16 #오늘의영감 <hELLO 티스토리 개발자 스킨> 코로나와 함께 방치되었던 블로그를 심폐소생하려하니 스킨이 마음에 안들어서 커스텀해볼까란 생각만 백년째하다가 개발자 블로그용 스킨이 있지 않을까 싶어서 찾아보이 이걸 가장 많이 쓰고 있었다. https://pronist.tistory.com/5 hELLO 티스토리 스킨을 소개합니다. hELLO 스킨은 초기에 기능이 많이 없었다가, 티스토리 블로거 여러분의 호응에 힘입어 기능의 추가와 함께 업데이트를 여러 번 하게 되었습니다. hELLO 1.0 때와 비교하면 비교할 수도 없을 만큼의 pronist.tistory.com https://github.com/tidory/hello GitHub - tidory/hello: 😎 당신의 멋진 블로그에 걸맞는 최고의 티스토리 스킨 😎 당신의 멋진 블로그에 걸맞는 최고의 .. 공감수 0 댓글수 0 2023. 11. 16.
[모바일 해상도] 갤럭시 폴드4 viewport 사이즈, 모바일 해상도 확인하기 갤럭시 폴드4 (Galaxy Fold 4) 가로폭 - 접힌 상태 : 345px - 펼친 상태 : 691px 디바이스에서 아래 URL에 접속하면 직접 테스트 해 볼 수 있습니다. [test] viewport / userAgent (codepen.io) [test] viewport / userAgent ... codepen.io 구글 인스펙터로 접힌 폭이 280px 인줄 알고 작업했는데, 실제 디바이스랑 달라서 확인해봤다. 따라서 폴드 대응을 위해 미디어쿼리를 @media screen and (max-width: 280px) { }로 잡았다면 적용이 안되고 있을 것!!! 처음에 갤폴드 280 이라도 들었을 때, 왜 이딴걸 만들어서 고통을 주나 싶었는데 이제는 반쪽 화면 해상도도 345 라니 다행이다 싶다 ㅋ.. 공감수 0 댓글수 3 2023. 11. 15.
웹 퍼블리셔와 마크업 개발자의 차이점은? (ft. GPT3.5) 마크업 개발자란? 마크업 개발자는 웹 개발 과정에서 주로 HTML, CSS, 그리고 종종 JavaScript를 사용하여 웹 페이지를 만드는 전문가입니다. 이들은 디자이너가 제공한 디자인을 기반으로 웹 페이지의 구조와 레이아웃을 작성하며, 사용자 경험을 향상시키기 위해 웹 페이지에 필요한 시각적인 콘텐츠를 구현합니다. 주요 업무 및 책임에는 다음이 포함될 수 있습니다: HTML/CSS 작성: 마크업 개발자는 웹 페이지의 기본 구조를 정의하기 위해 HTML(하이퍼텍스트 마크업 언어)를 작성하고, CSS(캐스케이딩 스타일 시트)를 사용하여 페이지의 스타일 및 레이아웃을 설계합니다. 반응형 웹 디자인: 다양한 디바이스 및 화면 크기에 대응하기 위해 반응형 웹 디자인 기술을 사용하여 웹 페이지를 개발합니다. 크로.. 공감수 0 댓글수 0 2023. 11. 12.
[Vue] SyntaxError: The requested module '/node_modules/lottie-web/build/player/lottie.js?v=b1d5819a' does not provide an export named 'default' (at lottie.vue:6:1) 흠.... vue2.7 + vite (windows 환경) 쓰고 있는데 vue-lottie 쓰려고 예제대로 다 했는데 계속 이 에러가 뜸 검색해도 방법을 모르겠고 미치겠네..... 같은 에러 고치신분 있으면 댓글 좀 달아주세요 ㅠㅠㅠㅠ // package.json { "name": "vue", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite --host", "build": "vite build", "preview": "vite preview", "storybook": "storybook dev -p 6006", "build-storybook": "storybook build", "chromatic": "npx.. 공감수 0 댓글수 0 2023. 9. 14.
[윈도우] 세로모니터 화면 분할 설정하기 세로 모니터 화면 분할하는 방법 2분할 가능 (2023년) - 사이트맵 (sightmap.co.kr) 세로 모니터 화면 분할하는 방법 2분할 가능 ([currentyear]년) - 사이트맵 세로 모니터 화면 분할하는 방법을 소개해드리려고 합니다. 평소에 윈도우 기능으로 윈도우키 + 방향키로 화면을 분할해서 사용하시는 분들이 많았을 겁니다. 그러나 이 기능은 가로 모니터일 sightmap.co.kr 공감수 0 댓글수 0 2023. 8. 24.
[회식/판교] 꿰다, 숯불 오마카세 저녁 회식으로 다녀왔는데 너무 좋았다! *2인 기준 1보틀 주류 필수 주문 공감수 0 댓글수 0 2023. 4. 11.
[팀장일기] 1on1(원온원)을 137회 진행하고 느낀 점 (from. CLAP) 1on1을 137회 진행하고 느낀 점 멤버가 주도하는 1on1을 만드는 팁! blog.clap.company 와 이 인터뷰 글 진짜 좋다 ㅠㅠ 클랩이 진짜 좋은게 이런 이야기를 모아서 볼 수 있다는 점이다. 역시 주제가 명확한 서비스가 성공한다. 응원합니다 🔥 여기서 소개된 책도 읽어봐야겠다. http://www.yes24.com/Product/Goods/107905667 원온원 - YES24 아마존에서 페이스북까지, 왜 실리콘밸리의 많은 기업과 한국의 스타트업은 ‘면담’을 버리고 ‘원온원’을 하고 있을까?“조직의 성공과 리더의 성공, 그리고 구성원의 성장과 성공을 연결 www.yes24.com 공감수 0 댓글수 0 2023. 4. 5.
[회사일기] 2023년 판교의 봄 🌸 나중엔 다 추억이 될 것 같아서 매년 보는 광경이지만 사진으로 담아봤다. 긴 코로나 끝에 맞는 봄이어서 그런지 왠지 더 기분이 좋았다. 공감수 1 댓글수 1 2023. 4. 3.
[점심회식/판교] 베네쿠치 ⭐️⭐️⭐️⭐️ 너무 만족스러웠던 판교 회식! 또 가고 싶다!!! 굳이 아쉬운 점을 꼽자면 파스타 면이 조금 아쉬웠다...! 하지만 나머지가 모두 퍼펙트! 공감수 0 댓글수 0 2023. 4. 3.
2023-03-30 #오늘의영감 <Story> https://notice.tistory.com/2637 [안내] 티스토리가 ‘Story’의 가족으로 새롭게 출발합니다. 안녕하세요. 티스토리 팀입니다. 누구나 창작자가 되는 시대. 우리는 소소한 일상부터 깊이 있는 정보까지 끊임없이 글을 통해 자신만의 이야기를 전합니다. 그리고 저마다의 이야기는 각각의 notice.tistory.com 브런치, 카카오스토리, 티스토리가 Story라는 상위개념으로 묶이나보다. 티스토리 BI가 바뀌었길래 공지사항을 읽어보니 그렇다 ^ㅇ^ 티스토리 화이팅! 공감수 0 댓글수 0 2023. 3. 30.
[팀장일기] 2023년 1분기 1on1 후기 (feat. CLAP) 카카오엔터프라이즈에서 재직한지 만 3년이 되었는데, 팀을 이끌게 된 건 만 2년이 되었다. 거의 코로나 때문에 재택근무 기간이 더 많았던터라 소속감을 잃지 않으면서 일할 수 있도록 친밀감과 신뢰를 쌓는것이 가장 중요한 목표였다. 그건 어느정도 갖춰진 것 같은데 2023년이 되면서 점차 오피스 출근이 많아지자 그동안 놓쳤던 것들을 챙겨야겠다는 생각이 들었다. 팀장(마크업파트장)으로 2023년에 새롭게 다짐한 목표는 적어도 분기에 한번은 원온원을 하겠다라는 것이었다. 사실 원온원은 달에 한 번 정도는 해야 좋겠지만, 회사마다의 특성상 조금은 다를 수 있을 것 같다. 팀원들이랑 1:1로 가볍게 티타임은 월에 한번씩은 할 수 있지만 이렇게 각잡은 원온원은 분기에 한번 하기도 사실 벅차다. 팀장은 감정노동자라는 .. 공감수 1 댓글수 0 2023. 3. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.