javascript
-
[js/ts] 한글 마지막 단어의 받침 유무를 판단하여 조사 붙이기언어/Javascript 2024. 7. 25. 15:54
컴포넌트를 만들 때, props로 text를 넘겨주고는 한다.이 때, 한글은 text의 받침 유무에 따라 조사가 달라지는데,아래와 같이 코드를 작성하여 받침이 있으면 true 없으면 false를 리턴하도록 하여 조사를 붙여줄 수 있다. export const hasLastConsonantLetter = (text: string): boolean => { return (text.charCodeAt(text.length - 1) - "가".charCodeAt(0)) % 28 !== 0;};
-
HTML form 태그 안에 submit 버튼을 여러 개 사용하여 동작을 다르게 하기 (with. React Hook Form)프레임워크/React(NextJs) 2024. 7. 24. 17:55
여러 화면에서 값을 입력하고, 한 번에 서버로 데이터를 요청해야 하는 상황이 발생했다.그래서 이전 버튼을 클릭했을 때와 저장 버튼을 클릭했을 때, 입력한 값을 가지고 페이지 이동 또는 서버 요청이 필요했다. 그래서 나는 페이지 이동 시마다 Form Data를 가져와 전역 상태에 넣어 관리해 주는 방식을 생각했고,이 때 프로젝트에서 사용하고 있는 React Hook Form의 onSubmit을 통해 데이터를 가져오는 방식이 베스트 였다. 그러나 이렇게 되면 하나의 form태그에 submit 버튼 두개가 되어 이를 구분해서 처리하는 방법이 필요했다.이후, submit도 이벤트라는 것에 초점을 맞추어 찾아보니, 해답을 찾을 수 있었다. 그 해답은,form태그에서 Submit 이벤트가 발생했을 때 submit..
-
[라이브러리] moment 자주 사용하는 기능 정리언어/Javascript 2023. 6. 16. 10:41
📌 날짜 형식 변경하기 moment().format() -> moment 객체를 원하는 날짜/시간 형태로 나타냄 -> string으로 리턴 📌 날짜/시간 추출하기 moment().hours() -> second/seconds, month/months, year/years 등등.. 사용가능 -> number 로 리턴 📌 Moment 객체의 처음 또는 마지막 날짜/시간 구하기 moment().startOf() 또는 moment().endOf() -> moment 객체의 처음 또는 마지막 날짜/시간을 구할 수 있음 -> moment 객체로 리턴 -> 사용 예시 moment("2023-06-16").startOf("month").format("DD"); // 30 moment().daysInMonth() -> ..
-
[javascript] 호이스팅에 대한 이해언어/Javascript 2022. 9. 9. 00:44
호이스팅이란? 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당 하는 것을 뜻하고, 이 때 선언과 초기화를 분리하여, 선언만 코드의 최상단으로 옮겨집니다. 이는 소스코드 평가과정에서 선언한 변수와 함수를 실행 컨텍스트가 관리하는 환경에 등록하는 것으로 호이스팅이 된 선언들은 실행환경에서 변수나 함수를 만날 시에 실행 컨텍스트가 관리하는 환경에서 검색하여 참조됩니다. var는 호이스팅시 undefined로 변수를 초기화하고, let과 const는 변수를 초기화하지 않으며 이러한 이유로 var는 초기화 전에 실행하는 코드가 나타났을 때 undefined를 출력하고, let과 const는 예외가 발생하는 것입니다. 참고 https://developer.mozilla.org/ko/docs/Gloss..
-
[javascript] HTML 태그의 텍스트를 가져오는 2가지 방법언어/Javascript 2022. 8. 16. 02:15
1. innerText 또는 textContent 아래와 같은 HTML 태그가 있을 때 할일 1 할일 2 할일 3 클릭한 목록 아이템의 텍스트(할일 1, 할일 2 .. )를 가져와야 할 때, 아래와 같이 innerText를 통해 해당 텍스트를 가져오거나, textContent를 이용해서 가져올 수 있다. 할일 1 할일 2 할일 3 2. firstChild의 textContent 또는 nodeValue 1번의 방법 만으로는 해결이 되지 않는 문제가 있었다. 예를 들어 li 안에 다른 태그 요소가 있고, 그 태그에도 텍스트가 있을 때이다. 할일 1삭제 할일 2삭제 할일 3삭제 위 코드와 같이 각 li에 삭제라는 텍스트를 가진 버튼이 있을 때에 각 항목을 click을 하면 왼쪽과 같이 p태그에는 '할일 2삭제..
-
[Javascript] this 에 대해 알아보기언어/Javascript 2022. 7. 7. 16:54
이 글은 모던 자바스크립트의 Deep Dive에 나온 this를 공부하며 이해하기 위해 구성을 조금 편집하여 옮긴 내용입니다. 동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 생성자 함수를 정의하는 시점에는 아직 인스턴스를 생성하기 이전이므로 생성자 함수가 생성할 인스턴스를 가리키는 식별자를 알 수 없다. 따라서 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 특수한 식별자가 필요하다. 이를 위해 자바스크립트는 this라는 특수한 식별자를 제공한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변..
-
[프로그래머스] 오픈채팅방 - javascript기타/코딩테스트 2022. 6. 26. 01:12
문제 모든 유저는 [유저 아이디]로 구분한다. 채팅방에서 닉네임을 변경하는 방법은 다음과 같이 두 가지이다. 채팅방을 나간 후, 새로운 닉네임으로 다시 들어간다. 채팅방에서 닉네임을 변경한다. 닉네임을 변경할 때는 기존에 채팅방에 출력되어 있던 메시지의 닉네임도 전부 변경된다. 나의 풀이 function solution(record) { let messages = [], answer = []; const member = {}; const content = (data) => { const typeMsg = data[0] == "Enter" ? "들어왔습니다." : "나갔습니다."; return `${member[data[1]]}님이 ${typeMsg}`; }; record.forEach((v, i) => ..
-
[프로그래머스] 없는 숫자 더하기 - javascript기타/코딩테스트 2022. 6. 22. 21:54
문제 0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요. 나의 풀이 function solution(_numbers) { // 0~9 까지 더한숫자 = 45 return 45 - _numbers.reduce((preVal, curVal) => preVal + curVal, 0); } 배열에 없는 수를 모두 더한다고 했을 때 reduce를 사용해서 계산해 보아야지 라는 생각이 들었다. 그런데 그를 위해서는 없는 숫자를 배열로 만들어야했다. 그래서 0~9라는 숫자를 배열에 넣어놓고 numbers를 for문으로 돌리면서 숫자를 찾아 sli..