앱개발 3주차 개발일지

오늘은 앱개발 마지막 개발일지가 될 것이다..!
수강기간이 오늘까지이기 때문... 다음에 기회가 된다며 더 오래 듣고 싶다 ㅎㅎ
사실 3주차도 하다가 갑자기 휴대폰 엑스포 앱이랑 연결에 문제가 생겼는지 오류가 나서 끝부분은 듣지 못하였다 (듣긴 했는데 프로그램 작동이 안되어서 듣기만 함 ㅠ)

실제로 수강 시스템엔 코딩스파랜드라고 튜터의 관리를 받을 수 있는데 난 혼자할 수 있다고 선언을 하는 바람에.ㅎ.ㅎ
혹시라도 들을 생각이 있다면 꼭 튜터 관리를 받으며 수강하기를!! 진도도 안밀리고 궁금증을 바로 해결할 수 있어 여러모로 도움이 많이 될 것 같습니다 :)

<<본론>>
3주차에서는 최소한의 리액트 개념을 배운다.

*리액트

리액트 네이티브란? -> 리액트 기반으로 만들어진 개발 기술
(React Native) (React.js)

*리액트 기본 구조

1. 컴포넌트

   • 정해진 엘리먼트들 사용하여 만든 화면의 일부분
   • UI의 요소, 요소를 재사용 가능한 부분으로 조각해서 운 영하는 기법 (UI 란 user interface, 사용자에게 컴퓨터를 편리하게 사용할 수 있는 환경을 제공하는 설계 내용)

2. 상태 (State)

   • 컴포넌트에서 보유, 관리되는 데이터
     === 사용할 데이터라고 편하게 생각!!

   리액트 라이브러리에서 제공해주는 useState 로 생성

   *useState : State로 관리되는 데이터를 변경하면 화면이 바뀐다.

   UI = component (state)
   -> 사용자 화면 (UI) 는 컴포에 어떤 데이터 (State) 가 주입되고 변경되냐에 따라 변화 된다!!

3. 속성 (Props)

   • 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달
     === 데이터 전달이라고 생각!!

     에서 numberofLines 는 말줄임표,
     에서 resizeMode 는 이미지가 영역을 차지하는 방식을 나타내듯이 태어날 때부터 가지고 있는 속성이 각자 있다. (키 -> 벨류 형태)

     -> 임의로 속성 정하기 가능!

     ex. <Card image = {'이미지 주소'}/>
     -> 는 image에 {'이미지 주소'} 를 갖게 됨, 즉 키 & 벨류 값을 갖게 된다

   ** 규칙

   1. 키와 벨류 (content={content}) 형태로 전달해줘야 할 것
   2. 컴포넌트 반복문을 돌릴 땐, 컴포넌트마다 고유함을 표현하기 위해, map 에서 나오는 인덱스(i) 를 key = {i} 속성 전달 형태롤 꼭 넣을 것

-----여기서 잠깐-----> map 을 제대로 알고 갑시다

map 은 1주차부터 나온 개념!
: 리스트의 길이값을 몰라도 되며, for 와는 반대로 리스트안에서 몇 번째에 있는 값인지 순서를 알려준다!

4. useEffect

   화면에 컴포넌트가 그려지면 처음 실행해야 하는 함수를 모아두는 곳
   보통 데이터 준비시 사용 , 화면이 그려진 다음 가장 먼저 실행되는 함수!

   useEffect(()=>{},[])

   1. 화면이 그려진다
   2. UseEffect 가 데이터 준비
   3. 상태 데이터 업데이트, 화면 다시 그려짐

<< 컴포넌트와 상태 이용한 로딩화면 만들기 실습 >>

분량상 모든 코드를 가져오진 않았음! 해석해야 될 중요한 부분만 가져와서 순서가 뒤죽 박죽일수도 있습니다 주의

import Loading from '../components/Loading';
// Loading.js 에서 가져옴

const [state,setState] = useState([])
// ㄴ>상태변수,ㄴ>함수

const [ready,setReady] = useState(true)
// ㄴ> 값을 변경한 함수
ready 라는 새로운 상태 값 추가! 상태 값은 컴포넌트 안에 여러개가 될 수 (O)

useEffect(()=>{

//뒤의 1000 숫자는 1초를 뜻함
//1초 뒤에 실행되는 코드들이 담겨 있는 함수

setTimeout(()=>{
setState(data) // import data from '../data.json'; 여기서의 data 와 동일
setReady(false) // false -> 로딩 화면 걷어내기
},1000)

// 한번 실행이 됨.
useEffect 안에 setTimeout 함수 존재
뒤에 있는 숫자 (1000===1초) 만큼 지연된 후 안에 코드 실행 (지연 함수다)

return ready ? : (

// 1) ready 값-> True
: return 구문에서 ? 물음표 바로 뒤의 Loading 컴포넌트가 화면에 그려짐
2) 화면이 그려지고, 1초 후에 상태값들이 채워지고 변경됨
3) ready 상태 값 -> false
4) 상태 값 변화 되었으므로 화면 다시 그려짐
5) ready 값 -> false, return 구문에서 :콜론 뒤의 MainPage 컴포넌트가 화면에 그려짐

<< State 이용한 카테고리 기능 넣기 실습 >>

카테고리 기능을 넣기 위해선 카테고리 상태가 필요하다

setTimeout(()=>{
    setState(data.tip)
    setCateState(data.tip) // data.tip 부분은 카테고리 마다 달라질 상                                   태 변수!
    setReady(false) // ready false -> 로딩 멈춰
},1000)

},[])

**이 부분이 카테고리 함수에 해당!!

const category = (cate) => {
if(cate == "전체보기"){
//전체보기면 원래 꿀팁 데이터를 담고 있는 상태값으로 다시 초기화
setCateState(state) // -> 전체를 의미
}else{
setCateState(state.filter((d)=>{
return d.category == cate
}))
}
}

// filter 함수란? 리스트를 새로 만드는 역할을 한다
// d.category -> 카테고리를 꺼내 사용할 것이다

Category State 는 줄여서 Catestate 라고 쓰고 Set CateState로 변경 될 수 있음

위 실습에서 2주차때 다루었던 이 또 나오는데 버튼을 사용할때 가장 중요한 것은 바인딩이다. onPress를 활용하여 카테고리 함수 (각 이름)가 실행되게끔 바인딩 하는 것을 빼먹으면 안된다!

3주차는 앱 작동에 오류가 생기는 바람에 여기까지 공부를 하였다.. 꼭 해결해보도록 노력해보겠다ㅠ (오늘이 마지막 수강일이지만,,)
짧은 기간였지만 앱개발을 조금이나마 체험해볼 수 있어서 유익한 시간였다! 실제로 일상에서 사용할 수 있는 프로그래밍을 접해보니 흥미롭고 끝까지 코딩과 친하게 지내야겠다는 생각도 들었다 ㅎㅎ

이번 학기 수업때 어찌 하다보니 다른 전공 수업에서 파이썬 수업을 듣게 되었는데 이번에는 개발 일지를 꾸준히 꼼꼼하게 작성하며 시험공부 겸 열심히 기록을 남겨보려고 한다 ㅎㅎ
나의 개발 일지는 여기서 끝나지 않았다는 말씀!
계절학기때 코딩 수업을 들을까 고민도 해보고 있다 (사실 구루 들어야함...전공에서 하는 프로그래밍 캠프 비스무리 한거..ㅜ)
확실히 그날 공부한 것을 토대로 개발일지를 작성하니 단순히 일회성 지식이 아니라 계속 머릿속에 축적되는 기분이 들어 뿌듯하고 알차다ㅎㅅㅎ 개발일지 작성하는 시간만을 기다릴 수도..ㅎ

작성하며 우연히 다른 서포터즈분들이 작성한 개발일지도 구경했는데 엄청나서 스스로 반성하기도 했음.. 내가 해온 건 수박 겉핥기..일뿐이라는 걸...깨달아버린..OTL
하지만 앞으로의 발전을 지켜봐주시길 바랍니다 !! 이상 코딩초보운전사의 우당탕탕 앱개발 체험 후기 (에 개발 일지를 곁들인..) 였습니다 감사합니다람쥐