html
-
[HTML] 이메일 폼 퍼블리싱Front-End(Web)/HTML, CSS 2022. 3. 30. 03:06
현재 회사에서 진행하는 통합멤버십 프로젝트 관련해서, 각종 안내 이메일 발송폼을 퍼블리싱하는 작업을 담당하였었다. 우선 처음 작업하는 부분이다보니 백엔드 Github에서 기존에 웹 퍼블리셔님이 제작해주신 이메일 폼 코드를 공유받았고... 충격에 빠지게 되었다!! 자주 사용해보지 않았던 태그의 등장.... 납득하기 힘든 Inline CSS....!! 매우... 매우 당혹스러웠다...🤪🤪 위 문법을 준수하여 작업하더라도, 이전에 왜 이렇게 작업되어야 하는지 그 취지를 이해해야겠다는 생각에 이메일 폼 퍼블리싱에 관한 글들을 참고하게 되었고, 나와 비슷한 피해자(?)들은 조금이라도 이 길을 쉽게 지나갈 수 있는 가이드같은 포스팅을 작성하고자 글을 시작하게 되었다. 📙 배경 주로, 서비스를 사용하는 회원에게 관련..
-
[Redux] 순수 Redux App 만들기(생활코딩)Front-End(Web)/React - 라이브러리들 2021. 2. 15. 23:05
🧐 서론 앞서 Redux는 리액트뿐만 아니라 모든 환경에서 (심지어 vanila JS에서도) 사용가능한 상태관리 툴이라고 했다. 먼저, Redux의 기본개념들과 활용법을 HTML scriipt 환경에 적용하면서 공부해보고, 추후 react-redux 를 활용해 리액트에서의 활용법을 공부하려고 한다. 💜 Without Redux 💀 이처럼, 버튼을 누르면 박스들의 색깔이 바뀌는 앱을 만든다고 가정하자. 이처럼, 색깔(박스)들이 추가될 때 마다 색깔함수와, 모든 함수의 onclick 인자로 각각 추가를 해줘야한다. 지금은 HTML 안에 모두 들어있지만, 박스 하나하나가 컴포넌트라면 그만큼 수정소요와 props Drilling 추가가 필요할 것이다. 💜 With Redux 😍 - 설치 우선, Redux 라이브..
-
[HTML] Semantic Web, Semantic TagFront-End(Web)/HTML, CSS 2020. 12. 14. 19:13
🤔 서론 위코드 사전스터디 과제를 진행하며 Semantic Tag에 대해 아래와 같이 간단히 정리한 적이 있다. 이에 더하여, 의미론적인 웹페이지(Semantic Web)이 왜 필요한지, 적용배경을 더하여 포스팅 해보겠다. HTML4까지는 구역을 나눌때 위주로 구성하고 id, class를 부여하는 식이었다. HTML5가 도래하면서 이름이 있는 태그들을 지원하여, 컨텐츠를 명확히 정의하고 코드 가독성을 높이고자 하였다. 이 이름있는 태그를 바로 Semantic Tag라고 한다. 종류는 포스팅 링크 참고(abangpa1ace.tistory.com/3?category=910459) 🚀 Check Point Assignment #2 "사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과 태그..
-
[React.js] JSX(Syntax extension for JS)Front-End(Web)/React - 프레임워크(React, Next) 2020. 11. 23. 23:44
🤷 React.js 사용하는 이유 [빠름, Virtual DOM] React is fast. Apps made in React can handle complex updates and still feel quick and responsive. [간결함] React is modular. Instead of writing large, dense files of code, you can write many smaller, reusable files. React’s modularity can be a beautiful solution to JavaScript’s maintainability problems. [대용량에 유리] React is scalable. Large programs that display a ..