나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/자바스크립트

자바스크립트 여러가지 종류의 좌표 찾기 (Vanilla JavaScript Coordinates) 입니다. 자바스크립트에서 좌표의 종류는 크게 4가지로 분류됩니다. 1. screenX, screenY 사용자의 모니터 화면을 기준으로 한 좌표를 표시 사용자의 모니터의 왼쪽 상단 모서리가 (0, 0) 2. pageX, pageY 브라우저 전체 페이지를 기준으로 좌표를 표시 가로나 세로 스크롤이 생기는 경우 스크롤이 될때마다 해당 pageX, pageY의 좌표값은 변경 3. clientX, clientY 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시 스크롤바가 움직여도, 특정 지점의 clientX, clientY의 값은 동일 4. offsetX, offsetY 좌표를 출력하도록 하는 ..

2023. 8. 8.

코딩 기록/자바스크립트

자바스크립트 - PC, 모바일 (아이폰 ios, 안드로이드) 기기 환경 구분 특정 상황에 기기 환경이 pc인지, 모바일인지, 모바일이면 ios 환경인지 안드로이드 환경인지 구분해주는 코드입니다. navigator.userAgent 를 이용하여 구분해줍니다. 자세한 코드는 하단 코드펜을 참고하시면 됩니다. See the Pen 자바스크립트 - PC, 모바일 (아이폰 ios, 안드로이드) 기기 환경 구분 체크 by kimyangsun (@kimyangsun) on CodePen.

2023. 8. 7.

코딩 기록/자바스크립트

See the Pen 바닐라 자바스크립트 siblings 기능 (Vanilla js siblings function) by kimyangsun (@kimyangsun) on CodePen. 바닐라 자바스크립트 sibilings 기능 (Vanilla js siblings function) 입니다.제이쿼리를 사용할때 선택자로 엘리먼트를 하나 잡고 siblings() 를 이용하여 나머지 형제들을 선택하는 경우가 많은데바닐라 자바스크립트에서는 그 기능을 그대로 사용하려면 따로 만들어서 사용해주어야 하기 때문에 함수 형태로 만든 코드를 올립니다. :) /* 바닐라 자바스크립트 siblings 형제 찾는 함수 커스텀 (결과는 배열로 리턴됩니다.) */// 첫번째 인자에는 엘리먼트,// 두번째 인자에는 클래스가 들..

2023. 1. 28.

코딩 기록/자바스크립트

See the Pen 객체 데이터를 이용한 HTML 태그 추가 by kimyangsun (@kimyangsun) on CodePen. [자바스크립트] 객체 데이터를 이용한 HTML 엘리먼트 추가 코드펜 예제입니다. // 운행팀에 강제로 해당 직원들이 추가되어야함 let members = [ // 보통 실무에서 이러한 데이터들은 json이나 xml로 분기되거나 백엔드에서 API로 가져옴 {name: "김팀장", position: "팀장", number: "043-740-3266", work: "차량운행, 차량관리"}, {name: "정부팀", position: "부팀장", number: "043-740-3266", work: "관용차량운행"}, {name: "김직원", position: "직원", numb..

2023. 1. 28.

코딩 기록/자바스크립트

See the Pen 현재 날짜 표시하기 (JavaScript) by kimyangsun (@kimyangsun) on CodePen. new Date()를 이용하여 현재 시간을 추출해서 toLocaleDatestring() 을 사용하여 날짜를 상세히 표시해주었습니다. 리액트 프로젝트에서 게시글 작성이나 댓글작성을 하면서 구현하면서 작성시간을 표시해두려고 구현했었는데.. 얼마 후에 다시 구현하려고 하니까 살짝 까먹어서 그냥 정리해두기로 했습니다 😑.. 'en-US' 는 영어, 'ko-KR' 은 한글입니다. 위의 예제에는 날짜만 표시해두고 시간까지는 표시하지 않았지만 같은 방식으로 해주시면 될 것 같습니다. 밑에는 주요 옵션들입니다. year: 연도를 나타냄 - 'numeric'(예: 2020) - '2-..

2021. 3. 6.

코딩 기록/자바스크립트

자바스크립트로 큐(Queue) 기능을 구현해봤습니다. 큐는 FIFO로 First In First Out, 처음으로 들어온 데이터가 처음으로 나가는 구조입니다. // 큐 클래스 class Queue { constructor() { this._size = 0; // 현재 데이터 수 this.head; // queue 기준 현재 값 this.tail; // queue 기준 가장 마지막 값 } // 묶여있는 _size를 밖에서 호출해주기 위해 getter를 사용합니다. get size() { return this._size; } // 큐 추가 enQueue(value) { const node = { value }; if (this._size === 0) { this.head = node; } else { thi..

2021. 2. 9.

코딩 기록/자바스크립트

자바스크립트로 스택(Stack) 기능을 구현해봤습니다. 스택은 LIFO로 Last In First Out, 마지막으로 들어온 데이터가 처음으로 나가는 구조입니다. // 스택 클래스 class Stack { constructor() { this._size = 0; // 현재 데이터 수 this.head; // Stack 기준 현재 값 this.tail; // Stack 기준 가장 마지막 값 } // 묶여있는 _size를 밖에서 호출해주기 위해 getter를 사용합니다. get size() { return this._size; } // 스택 추가 push(value) { const node = { value }; if (this._size === 0) { this.head = node; this.tail =..

2021. 2. 8.

코딩 기록/자바스크립트

Balloon Pop! v 1.0 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/balloon-pop/ 게임 설명 [1부터 순서대로 풍선을 터치는 게임] 주어진 시간안에 숫자가 적혀있는 풍선을 1부터 순서대로 눌러 터치는 게임입니다. - START 버튼을 클릭하여 시작합니다. - LEVEL 버튼을 클릭하여 난이도를 조정할 수 있습니다. - 풍선에 숫자가 적혀있는데 1부터 순서대로 누르면 됩니다. - 풍선의 위치는 랜덤입니다. - 왼쪽 아래는 터뜨린 풍선의 숫자, 오른쪽 아래는 제한시간입니다. - 제한시간 안에 풍선을 모두 터뜨리지 못하면 게임은 패배합니다.

2021. 2. 8.

코딩 기록/자바스크립트

PC Mobile 사용 언어 - HTML - CSS - JAVASCRIPT (Vanilla) 링크 https://kimyang-sun.github.io/mini-clothing-store/ 기능 설명 [카테고리 메뉴 기능] 처음에 아이템들은 json 데이터를 받아와 html로 변환하여 정렬합니다. 해당 카테고리 메뉴들이 링크가 아닌 하나의 페이지에서 자바스크립트를 이용하여 각각 아이템들의 데이터를 파악하여 해당하는 아이템들만 보여지게 됩니다. 각각의 카테고리 메뉴를 클릭하면 해당 카테고리에 해당하는 옷들이 분류되어 나타납니다. 체크상태인 메뉴들을 다시 클릭하면 체크가 해제됩니다. (상품 다시 필터링)

2021. 2. 8.