묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결2024 피그마UI3 기초 + 실무 탄탄 초스피드 완강코스
2강 질문
2강 듣던 중 강의 이모티콘 사진을 다운받고 싶은데, 영상 하단에 더보기란이 없어요ㅠㅠ 어디서 받아야 하나요?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
제네릭을 사용하실 때 콤마
제네릭을 사용하실 때 콤마는제네릭과 JSX의 혼동방지제네릭 구문을 명확히 해서 코드의 가독성 높임TSX 파일에서 사용할 때 하는 일반적인 관례로 인한 이유가 맞을까요?
-
미해결루씨의 피그마 클래스
피그마 활용 클래스 > 4 컴포넌트 boolean
섹션 4. 피그마 활용 클래스 강의 중 4-4강에서 버튼을 만들어 하트 아이콘을 넣고 컴포넌트화 시킨 후하트 아이콘을 클릭하고 boolean 기능을 추가하는 부분이 현재 피그마 UI와 달라서 어떻게 만들고 적용하는 지 모르겠습니다.업데이트 되면서 패널 속성이 바뀐 것 같은데 어떻게 만들고 적용하면 되나요?
-
미해결루씨의 피그마 클래스
그룹에 대한 질문입니다
2-프레임과 그룹의 차이 학습후 질문드립니다 그룹을 사용하는 이유가 궁금합니다. 프레임이 더 이점이 많은것 같아서요그룹을 어떻게 만드셨나요? 하단 UI 상으로는 프레임과 도형정도만 있습니다
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
popover createPortal 방식에서
portal할 요소를 아래처럼 작성하고 있는데<div id="popoverRoot" /> 저는 이거를 popover를 사용하는 개발자가 신경안쓸 수 있도록 하는 방법이 있지않을까 해서 두 가지 방법을 생각했는데하나는 useLayoutEffect 내부에서 아래와 같은 로직으로 div요소를 만드는 방법하고, useLayoutEffect(() => { if (typeof window !== 'undefined') { const portalElement = document.getElementById(portalId) if (!portalElement) { const newPortalElement = document.createElement('div') newPortalElement.id = portalId document.body.appendChild(newPortalElement) } } }, [])아니면 document.body로 보내는 방법을 생각했는데 return createPortal( ... , document.body )두 방법 중 어느게 적절한지를 잘 모르겠어서..혹은 위 방법처럼 했을 때 어떤 문제가 생기는지도 아직 예상이 안되는데 혹시 강사님의 생각은 어떠신지 궁금합니다!
-
미해결2024 피그마UI3 기초 + 실무 탄탄 초스피드 완강코스
프레임으로 이미지를 불러오라는게 무슨 뜻인가용...
이미지를 프레임 안에 넣어도 돋보기 아이콘이 클릭이 안되는데..강의처럼 연결하려면어떻게 해야 하나요??
-
미해결루씨의 피그마 클래스
6- 디자인시스템 구축을 위한 스타일 만들기 > 그레이 선정
그레이 스타일 설정할 때 쓰려고 하는 가장 어두운 색을 설정했다면(예를들어 #000000) 여기서 명암만 10 or 100단위로 내려서 800 700 이렇게 내려가는 걸까요? 기준에 대한 감(?)이라고 해야 될 지 모르겠지만 가장 어두운 컬러를 선정할 때 그렇게 선정하는 이유와 점차 밝아지는 텀에 대한 기준을 모르겠습니다!
-
미해결루씨의 피그마 클래스
6-디자인시스템 구축을 위한 스타일 만들기 > 그레이 뒷 숫자의미
6-디자인시스템 구축을 위한 스타일 만들기에서 그레이 부분에 숫자를 900부터 시작하셨는데 해당 숫자를 기입하는데 의미가 따로 없는건지 궁금합니다.
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
[#보일러플레이트 코드 사용법 문의] 강의자료[보일러플레이트] 사용법에 대해서 문의 드려요
안녕하세요!보일러플레이트 코드를 다운받아 npm install 을 하면,route 관련 코드가 작성되어 있고,http://localhost:3000으로 브라우저를 들어가면좌측 메뉴가 disabled 되어 클릭이 안되는 상태입니다. route 설정 코드가 보일러플레이트 코드에 일부 작성되어 있는데, route 설정 강좌를 시청 해야하는지 혹은 강좌 내용대로 코드를 다시 작성해야하는지 궁금합니다. routes.ts를 보면,children의 값이 null 인 부분이 확인됩니다. 아코디언 강좌를 예로 든다면,아코디언 컴포넌트를 만들고, 여기 null 인 부분에 값을 넣는거 아닐까 생각이 드는데요 첨부된 보일러플레이트 코드를 어떻게 사용해야하는지 질문 드립니다. 감사합니다! :]
-
미해결루씨의 피그마 클래스
공유 주신 피그마 url 404에러 뜹니다
공유 주신 피그마 url 404에러 뜹니다
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
스낵바를 만들 때 snackBarContext와 snackBarSetContext
스낵바를 만들 때 snackBarContext와 snackBarSetContext를 둘로 나누셔서 관리하는데 이렇게 하신 이유나 장점을 정확히 알 수 있을까요?단점도 알려주시면 감사드리겠습니다.
-
미해결루씨의 피그마 클래스
7-상품확대 인터랙션 만들기 에서 이미지 배치 질문입니다.
안녕하세요, 강의보며 따라 연습하고 있는데7- 상품확대 인터랙션 만들기 4:21 쯤에서상품확대 인스턴스 붙여넣기 후 사진 레이어에 이미지 배치했다고 했는데 어떻게 배치가 된것일까요? 사진 이미지가 보이지않고 인스턴스 상태로만 보입니다.
-
미해결2024 피그마UI3 기초 + 실무 탄탄 초스피드 완강코스
강의 누락 "6강_시간 단축과 재사용의 끝판왕 컴포넌트와 베리언트"
6강의 강의가 누락되어 있는 것 같아요..!https://youtu.be/knxDbLl12RA?si=zhqgd50szsozynm2유튜브 링크가 연동되어 있어서 유튜브로 넘어가서 보고 왔습니다!그나저나 유익하고 쉬운 강의 정말 감사드립니다..피그마 기초 강의 중에 최고 같아요 😄
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
무한스크롤 리액트버전 | 16분 31초
16분 31초에 const useInfiniteFetcher =() => {} 여기 부분을 보게 되면pageData는 async에서 받아와서 promise가 되었는데강사님은 따로 .then을 안하셨는데 어떻게 가능한가요??
-
미해결루씨의 피그마 클래스
태그부분이 아래로 안떨어집니다
안녕하세요 강의 잘듣고 있습니다. 다름이 아니라 태그부분과 텍스트부분 오토레이아웃으로 설정하는 과정에서 태그부분의 방향을 Wrap으로 설정하였는데도 아래로 떨어지지 않는 이슈가 발생하여 문의드립니다.
-
미해결
모바일 UI 기준 크기
모바일 앱 작업을 할 때 맨 처음 기준이 되는 페이지는 보통 몇 px로 작업하시나요? (혹은 기준이 되는 기종이 있나요?) 아이폰 미니와 같이 가장 작은 화면으로 작업해놓고 늘려서 쓰는 게 더 낫나요?
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
snackbar를 createportal를 썻을 때 갯수 조절이 가능한가요?
context를 썻을때는 data length로 체크하면 최대 5개가 넘지 않게 더이상 오픈되지 않거나 가장 밑에 스낵바를 닫아 버린다던가 쉽게 구현을 가능할 것 같은데 portal를 쓰면 컨트롤이 가능한가? 궁금합니다
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 1
강의자료 github link 404 빈페이지
빈페이지로 나오는데 왜그런걸까요?https://github.com/fe-ui-study/ui-study
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
useCallback, useMemo의 차이에 대해서 궁금합니다.
[셀렉트박스 (3/5) headless #2 hook 적용] 부분에서 getTriggerProps/getListProps 처럼 각 컴포넌트가 필요한 것들을 useCallback으로 감싸고 함수형태로 제공해주셨는데요, 아래처럼 useMemo를 이용해서 객체에 값을 담아서 전달해주는 방식은 다른 걸까요??const getTriggerProps = useCallback( () => ({ selectedItem: items[selectedIndex], toggle, }), [selectedIndex, items, toggle] ); const TriggerpropsValue = useMemo(() => { return { selectedItem: items[selectedIndex], toggle, }; }, [items, selectedIndex, toggle]);
-
해결됨[React / VanillaJS] UI 요소 직접 만들기 Part 2
createPortal 활용해서 modal 만들 때 활용한 MutationObserver 코드 관련 질문
import { useEffect, useRef } from "react" const mutationObserverOption: MutationObserverInit = { childList: true, subtree: true } const ModalRoot = () => { const ref = useRef<HTMLDivElement>(null); useEffect(() => { let observer: MutationObserver if (ref.current) { observer = new MutationObserver(() => { const size = ref.current?.childNodes.length || 0 document.body.classList.toggle('no-scroll', size > 0) }) observer.observe(ref.current, mutationObserverOption) } return () => { observer.disconnect() } }, []) return (<div id="modalRoot" ref={ref}/>) } export default ModalRoot; 수업시간에 구현 되었던 코드가 어떤 순서로 동작하는지 콘솔로 확인해봤습니다. 제가 확인해 봤을 땐 처음 페이지가 렌더링 될 때 1. ModalRoot 컴포넌트가 실행 2. modalRoot div가 생성 3. useEffect가 실행4. useEffect의 Clean Up 작동까지는 예상대로 진행되었습니다. 하지만 이후에 이해가 안되는 부분이 있습니다.질문 1) 이후 useEffect가 다시 실행되는데, 의존성도 없는데 어떻게 다시 실행되는지 궁금합니다.질문 2) 영상에서 모달 버튼을 누르면 useEffect의 조건문에서 size를 콘솔로 확인하셨는데, ModalRoot 컴포넌트가 재실행되지 않고 어떻게 size를 확인할 수 있는지 궁금합니다.