본문 바로가기

분류 전체보기

 (86)
제이쿼리 버튼 클릭 이벤트 - 버튼 외 화면 다른 곳을 누르면 효과 제이쿼리는 비교적 속도나 크기 등 경쟁력 면에서 뒤떨어지면서? 사양될 전망이라는 라이브러리지만.. 그럼에도 작성법이 매우 간단해 현업에서 아직까지도 많이 써먹고 있다.. 오늘은 버튼 클릭 이벤트를 정리하다가 잊었던 is() 메서드를 다시 떠올림. 정리 차 게시물을 올리게 됐다. 버튼 외에 화면 아무 곳이나 클릭하면 버튼에 특정 효과를 주는 이벤트를 작성한다. 전체를 싸고 있는 요소가 필요하다. 페이지를 감싸고 있는 요소를 .container 라고 명명. 버튼은 button 클릭하면 하단으로 메뉴 리스트가 슬라이드 되어 나타난다. 메뉴버튼 메뉴1 메뉴2 메뉴3 메뉴4 $('.btn').click(function(){ //우선 버튼 클릭 이벤트 먼저 만들어 주고 - 버튼에 스타일 바뀌는 on 클래스 입혀주고..
자바스크립트 작동 안될 때, body onload 충돌문제 오늘도 여전히 코린이는 삽질만 열라 하다가 퇴근합니다.. 오늘은 평소 잘 돌아가던 페이지에서 갑자기 자스가 작동을 하지 않는 것... 대체 왜 안돌아갈까 생각해봤더니 최근에 팝업창 띄우는 코드를 입력했었는데, 그러고 나니 캘린더가 안열리는 거다.. 팝업창 띄우는 코드를 에 onload이벤트 인라인 입력했었는데, 요걸 빼고 새로고침하니까 나머지가 잘 돌아간다. 짱돌을 굴려보니 문제의 원인은 onload 충돌 때문이라는 결론이 났다. 호출된 js 파일 안에 window.onload = 코드가 입력돼 있었다.. onload이벤트는 두번 이상 실행하면 충돌이 일어나 한 쪽만 실행된다. 이때는 window.onload 나 document.onload 이렇게 나눠서 실행시킨다. 결국 에 인라인으로 넣었던 이벤트 실..
분명 파일을 수정했는데 깃허브 연동 왜 안되나!! 깃허브...연동하려했는데 변동사항에 파일이 안 뜬다 ? (이걸로 뻘짓만 몇 시간..) 지정 폴더 외에 .git 폴더가 있는지 확인해봐야한다. .git은 최상위 폴더, 지정폴더에만 들어있어야 한다고 함.. 이걸 지우니까 변동사항에 똬랗 하고 뜸!!! 야호
깃허브 에디터 연동 방법 총정리 + 자주쓰는 명령어 깃허브는 쓰면 쓸수록 잘 모르겠는... 맘처럼 잘 되지 않는 녀석이다. 소스트리를 써보다가 에디터에 연동하는게 편할 거 같아서 (저장하고 바로바로 커밋할 수 있도록) 평소 쓰는 아톰과 VS CODE에 연동해서 쓰고 있다. 터미널도 에디터에 내장돼 있으므로 간편하다. (근데 어떤 개발자 분은 에디터에 깃헙 연동하면 오류가 종종 나서 이용하지 않는다고 하더라) git init //초기화 git config user.name '사용자명' git config user.email '깃허브 이메일' //깃허브에서 로그인할 때 쓰이는 이멜주소. git remote add origin '원격저장소 주소' //보낼 원격 주소 입력 git remote -v //이미 저장돼있다 어쩌구 그러면 이걸 쳐서 원격 주소 확인 여기..
헷갈리는 자바스크립트 메소드 indexOf() 개념 잡기 indexOf()는 array와 string 둘다 사용 가능한 메소드다. 찾고자 하는 값이 문자열 혹은 배열에서 몇번째에 오는지를 알려준다. 또 찾는 값이 문자열 혹은 배열에 있는지 없는지 확인하는 함수를 짤 때 많이 이용한다. 우선 기본적인 개념을 살펴보자. (배열로 보자) indexOf('찾고자 하는 값', '시작점(생략가능)') array = ['min', 'hope', 'jin', 'kok', 'hope']; array.indexOf('hope') // 1 array.indexOf('suga'); // -1 배열의 순서는 0부터 시작하므로 'hope'의 순서는 1번째다. 그리고 만일 ('hope'처럼) 배열에 동일한 값이 2개 이상있을 경우엔 무조건 제일 앞에 위치한 값을 반환한다. (검색의 기본..
프론트엔드 로드맵 33 - code Formatters : Prettier프리티어 Code Formatter 코드 포맷터는 에디터에서 보다 효율적이고 가독성 좋게 코드를 작성하기 위한 확장 extention 기능이다. 대표적인 formatter로 Eslint와 prettier가 있는데, 보통 두가지를 함께 사용한다. (기능이 비슷한 듯보이나 다르다) prettier는 들여쓰기를 맞춰주고, 세미콜론이나 콤마가 빠진 부분에 넣어줌. 그리고 '' 와 ""의 사용을 통일시켜준다. 여러명이서 협업을 해야하는데 코딩 스타일이 다를 경우 하나로 통일시켜주는데 도움이 된다. javascript(ecma2017 최신버전까지), JSX, angular, vue, typescript, css, HTML, JSON, GraphQL ,markdown, yaml 등을 지원하고 있다. Prettier는 작성자가..
프론트엔드 로드맵 32 - 모듈번들러 ParcelJS 앞서 설명한 Webpack과 Rollup 그리고 이번엔 Parcel이다. 프론트엔드 로드맵 31 - 모듈번들러 Rollupjs 웹팩과 마찬가지로 Rollup은 어플리케이션을 모듈화한 뒤 이 파일들을 번들하는(하나의 파일로 합쳐모으는) 모듈번들러다. 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라 bomango.tistory.com 프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poie.. bomango.tis..
프론트엔드 로드맵 31 - 모듈번들러 Rollupjs 웹팩과 마찬가지로 Rollup은 어플리케이션을 모듈화한 뒤 이 파일들을 번들하는(하나의 파일로 합쳐모으는) 모듈번들러다. 프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poie.. bomango.tistory.com (▲ 웹팩 설명 이전글 참고) 안정적이고 많은 이들이 선호하는 웹팩에 비하면 롤업은 아직 피래미 수준이지만, React를 비롯 Vue, Ember, Preact, D3등 많은 라이브러리에서 롤업을 사용하고 있다. 코드들을 쪼개거나 Co..
프론트엔드 로드맵 30 - 모듈번들러 Web pack 자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 을 넣으면 브라우저에서 작동한다. 참고 사이트 : https://webpack.js.org/ https://ui.toast.com/fe-guide/ko_BUNDLER/ https://poiemaweb.com/es6-babel-webpack-2
프론트엔드 로드맵 29 - npm script npm (Node Package Manager)은 Node.js 패키지들을 관리하는 도구다. 명령 프롬프트에 명령어를 입력해 설치 및 삭제 등 관리한다. 주로 쓰이는 명령어는 npm init, npm start, npm run, npm install 등이 있다. npm init : package.json 자동 작성 npm install -g (모듈명) : 패키지 설치 명령어 (-g : 글로벌 패키지) npm install --save (모듈명) : 해당 모듈을 설치함과 동시에 package.json dependencies에 자동으로 모듈 추가 npm update : 패키지 업데이트 npm dedupe : npm의 중복 패키지 정리. npm root : node_modules 위치 알려줌 npm outda..

티스토리툴바