[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
vue 패키지 버전 불일치로 인해 생기는 오류 해결법
git으로 협업 작업 중인데 다른 팀원이 새 플러그인을 깔면서 나도 풀을 받으면서 npm i를 했더니만 위와 같은 오류가 떴다. 대충 내용을 보아하니 뷰 패키지 버전 불일치로 인해 생긴 오류였는데, 해결 방법! 영문으로 검색해서 확인해보니 (1) package-lock.json 파일 삭제 (2) node_modules 폴더 삭제 (3) npm i 생각보다 간단하게 해결되는 오류였지만 나중에 또 똑같은 일이 발생했을 때 당황할 수 있으니 일단 여기에 기록해둔다.
카테고리 없음 | 2020. 10. 23. 18:36
[javascript] 객체, 생성자, 프로토타입 관련
(참고: 모던 자바스크립트 입문) 객체(object) "객체(object)"란 이름(key)과 값(value)을 한 쌍으로 묶은 데이터를 여러 개 모은 것. 데이터 여러 개를 하나로 모은 복합 데이터로 '연관 배열'이라고도 부른다. 이 때 프로퍼티는 객체에 포함된 데이터 하나(이름과 값의 쌍)를 의미하고, 프로퍼티는 프로퍼티 이름(혹은 키)과 프로퍼티 값으로 이루어진다. 객체지향 언어에서, 비슷한 형태를 가진 객체를 여러 개 만들고 싶을 때, 그 비슷한 형태들을 정의한(공통된 특성일 수도 있고 아닐 수도 있음) 클래스를 먼저 만들고, 그 클래스를 통해서 각각의 객체를 생성한다. 클래스는 마치 거푸집, 빵틀 같은 느낌?.. 으로 이해하면 됨. 생성자(constructor) 인스턴스를 생성하는 데 사용하는 ..
카테고리 없음 | 2020. 10. 22. 14:54
[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