분류 전체보기 36

[javascript] reduce 메소드 사용법(feat. reduceRight)

생각보다 매우 유용한 reduce 사용법을 정리해보겠숩니다!! 💫 reduce reduce(callbackFn) reduce(callbackFn, initialValue) // callbackFn = 배열의 각 요소에 대해 실행할 함수 // initialValue = 초기값 기본 문법은 위와 같고, 구체적인 사용 방법은 다음과 같습니다. reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값); reduce은 이전값이 아닌 누진값을 사용합니다. 그렇기 때문에 다양하게 활용될 수 있는 것이겠쬬?ㅎㅎ 덧셈 with reduce 우선 덧셈에서 reduce를 사용하는지 예시를 보겠습니다. const arr = [1, 2, 3, 4]; const initialValue = 0; c..

Javascript 2023.06.14

[javascript]반복문(for, while)과 배열 메소드(forEach,map) 전격비교!

배열에 적용하여 사용할 수 있는 반복문 for, while 배열 메소드인 forEach, map 저는 이 녀석들이 왜 이렇게 헷갈리고 어디 써야할지 고민될까요... 그래서 이번 기회에 제대로 정리해보려고 합니다!! 화이툉!!! 💫 반복문 정말 자주 사용하게 되는 반복문입니다. while 반복문 while (condition) { // 코드 // '반복문 본문(body)'이라 불림 } 조건이 들어가는 부분인 condition이 true이면 반복문 본문의 코드가 실행됩니다. let i = 0; while (i < 5) { console.log( i ); // 0, 1, 2, 3, 4 출력 i++; } let i = 5; while (i) { // i가 0이 되면 조건이 false가 되면서 실행 중지 cons..

Javascript 2023.06.12

[Javascript] Tilde? Tilt? 틸드 연산자 사용법 (feat.물결 ~)

안녕하세요! 틸드(~)연산자!! 바로 알아봅시다!!! 💫Tilde (틸드) 틸드는 비트 단위 연산자로 비트를 반전시키는 기능을 합니다. 피연산자를 32비트 정수로 변환합니다. 이해가 안되서 예제를 찾아봤습니다. const a = 5; // 00000000000000000000000000000101 const b = -3; // 11111111111111111111111111111101 console.log(~a); // 11111111111111111111111111111010 // Expected output: -6 console.log(~b); // 00000000000000000000000000000010 // Expected output: 2 후... 역시나 어렵습니다만, 간단하게 말하자면! 00..

Javascript 2023.05.31

[HTML] 클릭시 파일 다운받기(feat. a 태그 download 속성)

글씨나 이미지 혹은 버튼을 클릭했을 때 파일을 다운로드 하는 방법!! 매우 간단하니 빠르게 알려드릴게요!!! 무려!!! 태그를 이용하면 됩니다 ㅎㅎㅎㅎㅎ 물론!! 복잡한 기능의 다운로드는 불가능 하지만 이미지, 엑셀 템플릿, pdf 등 고정된 것을 다운로드해야 할 때 간단하게 사용할 수 있습니다. 위처럼 기본적인 형식으로 사용하면 되고, download에 값을 지정하게 되면, 지정한 값으로 파일명 바뀌어 다운로드 됩니다!! 아주 간단하지만, 활용도가 꽤나 좋을 듯합니다.ㅎㅎ 수정할 내용이나 알려주실 내용 있으시면 댓글로 가르침 주세요^_^ 글 읽어주셔서 감사합니다~

더미 이미지 URL 얻기(feat. 원하는 사이즈!!!!)

안녕하세요!! 가끔 codepen에 코드를 작성하거나, 블로그를 작성할 때 더미 이미지를 넣어야하는데, 이미지 찾아 업로드하고 어쩌고... 너무 귀찮을 때가 있지 않나요? 그럴때 편리하게 더미 이미지 사용하실 수 있게 정보 공유 해보려고 합니다!! 1.https://picsum.photos/ Lorem Picsum Lorem Ipsum... but for photos picsum.photos 이미지 사이즈, 흑백, 블러 등 설정을 다르게 해서 이미지를 가져올 수 있습니다. 사이트에 방문하자마자 바로 코드를 얻을 수 있어서 정말 유용합니다. 2. https://placeimg.com/ PlaceIMG | Easy FPO and Dummy Images for Any Project Attention! Plac..

정보공유 2023.05.03

[CS] 아이폰(사파리) 개발자 모드로 디버깅하기(feat. 개발자 도구)

안드로이드 기기의 모바일웹 개발자 모드로 디버깅했듯이, 오늘은 아이폰의 사파리를 통해서 모바일웹 개발자 모드 디버깅을 하는 법을 알아보겠습니다. 1. PC 맥 사파리에서 개발자 도구 활성화 2. 아이폰 혹은 IOS 기기 사파리 설정에서 Web Inspector을 활성화 3. PC 맥과 아이폰을 케이블로 연결하고 사파리 개발메뉴에서 기기탐색 4. PC 맥 사파리의 개발 메뉴를 통해 아이폰에서 활성화된 모바일웹 페이지를 개발자 도구로 확인! 이제 어떤 모바일웹이든 편리하고 빠르게 디버깅 할 수 있겠습니다!! 유용하게 사용해보시길 바랍니다. 수정할 내용이나 알려주실 내용있으시면 댓글로 가르침 주세요^_^ 글 읽어주셔서 감사합니다~ 관련글 - 안드로이드 기기의 개발자 모드 활성화하여 디버깅 하기(feat. 개발..

CS 2023.05.03

[CS] 안드로이드 기기의 개발자 모드 활성화하여 디버깅 하기(feat. 개발자 도구)

PC보다 모바일 작업이 까다롭게 느껴지는 이유는 PC는 작업 도중 개발자 도구로 즉각적으로 확인 하여 정확도를 높일 수 있지만, 모바일은 PC에서 제작된 작업물을 정확하게 모바일 환경에서 바로 바로 확인하기 어렵기 때문이라고 생각합니다. 그래서!! 정확하고 빠르게 모바일 작업물을 확인하기 위해 모바일, 그 중에서도 안드로이드 기기의 개발자 도구 활용해 디버깅할 수 있는 방법을 알려드리려고 합니다! 1. 안드로이드 기기 설정에서 개발자 모드 활성화하기 2. 안드로이드 기기와 개발용 컴퓨터 케이블로 연결하기 3. 개발용 컴퓨터에서 크롬 실행 후 chrome://inspect 주소창에 입력 4. 로컬호스트 환경을 포트포워딩을 통해서 연결 정말 훨씬 빠르고 정확하게 답답함 없이 해결 가능해서 아주 좋네요 정말 ..

CS 2023.05.03

[Javascript] 텍스트 흐름 효과 ( feat. 끊김없이 무한 롤링)

안녕하세요!! 저번에 텍스트 흐름 효과를 css로 구현하는 방법을 알려드렸는데요!! 이번엔 같은 흐름효과이긴 하지만, 약간의 디테일이 추가된! 끊김없이 무한 롤링되도록 jQuery를 이용해 구현해보았습니다. HTML 삽입 미리보기할 수 없는 소스 codepen에 작성해두었으니까 확인해보세요~ 글 읽어주셔서 감사합니다! 관련글 - [css] 텍스트 흐름 효과 marquee? animation?(반전 주의)

Javascript 2023.05.03

[CS] IP - 공인IP와 사설IP

1. IP주소란? IP란 인터넷 프로토콜(internet Protocol)의 약자로 인터넷상에서 데이터를 주고 받기 위한 통신 규약입니다. 정의를 고대로 이해하기 어렵지만, 실생활에서 예를 들어보면 우편을 보내기 위해 각각의 주소라는 규약을 만든 것, 전화를 주고 받기 위해 각자의 전화번호가 있는 것, 이메일을 주고 받기 위해 각자의 이메일이 있는 것과 같은 의미라고 보면 됩니다. 이런 IP에는 공인 IP와 사설 IP가 있는데 이에 대해 자세히 알아보겠습니다!! 2. IPv4, IPv6?!?! 일반적으로 IP주소라 하면 IPv4를 의미합니다. 172.00.000.0 IP는 위와 같이 총 4bytes(32bit)이고, 이진수로 표기된 IP주소는 사람이 알아보기 어렵기 때문에 1byte(8bit)씩 마침표로..

CS 2023.05.03

[javascript] 다중 input 체크박스 체크 여부 확인

여러 개의 input 체크박스 체크 여부를 확인하여 요리 조리 이리 저리 작동하도록 하고 싶었습니다! 그럼 먼저 체크 여부 부터 확인을 해야 다음 스텝이 가능하겠죠?!ㅎㅎ $(document).ready(function(){ // 체크박스 체크 여부 확인 함수 function isChk(){ var chked = false; if(!chked){ return false; }else{ }); } } // 체크박스 체크시 함수 실행 $('input[type="checkbox"]').each(function(i){ $(this).click(function(){ isChk() }) }) });

Javascript 2023.05.03
반응형