안녕하세요 상훈입니다. js를 다루는 개발자라면, console.log, 혹은 debugger를 자주 사용하게 되실텐데요, console.log 에 대한 미세한 먼지팁을 드리고자합니다. 바로, 색상을 입히는 것인데요, 방법은 아주 간단합니다! 1. 텍스트 내용의 시작에 %c 를 붙여주고 작성한다. 2. 색상을 정의해준다. (스타일) console.log("%c안녕하세요?","color:red;"); 이렇게 결과가 출력되었습니다. 어때요 눈에 잘띄죠? 추가적으로 배경도 줄 수 있습니다! console.log("%c안녕하세요?","background-color:red; color:white;"); 이상입니다. 생각보다 눈에 잘띄어서 좋습니다. 저는 blue를 자주 사용합니다. 도움이 되셨다면 광고 한번 클릭..

FrontEnd/JavaScript 2022. 7. 12. 13:16

안녕하세요 상훈입니다. jQuery - Handlebars.js 를 사용하는데, 다 제대로 한 것 같은데, 아래와 같은 에러를 내뱉습니다. 요놈의 핸들바는 불친절하게 에러를 좀 내뱉는 것 같습니다. Handlebars Pass a string or Handlebars AST to Handlebars compile ... undefined 오류도 포함합니다. 확인사항 1. 실제 값이 undefinded 인지. 2. 컴파일 하려는 id의 값과 html-script-handlebar 의 id 를 일치시켰는지 여부 3. 해당 script를 포함하고 싶은 태그가 렌더링 되고 난 이후에 작성이 되었는지 여부 저는 3번에 해당하는 것이었습니다. 이렇게 작성을 했었는데, 인식이 안되더라구요. 그래서 해당 의 속을 비워..

FrontEnd/jQuery 2022. 7. 11. 13:09

안녕하세요 상훈입니다. jQuery - Swiper 를 사용하는데, activeIndex가 뭐지? slideChange는 어떻게 사용하는것이지? 라는 의문이 들어 찾아보고 메모합니다. 일단 기본적으로 적용시킨것들은 이미 하셨다고 생각하고 넘어가도록 하겠습니다. 1. activeIndex var swiperExample = new Swiper(".swiper-container", { ... }); 이런 swiper가 있을 때, activeIndex는 간단하게 얻을 수 있습니다. const swiperIndex = swiperExample.activeIndex 이렇게하면 현재 활성화되어있는 swiper의 번호를 얻을 수 있습니다. 2.slideChange 슬라이드가 변할 때 특정 동작을 실행합니다. var ..

FrontEnd/jQuery 2022. 7. 10. 13:00

안녕하세요 상훈입니다. 제이쿼리의 $.extend를 처음 보게 된다면 당황하셨을 수도 있습니다. 하지만 간단한 내용이라는 것을 알아주시기 바랍니다. 객체 A, B가 있다면, $.extend(A, B) 는 A뒤에 B를 합치는 활동이라고 볼 수 있습니다. 여러개의 객체를 extend 내부에 넣을 수 있습니다. const A = {age: 12, weight: 52} const B = {name: '상훈', height: 200} const C = $.extend(A,B) // {age: 12, weight: 52, name: '상훈', height: 200} 만약 중복되는 key값을 가지고 있다면, "뒤"에서 덮어씌워집니다. const A = {age: 12, weight: 52} const B = {nam..

FrontEnd/jQuery 2022. 7. 9. 11:35

"한빛미디어 활동을 위해서 책을 제공받아 작성된 서평입니다." 안녕하세요 상훈입니다. 이번에 리뷰 하게 된 IT도서는 "소플의 처음만난 리액트" 입니다. 리액트라는 자바스크립트 라이브러리(프레임워크가 아닙니다.ㅎㅎ) 는 아주 유명한 언어입니다. 전세계에서 프론트엔드 언어로 가장 큰 자리를 잡은 언어가 바로 요녀석이거든요. 비록 러닝 커브가 길고 높다는 단점이 존재하지만, 대규모 프로젝트를 할 때에는 이녀석만한 속도를 내주는 언어가 없습니다. [리액트, 앵귤러, 뷰 ] 프론트 엔드 3대장 중 제일 큰 인재풀, 시장규모를 갖고 있습니다. 그래서 신입들도 모두 리액트를 배우고 싶어하며, 회사들에서도 어쩔 수 없이 리액트를 채용하고 있습니다. 자, 서론이 너무 길었네요. 이제 본론으로 들어가보겠습니다. 이 책은..

FrontEnd/React.js 2022. 6. 26. 12:28

안녕하세요 상훈입니다. 제이쿼리를 이용하여 (1) radio 버튼이 체크되어있는지 여부, (2) 체크 되어있는 값을 가져오기의 예제를 작성해보도록하겠습니다. html 이렇게 4개의 이름이 같은 radio 버튼이 존재하고, 모두 값이 다를 때, 1. 버튼이 체크 되어있는지 여부 확인하기 const itemChecked = $('input[name=item]').is('checked'); item 이라는 name 속성을 가진 radio 태그 중 체크 되어있는 것의 노드를 가져옵니다. 2. 체크 되어있는 값을 가져오기 위를 좀 더 단축하여 사용하겠습니다. const itemValue = $('input[name=item]:checked').val(); 이렇게 item이라는 name 속성을 가진 녀석 중 체크 ..

FrontEnd/jQuery 2022. 5. 26. 09:00

안녕하세요 상훈입니다. 요즘 jquery를 무척 많이 접하게 되어 저도 하나씩 모르는 것들을 알아가고 있습니다. 예를 들어... show(), hide()..? ㅋㅋㅋㅋ 제이쿼리를 이용하여 특정 버튼을 활성화 / 비활성화 하는 방법에 대해 포스팅하겠습니다. click 위와 같이 id : myButton, onclick: change() 라는 메서드를 실행하고 비활성화 된 click 버튼이 있습니다. 그럴 때에 제이쿼리로 해당 버튼의 활성화 비활성화 상태를 변경하고 싶은데요, attr() 을 사용하는 방법, 그리고 prop()을 사용하는 방법이 있습니다. 1. attr() // 1. 온오프가 아니라 비활성만 제거하는 방법 function change() { $('#myButton').removeAttr('..

FrontEnd/jQuery 2022. 5. 25. 09:00

안녕하세요 상훈입니다. VSCode를 사용하고, 저는 저장시 Html, JS, CSS Formatter 가 자동으로 돌아가도록 설정해놓았습니다. 그런데, HTML 양식에서 제가 원치않게 React, Vue 에서와 같이 html에서 하나의 태그가 있을 때 여러 속성(attribute)이 존재합니다. 그럴 때 자동으로 줄바꿈이 되는 경험이 있으실 겁니다. React, Vue 와 같은 상황에서는 위와같이 속성값이 자동 줄바꿈이 되는 것이 보기에 좋고 편합니다. 하지만 그냥 html만 사용할 때에 속성에 의해 코드가 내려와버리면 시각적으로 보기가 불편합니다. 마치 자바스크립트에서 무한 콜백으로 빠져버리는 것처럼요. 속성을 한 줄에 나열 할 수 있게 해주는 설정으로 안내해드리겠습니다. 설정하는 법입니다. 1. 설..

FrontEnd 2022. 5. 23. 20:41