오물오물 개발일기

💡 웹 정보의 중요성 위와 같이 똑같은 결과물을 위해 다른 방법들이 있습니다. 가 아닌 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)은 사파리, 크롬 브라우..

😮 코로나 확진자 급증과 함께 마주한 에러? 취업을 위해 GOC 프로젝트를 마무리한지 어언 3달.. 확진자다시 급증하며 1000명 이상의 확진자가 나오고있다. 열심히 만들었던 프로젝트였기에 가끔 들어가며 에러가 있는지 없는지 확인하던 찰나에 오랜만에 버그를 만났다. 뭘까.. 확진자 차이가 많이나서 표시를못하나.. 최대 숫자가 정해져있는걸까? 일단 침착하게 콘솔을 한번 찍어보았다. 원인은 바로 차트에 hover를 하게되면 확진자 수가 나오게되는데 4자리가 될경우를 대비해서 변환을 시켜놨던게 문제였다. .toLocaleString()를 지워주고 테스트를 해보니 정상으로 돌아왔다. 해당 사이트가 궁금하다면?