프론트엔드 개발/웹6 HTML 표준 명세 읽어보기 웹의 근간이 되는 HTML. 하지만 자바스크립트나 웹 프레임워크 공부에 밀려 그만큼 심도있게 공부하지는 못했던 것 같습니다. 웹개발 시 간과해서는 안되는 SEO, 웹 접근성 등을 위해서라도 HTML과 더 친해지려고 합니다. HTML을 학습하기 위한 유용한 곳들 1. HTML 예제를 보면서 배우기 구글에 HTML 요소를 검색하면 가장 먼저 등장하는 곳으로 가장 유명한 곳들이 아닐까 합니다. 여러 예제를 확인할 수 있어 유용합니다. https://www.w3schools.com/ W3Schools Free Online Web Tutorials W3Schools offers free online tutorials, references and exercises in all the major languages o.. 2022. 11. 15. 객체 지향 CSS(OOCSS, Object Oriented CSS) 애플리케이션의 규모가 커질수록 CSS를 유지하는 게 어려워질 수 있다. 간결하고 유지하기 쉬운 CSS를 작성하는 것이 필요하다. 객체 지향 CSS는 CSS 작성을 위한 방법론 중에 하나다. SMACSS, BEM과 같은 다른 방법론과 결합하여 사용할 수도 있다. Nicole Sullivan이 2008년도에 제안하였다. Java와 Ruby의 객체 지향 프로그래밍의 디자인의 원리를 적용하여 CSS의 재사용성, 확장성, 유지보수성을 향상시키고자 하였다. 단일 책임 원칙, 관심사의 분리 원칙과 같은 OOP의 컨셉을 적극적으로 도입하였다. 페이지에서 반복적으로 사용되는 비쥬얼 패턴을 객체로 정의하고 사용하는 것이 목적이다. OOCSS에는 두 가지 원칙이 있다. 구조와 외형을 분리 (Seperation of stru.. 2022. 9. 29. JWT를 어디에 저장해야 할까? (feat. 쿠키) JWT(Json Web Token)를 어디에 저장해야 사용자 로그인을 유지하면서도 안전할까? 이전에 프로젝트를 진행하면서 토큰을 로컬 스토리지에 저장하고 자동 로그인과 로그인 유지를 구현했었다. 그런데 로컬스토리지는 브라우저 콘솔에서도 window.localStorage를 입력하면 바로 접근이 가능하다. 공격자가 마음만 먹으면 인증 정보를 탈취하여 서버에 요청을 보낼수 있는 것이다. 앱에 사용자 민감 정보나 구매 등의 로직이 있다면 더 곤란하다. 그렇다고 보안을 위해서 인증 토큰을 앱 내부에서만 관리하면 자동 로그인과 로그인 유지를 포기해야 된다. 사용자 경험에 좋지 않다. 그래서 서버에서 내려준 JWT를 안전하게 관리하면서 사용자 경험도 보장할 수 있을까에 대한 고민을 하게 됐다. 브라우저를 끄고 다시.. 2022. 9. 21. 프론트엔드 개발 알쓸신잡 팁모음 data-* HTML의 커스텀 데이터 속성이다. "data-"로 시작하는 속성은 user agent(브라우저)에서는 무시된다. 자바스크립트에서 참조하려면 .dataset을 사용한다. Hidden input 사용자에게 보이지 않는 input이다. form 태그 안에서 추가적인 정보를 submit해야 할 때 사용한다. 2021. 3. 8. 이전 1 2 다음
