전체 글51 퍼블리싱을 할 때 이런 가이드로 작업합니다! 1. 마크업 (HTML)HTML5를 이용한 논리적 순서로 시멘틱한 마크업을 기본으로 한다.ID는 큰 레이아웃(header, footer..)을 제외한 사용을 지양한다. (접근성 제외)Form요소(input,select,textarea)에는 title 속성을 기입한다. 규칙은 아래와 같다.섹셔닝 관련하여 Heading level을 준수한다. [6번 목차 참고]섹셔닝에 관련된 태그를 남발하지 않으며 문서(document)에 필요한 요소들로 마크업한다.의미가 없는 이미지는 가급적 배경처리하되 개발에 관련하여 들어가야하는 동적인 이미들은 alt값을 넣어준다. alt값은 필수이며 의미가 없더라도 빈값의 alt 속성을 추가한다. 빈 alt값을 가지는 img에 한해 role="presentation" 속성을 추가한다.. 2024. 10. 18. 접근성 Tag Skip navigation다수의 건너뛰기를 제공할 경우, 핵심 콘텐츠인 본문으로 이동하기를 우선으로 제공. Content / GNB / Footer 순으로 스킵네비게이션을 구현한다.GNB의 경우 IE11에서 요소 등에 접근하지 못하는 버그가 있으므로, ul이전에 div와 id, 크기값을 지정하여 주메뉴 영역으로 이동할 수있게 한다.Title tag저시력자를 위해 해당 페이지의 내용을 쉽게 파악할 수 있도록 순서를 아래와 같이한다. 작은순에서 큰순으로 작성.faq Img tag의미없는 이미지에는 alt를 "" 비게 한다.Label tag레이블의 내용을 형태로 제공할 경우, 일부 스크린리더는 인지못하는 경우 발생한다.그렇기 때문에 해당 Input에 title 속성을 주거나, label태그로 텍스트로 제.. 2024. 10. 18. WAI-ARIA (웹접근성) 참고 : https://jangkunblog.com/assets/file/2016.12.14-WAI-ARIA.pdf1. 속성aria-haspopup (팝업 유/무)값 : true / false다른 속성은 지원하지않는 브라우저 많다. 그렇기때문에 위 값 위주로 써줄것을 추천한다.aria-current (현재 위치)선택된 메뉴와 같은 경우에 적용값: page(paging), *step(preocess), location, date, time, *true(tab), false(default)aria-expanded (확장)값 : true(확장) / false(축소)아코디언이나 레이어팝업 열기/닫기 버튼aria-controls="id" (제어하는 요소)현재 버튼이 제어하는 요소를 넣어주기레이어팝업 열기닫기 버튼.. 2024. 10. 18. SEO(검색엔진최적화) Title타이틀 속성은 META TAG의 description 과 비슷한 영향을 준다.웹 접근성이라는 이슈때문에 국내 사이트들은 보통은 '사이트명>페이지명' 이렇게 쓰는 편인 것으로 아는데 SEO 상 공백 포함 10-70자정도를 포함하는 것이 좋다. (구글에서 최대 70자를 보여주고, 처음 12단어를 보여준다고 한다.)그리고 해당 페이지는 페이지마다 고유한 제목이 필요하다.이 고유한 제목을 만들기 위해서는 해당 페이지에 가장 중요하고 관련성 높은 키워드를 넣되, 단어 반복은 제한하도록 한다.META Description해당 웹페이지의 설명을 뜻한다. 구글에서 검색을 하게 되면 아래처럼 나오는데 노란색 줄 친 부분이 description meta tag로 나타내질 부분이다.해당 텍스트는 70~160 자를.. 2024. 10. 18. 2024년 목표 1. 학사 따기 (학점은행제) 2. React 3. 임신 1번 학사 따기는 8월 완료. 드디어 웹프로그래밍 3년제 전문학사에서 컴공 학사 전환했다. 하면 될걸 왜이리 미뤘을까 2번 React 이또한 현재 업무로 진행중 주사용 프론트 프레임워크는 Vue3였으나 이번에 추가로 React 프로젝트를 맡으면서 현재 실무중 기존 운영하던 React 프로젝트도 있었으나 활동적으로 운영되던 프로젝트가 아니여서 나이브한 느낌이었다. 막상 하다보면 그게 그거아닌가 싶다. 결국 자바스크립트 개발자는 다 해야하는거 아닌가 3. 임신 두번의 임신과 유산. 참 맘처럼 쉽지 않다. 이제까지 마음 먹은 일이 안풀린적 없었는데 계획처럼 되지 않는게 인생인가 어쨌든 현재 영양제 챙겨먹고 좋은 음식 챙겨먹으며 운동을 열심히 하고 있다... 2024. 9. 8. Proxy 💡 내 공부를 위한 Proxy 정리 글이다. 프록시란 무엇인가? 나는 Vue.js를 주로 작업하는 프론트 개발자이다. Vue.js에서 객체를 콘솔로 찍을 때 순수하게 객체가 아닌 Proxy로 만들어진 값들을 마주할 때가 있다. Proxy는 왜 쓰고? 어떻게 쓰는가? 이것에 대한 글이다. Why use it? 대체 왜 프록시를 쓰는가? 프록시에 공부해보니 데이터가 변환되거나 읽어지거나 여러 경우에 프록시 트랩을 통해 제공하는 기능에서 유효성 처리나 변화를 감지할 때 사용 가능하다. 내가 실무에서 프록시를 써야하는 경우라면 어떻게 쓰겠는가? 객체를 set 해야 하는 경우 유효성 처리라던지 get 해야 하는데 객체 내에 값이 없을 경우 default 값을 처리해줘야 한다던지 주요 데이터를 처리할 때 프록시를 .. 2024. 3. 8. Curry pattern 커리 패턴의 가장 중요한 쓰임새는 partially(부분적인) 쓰임이 가능한 패턴이다. **lodash 라이브러리(_.curry)**를 사용하면 편하게 쓰긴 하지만 구현한다고 해서 힘들지 않다. 기본 구현 방법 function curry(f) { return function(a) { return function(b) { return function(c) { return f(a, b, c) } } } } function sum(a,b) { return a + b } const curried = curry(sum) curried(1)(2) // 3 function sum(a,b) { return a + b } const curried = _.curry(sum) curried(1,2) // 3 일반적인 호출 .. 2024. 3. 6. 리액트 라이프 사이클 💡 React@17 부터 `componentWillMount`, `componentWillUpdate`, `componentWillReceiveProps`는 deprecated 되었다. Mount 컴포넌트가 DOM에 붙는 과정. context, defaultProps, state 저장 componentWillMount 메소드 호출 [react@17 deprecated] render메소드로 컴포넌트 DOM에 부착 (여기까지도 마운트 중에 속함) 마운트 완료 지점에서 componentDidMount 메소드 호출 componentDidMount에서 DOM 접근 가능 이 시점에 비동기요청 또는 setTimeout, setInterval 실행 Props Update props가 변경될 때의 과정. 업데이트 발생 .. 2022. 10. 14. 수린이 1강습 수영을 8시로 잡은 덕에 7시까지 야근아닌 야근을 하게 됐다. 회사 마치고 수영장으로 가서 어떠한 설명도 못듣고 탈의실로! 탈의실에서 다른 여자분에게 물어물어 여러가지를 알게되었다. 우리 수영장은 시설은 오래되었지만 탕도 있고 너무 좋다. 수영복을 입는거부터가 나에겐 훈련이였다!!! 실리콘 수모는 어떻게해도 나를 이쁘게 만들어주지 못했다 ㅠㅠ 뻘쭘뻘쭘하게 내려가서 뻘쭘뻘쭘하게 기웃기웃거리다가 젤 뒤에 의자에 앉아서 기다렸다 ㅋㅋㅋㅋ 8시가 다 되어가자 나와 비슷한 뻘쭘뻘쭘한 사람들에 등장했다! 오늘 처음 시작하는 사람들은 나 포함 4명이였다. 수린이 수린이 수린이 수린이 음파 음파부터 시작했는데 물을 별로 안무서워해서 그런지 괜찮았다. 발차기가 진짜 토 나오는줄 알았다. 강사님 말씀에 따라 한시간이 훌쩍.. 2022. 8. 2. 이전 1 2 3 4 ··· 6 다음
