객체 배열 정렬 이전 자바스크립트로 만든 테트리스 게임에서 랭킹 순위 보여주는 기능을 구현하는 도중 객체 배열을 정렬해야하는 기능이 필요해 공부해보았습니다. 정렬 기능은 기존 자바스크립트에 sort() 함수를 이용했고, 사용법은 정말 간단합니다. 우선 아래와 같은 객체 배열을 선언하겠습니다. const rank = [ { "name" : "홍길동", "score" : 100 }, { "name" : "신사임당", "score" : 650 }, { "name" : "이순신", "score" : 300 } ]; 객체 배열 안에는 이름과 점수만 들어있습니다. 여기서 정렬하기 위해서 score를 사용합니다. 객체 배열 오름차순 const rank = [ { "name" : "홍길동", "score" : 10..
2021.07.21
동기와 비동기 우선 동기와 비동기를 알기 전 자바스크립트는 동기식 언어이다. 자바스크립트는 단일(싱글) 스레드 방식의 언어로 한 번에 하나의 일만 처리한다. 그렇기 때문에 동기식 방식으로 작업을 처리한다. 그렇다면 만약 하나의 작업이 1시간 걸린다면 다음 작업은 1시간을 기다려야 한다. 이런 불상사를 해결하기 위해서 비동기 방식으로 작업을 처리해야 한다. 동기적(Synchronous) 동기식 방식은 직렬 형태로 작업을 수행하는데, 순차적으로 함수가 호출되고 각 함수의 작업이 끝나기 전 까지는 다음 작업을 실행하지 않는 형태다. Task1 실행 후 서버에서 데이터를 가져오는 작업을 실행하고 다음 Task2, Task3을 실행한다고 생각해보자. 여기서 동기적인 방식으로 작업을 진행할 경우, Task1 실행 ..
2021.07.21
간단하게 만들어본 패럴랙스 스크롤링 예제 See the Pen 패럴랙스 스크롤링 예제 by junheeleeme (@junheeleeme) on CodePen. 0.5 배율로 조정 후 스크롤을 내려야 함. 자바스크립트로만 작성해서 코드가 좀 난잡한데, 제이쿼리를 사용해서 다시 만들어봐야겠습니다.
2021.07.05
웹 스토리지(LocalStorage/SessionStorage) 웹 스토리지는 클라이언트(사용자)단 브라우저에 데이터를 저장할 수 있는 장소이며, DB에 저장할 만큼 중요한 데이터가 아닌 경우 웹 스토리지를 사용한다. 웹 스토리지에는 로컬스토리지, 세션스토리지 두 개로 나뉘어져 있다. 로컬스토리지(LocalStorage) : 해당 웹사이트를 새탭이나 새창으로 띄워도 동일한 데이터를 공유한다. 브라우저를 종료해도 데이터가 남아있으며, 직접 브라우저의 캐시삭제 및 로컬스토리지 초기화를 하지 않는 이상 데이터는 영구적으로 보관된다. 세션스토리지(SessionStorage) : 웹페이지의 세션이 끝나면 데이터가 지워지며(브라우저 종료), 해당 웹사이트를 새탭이나 새창으로 띄울 경우 데이터가 서로 격리되어 저장된..
2021.06.03
웹사이트 로딩 효과 구현하기 웹사이트에 로딩 효과를 자바스크립트를 사용해 구현해보도록 하겠습니다. 보통 로딩효과는 사이트 로딩이 긴 페이지에 들어가는데, 티스토리 블로그의 경우 너무 정적인 느낌이 강해 로딩 애니메이션을 넣어보도록하겠습니다. See the Pen RwpxedW by junheeleeme (@junheeleeme) on CodePen. Boxicons : Premium web friendly icons for free Boxicons is a free collection of carefully crafted open source icons. Each icon is designed on a 24px grid with the material guidelines boxicons.com 로딩 효과..
2021.06.02
부드러운 스크롤 이동 이전 HTML 태그 id 값을 사용해 스크롤 이동 구현 방법을 포스팅했습니다. 태그를 사용할 경우 이 번에는 자바스크립트와 제이쿼리를 따로 구분해서 구현해보도록 하겠습니다. [HTML/CSS] 부드럽게 스크롤 영역 이동하기 부드럽게 영역 이동하기 html, css를 활용해 해당 영역으로 부드럽게 이동하는 방법입니다. See the Pen NWrrpOB by junheeleeme (@junheeleeme) on CodePen. html{ scroll-behavior: smooth; } 태그 href 속성에.. juni-official.tistory.com 자바스크립트와 제이쿼리를 따로 나누어 구현하는 이유는 크로스브라우징 문제 때문입니다. 자바스크립트는 사파리에서 기능 작동하지만 부드..
2021.05.31
ES2015+(ES6) String 메서드 //ES2015+ String 메서드 const str = "Hello Wrold! :)"; const str2 = ":)"; console.log(str.startsWith(str2)); //false console.log(str.endsWith(str2)); //true console.log(str.includes(str2)); //true ES6에 새롭게 추가된 문자열 메서드로, startsWith는 시작 문자열 비교, endsWith 끝 문자열 비교, includes는 문자 포함 여부를 확인해준다.
2021.05.27
JS 마우스 좌표 메서드 1. clientX / clientY client는 브라우저 창을 기준으로 마우스 좌표를 알려주는 메서드로 스크롤은 무시한다. 2. offsetX / offsetY offset은 이벤트 대상을 기준으로 마우스 좌표값을 알려주는 메서드. 3. pageX / pageY 브라우저 페이지 전체를 기준으로 마우스 좌표값을 알려주는 메서드로 스크롤 전체 페이지에 해당 4. screenX / screenY 모니터 화면을 기준으로 마우스 좌표값을 알려준다.
2021.05.22
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev