JOB (7) 썸네일형 리스트형 내 아들은 효자인가 #6 - Input 조작2 저번에 예고했던 대로~ 다른 컴포넌트에게 영향을 주는 이벤트들을 해보도록 하자~ 이 부분 지금 보는 것과 같이 유닛과 아이돌이 따로 놀고 있는 것을 볼 수 있다. 유닛을 선택했을 때 소속 아이돌만 나오도록 바꿔보도록 하겠다~! 아이돌이 너무너무 많기 때문에... 일단은 유성대와 발키리로만 조작했다가 나중에 디비 연결하게 되면 넣어보도록 하자! 데이터를 어떻게 들여오면 좋을지 interface를 먼저 정의해보고, 그에 맞게 데이터를 설정했다. // select item interface interface SelectVal { value: string; name: string; } // 삭제 예정 ============= const allIdol: SelectVal[] = [ { valu.. 내 아들은 효자인가 #5 - Input 조작 1 이번 시간에는 Input영역에 간단한(나에겐 안 간단한) 조작을 추가해보겠다. 위에서부터 차례대로 적용해보기로 하자. react에서는 이벤트를 연결해주기 위해서는 state라는 것을 사용하는 것이 불가피한데, state 생성 > state-이벤트 연결 이것을 반복적으로 해주면 된다. (이 부분을 제어하는 코드가 함수형이기 때문에 나는 state hook을 사용했다) * Select 이 둘의 값을 저장할 state를 생성해준다. const [unit, setUnit] = useState("all"); const [idol, setIdol] = useState("all"); 그리고 select의 event인 onChange부분에 함수를 작성해준다. 또, value가 state 바뀔 때마다 설정되도록 valu.. 내 아들은 효자인가 #4 - component 분리 현재 코드는 한 파일에 다 들어가 있는 구조이다. 조각조각 쪼개버려서 컴포넌트화 시켜주려고한다. 앞으로 여러 화면을 만들 예정이기에 화면(view)-구성요소(component) 이런 식으로 폴더를 나눠주었다.. (참고로 이름은 그냥 내가 자주 쓰는 단어들로 지은 것이다. 통상적으로 어떻게 쓰는지는 잘 모르겠다.) 폴더를 만들었으니 다시 내가 만든 화면을 노려봐준다. 컴포넌트를 어떻게 나눠야 잘 나눴다고 칭찬을 들을까 생각해보는 단계다. 사실 별거 없어서 선택지가 몇 없지만, 나는 input과 output영역 이렇게 나눠서 제작해보기로 한다. 그러면 화면은 1개, 컴포넌트는 2개로 나눠진다. 각각 파일을 만들어서 분리해보자! **error 중간에 이름도 위치도 다 맞는데 에러가 떴다. Property 'i.. 내 아들은 효자인가 #3 - TypeScript로 변환하기 제목은 변환하기로 썼지만 사실상 다시 만들기... 본래 자바스크립트는 따로 타입을 지정하지 않는 동적 언어이다. 때문에 중간에 같은 변수에 다른 타입을 집어넣어도 따로 에러를 뱉어내지는 않는다. 이와 다르게 javascript에서 파생된 변수를 타입을 지정하여 정적으로 사용하는 typescript가 있다. 저 동적 언어의 특성 때문에 중간에 변수 타입이 바뀌면서 생기는 에러를 잡기 힘들어 변수를 정적으로 지정하는 타입스크립트가 나온 게 아닌가 싶다. 사실 이렇게 작은 거에서 굳이 타입스크립트로 바꿀 필요가 없긴 한데, 감을 잃지 않게 타입스크립트로 진행해보기로 한다! 타입스크립트로 바꾸는 방법 찾아보다가 알게 됐는데 npx create-react-app [이름] --template typescript -.. 내 아들은 효자인가 #2 - Material-UI 사용하기 본격적으로 이제 만들어보기로한다! 화면설계 설명해보자면, 해당 아이돌의 가챠의 결과값을 입력하면 효자인지 아닌지 알려주는 간단한 프로그램이다. 가끔식 나와주기만 하면 효자라고 보이는 콩깍지가 씌워져 만들어보기로 했다. 구역을 나눠보자면 입력을 담당하는 공간과 결과값을 나타내는 공간으로 분리할수있다. HTML작성 기존의 App.js를 수정하여 일단은 쭉 작성해보았다. import './App.css'; function App() { return ( 내 아들은 효자인가? 유닛: 전체 유성대 발키리 아이돌: 전체 모리사와 치아키 신카이 카나타 나구모 테토라 센고쿠 시노부 타카미네 미도리 이츠키 슈 카게히라 미카 한스타 일스타 사용 다이아: 개 사용 스카우트 티켓: 개 뽑은 해당 카드 수: 개 확인 당신의 (아.. 내 아들은 효자인가 #1 - React 시작하기 [22. 5. 12] ㅋㅋ.ㅋ.ㅋ.ㅋ..ㅋ... 타입스크립트로 바꾸면서 처음부터 다시만든 셈이 되었다. 타입스크립트로 진행할 생각이없다면 상관없지만, 아니라면 이글을 보는게 나을듯싶다. https://sheep-h.tistory.com/11 내 아들은 효자인가 #2 - TypeScript로 변환하기 제목은 변환하기로 썼지만 사실상 다시 만들기... 본래 자바스크립트는 따로 타입을 지정하지 않는 동적 언어이다. 때문에 중간에 같은 변수에 다른 타입을 집어넣어도 따로 에러를 뱉어내지는 sheep-h.tistory.com 일단 작은것 부터 완성해나가서 내 흥미를 떨어트리지 않게 하는것이 목표! 때문에 간단한 front 화면 먼저 만들어 보기로 했다. React 시작하기 React를 해본적은 있지만, 너무 오랜.. 내 아들은 효자인가 #0 프로젝트를 하고싶은데 아이디어가 없다.......... 내가 mbti가 S여서 그런가보다 싶다. 상상력이 부족하다.... 그렇게 아무생각없이 게임을 하며 시간을 보냈는데 HTML 삽입 미리보기할 수 없는 소스 후.... 한정가차의 복각이라..... 유성대 오시로서 그냥 넘어갈수없었다... 딱 30연만 돌려보자 아니 치아키는 그렇다 쳐도 왜 테츠까지 안나오는...? 그래서 포기하려는 찰라 ??: 50연 5성 확정이잖아 50연까지 돌려봐~ 나: ㅇㅋㅇㅋ 후.. 젠장...^^ 피쳐도 아니고 통상.... 그것도 중복.... 그래도 50연째는 테츠나와서..... 조금 기쁘다... 아니근데 50연에 4성도 안나오면... 테츠가 챠키보다 더 나쁜거아냐.... 라는 일을 겪고나서 생각난 아이디어 "과연 내 아들은 효자.. 이전 1 다음
