전체 글
[연남동] 유튜버들이 방문한 연남동 TOP4 식당
[연남동] 유튜버들이 방문한 연남동 TOP4 식당
2023.10.22유튜버들의 그식당을 찾아서 연남동으로! [연남동] 유튜버들이 방문한 연남동 TOP4 식당 📝 식당 리스트 [서대문 양꼬치] 주소: 서울 마포구 연남동 255-20 2층 영업시간: 매일 14:00 - 02:00 주문한 메뉴: 돼지쪽갈비&양고기전골&양고기파볶음 소개: 2004년 오픈하여 지금까지 원조 양꼬치로 이름을 알린 서대문 양꼬치 BAR 입니다. 성시경의 먹을텐데 맛집, 수요미식회 맛집, 테이스티로드 맛집으로 나왔습니다. 홍대, 연남동 양꼬치 맛집의 원조답게 질 좋은 재료를 가장 중요하게 생각하고 있으며 동일한 맛을 지키는데 힘을 쏟고 있습니다. 서비스는 기본이구요! 오셔서 즐겁고 행복한 시간 보내셨으면 합니다^^ 감사합니다! 그식당에서 자세하게 알아보기 [경양카츠 연남] 주소: 서울 마포구 연남동 2..
[먹보스쭈엽이] 평양면옥 내돈내산 솔직 리뷰
[먹보스쭈엽이] 평양면옥 내돈내산 솔직 리뷰
2023.10.07먹보스쭈엽이가 추천한 분당 평양냉면&수육 맛집? 가게에 대한 더 자세한 정보는 인플루언서 맛집 소개 플랫폼 "그식당" 에서 확인해보세요 대표이미지 삭제 평양 냉면: 밍밍하다고 소문난 평양냉면이지만 밍밍하지 않고 약간 짭쪼름하게 간이 된 맛이 느껴진다. 면사리는 메밀이 함유되어 있어 쫄깃한 맛은 덜하고 고소한 맛이 난다. 오이가 들어가니 싫다면 빼고 주문하자. - 제육(보쌈): 돼지고기 수육으로 잡내 없고 껍질의 꼬들거리는 식감이 좋다. 냉면에 곁들이는 조합으로 훌륭했고 고기가 도톰하고 두껍게 썰어져있어 상당히 인상적. [꿀팁] 성인 남자 기준으로 2명이 냉면x2, 제육 먹으면 배부르게 먹을 수 있었다. 수육, 만두류 음식은 1/2 메뉴로도 주문이 가능하니 참고! [장점] ▫️깔끔하고 쾌적한 인테리어에 접..
[풍자/또간집] 산사랑 내돈내산 솔직 리뷰
[풍자/또간집] 산사랑 내돈내산 솔직 리뷰
2023.10.07또간집 풍자가 추천한 상다리 휘어지는 산나물 한정식! 정말 맛있을까? 가게에 대한 더 자세한 정보는 인플루언서 맛집 소개 플랫폼 "그 식당"에서 확인해보세요 https://www.sigdang.app/shops/458 음식이 두 번의 걸쳐 나올 만큼 음식의 종류가 많다. 대표사진 삭제 사진 설명을 입력하세요. 산나물 장아찌, 풀치 볶음, 임연수 조림 등 평상시 먹기 힘든 반찬이 많아 입이 즐겁다. 전반적으로 간이 강하게 되어 있지 않아 담백하고 슴슴해서 자극적이지 않다. 식사 후에 속이 편할 것 같은 느낌이다. 많은 반찬을 즐기고 싶다면 추천하고 싶다. 주요 반찬인 불고기, 두부전골, 임연수 조림의 경우엔 간이 조금 덜된 느낌이라 오히려 조금 더 간을 하면 더 맛있을 것 같았음. [꿀팁] 마당에 시원한 ..
[Next.js] 번역-Rendering Fundamentals
[Next.js] 번역-Rendering Fundamentals
2023.04.09이 포스팅은 Next.js v13의 Docs 중 Rendering Fundamentals 관련 부분을 번역하여 정리한 내용을 담고 있습니다. [Next.js] Rendering Fundamentals Rendering은 작성한 코드를 UI(User Interface)로 변환합니다. React 18과 Next.js 13에는 애플리케이션을 렌더링하는 새로운 방법이 도입되었습니다. 이 페이지는 렌더링 환경, 전략, 런타임의 차이점과 이를 선택하는 방법을 이해하는 데 도움이 될 것입니다. Rendering Environments application 코드를 렌더링할 수 있는 환경에는 client와 server 두 가지가 있습니다. client는 application 코드에 대한 요청을 서버에 보내는 사용자 디바..
[html/css] img 태그에 vertical-align RESET 필요한 이유
[html/css] img 태그에 vertical-align RESET 필요한 이유
2023.04.09[html/css] img 태그에 vertical-align RESET 필요한 이유 Problem 아래 예제 코드를 보면 알겠지만 이미지의 height 628p이다. 하지만 img를 감싸고 있는 div의 height는 633px으로 5px 만큼 더해진 문제가 있었다. 왜 그럴까? HTML 삽입 미리보기할 수 없는 소스 Why? 이를 알기 위해서는 몇가지 배경지식이 필요하다. 배경 지식 1: img의 display 기본값은 inline 이다. 배경 지식 2: inline 요소는 typography 규칙인 vertical-align 속성이 적용된다. 이제 아래 예시를 살펴보자. 자세히 살펴보면 img 요소와 p 요소 사이에 간격이 생긴다. 이는 vertical-align 속성의 기본값이 적용되었기 때문이다...
Humata.ai 업무 자동화를 위한 최고의 도구
Humata.ai 업무 자동화를 위한 최고의 도구
2023.04.09Humata.ai: 업무 자동화를 위한 최고의 도구 서비스 웹 url: https://www.humata.ai/ Humata - GPT for your files Humata is like GPT for your files. Ask AI anything about your data. Ask questions about your data and get answers powered by AI instantly. Learn, summarize, synthesize, and extract valuable data from your files 100X faster. www.humata.ai Humata.ai는 인공지능(AI) 기술을 활용하여 기업의 업무 프로세스를 자동화하고 효율적으로 운영할 수 있도록 지원하는 ..
Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음
Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음
2023.04.08Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음 웹페이지: https://simpleicons.org/ github: https://github.com/simple-icons/simple-icons 주요 기능 약 2444개의 유명 회사 및 제품들 아이콘을 SVG로 제공 SVG, PDF 확장자 선택해서 다운로드 가능 아이콘 클릭시 svg 인라인 코드 텍스트 복사됨 코드에서 사용할 때 JSDelivr or Unpkg 과 같은 CDN으로 사용 가능 npm 패키지로도 제공: simple-icons [ICON SLUG]는 slug 참고해서 치환하면 됨. 예를 들어 CDN with colors CDN 서비스는 colors 기능도 있음. 여기서 [COLOR]는 option이며 사용하려는 아이콘의 he..
[React Query] v4 버전 달라진 점 (릴리즈 노트 정리)
[React Query] v4 버전 달라진 점 (릴리즈 노트 정리)
2023.03.31[React Query] v4 버전 릴리즈 노트 정리 React Query가 v4 버전으로 업데이트되었다. 회사 프로젝트에서도 v4로(v3.39.2 → 4.24.6) 마이그레이션 하게 되었는데, 그 과정에서 달라진 점을 정리해 보았다. Codemod 마이그레이션을 도와주는 Codemod 가 있음 The codemod is a best efforts attempt to help you migrate the breaking change. Please review the generated code thoroughly! Also, there are edge cases that cannot be found by the code mod, so please keep an eye on the log output. js..
[html/css] flex와 z-index
[html/css] flex와 z-index
2023.03.31flex와 z-index 배경 회사 동료 코드 리뷰 중 flex 요소의 자식의 경우 z-index가 동작하는 걸 발견함. 내가 알고 있는 상식과 달라 조사를 해봄. 예시: https://codepen.io/nuhends/pen/eYLOVaO?editors=1100 조사 및 결과 내가 알고 있는 상식은 어떤 요소에 z-index를 줬을 때 쌓임 맥락이 형성되려면 position속성의 값이 static(기본값)이 아니어야 한다. 그런데 flex 요소의 자식은 왜 동작할까? w3의 flex items 스펙을 살펴보자. Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is use..
[React Query] 전역 상태로 사용하기
[React Query] 전역 상태로 사용하기
2023.03.31[React Query] 전역 상태로 사용하기 React Query를 Redux처럼 전역상태관리 용도로 사용할 수 있다. HOW? 상위 레벨 컴포넌트에서 queryClient.setQueryData()로 데이터를 set하고, 해당 데이터가 필요한 (자식) 컴포넌트에서 queryClient.getQueryData()로 사용하면 된다. 예시 // QueryKey.ts: 쿼리키 상수화(프로젝트 정책에 따라) export const headersQueryKey = ["HeadersData"]; // index.tsx const queryClient = new QueryClient(); const reqHeaders = getRequestHeader(headers); queryClient.setQueryData(..
[html] img태그 에러 처리 방법
[html] img태그 에러 처리 방법
2022.11.08[html] img태그 default 이미지 적용하기 img 태그의 src 속성에 url이 존재하지 않거나 이상이 있는 경우, 빈 이미지가 노출 된다. 그 결과 ui가 ugly하게 보인다. 이럴 때 onError 이벤트를 사용할 경우 대처가 가능하다. 사용법 및 주의 사항 onError 이벤트는 url이 존재하지 않을 경우만 동작한다. url이 falsy value 일 경우, onError 이벤트는 동작하지 않는다. (ex: null, undefined, ‘’) const defaultImagePath = 'https://via.placeholder.com/300/09f.png'; // sourceUrl이 falsy value 일 경우 동작하지 않기 때문에 // defaultThumbImagePath로 ..
[Next.js] 딥링크, Next/Link에서 이슈
[Next.js] 딥링크, Next/Link에서 이슈
2022.10.31이슈 import Link from 'next/link'; // 버튼 컴포넌트 지금 바로 쿠폰 확인하기 아래와 같이 // → / 로 바뀌어서, 렌더링되어 링크 동작을 하지 않음. 원인 Next/Link 패키지를 까보자. // node_modules/next/dist/client/link.js: Link 컴포넌트 패키지 const { href , as } = _react.default.useMemo(()=>{ const [resolvedHref, resolvedAs] = (0, _router).resolveHref(router, hrefProp, true); return { href: resolvedHref, as: asProp ? (0, _router).resolveHref(router, asProp) ..