[javascript] localStorage
mdn의 설명에 따르면 "현재 출처의 로컬 저장 공간에 접근할 수 있는 Storage 객체" HTML5에서는 별도의 백엔드 서버가 없더라도 간단한 애플리케이션의 경우 로컬스토리지를 활용하여 저장 기능을 구현할 수 있다. '쿠키'의 원리가 확장되어 HTML5에서 추가된 기능인데, 웹 스토리지에는 로컬스토리지와 세션스토리지가 있다. 둘의 가장 큰 차이점은 영구적으로 저장될 수 있느냐인데, 세션스토리지의 경우에는 브라우저를 닫을 경우, 세션이 종료될 경우 저장된 데이터가 사라지는 특징이 있는 반면에 로컬스토리지에 저장된 정보는 따로 로컬스토리지를 비우지 않는 이상 데이터가 계속적으로 남아있게 된다. 나는 이 특징을 사용하여 My Colors 앱을 만들 때 백엔드 서버 없이도 간단한 저장 기능을 구현했다. lo..
개발 공부 일지/Javascript | 2020. 11. 3. 21:42
나의 첫 리액트 토이프로젝트: My Colors
토이프로젝트 하나를 어찌 어찌 겨우 완성시켰다. 이름은 "My Colors". 색상 조합을 로컬스토리지에 저장할 수 있게 해 놓은 아주 간단한(이라고 쓰고 나는 정말 애먹었다고 한다) 웹 애플리케이션이다. 이걸 만들게 된 계기가 있었다. 실은 내가 필요해서 만들게 되었는데...... 포트폴리오 웹 페이지를 나름 예쁘게 제작하고 싶어서 열심히 열심히 예쁜 외국 사이트 디자인들을 구경하던 때였다. 나는 디자인 감각이 그닥 좋지 않지만... 그 중에서도 특히 색에 대한 감각이 부족해서, 대학교 다닐 적에도 PPT를 만들 때 도서관에서 배색 모음집 책 같은 걸 빌려다가 쓰곤 했었는데, 웹 사이트를 여기저기 구경하다 보면, 우와, 이건 진짜 색 조합이 예술이다!!+_+ 싶은 사이트들이 제법 있는 것이다. 그래서 ..
개발 공부 일지/일기, 회고, 잡담... | 2020. 11. 2. 19:19
HTTP, HTTP 메서드
HTTP란 무엇인가에 관한 나의 궁금증은 의외로 매우 사소한 부분에서 시작되었다. 포트폴리오 웹 페이지를 만들고 있는데, 리액트로 만들어서 vercel로 배포를 하고 보니 포트폴리오 페이지 치고 url이 너무 맘에 들지 않았다. 이왕이면 이것은 나를 소개하는 페이지!! 라는 게 url에 똻!! 하고 보였으면 좋겠어서, 6,600원을 주고 1년짜리 내 이름으로 된 도메인을 구입했는데, http://를 쓰면 정상적으로 웹 페이지가 뜨는데 https://를 쓰면 페이지가 아예 뜨지 않는 것이다. 대충 https://와 http://는 보안과 관련된 부분에서 차이가 난다는 것까지는 알고 있었지만, 만약에 내 이름 도메인을 https://를 써서 연결하고 싶으면 어떻게 해야 하나 찾아보니 무슨 인증서를 또 따로 ..
개발 공부 일지/Web(HTTP, etc) | 2020. 10. 23. 19:00
[javascript] 주요 이벤트 처리기
이벤트 처리기 의미 onClick 마우스로 클릭했을 때 onDbClick 마우스로 더블클릭했을 때 onMouseDown 마우스 버튼을 눌렀을 때 onMouseUp 마우스 버튼에서 손가락을 떼었을 때 onMouseMove 마우스 포인터가 HTML 요소 위에서 움직일 때 onMouseOut 마우스 포인터가 HTML 요소를 벗어났을 때 onMouseOver 마우스 포인터가 HTML 요소 위에 놓여 있을 때 onKeyDown 키보드의 키를 눌렀을 때 onKeyPress 키보드의 키를 누르고 손가락을 떼었을 때 onKeyUp 키보드의 키에서 손가락을 떼었을 때 onChange input 요소의 값이 바뀌었을 때 onBlur input 요소가 포커스를 잃었을 때 onFocus input 요소가 포커스를 맞추었을 때..
개발 공부 일지/Javascript | 2020. 10. 11. 00:25
[HTML.CSS] 폰트 단위: px, em, rem 차이
요즘 포트폴리오 웹 페이지를 만들고 있는데 생각보다 퍼블리싱 작업, 그러니까 화면을 그리는 작업이 쉽지 않다는 걸 느끼고 있다. 무엇보다도 모바일, 태블릿, 랩톱, 데스크톱 등 모든 디바이스에서 화면을 봐도 전혀 불편하지 않게끔 만드는 게 정말 어렵다. 모바일 버전과 데스크톱 버전을 각각 디자인해서 퍼블리싱을 해도, 아이폰에서 보여지는 게 다르고 갤럭시에서 보여지는 게 다르니, 매 작업을 할 때마다 옛날 폰들을 다 꺼내서 내가 갖고 있는 장비 모든 걸 다 동원해 화면을 확인하는 노가다를 하고 있다. 크로스브라우징과 반응형 웹 디자인에 대한 이해가 이렇게나 중요한 건 줄 몰랐지...... 개발자가 되겠다고 결심하고 지금까지 공부를 해 오면서 복잡한 코드를 능수능란하게 다룰 줄 아는 것만 내가 지향해야 할 ..
개발 공부 일지/HTML.CSS | 2020. 10. 2. 17:07
[Vue.js] 문자열 데이터 바인딩 줄바꿈하기 (바인딩된 문자열에 html 태그 적용하기)
위와 같은 화면을 출력하려고 한다. 그런데 위의 텍스트가 에 있는 것이 아닌 ...(생략) { subTitle: "환불/취소 요청 시 먼저, 다음의 내용으로 접수하여 주세요. \n세부사항에 대한 확인이 필요합니다." } 이렇게 prop으로 상단 컴포넌트에서 넘어오는 데이터에 잡혀 있는 텍스트였다. 원래 코드는 {{ propsData.subTitle }} 이렇게 나타나던 것을 아래와 같이 {{ propsData.subTitle.replace("\n", " ") }} replace 함수를 사용해서 JSON 데이터 개행 문자인 '\n'을 html 개행 태그인 ' '로 바꿔주었더니 응? 태그가 그대로 잡히는 문제가 발생. 콧수혐 괄호 {{ }}는 바인딩되는 문자열을 문자열로만 인식하기 때문에 위와 같은 상황에선..
개발 공부 일지/Vue.js | 2020. 9. 20. 16:53
[Vue.js] 숫자 자릿수 잘라서 보여주기(?)
위와 같은 형태를 화면에 구현해야 했다. 이를 위해 데이터로부터 받아 오는 숫자를 하나하나 쪼개서, div에 각각의 숫자를 집어넣는 방법을 생각했다. ₩ {{ priceTotal(priceLength, i) }} export default { props: ["paymentData"], data() { this.paymentData.slicePrice = String(this.paymentData.paymentPrice).split("") return { priceLength: 10, } }, methods: { priceTotal(length, i) { const calcuIndex = this.paymentData.slicePrice.length - length + i return calcuIndex ..
개발 공부 일지/Vue.js | 2020. 9. 15. 17:45
[javascript] 숫자 천 단위마다 콤마 찍는 함수
두 가지 방법이 가능하다. 1. toLocaleString() toLocaleString() 메서드는 배열의 요소를 나타내는 문자열을 반환하는 함수로, locale 고유 문자열에 의해 분리되는데 숫자의 경우는 쉼표(.)로 분리된다. const array1 = [ 123450 ] array1.toLocaleString() 2. 정규표현식 /* 숫자 1000단위마다 , 표시하게 하는 함수 */ function commaAdd(num) { const regexp = /\B(?=(\d{3})+(?!\d))/g return num.toString().replace(regexp, ",") } (commaAdd는 함수 이름으로 각자 임의로 만들어서 넣어주면 된다.)
개발 공부 일지/Javascript | 2020. 9. 15. 06:06