오물오물 개발일기

😥 급변하는 프론트엔드 환경 웹 개발에 있어서 프론트엔드의 급변하는 환경을 대부분은 모던 Javascript(ECMA2015)이후 부터 시작되었다고 대부분은 알고있지만 정확히는 ECMA2015부터가 아닌 그 이전부터 있었습니다. 바로 Node.js, npm을 통해 이루어지는 환경에서 시작되었습니다. 웹앱의 규모가 굉장히 커져감에 따라 더욱더 급변하고 복잡해집니다. 소프트웨어 하나를 만든다는 가정을 하면 규모가 어느정도일까요? 규모가 큰 웹앱은 수백만 수천만 라인의 코드가 될 수도 있습니다. 이코드들이 또 하나의 파일로는 작업할 수 없기때문에 수십, 수백개 이상의 파일이 하나의 어플리케이션을 위한 규모입니다. 하지만 이것들이 왜 프로젝트 구성을 복잡하게하는 원인이 되었을까요? 👍 스펙의 필요성 Javasc..

🙏 useEffect란? class Component의 Lifecycle처럼 functional Component에서 Hook을 사용하여 특정 상황에 작업 처리를 가능하도록 해줍니다. 1. class Component Lifecycle 먼저 상대적으로 잘 사용하지는 않지만 이해를 위해 class Component의 Lifecycle를 알아보겠습니다. 사진에서 추가적으로 React 17.0버전 이후 componentWillMount()와 componentWillUpdate()는 폐기되었습니다. 👀 코드로 알아보기 전체의 파일 구조는 아래와 같습니다. 📂 src>App.js 테스트를 위하여 App.js의 코드는 아래와 같습니다. import { useState } from "react"; import "./..

1. 😅 첫 만남 리액트를 사용한 프로젝트를 만들어보고자 하였고 코로나 관련 API를 사용하기로 하였다. 두곳의 API를 사용하기로 하였고 그중 국내 현황은 굿바이코로나 에서 키를 발급받고 postman에 테스트를 해보았다. api 데이터 테스트를 해보니 문제가 없이 나오는걸 확인하였다. 이후 react에서 데이터를 불러보았습니다. . . . . 두근두근 . . . . . . . . 두근두근 . . . . sigh.. 이러한 문제의 원인과 해결을 위해 웹생태계의 다른 출처로 리소스 요청을 제한하는 것과 관련된 두가지 정책인 CORS와 SOP에대해서 알아보도록 하겠습니다. 2. 🙄 SOP(Same-Origin Policy) ? 자바스크립트(XMLHttpRequest)로 다른 웹페이지에 접근할때 같은 출처의..

💡 React의 useState()는 비동기인가요 동기인가요? - 네, 이 질문은 제가 면접에서 들은 질문입니다. React를사용하면서 당연하듯 찍어서 쓰던 useState().. 비동기인가요? 라는 질문에 많이 당황했습니다. 때문에 적어보는 useState()는 과연 동기일까? 비동기일까? 🙏 결론부터 말하자면 - useState()의 setState는 이벤트 핸들러 내에서 비동기적으로 동작합니다. 즉, 하나의 이벤트 핸들러 내에서 setState가 여러번 호출된다면, 일괄적으로 업데이트하고 렌더링을 합니다. 이는 뚜렷한 성능 향상을 만들어냅니다. 🙄 그럼 왜 그럴까요? - React는 DOM을 직접 조작하는 대신 Virtual DOM을 이용해 조작됩니다. 이를 기반으로 state가 변경이 되면 re-..