경북대 FE 이은경_1주차 과제 Step1 #40
Conversation
This reverts commit 383d66e.
react-gift-react-foundationFE 카카오 선물하기 1주차 과제: React 기초 Requirements
질문 및 전달드리고 싶은 사항
|
|
현재 폴더 구조 |
There was a problem hiding this comment.
안녕하세요!
현재 프로젝트가 정상적으로 구성되지 않아 실행이 어렵습니다.
지금은 코드 레벨에서의 코멘트보다는 답답하신 점을 해소해보는게 먼저일 것 같네요 ㅎㅎㅎ
일단 정상적으로 동작하지 않는 부분을 해결하려면... 동작 한 번 시켜보면 되겠죠?
npm start로 프로젝트를 실행하면 정상적으로 앱이 확인되나요?
만약 정상적으로 확인되지 않는다면, 터미널의 에러 로그를 통해 무엇이 문제인지 알 수 있겠죠?
이제 그 로그와 함께 아래의 내용을 한 번 읽어보시고, 해결해 보시면 좋겠습니다 ㅎㅎ
기능별로 나눠서 커밋을 했어야했는데 가장 처음 CRA폴더에서 한번에 커밋을 해버려서 처음 설정한 부분 alias 및 eslint, prettier가 한번에 커밋된 점 죄송합니다.
이후부터는 나눠서 커밋을 올리긴했지만 처음부터 진행이 많이 꼬인것같아서 이 경우 다시 처음부터 진행을 하는 것이 좋을지 문의드리고 싶습니다..
요것은 본인의 판단에 따라 작업하시면 될 것 같습니다.
만약 해결할 수 없을 정도라고 판단되면 그냥 처음부터 다시 CRA로 프로젝트를 세팅하는 것도 방법이겠네요.
개발자는 항상 비용 대비 효율을 생각해야 합니다.
최소 비용으로 최대 효율을 내려면 현재 코드베이스를 삭제하고 다시 구축하는게 좋겠죠?
얼마 작업이 이루어지지도 않았으니까요.
하지만 학습의 관점에서 생각해 보자면 이런 상황을 해결하면서 성장할 수 있으니 좋은 기회라고 생각할 수도 있을 것 같구요 ㅎㅎ
제가 추천드리는 방법은 my-app 바깥 root 경로에 CRA로 프로젝트를 하나 더 세팅하는 거에요.
root 경로에서 npx create-react-app test-app --template typescript를 터미널에 입력하시면 타입스크립트 템플릿을 사용한 CRA 프로젝트가 생성될 거에요.
기존 my-app과 새로 생성된 test-app을 비교하시면서 어디가 다르고, 어떻게 수정해야할지 고민해 보시면 좋을 것 같습니다 ㅎㅎ
조금 힌트를 드리자면, 우리가 보는 이 웹 페이지들을 구성하는 뼈대는 무엇일까요?
그리고 React가 SPA(페이지가 하나인 앱)이라고 불리는 이유는 무엇일까요?
그렇다면 React 프로젝트에 필수적으로 들어가야 하는 파일은 무엇일까요? (이게 지금 my-app에는 없네요!)
전체적으로 제가 과제를 정확히 제대로 이해를 한 것인지 잘 모르겠습니다.. 이번주 과제는 세팅하는 과정이라고 생각했는데 전체적인 결과를 모르는 상황이여서 그런지 어떤부분을 설정해야하는지 헷갈렸고 모각코 시간에 팀원들에게 배운 기본적인 폴더구조와 블로그를 참고하여 구성하였습니다.
step1을 마치고 나면 확인 가능한 결과는 "정상적으로 동작하는 React 앱" 입니다.
어떤 폴더 구조인지, eslint나 prettier 설정은 어떻게 해야하는지... 이런 것들은 그 다음에 생각해 보셔도 괜찮아요.
지금 가장 중요한 것은 React가 어떤 것이고, CRA는 React가 정상적으로 동작하기 위해 필요한 어떤 것들을 작업해주고 있는지 파악하는 것이에요.
위에서 말씀드린 것처럼, 지금 my-app에는 웹 사이트가 정상적으로 동작하기 위해 필요한 무엇인가가 누락되어 있어요.
그것이 뭔지 찾아내시고, React가 그 파일을 시작점으로 하여 어떻게 웹 사이트를 우리에게 보여주는지 한 번 조사해 보시면 좋겠습니다 ㅎㅎ
| 1. webpack은 무엇이고 어떤 역할을 하고 있나요? | ||
| JavaScript 애플리케이션을 위한 정정 모듈 번들러 입니다. | ||
| -> 정적 모듈 번들러 : HTML, CSS, Javascript 등 웹 애플리케이션을 지원하는 각각의 모듈을 병합된 하나의 결과물로 만드는 도구 |
There was a problem hiding this comment.
사실 이 질문은 파고 들어가면 한참 걸리는 내용이긴 합니다.
아래 두 가지 질문에 대한 대답을 생각해 보시면 조금 더 깊이있게 공부하실 수 있을 것 같아요!
- 모듈이란 무엇일까요?
- 왜 그것을 하나의 결과물로 병합할까요?
| 2. 브라우저는 어떻게 JSX 파일을 읽을 수 있나요? | ||
| JSX는 자바스크립트의 JS와 XML의 X를 합친 말이며 자바스크립트 코드 안에서 바로 태그 기반의 구문을 써서 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장입니다. | ||
| 브라우저는 JSX를 해석하지 못하기 때문에 바벨이라는 도구를 사용하여 JSX를 변환 컴파일링 해주어야 합니다. |
There was a problem hiding this comment.
- 바벨이 JSX를 변환하고 나면 어떻게 바뀔까요?
- 왜 변환 과정이 필요한 JSX를 사용하는 걸까요?
| 3. React에서 상태 변화가 생겼을 때 어떻게 변화를 알아챌 수 있나요? | ||
| useState, useEffect 등을 이용해서 State를 관리합니다. | ||
| - 컴포넌트에서 상태는 useState를 사용하여 관리하고, 상태를 여러 형태로 변경해서 사용해야하면 useReducer를 사용하여 관리합니다. | ||
| 이처럼 여러방법을 이용해서 상태변화를 체크해줍니다. |
There was a problem hiding this comment.
요것은 참 많은 내용이 얽혀있다고 생각하는데요,
일단은 React에서 상태가 무슨 역할을 하는지 고민해 보시면 좋을 것 같습니다 ㅎㅎ
그리고 상태를 변경하려면 어떤 방법을 사용해야 할까요?
조금 더 고민할 거리라면... 상태가 변화하면 무슨 일이 벌어질까요?
|
헉.. 제가 돌아가서 올렸는데 다시돌려보니 말씀하신것처럼 오류가 뜨네요... 몇 번 삭제를 하고 바꾸면서 같이 많이 지워버린것같습니다.. 길고 자세하게 알려주시고 팁도 알려주셔서 정말 감사합니다! |
|
진행을 하다보니 오류사항이 너무 많아서 참고로 올려주신 코드를 보면서 수정하다가 안되서 참고자료를 보면서 주석으로 추가하여 공부를 진행하였습니다. 2주차는 좀 더 열심히 참여하겠습니다 감사합니다. |
| cursor: 'pointer', | ||
| transition: 'background-color 200ms', | ||
| }, | ||
| ({ size = 'responsive' }) => { |
There was a problem hiding this comment.
현재 모든 컴포넌트에서 스타일 분기처리가 요런 방식으로 작성되어 있는데요,
가독성이 좋지 않다고 느껴지지 않나요?
사이즈마다, 테마마다 사용할 스타일을 컴포넌트 스코프 밖에 정의해두고 styleBySize[size] 요런 방식으로 가져다 쓰면 가독성이 좋아지지 않을까요~?
| type Props = { | ||
| theme?: 'kakao' | 'outline' | 'black' | 'lightGray' | 'darkGray'; | ||
| size?: 'large' | 'small' | 'responsive'; | ||
| } & React.ButtonHTMLAttributes<HTMLButtonElement>; |
There was a problem hiding this comment.
타입을 정의할 때 type을 사용해주셨는데, interface와는 어떤 차이가 있을까요?
No description provided.