티스토리

신입개발자 쩨리

검색하기

블로그 홈

신입개발자 쩨리

jerryjerryjerry.tistory.com/m

쩨리쩨리 님의 블로그입니다.

구독자: 8

방명록 방문하기

반응형

주요 글 목록

[React] url에 붙은 # 제거하기 리액트 템플릿을 이용하여 페이지 이동 중 url에 #(해시)가 붙어 있는 것을 발견했다. 리액트에서 url 에 #(해시)가 붙는 경우는 단일 페이지 애플리케이션(SPA, Single Page Application)을 이용할 경우 발견할 수 있다. 하나의 HTML 페이지 안에서 모든 기능이 동작하는 것을 SPA라고 한다. 모든 기능이 하나의 HTML 페이지 안에서 동작하기 때문에, 페이지 로딩 속도가 빠른것이 장점이라고 할 수 있다. SPA 화면에서 #(해시)가 붙는 이유는 주로 웹 브라우저의 페이지 이동을 감지하고 해당 url을 분석해서 해당 페이지의 컴포넌트를 빠르게 렌더링하기 위해서이다. #(해시)가 없으면 웹 브라우저는 실제로 서버에 새로운 페이지를 요청할 수 있다. 본인은 템플릿 페이지를 커스텀하.. 공감수 0 댓글수 0 2024. 2. 14.
[JavaScript] 자바스크립트 some()과 every() some() some 함수는 배열의 각 요소에 대해 제공된 함수의 조건을 최소한 하나의 요소가 만족하면 true를 반환하고, 모든 요소가 조건을 만족하지 않으면 false를 반환한다. 기본 문법은 아래와 같다. array.some(function(currentValue, index, array), thisValue) currentValue : 현재 처리 중인 요소의 값 index : 현재 처리 중인 요소의 인덱스 array : some을 호출한 배열 thisValue (옵션) : 함수 내에서 사용할 this 값 아래는 예시 코드이다. const array = [1, 2, 3, 4, 5]; // 배열의 요소 중 하나라도 3보다 큰지 확인 const result = array.some(function(e.. 공감수 0 댓글수 0 2024. 2. 1.
[JavaScript] 자바스크립트 padStart()와 padEnd() padStart() padStart 함수는 문자열의 앞부분을 특정 길이로 채우는 역할을 한다. 기본 문법은 아래와 같다. str.padStart(targetLength[, padString]) str : 원본 문자열 targetLength : 목표로 하는 문자열 길이를 나타낸다. 이 길이에 맞게 문자열이 채워질 수 있다. padString (옵션) : 필요한 경우 채우기에 사용할 문자열이다. 기본값은 공백 문자열(' ')이다. 아래는 예시 코드이다. const str = "123"; const paddedStr1 = str.padStart(7, "0"); console.log(paddedStr1); // 출력 : "0000123" const paddedStr2 = str.padStart(10); cons.. 공감수 1 댓글수 0 2023. 7. 19.
[JavaScript] 소수 구하는 방법 첫번째 방법 function getResult(n){ for(var i = 2; i 공감수 0 댓글수 0 2023. 7. 4.
[JavaScript] 2진수 - 10진수 변환 / 10진수 - 2진수 변환 2진수 → 10진수 변환 parseInt() 함수는 문자열을 정수로 변환하는 내장 함수로, 두 개의 매개변수를 받을 수 있다. parseInt(String, Number) 1. 문자열(String) : 변환하고자 하는 숫자의 문자열 2. 진수(Number) / (optional) : 문자열이 포현된 진수를 나타내는 숫자. 선택적으로 사용된다. 만약 진수를 지정하지 않으면 문자열이 기본적으로 10진수로 간주된다. const binary = "10101"; const result = parseInt(binary, 2); console.log(result); // 출력 : 21 const binary = "1120"; const result = parseInt(binary, 3); console.log(res.. 공감수 0 댓글수 0 2023. 6. 21.
[JavaScript] 자바스크립트 Map 객체 자바스크립트에서 Map 객체는 키와 값의 쌍을 저장하는 데이터 구조이다. Map은 키와 값을 연결하여 데이터를 보관하고, 각각의 키는 유일해야 한다. 얼핏보면 그냥 객체와 비슷해보이지만 Map과는 차이점이 존재한다. Map 객체 Map 객체 생성 Map 객체를 생성하기 위해서는 new 키워드와 함께 Map 생성자를 호출해야 한다. let map = new Map(); 위 코드처럼 Map을 선언하면 Map 객체를 만들 수 있다. 또는 초기값을 넣어 키와 값의 배열을 전달해 Map 객체를 생성할 수도 있다. let player = new Map([ ["Kevin", 10], ["Haaland", 20], ["Messi", 30] ]); Map 데이터 추가 Map 객체에 데이터를 추가하기 위해서는 set() .. 공감수 2 댓글수 0 2023. 6. 8.
[JavaScript] 자바스크립트 map()과 flatMap()의 차이점 자바스크립트에서 map()과 flatMap()은 주어진 배열의 요소를 사용해서 새로운 배열로 변환하는 작업을 수행하는 함수들이다. 둘 다 배열의 요소를 사용하고 새로운 배열로 바꿔준다는 공통점은 있지만 몇 가지 차이점이 존재한다. Map() 주어진 배열의각 요소에 대해 작성된 콜백 함수를 실행하고, 그 콜백 함수의 리턴값으로 이뤄진 새로운 배열을 생성하는 함수이다. 기존 원본 배열과 동일한 길이의 새로운 배열이 리턴된다. 이때, 기존의 원본 배열을 수정하지 않는다. 기본 문법은 아래와 같다. arr.map(callback[, thisArg]) arr : 원본 배열 callback (필수) : 원본 배열의 각 요소에 대해 실행할 함수이며 요소, 인덱스, 배열 전체를 매개변수로 받는다. thisArg (선.. 공감수 0 댓글수 0 2023. 5. 26.
[JavaScript] 자바스크립트 Slice()와 Splice()의 차이점 자바스크립트에서 slice와 splice는 둘 다 배열에서 요소를 추출하거나 배열을 변경하는 데 사용된다. 하지만 두 함수는 목적이나 사용법에 따라 다르게 사용할 수 있다. Slice() 배열의 일부분을 추출하여 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다. 기본 문법은 아래와 같다. array.slice(start, end) 1. start (필수) - 추출을 시작할 인덱스 번호 - 이 시작 인덱스를 포함한 뒤 추출이 시작됨 - 음수 값을 사용하면 배열의 끝에서부터 역방향으로 계산 - 만약 생략되면 start 값은 0으로 간주됨 2. end (선택) - 추출을 종료할 인덱스 번호 - 이 종료 인덱스는 추출에 포함되지 않으며, 추출은 end 번호 바로 앞의 인덱스까지 수행함 - 음수 값을 사용하.. 공감수 0 댓글수 0 2023. 5. 26.
[JavaScript] 자바스크립트 배열의 중복값 제거하기 Set을 이용한 중복 제거 const array = [1, 2, 3, 3, 4, 4, 5]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // 출력 결과: [1, 2, 3, 4, 5] Set을 이용한 방법이 가장 간단하고 직관적이다. Set은 중복값을 허용하지 않는 특성이 있으므로, Set에 배열을 전달해서 중복값을 제거한 후 다시 배열로 변환할 수 있다. filter() 함수를 이용한 중복 제거 const array = [1, 2, 3, 3, 4, 4, 5]; const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index); consol.. 공감수 0 댓글수 0 2023. 5. 19.
[JavaScript] 자바스크립트 reduce 함수 사용법과 예시 자바스크립트의 reduce 함수는 배열의 요소를 하나로 줄이는(reduce) 작업을 수행하는 함수이다. reduce 함수로 배열의 각 요소를 순회하면서 누적된 값을 계산하고 최종 결과를 반환할 수 있다. 기본 문법 reduce 함수는 다음과 같은 형태를 가지고 있다. array.reduce(callback[, initialValue]) array : recude를 적용할 배열 callback : 배열의 각 요소에 대해 실행할 콜백 함수. 콜백 함수는 다음 매개변수를 가진다. accumulator : 콜백 함수의 반환 값 또는 이전 순회에서의 최종 결과값. 초기 값(initialValue)이 제공된 경우 첫 번째 순회에서는 initialValue로 설정된다. currentValue : 현재 순회 중인 배열.. 공감수 1 댓글수 0 2023. 5. 19.
[JavaScript] 자바스크립트 Apply 함수 자바스크립트에서 apply() 함수는 함수를 호출하면서 특정한 this 값과 인수들을 지정할 수 있는 메소드다. apply() 함수는 함수를 호출하면서 함수의 this 값을 설정하고, 배열 또는 유사 배열 객체를 인수로 전달하여 함수를 실행한다. 기본 문법 apply() 함수는 아래와 같은 문법을 가진다. function.apply(thisArg, [argsArray]) function : 호출될 함수를 나타내는 함수 객체이다. thisArg : 함수 내에서 사용될 this 값으로 설정될 객체이다. this는 기본적으로전역객체의 window로 정해져 있다. argsArray (선택적) : 함수에 전달할 인수들로 구성된 배열 또는 유사 배열 객체(리스트 등)이다. 예시 코드1 아래는 apply() 함수를 .. 공감수 0 댓글수 0 2023. 5. 18.
[JavaScript] ... 스프레드(spread) 문법 자바스크립트에서 스프레드 문법(spread syntax)은 배열이나 객체를 펼쳐서 개별 요소로 분리하는 문법이다. 주로 배열과 객체의 결합, 복사, 함수 호출 시 인수 전달 등 다양한 상황에서 사용된다. 기본 스프레드 문법 스프레드 문법은 ... 연산자를 사용하여 배열이나 문자열을 개별 요소로 분해하여 결합할 수 있다. 예시를 들어 보자. const arr = [1, 2, 3]; const newArr = [...arr]; console.log(newArr); // 출력 결과: [1, 2, 3] 위 코드에서 [...arr]은 배열 arr을 펼쳐서 새로운 배열 newArr에 복사한다. 따라서 newArr은 [1, 2, 3]과 동일한 요소를 가지게 된다. 문자열도 가능하다. const str1 = "java.. 공감수 0 댓글수 0 2023. 5. 18.
[JavaScript] 소수점 자리수 자르기, 반올림(toFixed, toPrecision) 자바스크립트에서 Math 함수를 사용하지 않고도 소수점 처리를 할 수 있다. 바로 toFixed()와 toPrecision()을 사용하는 것이다. toFixed()와 toPrecision()은 숫자를 특정 자릿수로 제한하는데 사용되는 함수라는 공통점이 있다. toFixed toFixed(digits) : 숫자를 소수점 이하 digits 자릿수까지 반올림하여 문자열로 반환한다. 고정된 소수 자릿수로 포맷하며, 반환된 문자열은 지정된 소수 자릿수까지 소수점 이하의 숫자를 포함한다. const num = 3.14159; console.log(num.toFixed(2)); // 출력 결과: "3.14" console.log(num.toFixed(4)); // 출력 결과: "3.1416" console.log(n.. 공감수 1 댓글수 0 2023. 5. 18.
[JavaScript] 소수점 반올림, 올림, 내림(ceil, floor, round, trunc) 자바스크립트에서 소수점을 올리거나 내릴 수 있는 Math 함수들은 다음과 같다. 소수점 올림, Math.ceil() Math.ceil(x) : 주어진 숫자 x를 올림하여 반환한다. 즉, x보다 크거나 같은 가장 작은 정수를 반환한다. Math.ceil(4.2) // 결과값 : 5 Math.ceil(9.9) // 결과값 : 10 Math.ceil(-4.2) // 결과값 : -4 Math.ceil(-9.9) // 결과값 : -9 소수점 내림, Math.floor() Math.floor(x) : 주어진 숫자 x를 내림하여 반환한다. 즉, x보다 작거나 같은 가장 큰 정수를 반환한다. 음수인 경우에 소수점 아래를 내림하여 정수를 반환함. Math.floor(4.7) // 결과값 : 4 Math.floor(9.2.. 공감수 1 댓글수 0 2023. 5. 18.
[JavaScript] var, let, const 차이점과 쓰는 방법 추천 기존에는 자바스크립트에서 var로 변수를 선언했지만 ES6부터 let과 const가 도입되었고, 필요에 맞게 변수를 정의·선언하는 것이 더 용이해졌다. 자바스크립트에서 var, let, const로 변수를 선언할 때, 각각의 키워드는 변수의 범위(scope)와 할당 가능성(mutability)에 대해 다른 동작을 한다. 이 점을 기억해두면서 var, let, const는 각각 무엇이 다른지 알아보자. var var는 ES5까지 주로 사용된 변수를 선언하는 키워드이다. var는 오래된 자바스크립트 코드와의 호환성을 위해서 사용하는 것이 권장되어질 정도로 오래된 방식이다. 오래되었기 때문에 여러가지 문제점들이 발견되었으며, 이 문제를 해결하기 위해 나온 것이 let과 const라고 할 수 있겠다. 1) 함수.. 공감수 1 댓글수 0 2023. 5. 17.
[JavaScript] 천단위 콤마 찍기, 소수점 포함 javascript 정규식을 사용하여 input text box에 입력받는 숫자들을 천단위로 콤마를 찍어보자.물론 소수점도 입력된다. JavaScript 123456789101112131415161718192021222324252627282930313233343536373839404142//문자 제거function removeChar(event) { event = event || window.event; var keyID = (event.which) ? event.which : event.keyCode; if (keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39) return; else //숫자와 소수점만 입력가능 event.target.value = ev.. 공감수 2 댓글수 0 2018. 11. 20.
[JQuery] Jquery로 table안에 값 변경하기, 텍스트 말줄임 JQuery로 table 값 변경하고 텍스트 말줄임처리 먼저 아래 jquery 스크립트 부분을 페이지에 넣는다.1cs jquery 부분 123456789101112131415161718$(function() { var tr_length = $('#tb tr').length-1;//맨위 테이블 행은 빼줘야한다. var tab_td = $('#tb td');//tb 테이블의 td들 불러오기 var text = "...";//말 줄임표 for (var i = 0; i 20){//35글자가 넘으면 $("#tb td:eq("+i+")").html(td1.substr(0,20)+text); } }else{ var td2 = tab_td.eq(i*2).text();//tr 안에 td 들이 2개라서 곱하기 2 if(t.. 공감수 2 댓글수 0 2018. 11. 14.
[JavaScript] 뒤로가기 버튼 막기 * JavaScript 뒤로가기 막기 로그아웃 하면 로그인 페이지로 이동하는데 로그인 페이지에서 뒤로가기를 눌렀을 때 로그아웃하기 전 메인화면으로 다시 돌아가면 보안상이나 홈페이지 운영에 타격을 줄 수 있다. 이런 경우를 대비하여 뒤로가기 버튼을 비활성화 시켜보자. 뒤로가기 버튼을 막는 방법은 여러가지가 있는데 그 중 하나를 소개해본다. 1 2 3 4 window.history.forward(); function noBack(){window.history.forward();} Colored by Color Scripter cs 이 코드와 1 cs 이 코드를 뒤로가지 말아야할 페이지에 넣어주면 한번 뒤로갔다가 다시 뒤로가기를 눌렀을 때 페이지로 돌아오게 된다. 스크립트 코드는 코드 밑에 적어주고, 위 함수.. 공감수 7 댓글수 3 2018. 5. 11.
[JavaScript]회원가입 유효성 만들기 * 회원가입할때 모든 폼의 유효성(예외처리)를 모두 만드시오 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 .. 공감수 1 댓글수 0 2018. 4. 6.
[JavaScript]달력 만들기, Date 객체 * Date - 날짜와 관련된 작업을 지원한다. - 객체 생성 방법 1. var object = new Date(); 2. var object = new Date(년,월,일,시,분,초,밀리초); * Date 메소드 - 중요 메소드 1. getYear() : 1970년 이후의 연도를 알아내는 메소드이다. 2. getMonth() : 월을 알아내는 메소드이다. 이 메소드의 반환값을 0부터 11까지이므로 정확한 현재 월을 알려면 getMonth()의 반환값에 1을 더해야한다. 3. getDate() : 날짜를 알아내는 메소드이다. 4. getDay() : 요일을 알아내는 메소드이다. 이 메소드의 반환값은 0부터 7까지이며 0은 '일요일', 1을 '월요일' 순으로 해당된다. * 달력을 만들어 보자. 현재달, 지.. 공감수 20 댓글수 12 2018. 4. 6.
[JavaScript]계산기 만들기,문자열 검색,배열 * 문자열 내에서 원하는 문자열 검색 - String 객체에는 문자열과 관련된 메소드가 여럿 있다. 그 중에서도 문자열의 위치와 관련된 메소드들을 소개하겠다. - 중요 메소드 1. Indexof : 지정한 문자열의 첫번째 인덱스 위치를 알아냄 2. lastIndexOf : 지정한 문자열의 마지막 인덱스 위치를 알아냄 3. charAt() : 지정한 위치의 문자가 무엇인지 알아냄 4. charCodeAt() : 지정한 위치의 문자를 유니코드로 변환 5. formcharCode() : 유니코드를 문자로 변환 * Math 객체 - Math 객체는 수학적인 계산과 관련된 객체이다. - Math 객체는 따로 인스턴스를 만들지 않는다. * Math 메소드 * 배열 - 변수를 배열로 사용하려면 new 를 이용해서 A.. 공감수 0 댓글수 1 2018. 4. 5.
[JavaScript]HTML 에서 JavaScript 호출하기 * HTML 은 눈에 보이는 틀을 구성하는 언어고, JavaScript는 보이는 툴들의 기능들을 처리한다. 둘은 엄연히 다르며 서로가 서로를 호출 할 수있다. * HTML 파일에서 JavaScript 파일 호출하기 1. HTML 문서를 만들어 태그 안에 태그를 넣는다. 1 2 3 4 5 6 7 8 9 10 11 12 JS 호출하기 바디 부분 입니다. cs 2. JavaScript 파일을 만들어 원하는 기능을 만들어 줍니다. 1 2 function view(){ document.write("안녕하세요"); } cs 3. HTML 문서의 태그 안에 방금 기능을 넣은 JavaScipt 문서의 경로를 적어줍니다. 1 2 3 4 5 6 JS 호출하기 Colored by Color Scripter cs 4. 실행을.. 공감수 0 댓글수 0 2018. 4. 4.
[JavaScript]글자 변경 폼 만들기 * text input 폼에 글자를 넣고 원하는 옵션을 선택한 뒤 미리보기 버튼을 눌러보자. 내가 원하는 옵션대로 글자가 변경되도록 만들수 있을것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 간단한 자바 스크립트 function previewString(){ var objResult = docu.. 공감수 0 댓글수 0 2018. 4. 4.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.