오물오물 개발일기

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

💡 웹 정보의 중요성 위와 같이 똑같은 결과물을 위해 다른 방법들이 있습니다. 가 아닌 css로 시각적으로 표현 할 수 있지만 웹페이지에서 내포한 의미는 상이합니다. 단순 시각적 표현으로 만든것은 검색엔진에서도 보여주는것이 다릅니다. 이유를 알기위해 아래에서 웹표준과 웹접근성에대하여 알아봅시다. 1. 🤷‍♂️ 웹표준이란 ? 웹에서의 표준은 W3C의 토론을 해 나온 권고안을 말한다. 권고안 이외 단계 수준의 스펙은 비표준이거나 독자확장 요소를 의미하기 때문에 구분하여 사용해야 한다. 어떤 운영체제나 브라우저를 사용하더라도 웹페이지가 동일하게 보이고 정상 작동해야함을 의미합니다. 권고안을 지켜 웹사이트를 제작하는것을 "웹표준을 지켰다"라고 말할 수 있습니다. 1-2. 👀 웹표준 조건 W3C 권장 표준 DTD..

이용자들이 사이트를 이동할때 사용하는 HTTP는 Stateless입니다. 즉, 메모리가 없습니다. 웹사이트는 유저와 항상 연결이 되어있지 않고 Request, 방문시에만 요청을 하고 순간 '연결'이 되며 HTML을 받는순간 연결이 끝나게 됩니다. 하지만 유저를 기억해야하는 일이 있습니다. 유저의 프로필, 언어, 지역정보 등등의 정보를 기억해야하기때문에 cookie나 Web Storage들이 생기게 됩니다. 🧩 종류 크게 Cookie와 Web Storage로 나눠집니다. 여기서 Web Storage는 Local Storage와 Session Storage 두종류가 있으며 HTML5에서 표준으로 지정 되었습니다. Cookie에 비해 큰데이터를 저장할 수 있고 브라우저에 로컬하게 저장된다는 특징과 함께 서버로..

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

개요 - 이용자가 웹브라우저에서 url을 통하여 웹페이지에 들어오게 된다. 이후 브라우저는 요청을 받고 해당하는 결과물을 보여주기위해 작업을 하게 된다. 이때 어떠한 과정을 거치는지를 알게 되면 이용자에게 성능이 보장된 웹페이지를 제공할 수 있을것이다. 기본 동작 과정 - 다음은 렌더링 엔진의 기본적인 동작 과정이다. * 자세히 적어보자면 Requests.response -> loading -> scripting(DOM,CSSOM) -> layout(표기계산) -> painting(그림그리기) -> composition 단계를 거치게된다. 브라우저 엔진 마다의 동작과정 - 기본 동작과정을 기반으로 각 브라우저에서 사용하는 엔진에 따라 조금 다르게 표현이 된다 - 웹킷(webkit)은 사파리, 크롬 브라우..

💡 What is DOM ?? - 문서객체모델 DOM(Document Object Model)은 브라우저에 내장되어있는 web API이다. 웹페이지를 접속을 하면 개발자가 작성한 html코드를 브라우저가 이해 할 수 있는 node라는 object로 변환하고 DOM Tree를 구축해 나아가며 궁극적으로는 CSSOM과 함께 Render Tree에 적용됩니다. API가 뭐지 ? -> 2020/12/21 - [지식] - 💡 Framework & Library & API? 💡 Framework & Library & API? ✨ 제어 흐름에 대한 주도성이 누구에게 있는가 !? - 프레임워크는 전체적인 흐름을 스스로가 쥐고있으며 사용자는 그안에 필요한 코드를 짜 넣는다. 반면에 라이브러리는 사용자가 전체적인 baeg..

✨ 제어 흐름에 대한 주도성이 누구에게 있는가 !? - 프레임워크는 전체적인 흐름을 스스로가 쥐고있으며 사용자는 그안에 필요한 코드를 짜 넣는다. 반면에 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓴다. 즉, 호출하는 쪽에 주도권이 있다. 🏘️ Framework - 응용프로그램이나 소프트웨어 솔루션 개발을 수월하게 하기위해 제공된 소프트웨어 환경 - 정해져있는 규칙이 있으며 규칙을 지키며 사용해야한다. - 응용 프로그램이 수동적으로 프레임워크에 의해 사용된다 - Vue, Spring, Django, Ruby on Rails ... 등등 * 프레임 워크는 정해져있는 틀안에 들어가서 들어갈 코드들을 작성해서 완성한다. 나는 이미 지어진 집(프레임워크)에 입주를하고 그안에서 원하는 오브제..