오물오물 개발일기

* select & option 드롭다운 형식의 선택지를 제공한다. select 태그에 name attribute를 부여한다. multiple attribute를 사용하면 여러가지의 선택지를 받을 수 있다. HTML CSS JS submit

* radio 선택지 중에 한가지만 고를 수 있다. 연관된 선택지의 경우 name을 일치시키며 각 선택지에대한 value값을 부여한다. 구독 미구독 확인 * checkbox 선택지중 다중선택이 가능하다. radio와 마찬가지로 연관된 선택지의 경우 name을 일치시키며 각 선택지에 value값을 부여한다. 사과 바나나 메론 확인

* input 사용자가 정보를 입력하고 입력을 받기 위함 의 형식으로 type attribute를 무조건 기재를 해야한다. type : text, email, password, number, file, tel, button, submit .... type 이외에도 value(초기값)나 required, disable(사용불가).. 등등 있으나 필수는 아니다. * placeholder : input창에 띄어놓는 문구로 클릭시 사라지게된다. (안내문구) minlength : 최소 문자 길이를 제한한다. maxlength : 최대 문자 길이를 제한한다. required : 필수적으로 받아야하는 input창에 요청을 한다. submit * 이메일 형식에 맞는 input을 받을 수 있다. submit * type..

* Form Tag 사용자로부터 데이터를 받기위해 사용하는 태그 사용자에게 input을 받으면 무언가 처리를 해줘서 결과값을 보여줘야 한다. action의 경우 입력받은 input을 처리 하기 위한 주소를 작성하며 모를경우엔 #을 기재하고 backend개발자와 논의한다.

* Anchor (링크) Attribute href : #, #none, URL, 파일명, ID 값(페이지내 이동), mailto:molly.daleo3o@gmail.com (메일주소), tel:전화번호 target : _blank (새탭으로 열기) href의 경우엔 무조건 써줘야한다. * Image Attribute src : 이미지 소스의 주소 alt : 이미지에 대한 text alt의 경우엔 이미지를 로드 못할 경우 대신 보여주기도 하지만 시각적으로 불편하신 분들을 위함이기도 하다. 이미지 * 시각적으로 불편하신 분들은 스크린 리더라는것을 통해 웹페이지를 이용하게 되는데 alt에 기재되어있는 텍스트가 음성으로 들리게 된다. 웹의 핵심철학인 접근성을 잊지 말고 꼭 알맞은 텍스트를 기재한다.

💡 웹 정보의 중요성 위와 같이 똑같은 결과물을 위해 다른 방법들이 있습니다. 가 아닌 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()를 지워주고 테스트를 해보니 정상으로 돌아왔다. 해당 사이트가 궁금하다면?