jineecode

개요: li를 하나하나 DOM을 만들고 클릭 이벤트를 걸고 한땀한땀 active를 거는 막노동을 하고 있을 때 뭔가 이상하고 비효율적임을 느낀 나는 언젠가 들어봤던 이벤트 위임을 떠올리고 적용해보기로 함. 간단히 말해, 부모를 클릭하면 자식이 수행하는 원리이다. (이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다. 출처: ko.javascript.info/event-delegation) HTML GODIVA 역사 Our Belegian Heritage GODIVA 기원 The legend of Lady Godiva GODIVA 초콜릿 GODIVA chocolate GODIVA 쉐프 Meet Our Che..

한 시간의 삽질 끝에 알아냈다. 왼쪽은 swiper의 기본 화살표와 내가 적용하려는 화살표가 겹친 모습, 오른쪽은 끝내 파란 화살표를 없앤 모습이다. 결론부터 보자. .swiper-button-next { background: url(/godiva/img/common/next.png) no-repeat; background-size: 50% auto; background-position: center; } .swiper-button-prev { background: url(/godiva/img/common/prev.png) no-repeat; } .swiper-button-next::after, .swiper-button-prev::after { display: none; } 관건은 ::after에 있는..

개요: 푸쉬할 게 많아서 소스트리로 작업하다가 깃허브에 txt 파일이 올라간 게 거슬려서 뭣 모르고 히스토리에서 커밋 되돌리기를 눌렀더니... 수정한 '코드'가 모두 처음으로 되돌아가는 상황이 발생. 커밋 삭제가 아니라 revert 기능이었던 것... 데이터베이스 작업을 포함해 상당히 많은 것을 수정한 작업이었기 때문에 정말 울 뻔 했다... ㅠㅠ... 1. git reflog 작업된 로그들을 확인한다. 165d044번: revert: REVERT~를 없애야 한다. 리버트 하기 전 파일은 그 전 작업인 05f2c73번이다. 2. git reset --hard 돌아가고 싶은 로그번호 나 같은 경우엔 05f2c73 번으로 돌아가야 했다. (이젠 로그번호도 외울 판) git reset --hard 05f2c7..

개요: JS 실력 향상을 위해 JS를 직접 짜는 습관을 들이고 있지만 라이브러리를 쓰는 연습도 필요할 것 같아서 자주, 많이 사용되는 스와이퍼 슬라이드를 써보는 연습을 한다. 제이쿼리CDN을 넣고 싶지 않아서이기도 함... 1. 홈페이지 swiperjs.com/get-started#add-swiper-html-layout Getting Started With Swiper Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 2-1. 간단한 구현만 필요할 경우 CDN을 넣는다. ex) 2-2변형이 조금 필요한 사람들은 다운로드 ..

개요: 그렇다면 JS는 무슨 언어라고 보면 좋을까? JS는 스크립트 언어라고 한다. 생각해보면 HTML에 js를 연결할 때 를 열어 js를 연결한다. 스크립트 언어는 내게 제일 친숙한 언어다. 1. 스크립트 언어 - HTML 문서 안에 직접 프로그래밍 언어를 삽입하여 사용하는 것으로, 기계어로 컴파일 되지 않고 별도의 번역기가 소스를 분석하여 동작하게 하는 언어 - 클라이언트의 웹 브라우저에서 해석되어 실행되는 클라이언트용 언어와, 서버에서 해석되어 실행된 후 결과만 클라이언트로 보내는 서버용 스크립트 언어 클라이언트용 언어: JavaScript 서버용 스크립트 언어: ASP, JSP, PHP, Python 2. 스크립트 언어의 장단점 - 컴파일 없이 바로 실행하므로 결과를 바로 확인할 수 있음 - 개발..

개요: 객체지향 프로그래밍 언어를 알기 전에 먼저 알아두어야 할 프로그래밍 언어. 대략적인 개념은 있지만 자세한 개념을 정리하기 위해 알아 보았다. 1. 절차적 프로그래밍 언어 - 일련의 처리 절차를 정해진 문법에 따라 순서대로 기술해나가는 언어 - 프로그램이 실행되는 절차(Procedure)를 중요시 함 2. 절차적 프로그래밍 언어의 장단점 - 컴퓨터의 처리 구조와 유사하여 실행 속도가 빠름 - 같은 코드를 복사하지 않고 다른 위치에서 호출하여 사용할 수 있음 - 모듈 구성이 용이하며, 구조적인 프로그래밍이 가능함 - 프로그램을 분석하기 어렵고, 유지 보수나 코드의 수정이 어려움 (절차적 프로그래밍을 하면 모든 기능과 속성의 개연성, 관계성이 떨어질 뿐더러 어떠한 한 기능을 수정한다고 하면 모든것을 수..

개요: JS가 객체 지향 프로그래밍 언어인 줄 알았는데 아니라는 소리를 듣고 알아보았다. 1. 객체 지향 프로그래밍Object-Oriented Programming 언어의 개요 소프트웨어를 개발할 때 객체들을 조립해서 프로그램을 작성할 수 있도록 한 프로그래밍 기법. 2. 객체지향 프로그래밍의 장 단점 상속을 통한 재사용과 시스템의 확장이 용이. 코드의 재활용성 높음 대형 프로그램의 작성 용이 정형화된 분석 및 설계 방법이 없음 실행 속도가 느림 3. 객체지향 프로그래밍의 종류 언어 특징 C++ C언어에 객체지향 개념을 적용한 언어 모든 문제를 객체로 모델링하여 표현 C# Microsoft에서 개발한 객체지향 프로그래밍 언어 C++, JAVA와 문법 비슷 불안전 코드와 같은 기술을 통해 플랫폼간 상호 운..

어떤 개념인지는 대충 아는데 논리적으로 설명하기 어려운 것을 모아 적는다. 1. 자바스크립트에서의 비동기 코드(언제 실행될 지 모름)는 코드 상의 순서대로 실행되지 않는 코드를 말함. ex. 콜백함수, setTimeout private.tistory.com/24 동기와 비동기의 개념과 차이 데이터를 받는 방식인 동기와 비동기. 이 둘의 개념에 대해 설명하는 게시물은 매우 많은데 프로그래밍적으로 생각했을 때 이해가 가지 않아서 쉽게 이해를 할 수 있는 동기와 비동기의 예가 private.tistory.com