#WebAssembly웹어셈블리(WebAssembly)에 대해 알아보자최근에 Developer-Roadmap을 둘러보다 라는 개념에 대해 접하게 되었다. 웹 개발을 공부하는 입장에서 처음 접하는 용어에 대한 호기심이 생겼고, 이번 시간을 통해 에 대해 함께 알아보려고 한다. 웹어셈블리 는 2017년에 처음 발표되었고,…
#browser-rendering브라우저 렌더링 과정 이해하기.최근에 백엔드 팀원들과 CS공부를 하면서, 주소창에 을 입력했을 때 일어나는 일에 대해 공부하였다. 이때 백엔드 팀원이 받아온 HTML 파일은 어떻게 브라우저에 그려지는지 물어보았는데, 명확하게 답을 하지못해서 내가 아직 브라우저 렌더링 과정을 정확…
#httphttp와 https에 대해 알아보자최근 프로젝트를 EC2로 배포를 하였는데, 가 적용되어있지 않아서, ‘주의 요함’, ‘이 사이트는 보안 연결(HTTPS)이 사용되지 않았습니다.’ 라는 문구를 볼 수 있었다. 그래서 는 와 어떤 차이가 있고, 어떻게 보안 문제를 해결하였는지 궁금해졌…
#static-web-page정적 웹 사이트에 대해 알아보자.최근 S3를 통한 배포를 실습해보면서, 을 하였다. 그러면서 이라는 단어에 의문이 들었다. *호스팅 - 서버 컴퓨터의 전체 또는 일부를 임대해주는 서비스 대개 정적 웹 사이트는 ‘모든 상황에서 모든 사용자에게 동일한 정보를 표시하는 웹사이트’, 동적…
#PWAPWA에 대해 알아보자이번에 프로젝트로 웹 애플리케이션를 개발하면서 라는 개념에 대해 접하게 되었다. 웹 애플리케이션, 프론트엔드를 공부하는 입장에서 처음 접하는 용어에 대한 호기심이 생겼고, 이번 시간을 통해 에 대해 함께 알아보려고 한다. 모바일 앱 에 대해 알…
#web-server웹 서버와 NginX이번에 프로젝트를 진행하면서 처음으로 웹 서버를 직접 구축해보았다. 웹 서버를 구축하면서 를 사용하게 되었는데, 웹 서버를 구축하는데 필요한 설정들을 편리하게 추가 할 수 있었다. 하지만 웹 서버를 구축하면서 한 번 사용해본 게 전부이기 때문에, …
#webpack웹팩 이해하기 - 2지난 글에서는 프론트엔드 개발 환경 설정을 위해 가장 많이 사용되는 웹팩의 정의와 필요성에 대해 알아보았다. (*웹팩 이해하기 - 1 ) 내용을 간략하게 정리하자면 웹팩은 애플리케이션에 필요한 모든 파일(모듈)을 병합하고 압축해서 하나의 결과물(번들…
#webpack웹팩 이해하기 - 1그 동안 React.js로 개발을 진행할 때는 항상 CRA(create-react-app)*를 사용하여 개발 환경을 설정하였다. 그래서 CRA를 사용하면 바로 개발을 시작할 수 있었기 때문에 개발 환경에 대한 고민을 깊게 해보지 않았다. 그런데 이번…
#htmlHTML <form> 잘 쓰는 법.이번 글에서는 “HTML 잘 쓰는 법”에 대해 공유하려고한다. 사실 제목은 거창하게 지었지만, 개인적으로 우아한테크코스에 참여하기 전에 알았으면 좋았을 것 같은 에 대한 내용을 정리해 보았다. 누군가에게는 당연한 내용일 수 있지만, 나처럼 에 …
#dom-elementDOM(Document Object Model) Element를 다뤄보자.웹 개발을 할 때 웹 콘텐츠의 내용과 구조를 변경하기 위해서 자연스럽게 DOM element 를 다루게 된다. 이때 가장 편하고 쉬운 방법은 innerHTML을 사용하는 것이었다. 하지만 지난 글에서는 XSS*에 대한 내용과 함께 innerHTML을…
innerHTML의 위험성, XSS에 대해 알아보자레벨 1 과정에서는 Vanilla JavaScript로 미션을 구현하였다. 이때 DOM의 요소를 다루면서, innerHTML의 사용을 지양하라는 말을 많이 들었다. 성능상의 이유도 있었지만, XSS 공격에 취약하기 때문이라고 하였다. 그래서 XSS …