웹과 앱의 차이
HTML 웹 (인터프리터 방식)
- 태그가 한줄한줄 브라우저를 읽으며 (=번역하며)
-> 사진 필요해.. img 방에 가서 logo.jpg
-> 폰트 필요해.. 구글에서 폰트 가져와 적용 - public방 '소스' - css, js, img 등 소스들이 항상 '웹'에 들러붙음
(매순간 갖다 써야 해서 필요함)
서버언어/React 앱 (컴파일 방식)
- npm start 후 독립된 객체가 생성됨 -> npm bulid 완성체(패키지, 컴파일한 결과물!)
- src방 '리소스' - index.html에 리소스 던지고 컴파일 후, 영원히 찾을 수 없음!
└ src 소스들은 더이상 필요없음. 독립적!
└ scss는 여기 - 개발자들이 CSS보다 부트스트랩 선호
(CSS 말 개 안들음, 기기마다 다르게 보이는 프론트엔드 언어들 중 가장 말 안 들음)
1. 강사님 깃 클론
"쇼핑몰 상품 레이아웃 버튼으로 사용성 개선처리한 예제"
1-1. 깃 이그노어 & 패키지.json 확인
README.md - 내 홍보문구 / 벨로그 주소 등 집어넣는 것임
패키지.json - 부트스트랩, 리액트용 부트스트랩 등등
깃 이그노어 - #상품 이미지 저작권 문제로 제외
즉, "public 방에 product 만들고, 거기에 이미지 넣어라!" 라는 뜻! (이런 거 체크하라)
1-2. 폴더 한 번 더 들어가 npm install 입력(자동 다운)
1-2-1) BUT 아직 npm start NONO!
'저작권 문제로 상품 이미지가 제외'되었으니 엑박뜰 것! (아래처럼 됨)
1-2-2) public 방에 이미지들 삽입
이때, 폴더명을 무엇으로 해야 하나? 'product'
1-3. 이제 npm start!
2. useState (리액트 훅) - DB를 가져와 가공해 사용
2-1. 임포트 { useState }
2-2. useState 배열 뜯어보기
const [ viewType, viewTypeUpdate ] = useState( 'symple' );
<!-- [ 배 열 ] 에 = [ 배열 ]을 대입!
useState 배열을 자리에 맞춰서 왼쪽으로 옮기겠다 -->
<!-- ex) const [ a, b ] = [ 1, 2 ] --> <!-- 변수 변수변경하는_함수 변수초기값 -->
const [ viewType, viewTypeUpdate ] = useState( 'symple' );
viewTypeUpdate( c )
<!-- "초기값 'symple'인 viewType 값을 'c'으로 바꿔준다!" & 렌더링 -->viewTypeUpdate 함수 - 대입식을 갖고 있음.
<!-- 화살표함수(리턴만 하는 함수)만 가능.
(리턴식만 들어가므로, += ++ 연산식 쓰면 안됨) -->
viewTypeUpdate( viewType => viewType + 1 )
<!-- 왜? ↑↑ 얘가 대입식 가지니까 -->Quiz) 원본을 보존한 채, viewType 값을 변경하라!
const [ viewType, viewTypeUpdate ] = useState( ['회사소개', '제품소개'] );
말하자면, viewType = ['회사소개', '제품소개'] 인 셈. //초기값
시도1) viewTypeUpdate 함수에 새 값 대입하면?
<script>
viewTypeUpdate( ['몰', '제품소개'] )
// 결과 viewType = ['몰', '제품소개']
// viewType = ['회사소개', '제품소개'] 라는 원본이 훼손됨!
</script>시도2) copy 변수를 생성해 viewType; 넣고, copy를 주무르면?
- 근데 이건 값이 아닌, '위치'를 받은 것!
- copy[ 0 ]=viewType[ 0 ]
<script>
const copy = viewType; // 근데 이건 값이 아닌, '위치'를 받은 것!
// copy[0]=viewType[0]
copy[0] = '몰'
viewTypeUpdate( copy )
// 결과 viewTypeUpdate( ['몰', '제품소개'] )
// 여전히 원본 훼손!
</script>답) 원본은 어떻게든 훼손된다!
그럼 어떡해?
배열의 실제 값이 아닌, 위치[ 0 ][ 1 ]를 저장 후 (=위치참고)
값은 그때그때 위치로 가서 꺼내쓴다
- const copy = [ ...viewType ]; "[ ] 기호 벗길게" (위치를 만들어줌!)
- const copy = [ '회사소개', '제품소개' ]; 새 위치에 값을 카피해 넣음!
<script>
viewType = ['회사소개', '제품소개'] // 원본
const copy = [ ...viewType ]; // '...'이란? = "[ ]기호 벗길게" (위치를 만들어줌!)
const copy = [ '회사소개', '제품소개' ]; // 새 위치에 값을 카피해 넣음!
//viewType = ['회사소개', '제품소개']와 위치 다름!
copy[0] = '몰' // copy[0]에 새 값 삽입
copy = [ '몰', '제품소개' ]; // 새 위치에 새 값이 삽입됨!
viewType = ['회사소개', '제품소개']; // 원본은 훼손되지 않음!
//--------------------
viewTypeUpdate(copy) // copy를 viewType으로 알고 산다 (값 변경 & 렌더링)
</script>답, 이제부터 copy가 대체한다 (하지만 copy라고 쓰면 안됨!)
- viewTypeUpdate( copy )
copy를 viewType으로 알고 산다 (값 변경 & 렌더링)
3. useState를 화면노출하는 방법 : 배열.map
※※ 37일차 - useState 배열/객체 다루기
https://velog.io/@la_sta/37%EC%9D%BC%EC%B0%A8-useState%EC%99%80-%EB%B0%B0%EC%97%B4%EA%B0%9D%EC%B2%B4
3-1. viewTypeUpdate( c );
리스트형 버튼 클릭하면, { viewTypeUpdate( 'list' ); }
→ div #productWrap의 클래스가 'list' 로 바뀜
→ viewTypeUpdate 함수가 viewType 값을 'list'로 바꿔준다 & 렌더링
갤러리심플 버튼 클릭하면, { viewTypeUpdate( 'symple' ); } ←초기값
→ div #productWrap의 클래스가 'symple' 로 바뀜
→ viewTypeUpdate 함수가 viewType 값을 'symple'로 바꿔준다 & 렌더링
갤러리디테일 버튼 클릭하면, { viewTypeUpdate( 'multi' ); }
→ div #productWrap의 클래스가 'multi' 로 바뀜
→ viewTypeUpdate 함수가 viewType 값을 'multi'로 바꿔준다 & 렌더링
+) div 클래스 'list' 'symple' 'multi'마다 scss 아래와 같이 달라짐
3-2. map (얘는 리액트 꺼임!)
- 배열을 하나씩 풀어헤침 (배열 목록이 끝날 때까지)
- for, for-in, forEach와 유사
- 근데 for-in문 쓰지말고, 걍 map으로 해! 말들어.
<ul>
{ <!-- 경로, 번호 -->
map( ( item, index )=>{ } )
return // 태그 뱉을 때 반드시 return 필요
}
</ul>
4. DB 아키텍처 (데이터 배열을 객체형으로)
const proinfo = [ 이미지들 ] 을
const proinfo = { 오브젝트 } 로 만들기
- 가격 : 10000원
- 상품명 : 개껌
- 간략설명 : 맛있는 개껌
- 링크값 : www.~
useState & 객체를 담은 proinfo 배열을 map하여 화면 출력
결과물
