SG의 개발 공부로그

처음 react를 접했을 때 주변에서 리엑트 훅훅! 거리길래 훅이 뭐냐고 했다가 복싱 원투 훅 맞을 뻔했다. 농담이고 훅이 뭔지 알아볼거다. 복잡한거 싫으니 간단하게 HOOKS 이 뭔지 요약하면 간단 요약 Class형 방식의 컴포넌트 기능들을 Function형 컴포넌트에서 사용할 수 있도록 해준 기능들을 Hooks 라 하기로 했나보다. . 2019년도쯤에 추가된 공식 라이브러리이며, Class 형 컴포넌트에서만 쓸 수 있었던 state와 life cycle 등을 function 형 컴포넌트에서도 사용 가능하게 해 주었다. (고마워 페이스북 더 열일해 줘) React공식문서에서도 Class보다 function 형 컴포넌트를 권장하고 있다. 그래서 Class의 개념이 약한 사람도 react 에도 쉽게 입문할..

작업을 하다보면, 클라이언트와 서버간의 데이터를 주고 받기 위해서 HTTP 통신을 하게 된다. 비동기 HTTP 통신에 쓰이는 Ajax, Axios, Fetch 의 차이점을 알아볼거다 일단 먼저 Ajax Asyncchronous Javascript And XML 의 약자이다. 약자대로 javascript 를 사용한 비동기 HTTP 통신 기술이다. 비동기적으로 통신으로 인해 페이지전체를 로딩하지 않고, 일부분만 갱신 할 수 있다. 통신이란 response 와 request 를 비동기로 다룰 수 있다는 것이다. 그리고 ajax가 jquery 와 묶여서 불리는 경우가 많다. 나 또한 처음에 그랬다. 근데 잘못된것이였다. ajax 를 더 편리하게 jquery로 사용함으로써 묶어서 말 할때가 많은 것 뿐. 그래서 ..

SSR 옛날 전통 웹 방식은 MPA 였다. MPA라는 용어도 사실 SPA가 유행하면서 비교를 위해 나왔듯이 SPA 나오기 전에는 모두 MPA 형태였다. MPA는 새로운 페이지를 요청을 보내면, 모든 탬플릿을 서버연산을 통해 렌더링하고 완성된 페이지형태로 응답한다. SPA 와 MPA의 차이점 참고링크 https://sg-coding.tistory.com/entry/SPA-Single-Page-Application-%EC%99%80-MPA-Multi-Page-Application-%EC%B0%A8%EC%9D%B4%EC%A0%90 SSR 의 장점는 SEO (검색엔진최적화) 이다. 전통적인 MPA 는 javascript 가 동작하기 전에도 HTML 에 데이터가 삽입된 상태 , 즉 완성된 형태의 탬플릿를 서버로부..

React 를 접하면서 듣게 된 SPA 와 MPA 에 대해서 간략하게 알아볼거다. 격투기 UFC 와 MMA 도 아니고 개발쪽은 줄여쓰는거 겁나 좋아한다. 아무튼 MPA (Multi Page Application) MPA 는 흔히 쓰였던 웹 애플리케이션 개발방식이다. (JSP, PHP 등) 웹 브라우저에서 특정 페이지에 대한 요청을 서버에 보내면 서버는 데이터를 HTML 문서로 웹 브라우저에 응답해준다. 그 과정속에서 화면이 깜빡거린다. 댓글하나써도 깜빡, 좋아요 누르면 깜빡, 뭐 누르면 깜빡 불러오는 데이터가 적어서 빠르게 페이지가 나오면 좋겠지만, 데이터가 많을 경우 사용자는 깜빡하고 로딩이되는 시간동안 기다려야한다. 요즘 인터넷이 워낙빨라져서 체감이 로딩속도가 많이 줄었다고해도 사람의 욕심은 끝이 없..