정보처리기사 실기 준비.. 그리고 react

정보처리기사.... 외울게 너무 많다 후... 실기 꼭 붙어서 자격증 보유하고 싶은데, 졸업작품 통합도 해야되랴, 학기 수업도 들어야 되랴, 할게 너무 많다.. 그래도 최대한 선택과 집중하려고 노력하고 있 뜨아...

오늘은 6시간정도 정처기 공부를 했는데, 10월16일이 오기전까지 최대한 정처기에 많은 시간을 쏟아 부어서 무조건

합격할 자신이 들도록 공부할것이다 !!

뭐..통합과 개발 비중은 현저히 줄겠지만 ... 어쩔 수 없다 ㅠㅠ 

정처기 실기 떨어지면 너무 슬플것같다... 지금이 마지막 기회라고 생각하고 최선을 다할것이다......

일단 프로그래밍 언어와 SQL은 확실히 잡고갈 수 있도록 암기하고, 

나머지 용어들은 반복적으로 보면서 키워드 위주로 암기할 예정이다 한 100번 정도 보면 외워지겄지뭐 ..

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

사용자의 요청은 Client에서 이뤄진다 요청(reqeust)는 server에 가서 Database에서 유저가 찾는 데이터가 있는지 확인하고 요청한 값이 데이터베이스에 저장된 값과 일치하는지 확인하고 만약 맞다면 client에 response해준다.

 

client에서 server에 request할 때 AXIOS를 사용하게 되는데, AXIOS는 jQuery를 사용할 때 AJAX라고 보면됨.

npm install axios로 받을 수 있다. 

 

useEffect란? 컴포넌트가 렌더링될 떄마다 특정 작업을 수행할 수 있게 만드는 Hook

useEffect는 특점 component가 mount, unmount, update될 때 특정 작업을 처리할 수 있다.

 

그렇다면 mount/unmount/update란 무엇인가?

React Life Cycle(리액트 생명주기)라고한다.

 

Component들은 state나 props가 변경되면, update가 진행되며 다시 rendering된다. Input이 달라지니

output도 달라진다. 그리고 상위 component가 update되면 그에 속한 하위 component들도 다시 mount가 된다.

component가 update될 때 순서는

1. New Props/setState()

2. render()

3. componentDidUpdate()

순이다.

 

componentDidUpdate()함수는 update가 이뤄지고 render가 완료된 후 실행되는 메소드이다. 최초 마운트 될 때는 실행되지 않는다.

componentDidUpdate(prevProps, prevState, snapshot)

 

componentDidUpdate는 3개의 인자를 받는다.

prevProps: 업데이트 되기전 props를 인자로 받아서 이전 props와 차이점을 확인한 후

추가적인 액션을 설정하는것에 유용하다.

 

EX) componentDidUpdate(prevProps){

if(this.props.Id !== prevProps.Id){

 fetchData(this.props.Id);

 }

}

 

prevState: prevProps와 마찬가지로 업데이트가 되기 전 state정보를 인자로 받을 수 있다. 

이전 state와 비교하여 실행여부를 결정할 때 주로 사용된다.

componentDidUpdate(prevProps, prevState){

 if(this.state.Id !== prevState.Id){

 fetchDate(this.props.Id);

 }

}

 

snapshot : getSnapshotBeforeUpdate() 메소드를 구현했다면 세번 째 인자로 snapshot을 받을 수 있다.

componentDidUpdate를 이용할 떄 setState를 주의해야 한다. 조건문 등으로 제어해두지 않으면 무한 루프에

빠질 수 있기 때문이다.

setState > componentDidUpdate > setState...

 

Unmount(제거)

해당하는 Component가 DOM상에서 제거 될 떄 실행되는 lifeCycle

 

componentWillUnmount

최종적으로 제거되기전 실행, component내에서 실행되는 네트워크 요청, 타이머 이벤트 등 지속적으로 이뤄지는 이벤트 해제하는데 유용, 

예로 setInterval 메소드를 실행할 때 close해주지 않으면 전역에서 타이머가 돌것이기 때문에 제거되기 전에 이러한 것들을 해제 시켜줘야한다.

 

공부 참고 : https://velog.io/@cyranocoding/React-Life-Cycle-%EC%8B%9C%EB%A6%AC%EC%A6%88Mount-%ED%8E%B8-tkjzpagfsu

React Life Cycle 시리즈(Update/Unmount 편)

 

그럼 request 와 server에서 response해주는 과정을 간략하게 코드로 정리해보자면

 

function LandingPage(){

  useEffect(() => {

  axios.get('/kkk/wotson')

  .then(response => console.log(response.data))

}, [])

 

위 코드는 클라이언트에서 server로 request하는 코드인데, 위에서 정리한 useEffect를 사용했다.

axios로 request 요청하는거고, response.data로 server단에서 데이터를 받아주는 과정이다.

[]는 deps(배열)인데 dependency 즉, 의존을 의미하는데 update할 때 특정 값을 수정하고 싶으면은 그 값을(변수명?)을

배열안에 넣어주면 된다. 

 

server단에는 

 

app.get('/kkk/Hi wotson', (req, res) => {

 res.send("Hi John")

})

로 response해주는 코드를 작성할 수 있다. 

주의할점은 origin이 클라이언트와 server가 같아야한다는 점이다.

만약 둘의 origin 쉽게말하면 localhost번호가 다르다면 오류가 나는것이다.

이를 cross-origin requests(controlled by CORS)라고 한다.

 

이를 proxy로 해결할 수 있다.

npm i http-proxy-middleware 를통해 패키지를 다운받고

src/setupProxy.js를 만들어줘서 

const proxy = require('http-proxy-middleware')

module.exports = function(app){

app.use(

'/kkk',

proxy({

 target: 'http://localhost:8000',

 chargeOrigin: true,

  })

 )

}

위 코드를 삽입한다. proxy target을 localhost 8000으로 설정해주겠다.(chargeOrigin:true로 Origin을 포함? 시킨다. );

 

공부 출처 : 유튜브 johnahn react 기초 강의