인프런 커뮤니티 질문&답변
작성한 질문수
코드가 왜 그런지 모르겠는데, 이럴땐 어떻게 공부해야하나요?
해결된 질문
24.10.03 10:02 작성
·
34
1
7.4 PlayListCarousel - 1 강의의 6분 15초를 보시면,
<div className="relative left-[-45px]">
부분이 있는데요.
left-[-45px]을 해야 화살표가 보이게 되는데, 이게 왜 그런질 모르겠습니다.
근데 제가 질문 드리고싶은 것은, 저 코드가 어떤 원리로 작동되는지가 아닙니다.
이럴때는 스스로 그냥 계속 문서를 참고하든 개발자도구를 참고하든 이해 될때까지 파고드는게 맞는 방법인지 여쭤보고 싶습니다.
이것 말고도 제가 어려웠던 부분에 대한 예시를 들자면,
1) components 폴더에 저장되는 것들과
components/elements 폴더에 저장되는 것들의 차이를 정확히 모르겠음.
2) 태그를 감쌀때 어떤 것은 div로 컨테이너를 주시고 어떤것은 안주시는 경우가 있는데, 차이를 모르겠음.
3) useUIState에 저장된 변수 이름이 "homeCategory"인데, 제 생각엔 이것 보다는 "selectedSubject" 같은 이름이 더 직관적이라 생각하는데, 그럼에도 제 생각보단 선생님 생각이 맞을건데 제 생각이 어느부분이 부족한질 모르겠음.
4) 위와 같은 문제들을 해결하고 싶어서, 책을 찾아보려 하는데 리액트 훅을 설명해주는 책들은 많은데, HTML CSS를 어떤 구조로 짜야 하는지, 리액트 앱 만들때 폴더구조는 어떻게 하는게 좋은지에 대한 책은 없어서 어떻게 해야할지 모르겠음.
이런 어려움이 있었습니다. 혹시 공부법 조언 부탁드려도 될까요?
답변 3
0
2024. 10. 03. 11:19
2) 태그를 감쌀때 어떤 것은 div로 컨테이너를 주시고 어떤것은 안주시는 경우가 있는데, 차이를 모르겠음.
여러 목적이 있는데요.
1.레이아웃 잡을 용도로 넣기도 합니다.
2.스타일 wrapper 목적으로 넣기도 합니다.
3.Tree를 깔끔하게 만들기 위해서도 넣습니다.
3) useUIState에 저장된 변수 이름이 "homeCategory"인데, 제 생각엔 이것 보다는 "selectedSubject" 같은 이름이 더 직관적이라 생각하는데, 그럼에도 제 생각보단 선생님 생각이 맞을건데 제 생각이 어느부분이 부족한질 모르겠음.
아뇨, 변수명에 정답이 없어서 생각해주신 방향으로 해주셔도 됩니다. 아래 중에서 제일 직관적인것을 생각하는것도 좋겠네요.
음악 카테고리에 사용할 수 있는 변수명을 추천해드릴게요:
1. genreFilter - 장르를 기준으로 필터링하는 경우
2. moodFilter - 음악의 분위기나 감정을 기준으로 필터링하는 경우
3. artistFilter - 아티스트를 기준으로 필터링하는 경우
4. releaseYearFilter - 발매 연도를 기준으로 필터링하는 경우
5. instrumentFilter - 악기를 기준으로 필터링하는 경우
이 변수명들은 필터링하려는 기준에 따라 유연하게 사용할 수 있어요!
4) 위와 같은 문제들을 해결하고 싶어서, 책을 찾아보려 하는데 리액트 훅을 설명해주는 책들은 많은데, HTML CSS를 어떤 구조로 짜야 하는지, 리액트 앱 만들때 폴더구조는 어떻게 하는게 좋은지에 대한 책은 없어서 어떻게 해야할지 모르겠음.
*HTML/CSS 구조를 예쁘게 만드는것이 개발자의 덕목이긴 합니다. 근데 실무에서는 마감일을 맞추고 잘동작하는것이 더 중요하죠. 이것을 선행후 리팩토링때 고려해보면 좋겠네요.
HTML, CSS -> 조은님의 html , 구조는 시멘틱, 접근성 고려하면 좋겠네요.
리액트 앱 만들때 폴더구조 -> 유용태 님의 FSD 글 추천합니다.
0
2024. 10. 03. 11:14
1.
components/elements vs components 의 차이를 제대로 말씀 안드리고 넘어갔을수 있겠네요.
그 둘의 차이점은 elements는 조금 더 작은 컴포넌트 조각을 넣었구요.
그를 이용한 더 큰 컴포넌트를 components에 정의했어요.
*사람마다 다른 기준으로 묶기 때문에 각자의 원칙에 고민 해주시면 좋겠네요.
0
2024. 10. 03. 11:13
안녕하세요.
1.
화살표를 45px 움직인 이유는 기존의 컴포넌트를 커스터마이징 하기 위함입니다.! 처음부터 컴포넌트를 만들었으면 그럴 이유는 없겠죠. radix에서 제공하는 ui component로 빠르게 개발하는것에 대한 단점입니다.
아래는 순수 CSS 입니다. 이를 tailwind css로 바꾼것 입니다.
```html
<div class="relative-box">
이 박스는 왼쪽으로 45px 이동했어요!
</div>
```
```css
.relative-box {
position: relative; /* 박스를 기준으로 위치를 설정 */
left: -45px; /* 박스를 왼쪽으로 45px 이동 */
background-color: lightblue;
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid blue;
}
```
- position: relative: 요소의 위치를 기준으로 이동할 수 있도록 만들어줘요. 이 경우, 요소는 원래의 위치를 기준으로 상대적인 변화를 적용받아요.
- left: -45px: 요소를 왼쪽으로 45픽셀 만큼 이동시켜요. - 값이기 때문에 왼쪽으로 이동하게 돼요.
이 코드를 적용하면 .relative-box 요소는 원래 위치에서 왼쪽으로 45픽셀 이동된 상태로 렌더링돼요.
2024. 10. 03. 14:59
아.. 이런 자료가 역시 다 있군요.. 선생님 설명 덕분에 많이 해결됐습니다. 정말 감사합니다.