차마시는 개발자

Touch Slider (Image)Touch Slider Image 기능을 구현하면서 Image 특정 부분에 넣어 Image Touch Slider 구현하기 등 여러 문제를 겪어 다음에는 같은 실수를 반복하지 않고 다른 분들도 효율적인 구현을 할 수 있도록 작성한 글입니다. ( Svelte를 기반으로 제작된 글입니다. ) TechSvelteJavaScript / Html / CSS 과정Touch slider은 Image를 쭉 나열해 두고 overflow: hidden으로 이미지를 숨기고 mouse event와 transform: translateX()를 이용하여 image 위치 고정(image index * -보여지는 너비(width)) 및 dragging 하는 모습을 보여줍니다.1. Image 고정 ..

어떻게 하면 메뉴를 쉽게 짤 수 있을까? (데이터 구조 관련) 이번에 Style Guide Menu를 수정하는 부분을 맡았습니다. 처음에는 CSS 만 수정하면 되는 줄 알았으나 값들의 데이터 구조를 잘 조합하여 데이터가 많아질 경우를 대처하고 한 눈에 보이고 간략한 코드를 짜는 것이 주된 목적입니다. 사용 기술 HTML, CSS, JavaScript, Svelte 변경 전 Data 형태 간단하게 말하면 [{}]와 같은 형태로 되어 있습니다. let url = [ { MENU_NAME: "1", MENU_URL: "/dev" }, { MENU_NAME: "2", MENU_URL: "/dev" }, ]; 그래서 Svelte에서 다음과 같이 뿌려주면 됩니다. {#each url as menu} //routin..

day.jsgithub정의: 주로 Moment.js와 호환되는 API를 사용하여 최신 브라우저의 날짜와 시간을 구문 분석, 유효성 검사, 조작 및 표시하는 최소한의 javaScript 라이브러리무게: 2kb특징:Immutable(불변): Day.js 개체를 변경하는 모든 API 작업은 새 인스턴스를 대신 반환합니다.=> 이것은 긴 디버깅과 버그를 방지합니다.I18n 지원: 국제화를 지원하지만 사용하지 않으면 어느 것도 빌드에 포함되지 않습니다.설치npm install dayjs --savedayjs() .startOf('month') .add(1, 'day') .set('year', 2018) .format('YYYY-MM-DD HH:mm:ss'); See the Pen Untitled by..

JavaScript 반복JavaScript에서 객체나 배열등을 반복할 때 for문을 사용하게 됩니다. 또한, JavaScript에서 for ... in, for ... of, .forEach 등을 만들어서 보다 편리하게 Object, Array등을 반복할 수 있게 됩니다.for ... in- 객체의 열거가능한 key(속성)들을 반복하는데 사용한다. (Nonenumerable(비열거형)인 value에는 접근할 수 없습니다.)- Object의 key or index를 반복 - 반복할 때마다 인스턴스 or 프로토타입 체인을 검색하므로 느린 속도를 가집니다.- index에 할당되는 값들은 String 타입으로 변환됩니다.let obj = { a: 1, b: 2};for (let key in obj) ..

객체 배열 JavaScript는 객체와 배열로 이루어져있는데 정확히 그들의 관계와 의미에 대해 이해가 부족하여 작성하게 되었습니다. 우선, 비교에 앞서 배열과 객체의 기본적인 내용부터 설명하도록 하겠습니다. 객체 다양한 키 컬렉션과 복잡한 엔터티를 저장하는 데 사용되는 것 (첨부: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object) 배열 리스트와 비슷한 객체로서 순회와 변형 작업을 수행하는 메서드를 갖는 것 (첨부: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array) 배열은 객체인가 ? 정답부터 말하..

table의 tbody부분에 다음 코드와 같은 것을 넣었을 때 다음과 같은 오류가 발생하였습니다. 이를 보니 ${idx} 부분이 #text로 들어가는 문제였습니다. 조금 찾아보니 CSS 로 인해 하나씩 밀리는 것이였습니다. 그래서 CSS를 고치므로 해결하는 방법을 생각해봤으나html 내부에서 바꾸는 것이 더 쉽게 바꿀 수 있을 것이라고 판단이 되어서 html을 고치게 되었습니다. 그래서 다음과 같이 해결을 하였습니다. 확실한 방법일지는 모르지만 더 좋은 방법을 아시면 댓글로 알려주세요 ㅎㅎ

네이버 FE-news를 보던 중 자바스크립트는 왜 프로토타입을 선택했을까? 을 읽으려고 하는데 javascript를 공부하면서 Prototype에 관한 것을 잘 알지 못하다는 것을 느껴 더 찾아보게 되었습니다. Prototype Prototype = Prototype Link + Prototype Object 이며 Class와 같은 역할을 합니다. function Person() {}와 같이 함수가 생성이 되면 해당 함수에 Constructor(생성자) 자격 부여 Prototype Object 생성 합니다. 그래서 Person Prototype Object가 생성되는 것을 알 수 있습니다. Person.prototype.eyes, Person.prototype.nose과 같이 Person Prototyp..

처음 본 issue였습니다. 그래서 빨리해야 하는데 궁금증을 버리지 못하고 파헤치기 시작했습니다.issue 설명을 보면 chrome 101부터 사용자 에이전트 문자열에서 사용할 수 있는 정보의 양이 줄어들어서 생긴 것이라고 나와있습니다. 즉 정리를 하면 라이브러리 기반 .js는 Chrome에서 더이상 사용되지 않는 navigator기능을 사용하고 있어서 문제였습니다. 주로 navigator에 관해서 설명을 하고 있는데 navigator은 브라우저에 대한 다양한 정보를 저장하는 객체라고 생각하면 됩니다. 자세한 내용은 들어가서 보시면 좋습니다. 그래서 해당 라이브러리를 update하거나 삭제해야 하는데 다시 코드를 정리하면서 문제를 해결해 보겠습니다. 다음은 stackoverflow에 해당 문제 해결이 나..