본문 바로가기

분류 전체보기49

Vue js의 v-for 반복문에서 중첩된 JSON 객체 가져오는 법 JSON 구조 버스 목록 데이터와 그 하위 필드에 정류소에 대한 데이터가 중첩되어 있는 형태 var busObj = [{ district: "4", districtName: "서대문구", busNo: "1234", routes: [ {name: "정류장명 1", time: "09:00"}, {name: "정류장명 2", time: "09:10"} {name: "정류장명 3", time: "09:20"} ] }, { district: "9", districtName: "마포구", busNo: "5678", routes: [ {name: "정류장명 1", time: "10:00"}, {name: "정류장명 2", time: "10:10"} {name: "정류장명 3", time: "10:20"} ] }] V.. 2021. 4. 19.
이스케이프 코드 (escape code) 코드 설명 \n 문자열 안에서 줄을 바꿀 때 \t 문자열 사이에 탭 간격을 줄 때 \ 문자 \를 그대로 표현 ' 작은 따옴표를 그대로 표현 " 큰 따옴표를 그대로 표현 \r 캐리지 리턴(줄 바꿈 문자, 현재 커서를 가장 앞으로 이동) \f 폼 피드(줄 바꿈 문자, 현재 커서를 다음 줄로 이동) \a 벨 소리 (출력할 때 PC 스피커에서 '삑' 소리 출력 \b 백 스페이스 \000 널 문자 2021. 4. 15.
Parameter와 Argument의 차이 Parameter vs. Argument Parameter와 Argument는 흔히 같은 의미로 해석되는 경우가 많은데, 사실 그 정의를 알아보면 확연히 다른 의미를 가진다는 것을 알 수 있다. 개발 서적을 읽으며 종종 드는 생각은 번역된 책을 읽다 보면 이 분야에서 자주 사용되는 단어의 개념이 원문에 비해 애매하게 다가오는 경우가 많다는 점이다. 책을 읽을 때마다 애매하게 느껴지는 용어들을 틈틈이 정리해보아야겠다. 더불어 영어 공부도! 🙄 Parameter (매개변수) 함수를 선언(declare)할 때 해당 선언부에 정의되는 변수 Argument (인자, 전달인자, 실행인자) 함수를 호출(call)할 때 함수의 매개변수로 전달되는 값 예시 아래 예시를 통해 그 쓰임을 자세히 확인할 수 있다. funct.. 2021. 4. 13.
Google Charts - 반응형 차트 적용하기 구글 차트의 간략한 사용법과 반응형 적용법을 알아보자. 자세한 사용법은 공식 문서를 확인 API 연결하기 차트 만들기 원하는 차트 유형 선택 아래 차트 리스트에서 원하는 유형을 선택하여 클릭 Chart Gallery HTML(마크업) 추가 일반적으로 많이 사용하는 컬럼형 차트를 예시로 추가해보자. 아래와 같이 원하는 영역에 차트 마크업을 추가한다. 스크립트 실행하기 google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Ex.. 2021. 4. 13.
Tabnabbing 공격과 rel=noopener 블로그에 글을 쓰다 에디터의 링크 추가 기능 중 새 창으로 열기 기능을 이용했는데, target="_blank" 외에 rel="noopener" 라는 속성이 함께 추가되는 걸 발견했다. 무슨 기능을 하는 속성인지 궁금해 찾아보았는데 피싱공격에 대응하는 중요한 기능의 속성이라는 걸 알게 되었다. 이번 기회에 관련 내용을 정리하고 이를 실제 프로젝트에도 적용해보고자 한다. Tabnabbing 공격 Tabnabbing이란 HTML 문서 내에서 새 창 링크(target="_blank"인 Anchor 태그)를 클릭 했을 때, 새로 열린 창에서 기존 문서의 window.opener의 location 값을 피싱 사이트로 변경해 사용자의 로그인 정보 등을 탈취하는 피싱 공격이다. target="_blank"인 Anch.. 2021. 4. 8.
성능 최적화 - #1 성능 측정하기 성능 최적화 최근 사내 프로젝트를 진행하면서 풀페이지 플러그인을 이용하게 되었는데, 무거운 플러그인의 영향인지 사이트 최초 로딩 속도가 너무 느려 이를 보완할 수 있는 성능 최적화 방법에 대해 찾아보았다. 그동안 프로젝트를 진행하며 사이트가 느리다고 느껴질 때마다 서버 때문인가? 라는 안일한 생각으로 프론트단에서 할 수 있는 성능에 대한 처리를 미뤄왔었는데 이번 기회에 확실히 정리해 차후 진행할 업무 및 개인 프로젝트에 적용해보고자 한다. 성능 측정하기 1. Lighthouse 크롬 개발자 도구 중 Lighthouse(개편 전 Audit) 탭을 이용하여 사이트의 성능 측정 가능 Lighthouse Guide) 사용 방법 확장 프로그램 설치 시크릿 창 열기 크롬 개발자 도구 Lighthouse 탭 클릭 원.. 2021. 4. 7.
Flexbox 늘 염두에 두고 있었지만 제대로 공부해본 적 없던 Flexbox를 이번 기회에 확실히 정리해보고자 한다. 그동안 주로 대학교와 관공서 프로젝트를 진행했기에 IE 구 버전 대응 이슈 때문에 사내 프로젝트에서 Flexbox의 사용을 지양해왔었는데, 타 회사들의 작업물을 살펴보면서 여러 비효율적이고 구시대적인 CSS 정렬 방법을 Flexbox로 간편하게 해결할 수 있다는 걸 느꼈다. 또, 이 기술이 나온 지 시간이 꽤 흘러서인지 예전보다 크로스 브라우징의 어려움이 많이 없어졌고 꽤 많은 국내 사이트들에서도 Flexbox를 사용하고 있다. 먼저 Flexbox의 기본 기능을 공부해보고, 간단한 페이지를 만들어 Flexbox로 레이아웃을 구축해보기로 한다. 나아가 사내 프로젝트에서도 팀원들과 이야기하여 작은 컴포넌.. 2021. 2. 16.
[React] ReactJS로 웹 서비스 만들기 노마드코더 아카데미의 ReactJS로 웹 서비스 만들기 강의를 정리하는 글입니다. # Setup ReactJS를 사용하기 위해서 Node.js, npm, 그리고 npx를 설치해야 합니다. #1.0 Creating your first React App Node.js 설치 설치하기 Node.js를 설치하면 자동으로 npm이 함께 설치됩니다. 설치 확인 $ node -v $ npm -v npx 설치 $ npm install npx -g Error가 날 경우 명령어 앞에 sudo 를 붙여 실행 비밀번호는 본인 PC의 패스워드를 입력 create-react-app 예전에는 react 코드를 브라우저가 이해하도록 컴파일하기 위해 Webpack, Babel 같은 것들을 설치해야 했습니다. 하지만 create-reac.. 2019. 8. 5.
[JS] 바닐라 JS로 게임 만들기 노마드코더의 바닐라 JS로 게임 만들기 강의를 정리하는 글입니다. Github Commit const canvas = document.getElementById('jsCanvas'); const ctx = canvas.getContext('2d'); const colors = document.getElementsByClassName('jsColor'); const range = document.getElementById('jsRange'); const mode = document.getElementById('jsMode'); const saveBtn = document.getElementById('jsSave'); // options const initialColor = '#2c2c2c'; const c.. 2019. 8. 3.

티스토리툴바