[코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지! (6/6)

1. 1. LocalStorage로 만드는 최근 본 상품 기능 1

새로고침하면 state가 초기값으로 돌아가는 것은 원래 그런것이다. 나는 이게 싫으면 state를 서버로 보내서 DB에 영구저장하면 됩니다.

 

만약 서버도 모르고 DB도 싫다 그러면 LocalStorage에 저장해둬도 됩니다. (반영구적 저장가능)

 

Local Storage는 브라우저에서 제공하는 데이터 저장소입니다. 

 

1.1. Local Storage 특징

1. key : value 형태로 저장이 가능합니다.

2. 최대 5MB의 문자만 저장이 가능합니다.

3. 사이트에 재접속해도 남아있습니다.(브라우저 청소하면 삭제됨) 

 

Session Storage는 브라우저 끄면 날라갑니다(휘발성)

 

데이터 저장은 localStorage.setItem(이름,값)

데이터 출력은 localStorage.getItem(이름)

데이터 삭제는 localStorage.removeItem(이름)

 

LocalStroage에 array/object 저장하려면 JSON으로 바꾸면 됩니다.

 

이렇게는 불가능하고

이런식으로 작성해줘야 합니다.

 

이렇게 저장하면 꺼낼때도 JSON형식이기 때문에 다시 객체로 바꿔줘야 합니다.

 

2. 2. LocalStorage로 만드는 최근 본 상품 기능 2

그렇다면 상세페이지에서 봤던 상품의 번호들을 localStorage에 저장해보겠습니다. (중복번호는 막기, 그리고 [ ] 이런게 있어야 함)

하지만 재접속하면 id가 자꾸 추가가됌 그러니 이미 있으면 push하지 않게 해야 함

 

array에서 중복제거 쉽게 하려면 set자료형 써도 됩니다. array-> set(중복을 허용하지 않는 array 자료형) -> array

그래서 이런식으로 사용할 수 있습니다.

 

결론

사이트 재접속시에도 데이터유지되게 만드려면 localStorage 에 저장

 

+ state 관리 라이브러리는 redux 말고 Jotai , Zustand 등도 있음 (리덕스와 비슷하고 더 쉬움)

 

 

3. 3 . 실시간 데이터가 중요하면 react-query

그리고 ajax 성공시 / 실패시 html 보여주려면 ? 

몇초마다 자동으로 ajax 요청하려면 ? 

실패시 몇초 후 요청 재시도 하려면 ? 

prefetch? 

(직접하기 귀찮음)  그래서 React Query라는 라이브러리를 사용합니다. (항상 유용하진 않음) 실시간 sns만들때 실시간 데이터를 계속 가져와야 하는 사이트들이 쓰면 좋습니다. 

 

3.1. npm install react-query

설치하기

 

그렇다면 이 것으로 어떤것을 만들어 볼꺼냐 한다면 서버에서 유저이름 가져와서 보여주기를 할 것입니다.

 

이런식으로 요청을 보내서 데이터를 가져오는 것이 아닌

 

이렇게 useQuery를 사용하면 장점은

1. 성공/실패/로딩중 쉽게 파악이 가능합니다.

2. 틈만나면 자동으로 재요청(refetch)해줍니다.

3. 요청이 실패했을때 자동으로 retry해줍니다.

4. state 공유 안해도 됩니다.

5. ajax 결과 캐싱 기능

 

result.data라고 하면 성공했을때 데이터가 들어있고

result.isLoading라고 하면 로딩중일때 true값이 나오고

result.error라고 하면 실패가 발생하면 true가 발생합니다.

 

만약 로딩중일때 로딩중입니다 보여주고 싶으면 ?

 

장점 1.

이런식으로 로딩중일때는 로딩중 글자가 아니면 data.name이 나오게 하면 됩니다. 아니면 if 쉽게 쓰시려면

이렇게도 가능합니다.

 

장점 2.

이렇게 틈만나면 refetch를 해줍니다 . 만약 refetch되는 시간을 변경하려면

이런식으로 2초동안은 refetch가 안되게 해줍니다. 나는 refetch가 필요 없다 하면 자동 refetch를 끌 수 도 있습니다. 

 

장점 3 .

그리고 요청이 실패했을때 자동으로 retry해줍니다.

 

장점 4. 

그리고 만약 메인페이지에서 자식컴포넌트에 똑같이 유저이름을 보고 싶을 수 있다. 이럴때 부모에서 하위컴포넌트까지 state 만들고 보내는게 싫다.

이럴때 react-query는 똑똑해서 하나만 합니다.

 

장점 5. ajax 결과 캐싱 기능

redux-toolkit설치하면 RTK Query도 자동설치됩니다. (방금 배운거랑 유사하지만  react공식 홈페이지 가는 것이 더빠르다)

 

 

4. 4 .  성능개선 1 : 개발자도구 & lazy import

이번에는 props 보냈는데 왜 출력이 안되는지 확인하려면 개발자 도구를 켜서 확인해보면 됩니다. 하지만 개발자 도구에는 html 태그들이 달려있기 때문에 만약 컴포넌트 구조가 보고싶다! 그러면 크롬 확장프로그램을 설치하시면 됩니다.

 

React Developer Tools

설치하신 뒤 개발자 도구에서 components로 가보시면 컴포넌트  구조를 볼 수 있습니다.

여기서 예를들어

이 카드를 하나 눌러봤을때 props로 어떤걸 받는지 나오기 때문에 유용하다고 할 수 있습니다. 또한 state도 확인이 가능합니다.

또한 이 Profiler라는 컴포넌트는 성능이 저하되는 컴포넌트 범인을 찾을수 있습니다. 왼쪽 위의 녹화버튼을 누르고 stop을 눌렀을때 확인이 가능합니다.

보통은 걱정할 필요 없고 대부분의 지연은 서버에서 데이터를 늦게와서 발생하는 것입니다.

 

 

또한 redux를 설치할 수 있는데 

Redux DevTools

이런식으로 store, state 변경할 내역을 알려주게 됩니다.

 

그리고 react로 만든 사이트는 SPA 이기 때문에 발행하면 JS 파일 하나에 모든 코드가 다 들어가 있습니다. 그래서 메인 페이지를 접속하면

1. html 파일

2. css 파일

3. 큰 js 파일전체를 다운받게됩니다.

 

그래서 사실 메인페이지에선 Detail 페이지나 Cart 페이지 둘다 먼저 로드할 필요가 없습니다. 그래서 이런 페이지들은 lazy하게 로드 하면 됩니다 ( 천천히)

필요해질 때 import 해달라고 하는 기능입니다. 

이렇게 하면 사이트를 발행할 때도 별도의 JS 파일로 분리가 됩니다.

 

이렇게 하면 단점은 Cart, Detail 컴포넌트 로딩시간이 발생하게 됩니다.! 만약 로딩중 UI를 넣고 싶다면 Suspense로 감싸면 로딩중 UI 넣기도 가능합니다.

 

이것을 Detail , Cart태그를 감싸면 됩니다.

이런식으로

 

근데 보통은 Routes 전체들을 하나의 로딩페이지로 만들기 때문에 Suspense로 Routes 전체 감싸도 됩니다.

 

5. 4 . 성능개선 2 : 재렌더링 막는 memo, useMemo

이번에는 자식 컴포넌트 재렌더링을 막겠습니다.

이런식으로 자식들도 전부 재렌더링이 됩니다. 근데 child 가 렌더링시간이 오래걸리는 친구면 ?  성능 저하가 발생할 수 있습니다. 

 

이런게 싫으면 Child라는 컴포넌트가 꼭 필요할때 렌더링 되게 만들면 됩니다.

여기서 이 memo는 꼭 필요할 때만 재렌더링이 되게 하는 함수입니다.

 

memo의 원리

props가 변할 때만 재렌더링해줍니다.

이런식으로 기존props랑 신규 props랑 비교하게 됩니다.

props가 길고 복잡하면 손해일 수도 있습니다! 그래서 모든곳에 쓰지 말고 무거운 컴포넌트가 있는 곳에만 쓰시면 되겠습니다.

 

 

이번에는 useMemo를 사용해보겠습니다.

이런식으로 함수를 가져다 쓴다고 가정해보겠습니다.

이렇게 재렌더링 될 때마다 실행된다고 가정해보겠습니다. 이럴때 useMemo를 사용해보겠습니다.

이렇게 하게 된다면 useMemo 컴포넌트 렌더링 시 1회만 실행해줍니다.

이런식으로 useEffect처럼 사용하실수 있습니다. (state가 변할때마다 재렌더링)

 

여기서 useEffect랑 useMemo 둘다 쓸 수 있지만 차이는 

useEffect는 html 코드가 다 나오고 난 다음에 useEffect를 실행하고, useMemo는 렌더링 될 때 같이 실행된다는 실행시점에 차이가 있습니다.

6. 5 . 성능개선 3 : useTransition, useDeferredValue

1. batch 기능

state 1 변경 ()

state 2 변경 ()

state 3 변경 ()

 

이렇게 state 변경 함수가 3개가 다 작동해야 했을때 원래는 한개 한개당 재 렌더링이 됐었지만 리액트 18버전 이후부터는 맨 마지막 state 가 끝나고 재 렌더링이 될 수 있게 변경되었습니다.

 

2. useTransition 으로 느린 컴포넌트 성능 향상 가능(카드 빚 돌려받기)

먼저 이 성능 저하를 일으킨 html 을 제거하면 성능 향상을 할 수 있고,

 

두번째로는 useTransition을 사용하여 성능을 향상시킬 수 있습니다.

이렇게 useTransition으로 만들고 지연의 원인이 되는 부분을 startTransition으로 감싸면 됩니다.

startTransition 동작원리

원래 브라우저는 single-threaded 방식입니다. 그래서 브라우저가 하는 일은 a를 <input>에 보여주기 , <div> *10000 만들기 등을 수행합니다. 그래서 지연이 발생합니다.

 

반면 startTransition은 코드 시작을 뒤로 늦춰줍니다.  그래서 먼저 a를 <input>에 보여주기 , 한가할 때 <div> *10000만들기 등을 수행합니다. 그래서 차이점은 setName에 넣고 화면에 띄워주냐 아니면 화면에 먼저 띄워주고 setName을 해주냐의 차이입니다. 

 

isPending은 startTransition이 처리중일 때 true로 변하게 됩니다,.

그래서 이런식으로 로딩중을 만들어 줄 수도 있습니다.

 

3. 또한 useDeferredValue를 써도 느린 컴포넌트 성능 향상이 가능합니다.

이런식으로 useDeferredValue를 만들고 거기에 늦게 처리해줄 state를 넣어주고 그것을 사용하면 똑같이 사용가능합니다.

 

7. 6 . PWA셋팅해서 앱으로 발행하기 (모바일앱인 척 하기)

PWA는 웹사이트 바로가기 추가 버튼임 일반 사용자들은 웹사이트를 모바일 앱처럼 설치해서 쓸 수 있음

7.1. PWA 장점

1. 설치 마케팅 비용이 적음

2. 아날로그 유저들 배려

3. html css js만으로 앱까지

4. 푸시알림,센서 등 

 

웹사이트를 잘 만들었다면 PWA로 만들어서 앱처럼 쓸 수 있게 만들어보시기 바랍니다.

 

PWA로 만드려면 PWA가 셋팅된 리액트 프로젝트를 생성해야 합니다. 

 

npx create-react-app my-app(작명)

이것이 PWA로 프로젝트를 만드는 것입니다.

 

기존 프로젝트를 PWA로 만들수는 없고 새 PWA프로젝트를 만들고 기존코드를 붙여넣어야 합니다.

물론 필요한 라이브러리도 설치해야 합니다. 

 

PWA 조건

1. manifest.json 있어야하고

2. service-worker.js가 있어야 합니다.

이 파일이 꼭 있어야 PWA 가 가능합니다.

여기서 React App의 이름을 바꿀 수 있습니다.

여기서 설정할것들을 바꿔주시고

 

여기 가셔서 service-worker.js만드려면 register로 바꿔주셔야 합니다. (빌드하셔야 생깁니다)

여기서 Terminal에서 npm run build 하셔야 service-worker.js파일이 생깁니다.

 

service-worker.js 파일은 오프라인에서도 사이트를 열 수 있게 도와줍니다.

그래서 나는 html css js 파일을 미리 하드에 저장해둘 것이라고 해야 하고, 사이트 접속할 때 html css js 다운받지말고 하드에 있던거 쓰세요  라고 해야합니다. 근데 다행히도 이것들은 다 기본으로 설정되어 있습니다.

 

여기 있는 내용들은 다 캐싱할 파일 목록들입니다.

 

PWA 잘되나 확인하려면 build된걸 어딘가에서 호스팅하거나 VSCode로 오픈해서 Index.html 미리보기 띄우거나(live server)

i

 

설치버튼 생기면 PWA입니다. 설치버튼 강제로 띄우기도 가능합니다.

 

개발자도구- Application에서 PWA설정 확인가능 

이 Manifest에서 확인이 가능합니다.

 

특정파일들을 캐싱이 안되게 하려면 node_modules/react-scripts/config/webpack.config.js 가서

 여기서 exclude 하시면 됩니다.

 

 

8. 7. state 변경함수 사용할 때 주의점 : async

 

8.1. 자바스크립트의 sync/ async 관련 상식

일반적으로 자바스크립트는 동기방식으로 사용됩니다.(윗줄부터 차례대로 코드 실행)

하지만 이상한 함수들을 사용하면 비동기적으로 실행됩니다 . 예를들어 ajax, 이벤트리스터, setTimeout 함수들을 사용할 때

그래서 ajax 요청하는 코드들은 순차적으로 실행되지 않고 완료되면 실행됩니다.

 

예를 들어

      

      

      

    
    

      <code />
    
console.log(1+1)
axios로 get요청하고나서 console.log(1+2) 실행해주셈~
console.log(1+3)

이런 코드는 2, 4가 바로 출력되고 그 다음에 3이 출력됩니다.

3을 출력하는 코드가 asynchronous 처리를 지원하는 코드라 그렇습니다. 

3을 출력할 때 오래걸리면 완료될 때 까지 잠깐 보류했다가 다른 코드를 먼저 실행시킨다는 소리입니다. 

심지어 ajax요청이 0.00초 걸려도 2, 4가 먼저, 그 다음 3이 출력됩니다.

물리적으로 잠깐 처리가 보류되어서 그렇습니다. 

자바스크립트라는 언어의 특징이자 장점이라고 볼 수 있겠습니다. 

 

(asynchronous 처리를 지원하는 함수들을 써야 이런 식으로 동작합니다)

 

8.2. 리액트의 setState 함수 특징

리액트로 state 만들 땐 이렇게 합니다.

      

      

      

    
    

      <code />
    
function App(){
  let [name, setName] = useState('kim')
}

그리고 이제 setName을 사용하시면 name이라는 state를 자유롭게 변경가능합니다. 

setName('park') 이런 식으로 하면 변경된다는 겁니다.

근데 문제는 setName() 같은 state 변경함수들은 전부 asynchronous (비동기적) 으로 처리됩니다.

그니까 setName()이 오래걸리면 이거 제껴두고 다른 밑에 있는 코드들부터 실행한다는 겁니다.

그래서 뭔가 예상치 못한 문제가 생길 수 있습니다. 예제 : 버튼을 누르면 2개 기능을 순차적으로 실행하고 싶습니다.

 

      

      

      

    
    

      <code />
    
function App(){
  let [count, setCount] = useState(0);
  let [age, setAge] = useState(20);

  return (
    <div>
      <div>안녕하십니까 전 {age}</div>
      <button>누르면한살먹기</button>
    </div>
  )

}

 

위와 같은 코드가 있다고 칩시다.

여러분도 한번 그대로 따라적어보십시오. 그리고 하단처럼 기능개발해보십시오. 

 

 

버튼을 누를 때마다

(1) count라는 state를 +1 해야합니다. (버튼누른 횟수 기록용)

(2) age라는 state도 +1 해야합니다. 

(3) 근데 count 가 3 이상이면 더 이상 age라는 state를 1 더하지 말도록 코드를 짜십시오.

버튼 3번 이상 누르면 (count가 3 이상이면) 나이를 그만더하라는 기능입니다. 그니까 22살에서 멈춰야합니다.

이거 코드 어떻게 짜면 되죠? 

버튼에다가 onClick 열고 짜면 될 것 같은데 빨리 짜보십시오. 

 

 

 

 

 

 

 

 

저는 이렇게 짰습니다. 잘 되는 것 같지만 뭔가 이상합니다. 

      

      

      

    
    

      <code />
    
<button onClick={()=>{

  setCount(count+1);
  if ( count < 3 ) {
    setAge(age+1);
  }
         
}}>누르면한살먹기</button> 

1. 버튼을 누르면 count를 +1 해줍니다. 버튼누른 횟수 기록용이니까요.

2. 그리고 만약에 count라는게 3회보다 적으면 age를 +1 해줍니다.

끝입니다. 그러면 아마 count라는게 2일 때 까지 실행해주니까

age는 20에서 22가 되면 더이상 증가하지 않고 멈추겠군요. 

 

 

 

근데 23까지 증가하는데얌? 

뭔가 이상합니다. 

분명 count가 2일 때까지만 age를 +1 해주라고 했습니다.

count가 1일 때 age +1

count가 2일 때 age +1

count가 3이면 age +1 하지마 이런 코드니까요. 

근데 지금은 count가 3일 때도 age +1를 해주고 있는 듯 합니다. 

왜죠? 

 

 

 

 

 

이유는 위에서 제가 말한 async라는 특징 때문에 그렇습니다. 

state 변경함수는 async 하게 처리되는 함수기 때문에 완료되기까지 시간이 오래걸리면 제쳐두고 다음 코드를 실행해줍니다.

그래서 코드를 해석해보자면 

① 버튼을 세번째 누르면 setCount(count+1); 이걸 실행해서 count를 3을 만들어줍니다.

② 근데 count를 3으로 만드는건 오래걸리니까 제껴두고 if ( count < 3 ) {} 이걸 실행합니다.

③ 이 때 count는 아직 2라서 if문 안의 setAge(age+1)이 잘 동작하고 있는겁니다.

 

이 모든 문제는 setCount()가 async 함수라서 그렇습니다. 

async함수는 오래걸리면 제껴두고 다음 줄 코드부터 실행하니까 그렇습니다.

 

 

그래서 저렇게 state1 변경하고나서 state2를 변경하는 코드를 작성할 땐 가끔 문제가 생깁니다.

이걸 정확히 sync스럽게, 순차적으로 실행하고 싶을 때 해결책은 useEffect입니다. 

useEffect를 잘 작성하면 특정 state가 변경될 때 useEffect를 실행할 수 있다고 하지 않았습니까.

 

이런 문제를 어떻게 해결하느냐 App 컴포넌트안에 useEffect를 만들어봅니다.

      

      

      

    
    

      <code />
    
useEffect(()=>{
    
 }, [count]) 

 

useEffect는 컴포넌트가 렌더링/재렌더링될 때 실행되는 함수랬습니다.

근데 뒤에다가 [] 대괄호안에 state를 집어넣으면

state가 변경되면 이 코드 실행해주세요~ 라는 뜻으로도 사용가능합니다.

그래서 이거 쓰시면 아까 말했던 문제를 해결할 수 있습니다. 

1. count라는 state가 변경되고나서 2. age도 변경해주세요~ 이런 식으로 순차적으로 코드를 실행할 수 있다는 것입니다. 

 

 

 

 

① 그래서 일단 버튼을 이렇게 변경했습니다. 

      

      

      

    
    

      <code />
    
<button onClick={()=>{

  setCount(count+1);

}}>누르면한살먹기</button> 

count라는 것만 +1 되게 바꿨습니다. 

 

 

 

② 그 다음에 나머지 age를 +1 하는 코드는 useEffect안에 개발해놨습니다.

 

      

      

      

    
    

      <code />
    
useEffect(()=>{
  if ( count < 3 ) {
    setAge(age+1)
  }
 }, [count]) 

이런 식입니다.

그러면 useEffect는 count라는 state가 변경되고나서 실행이 되며

그럼 if문으로 count라는 state값을 제대로 의도대로 측정해볼 수 있는 겁니다.

 

③ 근데 문제는 useEffect 저렇게 써도 처음 페이지 로드될 때도 한번 실행이 되기 때문에 의도치 않은 버그가 발생할 수 있습니다. 

그래서 처음 페이지 로드시 useEffect 실행을 막는 코드를 알아서 검색해서 적용하셔도 되고

아니면 count라는 state를 또 활용하셔도 됩니다. 

count가 0일 때는 (페이지 처음 로드되었을 때는) 내부 코드를 동작시키지 않으면 될듯요

 

 

      

      

      

    
    

      <code />
    
useEffect(()=>{
  if ( count != 0 && count < 3 ) {
    setAge(age+1)
  }
 }, [count]) 

이런 식입니다. count가 0이 아닐 때만 실행하라고 조건을 추가해줬습니다.

이제 버튼 누르면 22살까지만 잘 증가합니다.

 

9. 8. Node + Express 서버와 React 연동하려면

 1. nodejs 검색해서 설치

2. 작업폴더 만들고 에디터로 오픈

3. server.js 만들어서 코드 복붙

4. 에디터 터미널 열어서 npm init -y 입력

5. npm install express 도 입력

 

이렇게 하면 서버를 만들수 있고 react project 만들고 개발 끝나면 리액트는 빌드 해줘야 합니다. 그래야 html 파일이 나옵니다.

 

그렇게 만들고 React 프로젝트 폴더를 서버 프로젝트 폴더 안에 대충 넣어놨습니다.

 

그러면 그 후 누가 내 사이트 접속시 리액트로 만든 html 보내주면 끝나게 됩니다.

이렇게 하시면 react 로 만든 html 파일을 만들 수 있습니다.

이렇게 위에 app.use가 있어야 특정 폴더의 파일들을 전송이 가능합니다.

 

만약 nodemon 이 있으면 nodemon server.js 이 있으면 이렇게 해주시면되고 없으시면 node server.js로 설치해주시면 됩니다.

 

여기서 리액트라우터 쓰는 경우 

이걸 최하단에 추가해 놓는게 좋습니다.

예를들어 DB에 있던 상품명을 보여주려면 ?

이렇게 사용하시려면

이걸 사용하시는게 좋습니다.

 

cors 설치하시려면 npm install cors 터미널에도 입력해야 사용이 가능합니다. 

 

DB데이터를 보여주고 싶으면

1. DB 데이터 뽑아서 보내주는 API 작성

2. 리액트는 여기로 GET요청

 

궁금증 ? 리액트코드 수정할 때마다 build 해야함?

x 서버에 올릴때만 build 하면됌

 

useRef 도 공부해서 사용해보자!!

 

 

10. 마지막으로

1. 강의 다 들었다고 리액트 마스터가 된게 아님

 

모든 리액트 강의에 전부 체크마크 했다고 "이제 리액트 마스터함 ㅅㄱ" 라고 생각하시면 안됩니다. 

강의 들으며 제 코드 따라치는건 복붙이지 공부가 아닙니다.  

직접 여러분만의 프로젝트들을 손수 만들어보시며 손에 익게 만들어야합니다. 

 

원리위주의 강의다보니 쇼핑몰을 만들었다고 해도 뼈대밖에 없었습니다. (그래서 이걸 포트폴리오에 대충 넣으시면 안됩니다)

쇼핑몰의 기능을 추가하거나 완성도를 높이는 걸 직접 마무리 느낌으로다가 해보실 수도 있고

(가짜 결제기능도 추가해서 결제 누르면 재고가 1 감해지거나.. 무통장입금 계좌 표시해주는 그런 것도 어떨까요)

풀스택 개발에 관심있으시면 Node.js + Express 같은걸로 쉽게 서버기능까지 추가해볼 수도 있겠으며  

다른걸 만들어보고 싶으면 타 사이트를 카피해보십시오. 저런 사이트를 리액트로 만들려면 어떻게 해야할지 생각해보고 구현해봅시다. 

 

 

 

 

 

 

2. 나 혼자 사이트를 직접 만들라니 시작 어떻게할지 모르겠쪄요

 

리액트 쓴다고 해서 웹개발을 옛날과 다르게 하고 그런게 아닙니다.

HTML CSS 평소에 짜던 대로 페이지 쭉 만들어나가면 됩니다. 

 

- 근데 중간에 div 여러개를 한 단어로 축약하고 싶으면 컴포넌트로 줄여보고 

- 페이지를 나누고 싶으면 라우터 쓰시고 

- 자주 바뀌는 데이터를 꽂아넣으려면 state에 담았다가 꽂아넣으시고

- 근데 자식컴포넌트에 꽂아야한다면 props 문법 쓰고

- 데이터를 서버에서 받아와야한다면 서버로 GET요청 하고나서 state에 집어넣으시고 

- 모달창, 탭 이런 UI가 필요하면 그 UI만드는 법 따라하시고

이게 끝인데얌 

 

 

 

 

 

 

 

 

3. 기능을 혼자 못만들겠어요 리액트 더 공부해야할까요? 

 

이런 질문을 자주 받는데

"Q. 스크롤 내려도 상단고정되는 navbar 컴포넌트를 만들고 싶은데 모르겠어요. 리액트를 덜 공부한 것일까요?"

그건 리액트를 못하는게 아니라 HTML CSS를 못하는 것입니다

 

"Q. 상품 가나다순 정렬기능을 못만들겠어요 리액트를 덜 공부한 것일까요?"

그건 리액트를 못하는게 아니라 자바스크립트를 못하는 것입니다 

 

그냥 JavaScript로 array 자료 정렬을 못하는 것일 뿐이니 

자바스크립트 기초 실력이 흔들흔들 하시다면 그것 부터 빨리 공부하십시오.

리액트 좋다좋다 거려서 자바스크립트 모른 채로 리액트부터 시작해서 요즘 JS 기초학력 저하현상이 심각합니다. 

리액트는 HTML + JavaScript 웹개발을 도와주는 역할일 뿐임을 명심합시다. 

 

 

 

 

 

 

 

4. 심화 강의 만들어주세요 

 

시중 강의들 보면 

“React MongoDB Node.js로 인스타그램 클론코딩”

이런 사람들 현혹하는 120시간짜리 강의 저도 똑같이 심화과정 40만원에 개설하면 물론 제가 부자가 되겠지만

저런거 들어봤자 의미없습니다. 나중에 돈 급해지면 만들 것임 

 

 

굳이 저런거 안만드는 이유는

1. 리액트로 더 이상 가르칠게 없습니다 저도 마지막에 딱히 할 게 없어서 리액트 외적인 localStorage 가르치는 것좀 보셈

나머지 리액트 내용들은 핵심이 아니라 필요할 때 검색하면 배울 수 있는 수준입니다. 

아니면 외부 리액트 라이브러리들인데 그런건 맨날 바뀌고 유통기한있습니다. 

2. 실제 서비스는 강의 따라한다고 만들 수 있는 사이즈가 아닙니다. 흔한 쇼핑몰 관리자 화면보면 60~70페이지정도 되는데 어떻게 다 만들어볼 것임 아마 700강 들어야할 듯  

3. 어짜피 클론프로젝트 이런 식으로 진행하는 강의는 그냥 받아쓰기 실력만 늡니다.

4. 옷 파는 쇼핑몰만 만들어봤는데 실제 취직하고 나서 청소 서비스 파는 쇼핑몰을 만들라고 하면 어쩔겁니까.

결국 혼자서도 직접 뭔가 만드는 법을 연습하셔야합니다. 사용법만 알면 누구나 만들 수 있습니다 

그래도 모르겠으면 게시판 ㄱㄱ

 

 

 

 

 

 

 

 

 

5. 개발자는 항상 공부해야합니다. 

 

리액트 하나 해봤다고 개발 잘하는 사람이 될 수는 없습니다.  

리액트는 그냥 html css js 코드짜는거 도와주는 툴일 뿐이고 

 

HTML5 이후에 추가된 웹개발 기본 기술들을 소개하자면 

- FileReader API 

- 로컬스토리지

- IndexedDB

- Web worker

- Geolocation

- Canvas

- drag & drop & touch 이벤트 

- fetch API

- CSS grid, flex 레이아웃  

- Web audio/video

등 여러가지가 있습니다. 

리액트랑 자바스크립트 문법 잘 안다고 웹개발 잘하는게 아니라

항상 브라우저 기본 기능과 API를 잘 알아야 실제 웹개발을 잘하는 사람이 됩니다.

기타 async await promise iterator 같은 ES6 문법들도 많으니

웹개발 실력을 향상시키고 싶으면 리액트 말고 많은 주변 것들도 공부해보도록 합시다. 

근데 그런것들은 멋진 개인프로젝트 하다보면 자연스레 배우게됨 

 

 

 

 

 

(▲리액트 만든 나쁜놈)

 

 

리액트의 구현원리 이런 것도 궁금하지 않으십니까. 

- 구글 페이스북 본사 근무하는 천재 개발자들이 리액트나 앵귤러를 어떻게 만들었는지 

- 리액트로 함수를 만들었을 뿐인데 왜 그걸 <컴포넌트/> 이렇게 박아넣을 수 있는지 

- props 문법은 어떻게 코드를 짜서 구현한건지

- 리액트 컴포넌트는 대체 어떤 원리로 브라우저에서 렌더링이 되는건지 

궁금하지 않으십니까.

 

그런 동작원리 같은걸 알면 응용도 할 수 있고 심지여 여러분이 리액트 비슷한걸 만들어낼 수도 있습니다. 

하지만 기초 기술 만드는건 등따숩고 배부른 나라가 잘하니까 미국 놈들에게 맡기도록 합시다.

한국은 먹고살기 힘드니까 빨리 기술만 슉슉 배워서 돈벌러 나가야합니다. 

 

 

 

 

 

다른 툴도 재밌습니다. 

Angular는 기타 라이브러리 설치안해도 모든걸 내장기능으로 끝낼 수 있는 역사와 전통의 웹앱 라이브러리입니다.  

Vuejs는 리액트랑 같은 기능을 제공하는데 모든게 더 쉽습니다. Redux 이런것도 Vuex 를 쓰는데 100만배 더 쉬움 

아니면 리액트 문법을 그대로 써서 모바일 앱을 만들어주는 React Native는 어떠십니까.

 

 

 

 

 

 

 

6. 미래를 생각하는 건 어떨까요

 

5년 후에도 리액트 쓸 것 같습니까. 

신규 프로젝트는 리액트 말고 1. 더 간단하고 2. 리액트보다 성능좋고 3. 코드 정리도 쉬운

Vue, Svelte 이런 라이브러리를 도입하는 곳들이 많습니다. 

아니면 웹과 앱을 동시에 개발할 수 있는 Flutter 사용하는 곳들도 간혹 보입니다. 

 

외부 라이브러리도 변화가 잦은데

신규 프로젝트는 Redux 복잡하고 어려워서 Zustand, Jotai 이런거 쓰는 사람들이 많습니다. 

근데 취업이 목적이면 React + Redux나 합시다. 

 

 

 

 

 

자바스크립트의 자료형부분을 업그레이드 해서 쓸 수 있는 타입스크립트가 여전히 개발자들에게 인기를 끌고 있습니다. 

Vue 3버전부터는 타입스크립트 기본 지원이고 

Angular는 이미 오래 전부터 타입스크립트 강제로 쓰라고 요구하고 

React 주요 라이브러리도 타입스크립트를 지원하고 있습니다. 

 

타입스크립트를 왜 쓰냐면 ..

실은 자바스크립트는 프로그래밍언어라기보다 쪼그만한 스크립트 언어라서 이걸로 코드 1천줄 1만줄 짜다보면 단점이 눈에 보입니다. 

- 원래 자바스크립트 자체가 자료의 형식이 자유로워서 예상치 못한 버그가 발생하고

- props로 string 자료형이 들어와야할 곳에 이상한 array가 들어와서 버그를 일으키기도 합니다. 

- 심지어 기본 에러 메세지도 추상적이고 그지같습니다. 

 

이런 버그를 예방하기 위해 type 체크하는 코드를 잔뜩 써서 자료형을 체크하곤 하지만 

이게 귀찮다면 그냥 타입스크립트를 쓰면 됩니다.

이 변수에 무슨 자료형이 들어와야할지 정확히 미리 정의할 수 있기 때문에 저런 귀찮고 쓸데없는 버그를 미연에 방지할 수 있습니다.

다만 약간 코드가 암호문같아집니다.