12. 모던 자바스크립트 Deep Dive(함수)

⛅ 프로그래밍 언어의 함수란?일련을 과정을 문으로 구현하고 코드블록으로 감싸서 하나의 실행단위로 정의한 것용어매개변수: 함수 내부로 입력을 전달 받는 변수인수: 입력반환값: 출력함수의 실행은 함수의 정의와 함수의 호출을 통해 이루어진다.자바스크립트의 함수는 객체 타입의 값이다.⛅ 함수를 사용하는 이유함수는 코드의 재사용이라는 측면에서 매우 유용함유지보수의 편의성 증가코드의 신뢰성 증가코드의 가독성 향상⛅ 함수 리터럴함수 리터럴의 구성요소함수 이름매개변수 목록함수 몸체함수는 객체지만 일반 객체와는 다르다.(호출 가능, 고유한 프로퍼티를 가짐)⛅ 함수 정의정의 방식함수 선언문: function add(x,y){...}함수 표현식: var add = function (x,y){...}Function 생성자 함..

• format_list_bulleted FE/Javascript
• · 2024. 12. 7.
• textsms

11. 모던 자바스크립트 Deep Dive(원시 값과 객체의 비교)

⛅ 원시타입 vs 객체타입&nbsp변경 가능 유무메모리 공간에 저장되는 값변수 할당 방식원시 타입변경 불가능실제 값 저장참조 값 저장(값에 의한 전달)객체 타입변경 가능참조 값 저장참조 값 복사(참조에 의한 전달)⛅ 원시 값변경 불가능한 값 === 한번 생성된 원시 값은 읽기 전용원시 값 자체를 변경할 수 없다는 것이지 변수 값을 변경할 수 없다는 것이 아님!원시 값을 할당한 변수에 새로운 원시 값을 재할당하면 메모리에 저장되어있던 원시값이 변경되는 것이 아닌 새로운 메모리 공간에 저장한 값을 가리키는 것 => 메모리 공간의 주소가 바뀌는 것임변수가 참조하던 메모리 공간의 주소를 변경하는 것을 불변성 이라고 함// 메모리 공간을 확보한뒤 kim이 저장되고,// name이라는 식별자는 kim이 저장된 메모..

• format_list_bulleted FE/Javascript
• · 2024. 12. 6.
• textsms

10. 모던 자바스크립트 Deep Dive (객체 리터럴)

⛅️ 객체란?객체 타입: 다양한 타입의 값(원시값, 또 다른 객체)을 하나의 단위로 구성한 것원시타입 = 변경 불가능한 값, 객체타입 = 변경 가능한 값프로퍼티는 키와 값으로 구성됨함수도 프로퍼티로 사용 가능(자바스크립트의 함수는 일급 객체 이기때문)프로퍼티와 메서드로 구성된 집합체❓일급 객체 - 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 - 데이터(string, number, boolean, array, object) 다루 듯이 다룰 수 있다. 즉, 값으로 사용 가능하다.❓일급객체의 조건 - 변수에 할당(assignment)할 수 있다. - 다른 함수를 인자(argument)로 전달 받는다. - 다른 함수의 결과로서 리턴될 수 있다.⛅️ 객체리터럴을 통한 객체 생성 방법중..

• format_list_bulleted FE/Javascript
• · 2024. 12. 5.
• textsms

NextJS API 통신 관련 이슈 (with JWT)

0️⃣ INTRO해당 글은 Nextjs v14.2.4 기준으로 작성되었습니다.Nextjs App Router를 사용하였습니다.SSR(Server-Side Rendering)과 ISR(Incremental Static Regeneration) 방식을 활용하는 프로젝트에서 마주친 문제를 다룹니다.1️⃣ 문제 상황리액트에서는 로그인 시 백엔드에서 제공하는 두 가지 토큰(accessToken, refreshToken)을 대부분 웹 스토리지(LocalStorage, SessionStorage)에 저장하여 사용해 왔다. 웹 스토리지에 토큰을 저장하면, API 호출 시 간편하게 토큰을 참조할 수 있어 편리했기 때문이다.이번 프로젝트에서는 Nextjs 를 사용하였고, 초기 렌더링 성능을 높이기 위해 웬만하면 모든 페이..

• format_list_bulleted FE/Trouble Shooting
• · 2024. 12. 4.
• textsms

09. 모던 자바스크립트 Deep Dive (타입 변환과 단축 평가)

⛅️ 타입 변환의 종류명시적 타입 변환(타입 캐스팅): 개발자가 의도적으로 타입의 값을 변경하는 것var age = 25; var age2 = String(25); // '25'var age3 = (25).toString(); // '25'console.log(typeof age, age); // number 25console.log(typeof age2, age2, typeof age3, age3); // string 25 string 25암묵적 타입 변환(타입 강제 변환): 자바스크립트 엔진에 의해서 타입의 값이 변경되는 것// 🚨 암묵적 타입 변환이 기존 원시값을 직접 변경하는것은 아님! 기존 원시값을 사용해서 새로운 원시값을 생성 하는 것! // 10 + '25'를 평가하기 위해 문자열 '10'..

• format_list_bulleted FE/Javascript
• · 2024. 12. 3.
• textsms

정규식 예제

이전에 포스팅 했던 31. 모던 자바스크립트 Deep Dive (RegExp)에 이어서 확실하게 예제를 만들어 짚고 넘어갈 예정이다.1. YYYY-MM-DD 형식의 날짜사용된 패턴^: [] 외부의 ^는 문자열의 시작을 나타냄$: 문자열의 끝을 나타냄\d{N}: \d는 숫자를 의미하며, {N}은 정확히 N개의 숫자가 있어야 함을 나타냄const answer_inputs = ['2024-11-19', '1999-01-01', '2023-12-31'];const wrong_inputs = ['24-11-19', '2024/11/19', '2024-13-01', '2024-11'];const regexp = /^\d{4}-\d{2}-\d{2}$/;2. 영어와 숫자로만 이루어진 문자열사용된 패턴^: 문자열의 시작..

• format_list_bulleted FE/Javascript
• · 2024. 11. 20.
• textsms