IT
-
[REACT_MEMO] 파워노트2IT/REACT 2024. 5. 17. 00:15
# 실습해 보기1. html로 작업하는 방법html, css, js 파일을 각각 생성하고 내용을 채워준다.리액트는 html파일에서 가져올 수 있도록 작성해준다. 최초의 랜더링된 모습!여기서 버튼(Click here!)를 클릭하면 버튼의 텍스트가 변환한다. 오올 2. create-react-app(cra)Node.js v14.0.0 이상npm v6.14.0 이상VS Code npx-execute npm package binariescreate-react-app은 npx명령어로 실행 가능하다.npx는 npm package를 설치한 이후에 곧바로 실행(execute)까지 해주는 명령어이다. 패키지를 정해진 위치에 설치하고 찾아서 실행하면 번거롭기 때문에 간편하게 만든 것새로운 애플리케이션을 만들기 위해선..
-
[REACT_MEMO] 파워노트1IT/REACT 2024. 5. 12. 23:04
정의에 대해서 잘 알고 배우는 것이 매우 중요. # 리액트?리액트 공식 웹사이트에서는사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리라고 소개함 # 라이브러리?- 자주 사용되는 기능을 모아 준 것 # 사용자 인터페이스(User Interface, UI)- 웹을 예로 들면 웹사이트에서 버튼을 누름으로써 반응하고, 웹사이트에서 특정한 페이지를 보여주며 사용자가 반응하는 것을 일이 키는 걸 말함 # UI라이브러리- 화면을 만들기 위한 기능 모음집 # 대표적인 UI 라이브러리[프레임워크] ANGULAR JS - 자바스크립트 기반 웹개발 프레임워크- 구글에서 제작한 오픈소스 프로젝트- 2010년에 첫 출시, 2018년 롱텀 서포트 라 불리는 단기간에 버전 업데이트를 하지 않고 안정적인 버전을 장기간 유지..
-
[HTML] Tag : img, figure, pictureIT/HTML 2024. 4. 19. 16:32
문득, 내가 태그를 잘 사용하고 있는가 라는 생각이 자주 든다. 처음 일을 시작할 때는 일단 만들기 급급해서 의미가 무엇인지, 왜 써야 하는지도 모르고 정말 주먹구구식으로 태그를 썼고, 이제야 반성한다.(사실 반성은 맨날 함) # 목차 오늘의 태그 그리고 회고(?) 태그별 구성 a. 'img' 태그 b. 'figure' 태그 c. 'picture' 태그 태그별 차이 태그의 사용 a. 'img' 태그 b. 'figure' 태그 c. 'picture' 태그 마무리 # 오늘의 태그 그리고 회고(?) 언제 써야 하지 하고 자주 고민하는 태그로 이미지의 관련된 태그가 있다. , , 태그별 한 줄 회고(?)를 해보자면 - 주로 'img' 태그를 단독으로 사용했고, - 간혹 'figure' 태그도 사용했지만, 시멘틱..
-
[자꾸 까먹어서 기록 중] 웹접근성 검수IT/그만 까먹자 2024. 3. 23. 09:57
최근에 면접을 보면서 느낀 점이 있다. 질문이 들어왔을 때 일목요연하게 말하고 싶은데, 한마디로 정리가 안된 나 자신을 마주하게 된다. 그동안 뭐 하고 살았나 한탄할 바에는 우선 정리부터 해보자. 웹접근성 내 퍼블리셔 인생 통틀어서 가장 먼저 온 시련이었다. 웹접근성은 대체 무엇이고, 왜 해야 하는지 모르는 게 많다 보니 온갖 것들이 나에겐 궁금함을 넘어서 답답하기도 했다. 그래도 해야지 라는 마음에 맨땅에 헤딩하듯이 풀어나갔다. # 웹접근성이란? 포털사이트에서 검색하자마자 나오는 첫 글인 '한국웹접근성인증평가원'의 설명글을 참고해 보자. 정리하자면 '모든 이가 동등하게 웹을 사용할 수 있도록 보장하는 것'이 웹접근성이라 할 수 있겠다. 또한 W3C에서 웹접근성의 대해 자세한 설명과 유튜브 영상을 올려놓..
-
[자꾸 까먹어서 기록 중] 퍼블리싱 화면 검수IT/그만 까먹자 2022. 10. 22. 15:42
프로젝트를 진행하면서 QA기간에 발견되는 수많은 이슈사항들은 늘 고민스럽게 다가온다. 다양한 디바이스에서 다양한 검수를 진행 하면 좋겠지만. 그만큼 다양한 제약사항들로 인해, 우리는 가능한 방법을 가능한 방향으로 모색하게 된다. 적고 싶은데로 적다보니 두서가 없는것 같다. 일단 내가 알고 있고 사용중인 검수 방법들을 적어보도록 하자. (아직도 경험하고 있는만큼 검수 방법들이 늘어나고, 이미 기재한 검수방법의 추가 사용법도 늘어날것임.) # 검수 기준(내 기준) 검수를 진행하면서 가장 주요하게 생각하는 요소들을 몇가지 적어보았다. 적다보니, 파트별로 중요하게 생각하는 부분과 겹치는 부분이 있을것 같다는 생각이 든다. (결국은 의도한대로 잘 나오느냐가 기본 모토이니!) - 디자인과 100%에 가깝게 잘 나왔..
-
[jQuery UI] Date PickerIT/PLUGIN 2022. 8. 8. 00:37
# 목차 사용목적 Date Picker 란? 플러그인 홈페이지 사용을 위한 설치 사용을 위한 설정(css, js) 사용을 위한 레이아웃 구축(html) 사용을 위한 구문 작성(js) 그리고 결과 주로 사용하는 옵션 1. 사용목적 날짜를 선택해야하는 경우(예 : 출입국 일자 설정, 생년월일 선택, 배송일자 선택)를 캘린더형식의 UI로 다루어야 할때 주로 사용된다. 2. Date Picker 란? Jquery UI(User Interface)에서 제공하는 캘린더로, 따로 하드코딩하지 않아도 이미 제작된 캘린더를 이용할 수 있다. 커스터마이징이 용의한 편이며, 브라우저나 모바일에서 편리하게 캘린더를 사용할 수 있다. (제이쿼리 유아이에서 제공하는 위잿개념으로 생각할 수 있다.) ※ jQuery UI 란? jQ..
-
[Plugin] Rateit.js 란, 그리고 옵션IT/PLUGIN 2022. 6. 2. 17:45
# 목차 사용목적 Rateit.js 란? 플러그인 홈페이지 사용을 위한 설치 사용을 위한 설정(css, js) 사용을 위한 레이아웃 구축(html) 결과 주로 사용하는 옵션 1. 사용목적 별점주기 같은 호감도 수치를 체크하는 ui에 사용 2. Rateit.js란? 'Rateit.js'는 별점 체크 하는 ui를 좀더 효과적으로 사용할 수 있게 제공하는, 제이쿼리 기반의 플러그인이다. RTL(오른쪽에서 왼쪽으로)읽기를 위해 방향지원도 하고 있다. 3. 플러그인 홈페이지 해당 홈페이지에서 'Rateit.js' 플러그인을 사용하는 방법, 예제 등을 확인할 수 있다. http://gjunge.github.io/rateit.js/examples/ Rateit.js by gjunge 8c) SVG icons Sinc..
-
[Scroll] mCustomscrollbar js 란, 그리고 옵션IT/PLUGIN 2022. 6. 2. 14:37
# 목차 사용목적 mCustomscrollbar js 란? 플러그인 홈페이지 사용을 위한 설치 사용을 위한 설정(css, js) 사용을 위한 레이아웃 구축(html) 사용을 위한 구문 작성(js) 그리고 결과 주로 사용하는 옵션 1. 사용목적 브라우저나 모바일에서 기본으로 제공하는 스크롤을 커스텀 하기위해 사용한다. 통일된 디자인의 느낌을 잡아주는 한끗 역할을 하는 플러그인이다. 2. mCustomscrollbar js란? 'mCustomscrollbar js'는 스크롤바를 디자인적으로 유연하게 커스텀하여 제공하는, 제이쿼리 기반의 플러그인이다. 마지막 업데이트가 2016년도 6월임에도 웹,앱에서 사용에 무리가 없다.(마우스휠, 키보드, 터치 모두 가능) RTL(오른쪽에서 왼쪽으로)읽기를 위해 방향지원도..