Web/JavaScript

javascript | Cookie 설정하기, value 가져오기, 삭제하기

오늘 하루 보지 않기 기능을 구현할 때, Local Storage나 Cookies를 사용합니다. Local Storage는 간단하게 key-value 형식으로 저장할 수 있지만 Cookies를 사용하게 되면 만료기간을 설정 시에 저장할 수 있어서, 만료기간이 지나면 자동으로 쿠키가 삭제되기 때문에 더 유용하게 쓸 수 있습니다. 🍋 구현 방법 저 같은 경우에는 프로젝트를 진행할때 쿠키 관련 스크립트를 utils 폴더에 넣어놓고 사용합니다. setCookie 함수에서는 쿠키이름, 쿠키의 value, 만료일자(1일, 2일, 3일...) , getCookieValue와 deleteValue 함수의 인자로는 앞단에서 설정한 쿠키의 이름만 설정해주면 됩니다. const setCookie = (name: string..

jQuery | 주요 기능 정리 (css, 태그, 이벤트, 모달)

CSS 컨트롤 css 속성 지정하여 추가하기 $('#searchBtn').css('display', 'none'); class 추가 하기 , 삭제 하기 $('#searchBtn').addClass('disabled-btn'); $('#searchBtn').removeClass('disabled-btn'); class 가 있는지 없는지 확인 $('#searchBtn').hasClass('on') // true & false 로 반환 태그 속성 컨트롤 a 태그 href 변경하기 마이페이지 $('#mypage').attr( 'href', `/mypage?offset=0&limit=20` ); a 태그의 href 제거하기 (클릭 disabled) $('#mypage').removeAttr('href'); but..

Javascript | 문자열, 글자 마스킹하는 함수

유저들의 랭킹을 보여줄 때, 닉네임을 그대로 노출하지 않고 앞에서부터 2글자만 노출한 뒤 뒷글자는 모두 *로 마스킹해야하는 기능을 구현하여야했다. 🍋 구현 방법 간단하게 닉네임의 길이별로 조건을 걸어주고, 정규표현식을 사용하여 노출하는 글자 이후 문자는 모두 * 로 대체해준다. 나는 3글자 이상의 닉네임이 들어올때에는 2글자 이후의 모든 문자는 *로 대체했고, 2글자 닉네임이 들어올때에는 1글자만 문자만 대체, 1글자의 닉네임이 들어오면 그대로 노출시켰다. const maskingName = (value) => { if (value.length === 2) { return value.replace(/(? 2) { return value.replace(/(?

Javascript | 로그인 기능 구현

인스타그램 클론코딩의 가장 첫번째 관문인 로그인 페이지를 만들었다. html/css로 형태를 구현하는 것에는 크게 문제되는 것이 없었지만 Javascript의 dom형태로 기능을 구현하는 것이 처음이라 많이 막혔지만 해결방식을 잘 정립해두고 배운 개념, 모르는 개념을 검색하면서 찾아내어 첫 로그인 페이지를 완성했다. 구현 기능 DOM으로 html에 접근하고 1. id에 @가 포함된 이메일 형식의 문자를 입력했을 때 2. 비밀번호를 5자 이상 입력했을 때를 동시에 충족했을 때 로그인 버튼이 활성화되면서 버튼을 클릭하면 main페이지로 이동하게 된다. ⭐Key Point 문자열의 길이 파악 "@"를 찾아내는 메소드 로그인 버튼 활성화 비활성화 기능 + 스타일 속성 변경 다른 링크로 이동 Output Code..

JavaSctipt | DOM 이란?

DOM (Document Object Model) DOM Tree 문서객체를 생성하는 방식 DOM (Document Object Model) 문서 객체 모델(DOM, Document Object Model)은 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스입니다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. DOM은 웹 페이지의 HTML을 계층화시켜 트리구조로 만든 객체 모델이며, document라는 전역 객체를 통하여 HTML과 javacript를 잇는 역할을 합니다. 자바스크립트의 document객체는 DOM구조를 접근하는 관문이며 document 객체는 HTML 문서를 나타낸다고 할 수 있습니다. DOM Tree DOM을 제대로 이해하기 위..

JavaScript | 객체 속성에 접근하는 방법 (점 표기법 / 대괄호 표기법)

점 표기법 (Dot Notation) & 대괄호 표기법 (Square Bracket Notation) 객체 접근시 대괄호 표기법만 쓸 수 있는 경우 점 표기법 (Dot Notation) & 대괄호 표기법 (Square Bracket Notation) 점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있다. 점 표기점은 key의 값을 그대로 적어주고 괄호 표기법은 key 값을 문자열로 적어주어야 한다. object.property object['property'] 점 표기법 점 표기법은 쓰기 속도가 빠르고 읽기가 쉽다. var person = { living : true, age : 33, gender : 'male' } console.log(person.living); console.log(person...

JavaScript | 배열 선언 / 추가,삭제/ 검색

1. 배열의 선언과 요소 2. 배열에 있는 요소 출력하기 3. 배열의 요소 추가 / 삭제 4. 배열의 검색 배열의 선언과 요소 //배열의 선언 const arr1 = new Array(); const arr2 = [1,2]; //배열의 요소 const myArr = ['apple','banana']; console.log(myArr[1]); // 'banana' | 1번 인덱스에 접근하여 값 출력 console.log(myArr.length); // 2 | myArr의 배열 요소의 개수 myArr[1] = 'Orange' // 요소 수정하기 배열에 있는 요소 전체 출력하기 myArr=['apple','banana','carrot']; // 1 for for( let i=0; i< myArr.length;..

JavaScript | 반복문(for, while)

1. 반복문을 쓰는 이유 2. for문 3. while문 4. do.. while 문 5. break 6. continue 반복문을 쓰는 이유 프로그래밍에서는 코드를 반복해야 할 일이 많다. 코드가 길어져 일어나는 비효율적인 문제들 때문에 반복문을 많이 쓴다. 반복문 (iteration statements) 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 명령문. 반복문은 조건식의 거짓일 때 종료가 되지만 무한 루프 상황(조건식의 거짓이 없고 항상 참인 상황)을 만들게 되면 메모리 부족이나 cpu 풀가동으로 프로그램이 멈출 수 있으므로 주의해야 한다. for 반복문 for 반복문은 어떤 특정한 조건이 거짓으로 판별될 때까지 반복한다. 보통 반복횟수가 정해진 경우에 for문을 사용..

JavaScript | 함수의 정의와 호출의 차이점

1. 함수의 정의와 호출 한눈에 보기 2. 함수의 정의 3. 함수의 호출 4. Return 5. Parameter 1. 함수의 정의와 호출 한눈에 보기 함수는 크게 함수를 정의하는 부분과 호출하는 부분으로 나뉘어져있다. 함수의 구성을 살펴보자면 function 이라는 식별자를 사용하며, 함수이름을 지정한 후 소괄호를 사용하여 parameter(매개변수)를 설정하지 않거나 여러개를 설정할 수 있다. 중괄호를 열고 함수에서 사용할 코드를 적게 되는데 마지막 return(반환값)을 설정한다. function 식별자 | 함수 정의 시 함수를 구별하기 위해 사용 parameter 매개변수 | 함수 내부로 입력을 전달받는 함수 return 반환값 | 함수의 실행결과를 출력하기 위해 사용 argument 인수 | 함..

JavaScript | 자바스크립트 동작 원리

자바스크립트 엔진 실행 컨텍스트 (Execution Context) 자바스크립트 엔진 자바스크립트는 코드 작성순이 아닌 처리가 빨리 되는것 부터 실행을 한다. 보통 single threaded 형식이며 동기적으로 처리된다. 자바스크립트 엔진은 두 가지 주요 구성 요소로 이루어져 있다. - 메모리 힙 (Memory Heap) : 객체는 힙, 대부분 구조화되지 않은 메모리 영역에 할당된다. - 콜 스택 (Call Stack) : 코드가 실행될 때 콜스택이 쌓인다. 실행 컨텍스트 (Execution Context) 실행할 코드에 제공할 환경 정보들을 모아놓은 객체라 하며 하나의 실행 컨텍스트를 구성할 수 있는 방법으로 전역, eval(), 함수 등을 실행하는 것이다. 우리가 흔히 실행컨텍스트를 구성하는 방법은..