묻고 답해요

아직 수강전인데

미해결

피그마UI3 기초 + 실무 탄탄 초스피드 완강코스

아직 수강전이데 피그마 무료버전으로 모든 강의 따라갈 수 있을까요? 아니면 유료버전 구매가 필요할까요?

• figma
• ui

scrollSpy 바닐라버전에서 data-index를 찾는 코드 질문

해결됨

코어 프런트엔드 UI - Part 1

강사님 안녕하세요. 항상 강의 잘 보고 있습니다 🙂 완강하고 다시 보다가, scrollSpy 바닐라버전에서 궁금한 점이 있어서 질문 남깁니다! 네비게이션의 버튼을 클릭 했을때, 버튼의 부모인 li의 index 값을 찾기 위해 사용했던 e.composedPath() 대신 closest('li') 메서드 를 사용하는 것은 어떤지 궁금해서요! 퍼블리셔로 일하면서, 클릭한 타겟의 가까운 부모를 찾을때 자주 사용했던 메서드인데, e.composedPath()를 사용한 다른이유(강의에서 설명한 이유 외에)가 있으신지 궁금합니다!

• react
• typescript
• dom
• ui
• vanilla-js

2강 질문

미해결

피그마UI3 기초 + 실무 탄탄 초스피드 완강코스

2강 듣던 중 강의 이모티콘 사진을 다운받고 싶은데, 영상 하단에 더보기란이 없어요ㅠㅠ 어디서 받아야 하나요?

• figma
• ui

제네릭을 사용하실 때 콤마

해결됨

코어 프런트엔드 UI - Part 2

제네릭을 사용하실 때 콤마는 제네릭과 JSX의 혼동방지 제네릭 구문을 명확히 해서 코드의 가독성 높임 TSX 파일에서 사용할 때 하는 일반적인 관례 로 인한 이유가 맞을까요?

• react
• typescript
• dom
• ui
• vanilla-js

피그마 활용 클래스 > 4 컴포넌트 boolean

미해결

피그마 시작하기

섹션 4. 피그마 활용 클래스 강의 중 4-4강에서 버튼을 만들어 하트 아이콘을 넣고 컴포넌트화 시킨 후 하트 아이콘을 클릭하고 boolean 기능을 추가하는 부분이 현재 피그마 UI와 달라서 어떻게 만들고 적용하는 지 모르겠습니다. 업데이트 되면서 패널 속성이 바뀐 것 같은데 어떻게 만들고 적용하면 되나요?

• 웹-디자인
• 모바일-디자인
• figma
• ui
• ux

그룹에 대한 질문입니다

미해결

피그마 시작하기

2-프레임과 그룹의 차이 학습후 질문드립니다 그룹을 사용하는 이유가 궁금합니다. 프레임이 더 이점이 많은것 같아서요 그룹을 어떻게 만드셨나요? 하단 UI 상으로는 프레임과 도형정도만 있습니다

• 웹-디자인
• 모바일-디자인
• figma
• ui
• ux

popover createPortal 방식에서

해결됨

코어 프런트엔드 UI - Part 2

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 ) 두 방법 중 어느게 적절한지를 잘 모르겠어서.. 혹은 위 방법처럼 했을 때 어떤 문제가 생기는지도 아직 예상이 안되는데 혹시 강사님의 생각은 어떠신지 궁금합니다!

• react
• typescript
• dom
• ui
• vanilla-js

프레임으로 이미지를 불러오라는게 무슨 뜻인가용...

미해결

피그마UI3 기초 + 실무 탄탄 초스피드 완강코스

이미지를 프레임 안에 넣어도 돋보기 아이콘이 클릭이 안되는데.. 강의처럼 연결하려면 어떻게 해야 하나요??

• figma
• ui

6- 디자인시스템 구축을 위한 스타일 만들기 > 그레이 선정

미해결

피그마 시작하기

그레이 스타일 설정할 때 쓰려고 하는 가장 어두운 색을 설정했다면(예를들어 #000000) 여기서 명암만 10 or 100단위로 내려서 800 700 이렇게 내려가는 걸까요? 기준에 대한 감(?)이라고 해야 될 지 모르겠지만 가장 어두운 컬러를 선정할 때 그렇게 선정하는 이유와 점차 밝아지는 텀에 대한 기준을 모르겠습니다!

• 웹-디자인
• 모바일-디자인
• figma
• ui
• ux

6-디자인시스템 구축을 위한 스타일 만들기 > 그레이 뒷 숫자의미

미해결

피그마 시작하기

6-디자인시스템 구축을 위한 스타일 만들기에서 그레이 부분에 숫자를 900부터 시작하셨는데 해당 숫자를 기입하는데 의미가 따로 없는건지 궁금합니다.

• 웹-디자인
• 모바일-디자인
• figma
• ui
• ux

[#보일러플레이트 코드 사용법 문의] 강의자료[보일러플레이트] 사용법에 대해서 문의 드려요

해결됨

코어 프런트엔드 UI - Part 1

안녕하세요! 보일러플레이트 코드를 다운받아 npm install 을 하면, route 관련 코드가 작성되어 있고, http://localhost:3000으로 브라우저를 들어가면 좌측 메뉴가 disabled 되어 클릭이 안되는 상태입니다. route 설정 코드가 보일러플레이트 코드에 일부 작성되어 있는데, route 설정 강좌를 시청 해야하는지 혹은 강좌 내용대로 코드를 다시 작성해야하는지 궁금합니다. routes.ts를 보면, children의 값이 null 인 부분이 확인됩니다. 아코디언 강좌를 예로 든다면, 아코디언 컴포넌트를 만들고, 여기 null 인 부분에 값을 넣는거 아닐까 생각이 드는데요 첨부된 보일러플레이트 코드를 어떻게 사용해야하는지 질문 드립니다. 감사합니다! :]

• react
• typescript
• dom
• ui
• vanilla-js

공유 주신 피그마 url 404에러 뜹니다

미해결

피그마 시작하기

공유 주신 피그마 url 404에러 뜹니다

• 웹-디자인
• 모바일-디자인
• figma
• ui
• ux

스낵바를 만들 때 snackBarContext와 snackBarSetContext

해결됨

코어 프런트엔드 UI - Part 2

스낵바를 만들 때 snackBarContext와 snackBarSetContext를 둘로 나누셔서 관리하는데 이렇게 하신 이유나 장점을 정확히 알 수 있을까요? 단점도 알려주시면 감사드리겠습니다.

• react
• typescript
• dom
• ui
• vanilla-js

7-상품확대 인터랙션 만들기 에서 이미지 배치 질문입니다.

미해결

피그마 시작하기

안녕하세요, 강의보며 따라 연습하고 있는데 7- 상품확대 인터랙션 만들기 4:21 쯤에서 상품확대 인스턴스 붙여넣기 후 사진 레이어에 이미지 배치했다고 했는데 어떻게 배치가 된것일까요? 사진 이미지가 보이지않고 인스턴스 상태로만 보입니다.

• 웹-디자인
• 모바일-디자인
• figma
• ui
• ux

강의 누락 "6강_시간 단축과 재사용의 끝판왕 컴포넌트와 베리언트"

미해결

피그마UI3 기초 + 실무 탄탄 초스피드 완강코스

6강의 강의가 누락되어 있는 것 같아요..! https://youtu.be/knxDbLl12RA?si=zhqgd50szsozynm2 유튜브 링크가 연동되어 있어서 유튜브로 넘어가서 보고 왔습니다! 그나저나 유익하고 쉬운 강의 정말 감사드립니다.. 피그마 기초 강의 중에 최고 같아요 😄

• figma
• ui

무한스크롤 리액트버전 | 16분 31초

해결됨

코어 프런트엔드 UI - Part 1

16분 31초에 const useInfiniteFetcher =() => {} 여기 부분을 보게 되면 pageData는 async에서 받아와서 promise가 되었는데 강사님은 따로 .then을 안하셨는데 어떻게 가능한가요??

• react
• typescript
• dom
• ui
• vanilla-js

태그부분이 아래로 안떨어집니다

해결됨

피그마 시작하기

안녕하세요 강의 잘듣고 있습니다. 다름이 아니라 태그부분과 텍스트부분 오토레이아웃으로 설정하는 과정에서 태그부분의 방향을 Wrap으로 설정하였는데도 아래로 떨어지지 않는 이슈가 발생하여 문의드립니다.

• 웹-디자인
• 모바일-디자인
• figma
• ui
• ux

모바일 UI 기준 크기

미해결

모바일 앱 작업을 할 때 맨 처음 기준이 되는 페이지는 보통 몇 px로 작업하시나요? (혹은 기준이 되는 기종이 있나요?) 아이폰 미니와 같이 가장 작은 화면으로 작업해놓고 늘려서 쓰는 게 더 낫나요?

• ui
• 디자인
• 모바일

snackbar를 createportal를 썻을 때 갯수 조절이 가능한가요?

해결됨

코어 프런트엔드 UI - Part 2

context를 썻을때는 data length로 체크하면 최대 5개가 넘지 않게 더이상 오픈되지 않거나 가장 밑에 스낵바를 닫아 버린다던가 쉽게 구현을 가능할 것 같은데 portal를 쓰면 컨트롤이 가능한가? 궁금합니다

• react
• typescript
• dom
• ui
• vanilla-js

강의자료 github link 404 빈페이지

해결됨

코어 프런트엔드 UI - Part 1

빈페이지로 나오는데 왜그런걸까요? https://github.com/fe-ui-study/ui-study

• react
• typescript
• dom
• ui
• vanilla-js