티스토리

이게 무슨 일이야!

검색하기

블로그 홈

이게 무슨 일이야!

eunice6113.tistory.com/m

명동섞어찌개 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

next app router 에서 다국어 지원하기 가장 심플한 방법으로 Next 공식문서에 걸려있는 소스를 참고 https://nextjs.org/docs/app/building-your-application/routing/internationalization Routing: Internationalization | Next.jsAdd support for multiple languages with internationalized routing and localized content.nextjs.org 이 소스의 구조대로 설정했더니 문제없이 나온다 (sub-routing 방법으로) https://github.com/vercel/next.js/tree/canary/examples/app-dir-i18n-routing next.js/examples/app.. 공감수 0 댓글수 0 2024. 10. 20.
드디어 도래한 자연어 프로그래밍의 시대..? - ChatGPT 4o 로 웹사이트 화면 만들어보기 최근에 릴리즈된 ChatGPT 4o 가 이미지 등의 인식이 좋아졌다고 하고캡쳐 이미지로 웹사이트를 생성했다는 어떤 분의 글을 보고 나도 시도해봤다. * 전제조건: ChatGPT 유료 버전 사용 (월 2만원대~)* 필수는 아닌데, 무료 버전의 AIRPM (https://www.aiprm.com/) 이라는 Prompt 플러그인을 사용하고 있다. Please write in Korean language. 라는건 이 플러그인에서 자동으로 붙여준 것. 이 플러그인을 사용하면 Prompt 를 더 잘 쓸 수 있다고 하니 참고 1. 네이버 포스트 모바일 화면 캡쳐 > 저장 2. ChatGPT 에게 이 이미지를 주고 이 이미지 같은 사이트를 React 로 생성하라고 해보았다.make website look li.. 공감수 7 댓글수 2 2024. 6. 4.
[C4D] Texture 맵핑하기 기초 - 2 [C4D] Texture 맵핑하기 기초 - 1 https://eunice6113.tistory.com/177 에 이어서 기초적인 텍스쳐 맵핑 계속합니다~ Texture 크기, 위치 조정Texture 는 png 나 jpg 여야 함 (.svg, .ai 안됨!)적용한 Material 클릭 -> Tag 클릭Projection - Cubic (UVW Mapping 은 위치는 조절되는데 크기 조절이 안됨, 이것도 테스트하면서 해보기)Projection Display - Simple이렇게 설정한 후Tag 탭에서 Offset U/V, Length U/V 를 왼쪽 화면 보면서 조절하면 위치를 조절할 수 있다. Coordinates 에서는 크기 조절이 가능하다. 안 되는 경우에는 위에서 설정한 Projection, P.. 공감수 1 댓글수 0 2024. 6. 3.
[C4D] Texture 맵핑하기 기초 - 1 C4D 로 3D image 생성할 일이 있었는데아주 기초적인 문제가 있어서 해결한 기록을 여기에 적어둡니다 Material > Texture 로드C4D 에서 오른쪽 위 동그라미 아이콘 (Material Manager) 클릭 > Material 하나 생성해서 더블클릭 >> Material Editor > Color 선택하여 Texture 로드 Texture 로드가 안될때.png, jpg 는 로드가 되지만 .ai, .svg 파일은 Texture 로는 쓸 수 없습니다. illustrator 에서 export as 로 일반 이미지로 바꿔서 내보내어 Texture 로 써줍니다.(.ai 나, .svg 는 그 자체로 로드하여 object 로는 쓸 수 있음) Load 한 Texture 의 색이 다를때파란 글.. 공감수 0 댓글수 0 2024. 5. 31.
IE(Internet Explorer 브라우저) 에서 display:grid 사용하기 회사에서 대시보드를 운영 유지보수할 일이 있는데Edge 의 IE(Internet Explorer 브라우저) 모드와 Chrome 브라우저를 동시에 만족하면서 복합적인 화면을 구현해야 했다. 기존 화면은 float:left 와 clear:both 로 모든 레이아웃이 되어있었는데 새로 만드는 화면은 좀 더 깔끔했으면 했다. 그래서 grid 를 사용하기로 했다. 출처 : https://caniuse.com/ IE 타겟으로 grid 나 flex 를 생각 안해봤었는데 의외로 flex 도 되긴 된다. 최신 기능이 완벽하게 지원은 안되지만 이번에 grid 를 Edge 의 IE 호환 모드로 작업해보니gap, repeat 같은 웬만한 편리한 최신 함수들은 작동되지 않았고, 별도의 처리를 해주어야 했다.그래서 정.. 공감수 0 댓글수 0 2024. 5. 8.
VSCode 로 개발 환경 세팅할 때 유용한 Extension 프로젝트에서 유용하게 사용했던 VSCode Extension 을 공유하려고 합니다. 아래 스토어에서 검색해서 볼 수도 있고, https://marketplace.visualstudio.com/vscode Visual Studio Marketplace Extensions for Visual Studio family of products on Visual Studio Marketplace marketplace.visualstudio.com VSCode 의 Extension 탭에서 검색해서 추가하는 것이 일반적인듯 합니다. 기본적인 세팅 현재 만드는 페이지를 로컬 웹서버에서 쉽게 띄워서 볼 수 있는 Live Server https://marketplace.visualstudio.com/items?itemNam.. 공감수 0 댓글수 0 2024. 2. 29.
퍼블리싱할때 자주 사용하는 특수문자 엔티티코드(Entity Code) 검색 1. HTML에서는 특정 문자들이 태그나 속성을 정의하는 데 사용되기 때문에, 이러한 문자들을 내용으로 표시하기 위해 엔티티 코드를 사용합니다. 2. 엔티티 코드를 사용하면 HTML 문서에서 특수 문자를 안전하게 표현할 수 있어, 예를 들어 ` 공감수 0 댓글수 0 2024. 2. 29.
[프로젝트 관리 툴 세팅] 일반적인 레드마인 같이 Jira 세팅해보기 저는 대문자 P 라서 시간 관리에 익숙하지 않은 편이었습니다. 그런 저에게는 회사에서 팀 프로젝트를 할 때 레드마인에서 시간 추적, 진척도를 목록에서 보고 관리하는 것이 관리에 도움이 되는 편이었습니다. 이후 개인적인 프로젝트 관리나, TFT에 속해 POC 프로젝트를 진행할 때 이런 관리 툴 세팅이 필요한 경우가 종종 생겼는데요, 레드마인을 직접 설치하기는 어렵고, SaaS 로 제공해주는 레드마인 무료버전은 검토해보니 저런 커스터마이징이 안되더라구요. 전에 Jira 에서 프로젝트 관리 기능을 써보니 마음에 들어서 Jira 화면에서 레드마인같은 화면을 만들어 활용하고 싶었는데 제대로 된 설명서는 없고 맨땅에 헤딩해서 겨우 해봤습니다. + 노션에 최근 생긴 프로젝트 기능으로도 구성을 해봤지만, (https.. 공감수 0 댓글수 0 2024. 2. 19.
웹접근성 작업시 참고사이트 웹접근성 점수를 알 수 있는 크롬 플러그인 https://chromewebstore.google.com/detail/openwax/bfahpbmaknaeohgdklfbobogpdngngoe?hl=ko OpenWAX OpenWAX(Open Web Accessibility eXtension) is a tool that can help diagnose and fix the accessibility problem. chrome.google.com 웹접근성 사전 같은 곳 https://wa.mk.co.kr/part_guide/part_cording_9.php 매일경제 - No1. 경제포털 wa.mk.co.kr https://nuli.navercorp.com/guideline/s01/g01 NULI 모두가 함께 누.. 공감수 1 댓글수 1 2023. 11. 28.
rtk query 공통 로딩바 넣기 https://github.com/reduxjs/redux-toolkit/issues/2204 [RTK Query] New feature or method for global spinner · Issue #2204 · reduxjs/redux-toolkit My project is in the coding phase. I was using axios + pure async thunk action for http requests. But RTK Query is awesome for manage these operations and I have decided using RTK Query. But I have... github.com const isSomeQueryPending = useSelector(sta.. 공감수 0 댓글수 0 2023. 10. 25.
2D 로 3D 같은 효과 내기 2D 인데 마우스 인터랙션에 따라서 약간 3D 처럼 반응보이게 하는 효과 이름을 Tilt 라고 하네요 Tilt + Frost Glass 효과 => 글래스모피즘 GlassMorphism 유행이 지나가고 있는 중인지 모르겠지만 한번쯤 포폴에 넣고 싶은 관계로 자료조사중!! https://gijsroge.github.io/tilt.js/ Tilt.js - Parallax tilt effect for jQuery Tilt.js, a small easy to use parallax hover tilt effect for jQuery. gijsroge.github.io See the Pen Glassmorphism Icon Buttons by Taylon, Chan (@tin-fung-hk) on CodePen. .. 공감수 0 댓글수 0 2023. 7. 18.
Object 가 path 따라 움직이게 하기 이 강의 보고 캡쳐 https://www.youtube.com/watch?v=_phnVrVwUe4 Shift A + Curve > Path Tab 해서 Edit mode 로 들어가면 방금 만든 Path 가 보인다 S 로 스케일 키우고 각 점을 잡아서 G Grab 하여 조정 Tab - Object 모드로 돌아와서 이 메뉴 누르고 Follow Path 선택 Target 으로 Path 지정해준 다음 Animate Path 누르면 끝.. + Frame 길이 조정은 Path 선택후 속성 창에서 Path Animation 속성 체크해서 Frames 에서 조정할 수 있다 공감수 1 댓글수 0 2023. 7. 11.
옆으로 흐르는 무한 스크롤 배너 만들기 원리는 이곳에서..!!! https://www.damiisdandy.com/articles/create-infinite-auto-scroll-animation-with-pure-css/ Create infinite auto-scroll animation with pure CSS This guide is to help you understand the concept of how Infinite auto-scroll animations you see on websites like JamStack work, and how to implement them with just CSS!. www.damiisdandy.com 전체소스 .scroll-parent { position: relative; width: 100.. 공감수 0 댓글수 0 2023. 7. 5.
무료 CSS Gradient Background + 무료 Mockup 소스 느낌 있고 예쁜 그라디언트 배경을 만들고 싶어서 포토샵으로 3분정도 삽질을 해봤는데... 그냥 무료 소스의 힘을 빌리기로 했다 이걸 무려 공짜로 다 주신다는 Behance 의 어떤 분 글을 찾아서~!!! https://www.behance.net/gallery/68796227/Free-Mesh-Gradients-Collection Free Mesh Gradients Collection Like and follow us to support new freebies www.behance.net https://www.ls.graphics/products/mesh-gradients Mesh Gradients Free gradient collection www.ls.graphics 저 버튼 누르고 이.. 공감수 0 댓글수 0 2023. 7. 3.
광고 배너 생성 AI 로 3분만에 SNS 광고 영상 만들기 (feat. 제품 상세 페이지) 광고하고자 하는 제품의 웹 상세 페이지 URL 을 넣으면 원하는 템플릿의 동영상 광고를 만들어준다는 신박한 생성 AI 서비스가 나와서 사용해 보았습니다. https://vcat.ai/home 브이캣 VCAT AI 추천으로 쉽고 빠른 영상 제작! 클릭 세 번이면 영상을 만들 수 있습니다. vcat.ai 가입한 뒤에 대시보드에 들어가서 '상품페이지로 영상 만들기'를 시도!! 제가 자체적으로 광고할 제품이 있는 것은 아니므로 (그냥 호기심에 써봄) 무난 무난하게 - 에이전시에 맡겨서 알찬 퀄리티를 자랑하는 이니스프리의 아무 상품 페이지를 넣어보았습니다. https://www.innisfree.com/kr/ko/ProductView.do?prdSeq=34116 무난한 SNS 템플릿을 선택해 봅니다. 상세페이지에.. 공감수 0 댓글수 0 2023. 6. 26.
Blobbing CSS 효과, Text Paint 효과 Blob (작은 방울) 약간 슬라임 같은 움직임을 이용한 CSS 애니메이션에 대해서 css-tricks(https://css-tricks.com/) 를 보다가 괜찮은 소스가 보여서 소개합니다. 전반적인 개요글 https://css-tricks.com/blobs/ Blobs! | CSS-Tricks I was recently a guest editor for an issue of Bizarro Devs. It's a great newsletter! Go sign up! I put in a bunch of links around blobs. Like those weird css-tricks.com Blobbing CSS Navigation 이나 Banner Indicator 에 쓰기 좋은 CSS Trick .. 공감수 0 댓글수 0 2023. 6. 19.
three.js + typescript (@types/three) 설정시 에러 해결 three 라이브러리를 Webpack 사용하는 javascript 프레임워크에 세팅할 때 발생한 에러이다. 평소대로 npm i three @types/three 해서 라이브러리를 설치하면 아래와 같은 에러와 함께 빌드가 안되는 걸 볼 수 있다 TypeScript error TS1005: ';' expected 자동으로 버전이 맞춰지지 않아서 생기는 문제인데 이 때 package.json 의 typescript 버전과 @types/three 의 버전을 맞춰주면 해결된다 예를 들어 typescript 버전이 "typescript": "~4.2.3" 이면 아래 페이지에 접속해서 https://www.npmjs.com/package/@types/three?activeTab=versions @types/three.. 공감수 0 댓글수 0 2023. 6. 14.
ChatGPT 연동되는 플러그인으로 Youtube 동영상 내용 요약해서 보기 성질 급해서, 또는 적은 시간에 많은 동영상을 보고 정보를 빨리빨리 캐치하고 싶은데 동영상 끝날떄까지 기다리기 답답하셨던 분들께 추천드리는 플러그인 입니다...!! 동영상 스크립트를 얻고 -> chatGPT 로 연동해서 동영상 내용을 받아볼 수 있습니다. 사전준비 1. 먼저는 chatGPT 에 로그인이 되어있으시면 좋구요 https://chat.openai.com/ 2. 최신 정보를 연동하기 위해 Web ChagGPT 플러그인 꽂으신 분들은 그걸 비활성화 해줍니다. 지금 쓰려는 플러그인과 연동하면 에러가 나더라구요.. 동영상 요약을 쓸 동안만 잠시 토글 꺼주세요~ 본격시작 0. 크롬 브라우저에서 1. YouTube & Article Summary powered by ChatGPT 크롬 플러그인을 설치해 .. 공감수 0 댓글수 0 2023. 5. 23.
[UX] 기획자를 위한 UX Flow pattern PageFlows 라는 사이트를 알게 되었는데, SaaS, Finance 등 산업 카테고리별로 앱과 웹의 플로우를 화면 녹화로 볼 수 있고, 스크린샷까지 제공해 주네요 일부는 유료라서 보려면 SaaS 서비스 구독을 해야하긴 하는데요 UX 리서치는 해야하는데 시간 없는 사람들을 위해서는 추천할 만한 서비스인듯 해서 소개합니다 https://pageflows.com/saas/ SaaS user flow videos - Page Flows SaaS user flow videos on Page Flows - where you can find user flow videos and screenshots of proven products pageflows.com 죄측 메뉴에 PRODUCT 카테고리를 보면 보면 Saa.. 공감수 0 댓글수 0 2023. 5. 23.
[UI/UX] [UX Research] 기획자와 디자이너를 위한! 서비스 기획이나 디자인 벤치마킹 시 참고하기 좋은 UI Pattern, 스크린샷 등 모음 사이트 특정 UI 패턴을 모아서 보여주는 사이트들이 많은데 개인적으로 좋았던 곳들을 정리해봅니다 (참고로 저는 디자인 때문에 찾아본건데 기획자들에게도 유용한 듯해요!!) 앱, 모바일 ScrnShts 앱 별 스크린샷을 보기 좋습니다 https://scrnshts.club/ Discover Scrnshts A hand-picked collection of the finest app store design screenshots scrnshts.club UXArchive https://uxarchive.com/ UXArchive - Made by Waldo UXArchive the world's largest library of mobile user flows. Be inspired to design the best .. 공감수 0 댓글수 0 2023. 5. 23.
간단한 웹사이트 제작 및 배포 방법 오히려 현업에서 어렵게 어렵게 개발하는 입장에서 이런 최신 툴들이 더 낯선거 같다 (보안 때문에 어쩔 수 없는 폐쇄적인 환경 때문일수도...) 간단한 웹사이트 제작 https://replit.com/ Replit: the collaborative browser based IDE Run code live in your browser. Write and run code in 50+ languages online with Replit, a powerful IDE, compiler, & interpreter. replit.com 간단한 웹페이지 제작은 물론 다른 사람들의 수많은 코드 조각을...살 수가 있다. 자동 배포 자동 devops 사이트 같음 배포 + 호스팅 + 도메인 까지 서비스 github 에 코드 .. 공감수 0 댓글수 0 2023. 5. 23.
자기계발 아무 강의.. Coloso 에 진짜 괜찮은 강의가 많은 것 같습니다 (강사님들 수준이 전반적으로 높은 것 같음) 찾아보니 제로베이스 스쿨, 패스트캠퍼스, Coloso 모두 같은 회사의 서비스 들이네요. 어쩐지 (...) 이 외에 마케팅이나, 책이나 무료 세미나에서 듣고 좋았던 강사님들도 Coloso 에 있어서 듣고 싶네요 (여기 홍보는 아닙니다;;;) https://coloso.co.kr/products/insight-choyongmin 구글 커스터머 솔루션 실장 조용민 | Coloso 구글러가 알려주는 위기를 기회로 바꾸는 문제 해결법 coloso.co.kr 최명화님은 책 보고 재미있어서 유튜브도 구독했던 분이라 강의도 듣고 싶네요. https://coloso.co.kr/products/insight-choimyou.. 공감수 0 댓글수 0 2023. 5. 23.
next.js jenkins build error "next export" does not work with App Router. Please use "output: export" in next.config.js" 일반적인 template typesripe 설정으로 기본 프로젝트 세팅했는데 아래와 같은 build error 가 떴을 때 해결 방법 error "next export" does not work with App Router. Please use "output: export" in next.config.js next.config.js 의 nextConfig 에 두 줄 추가해준다 /** @type {import('next').NextConfig} */ const nextConfig = { trailingSlash: true, // 공감수 0 댓글수 0 2023. 5. 22.
next.js 에 tailwind css 로 dark mode 세팅하기 tailwind css 로 아주 간단하게 다크모드 설정을 하는 방법을 배워서 정리하려고 합니다 tailwind css 는 모듈화된 css 클래스 덩어리들을 제공해주는 오픈소스 라이브러리 같은 건데 부트스트랩 사용해보신 분들이면 사용하기 쉬울 거에요 웬만한 css 속성을 class 화 해놔서 작업하기 편합니다 이미 세팅한 next.js 프로젝트가 있다는 전제하에 tailwind css 를 사용합니다 1. tailwind css 설치 https://tailwindcss.com/docs/guides/nextjs Install Tailwind CSS with Next.js - Tailwind CSS Setting up Tailwind CSS in a Next.js v10+ project. tailwindcss... 공감수 0 댓글수 0 2023. 5. 19.
mac + VSCode + Python 실행 환경설정 목표는 1. 파이썬 개발 환경을 세팅 2. chat GPT 초보 예제를 하나 실행시켜 보겠습니다 https://platform.openai.com/docs/libraries OpenAI API An API for accessing new AI models developed by OpenAI platform.openai.com 아래 단계를 따라서 맥(Mac)에서 가상 Python 환경(venv)을 생성할 수 있습니다: (feat. Chat GPT) 1. 터미널을 엽니다. (Spotlight에서 "터미널"을 검색하거나 "Applications" 폴더의 "Utilities" 폴더 내에서 찾을 수 있습니다.) 2. 원하는 프로젝트 디렉토리로 이동합니다. 예를 들어, 홈 디렉토리에서 프로젝트를 생성하고 싶다면 다.. 공감수 0 댓글수 0 2023. 5. 15.
Next.js 공부할 때 참고하기 좋은 사이트 작년 React 에 이어서 올해는 Next.js 를 하고 있는데요 저처럼 리액트나 Next.js 혼자 공부해서 프로젝트 해야 하는 분들에게 추천드리는 강의/블로그 목록입니다. 강의는 패스트캠퍼스의 Next.js 완전 정복 확장성 높은 커머스 서비스 구축하기 를 가장 추천합니다. 리액트 처음 배울때도 이분 강의에서 도움을 엄청 받았습니다. 쉽고 친절하고 자세하게 잘 설명해 주세요. 예제 하나 하나 따라하다보면 금방 이해할 수 있습니다. https://fastcampus.co.kr/dev_online_nextjs Next.js 완전 정복 : 확장성 높은 커머스 서비스 구축하기 | 패스트캠퍼스 확장성 높은 커머스 서비스를 구축하며 30가지 이상의 기능을 익히는 Next.js 딥다이브 강의! 토스증권 프론트엔드.. 공감수 0 댓글수 0 2023. 4. 25.
3D 관련 추천 강의 3D UI 나 컨텐츠 만든는 데 관심이 있어서 강의를 몇 개 듣고 있는데요, 비슷한 관심사를 가진 분들께도 추천 드립니다. 1. Web 상에서 3D UI 를 구현하기 three.js 와 MS 의 babylon.js 같은게 있는것 같던데 일단은 three.js 를 보고 있습니다. three.js 한국어 강의로는 최고라고 생각되는 강의 https://www.inflearn.com/course/3d-%EC%9D%B8%ED%84%B0%EB%9E%99%ED%8B%B0%EB%B8%8C-%EC%9B%B9 three.js로 시작하는 3D 인터랙티브 웹 - 인프런 | 강의 웹에서 3D를 구현할 수 있는 자바스크립트 라이브러리, three.js의 핵심 개념들을 익히고 응용 예제까지 만들어 보면서 3D 웹 개발에 대한 감을.. 공감수 1 댓글수 0 2023. 4. 22.
개발자 로드맵 요 그림..!!! 항상 이미지 캡쳐만 봐서 웹사이트가 있는걸 처음 알았다...;;; 가장 최신의, 널리 알려진 기술 공부하는데 무엇부터 볼지 참고하면 좋은 로드맵! https://roadmap.sh/ Developer Roadmaps - roadmap.sh Community driven roadmaps, articles and guides for developers to grow in their career. roadmap.sh 공감수 0 댓글수 0 2023. 4. 3.
웹에서 영상 편집 & 생성하기 (Text to Video) 손쉽게 유튜브 영상 등을 웹에서 생성, 제작, 편집할 수 있게 도와주는 사이트 https://vrew.voyagerx.com/ko/ VREW - 영상편집을 자동자막과 함께 Vrew는 인공지능을 활용한 영상 편집 프로그램입니다. 신개념 영상 편집을 지금 경험해보세요. vrew.voyagerx.com https://pictory.ai/ Pictory – Home of AI Video Editing Technology Pictory's powerful AI enables you to create and edit professional quality videos using text, no technical skills required or software to download. pictory.ai 공감수 0 댓글수 0 2023. 3. 30.
Next.js 시작하기 Next.js 를 시작할 때 Vercel 의 template 에서 좌측 메뉴 (Framework 등) 를 체크해서 원하는 구성으로 되어있는 example 을 받아서 소스 먼저 보는걸 추천 https://vercel.com/templates Find your Template – Vercel Jumpstart your app development process with our pre-built solutions. vercel.com + 2023년 상반기 현재 Webpack 대신 사용하려고 rust 로 쓰여진 Turbopack, Vite 등을 검토했는데 둘 다 아직 상용 버전이 완벽하지 않아서 당장 (!!!) 서비스해야하는 뭔가를 만드는데는 사용하지 않는 것을 추천합니다 https://turbo.build/p.. 공감수 0 댓글수 0 2023. 3. 30.

문의안내

티스토리
로그인
고객센터

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