본문 바로가기
728x90

JavaScript97

[TypeScript] 타입스크립트 자주 쓰는 문법 정리 1. 배열 // default let list: number[] = [1,2,3]; // or let list: Array = [1,2,3]; // interface array interface EnumServiceItem { id: number; label: string; key: any } interface EnumServiceItemList extends Array{} // using var result: EnumServiceItem[] = [ { id: 0, label: 'CId', key: 'contentId' }, { id: 1, label: 'Modified By', key: 'modifiedBy' }, ]; 2. 인터페이스 상속이 가능하다. interface PeopleInterface {.. 2023. 3. 30.
[JavaScript] 자바스크립트로 form 값 넘기기 1️⃣ html form태그에 action을 지운다. > onsubmit="return false;" 을 적어준 이유 : 폼체크 후 input내 내용이 삭제되지 않게 하기 위함임 2️⃣ if문으로 폼태그의 정보를 확인한다. 3️⃣ form 프로퍼티를 활용하여 값을 준다. form.action = 'http://www.naver.com'; form.mothod = 'GET'; form.submit(); form 프로퍼티 action form데이터를 보낼 곳 elements 폼 안에 있는 요소를 선택할 때 사용함 설명 enctype application/x-www-form-urlencoded 기본값으로, 모든 문자들은 서버로 보내기 전에 인코딩됨을 명시함. multipart/form-data 모든 문자를 인.. 2023. 3. 29.
[JavaScript] 자바스크립트에서 쓰이는 개념 정리 Scope 란? 변수가 값을 참조할 때 접근할 범위 이고, 흔히 그 접근할 수 있는 범위를 찾는 규칙을 말합니다. 자바스크립트는 함수 코드 블록 내에서 선언된 변수는 함수 내부에서만 유효한 함수 레벨 스코프를 따릅니다. 동적 스코프 VS 렉시컬 스코프 동적 스코프 : 함수가 호출 되는 순간에 상위 스코프를 결정 렉시컬 스코프 : 함수가 선언 되는 순간에 사위 스코프를 결정 this 의 의미? 자바스크립트에서 실행하는 환경의 context를 의미하는 객체입니다. 상황에 따라 다르지만 간단하게 예시를 들어보자면 특정 객체 안에서의 this 는 해당 객체를 의미하고, 글로벌한 환경에서의 this는 window 객체를 의미합니다. 함수에서 쓰였을 때 : 함수를 실행시킨 곳의 객체 메소드에서 쓰였을 때 : 해당 .. 2023. 3. 26.
[JavaScript] Event.target 이벤트 발생 요소 가져오기 DOM 객체의 요소에서 이벤트가 발생한 경우 해당 요소를 가져오는 방법에 대해 알아보자. ddory const handleOnChange = e =>{ console.log(e.target.name); } document.querySelector("#name").addEventListener("change",handleOnChange) input 태그에 어떤 행동을 할 때마다 name값인 myName이 콘솔에 찍히는 소스이다. 즉, e.target에 input 태그의 속성을 넣어주고 그 속성을 e.target.(이곳) 이곳에 넣어주면 해당 요소를 가져온다. 2023. 3. 25.
[React] 리액트로 댓글 기능 구현하기 JavaScript로 구현한 로그인, 댓글 기능을 React로 바꾸고자 한다. 댓글 기능을 구현하면서 React의 props, state 개념을 이해한다. 댓글을 구현하기 위해 사용한 state userName 같은 경우는 사용자 정보를 받아오지 않고 'hacker'라는 내용을 담아놓고 사용하고 있다. comment는 사용자가 입력하고 있는 댓글이다. 태그에서 onChange를 이용하여 comment 값을 계속 담을 것이다. feedComments는 댓글 리스트를 담으려고 만들었다. isValid는 댓글 게시 가능 여부, 유효성 검사를 위해 만들었다. 유효성 검사를 통과하고 '게시' 클릭 시 발생하는 함수 post 구현 전개 연산자를 통해서 feedComments에 담겨있던 댓글을 받아온다. 기존 댓글 .. 2023. 3. 24.
[React] 리액트 좋아요 기능 구현하기 useState문법 상태변수는 초기값을 갖고 있다. 해당 state변수의 값은 상태변경함수()만 사용해서 해당 값을 변경할 수 있다. let [상태변수, 상태변경함수] = useState( 초기 값) useState로 좋아요 기본 state 변수 값 셋팅 like 상태 변수 초기값 : 0 버튼을 누를 때 1씩 증가해야함으로 숫자 0으로 설정하는 것이다. setLike 상태변경함수 설정 버튼을 누를 때 1씩 증가해 줄 함수, 상태변경! let [like, setLike] = useState(0); // 블로그 이름 목록 초기 셋팅 let [blogName, setBlogName] = useState([ "코딩학원 추천","온라인 코딩 강의 추천","개발 블로그 추천", ]); 좋아요 누를 경우 숫자 올라가.. 2023. 3. 23.
[JavaScript] 변수명 앞에 달러($) 기호 의미 변수 변수(variable)란 값을 대입할 수 있는 이름(식별자)이다. 식별자 변수와 상수, 함수 이름들을 식별자라고 합니다. 식별자는 다음과 같은 규칙이 있다. 식별자는 반드시 글자나 달러 기호($), 밑줄(_)로 시작해야 한다. 식별자는 글자, 숫자, 달러 기호, 밑줄만 사용할 수 있다. 한글을 포함 유니코드를 사용할 수 있다. 예약어는 식별자로 사용할 수 없다. 식별자를 사용할 때 일반적으로 다음과 규칙을 따른다. 클래스를 정의할 때 사용하는 식별자를 제외하고는 첫글자로 대문자를 쓰지 않는다.(camelCase 또는 CamelCase) 밑줄 한 개 또는 두 개로 시작하는 식별자는 특별한 상황, 자신 만이 내부에서 사용할 목적이외로는 사용하지 않는다. jQuery를 사용할 때는 달러 기호로 시작하는 .. 2023. 3. 22.
[React] React.Fragment 사용하기 const Component = () => { return ( 안녕하세요! 개발자또리입니다 ); }; 엘리먼트들은 반드시 단 하나의 최상위 태그로 묶여있어야 한다. 위 코드에선 div로 묶여있다. 리액트에선 최상위 태그로 묶지 않으면 SyntaxError(문법 에러)가 나온다. 이 법칙 때문에 의미없는 최상위 div태그를 감싸곤 하는데 불필요한 태그는 눈엣가시처럼 불편하기 때문에 리액트에서 제공하는 를 사용하면 실제 DOM에 별도의 node를 추가하지 않고도 엘리먼트들을 묶어줄 수 있다. 는 로 대신 사용가능. const Component = () => { return ( 안녕하세요! 개발자또리입니다 ); }; 위 코드는 div태그를 없애고 React.Fragment를 사용한 것이다. React.Frag.. 2023. 3. 21.
[React] 리액트로 검색 기능 구현하기 우리가 웹에서 가장 많이 사용하는 기능 중 하나는 검색기능이다. 리액트와 MongoDB로 검색 기능을 구현해보자 ! node.js로 이미지/정보 저장 후, MongoDB에 저장 후... [Client] SearchPage.js 페이지 만들기 import React, { useState } from "react"; import { Input } from "antd"; const { Search } = Input; function SearchPage() { return ( ); } export default SearchPage; AllData.js 만들기 import axios from "axios"; import React, { useEffect, useState } from "react"; import .. 2023. 3. 20.
[JavaScript] 스크롤 애니메이션 사라졌다가 나타나기 적용하기 이전까지 html로 높이를 직접 설정하고 스크롤 이벤트리스너로 몇px까지 도달했는지 계속 검사하여 사용했다. 그렇게 하면 브라우저마다 오차가 발생했다. 더 나은 방식을 사용하려면 IntersectionObserver() 라는 기능이 있다. 가 현재 화면에 보이는지 파악이 쉬워진다. 안녕하세요 개발자 또리입니다. 스크롤 애니메이션입니다. 결과 자바스크립트로 스크롤애니메이션 구현하기 이렇게 간단한 스크롤 애니메이션 효과를 적용 조금 더 복잡한 애니메이션은 gsap + scrolltrigger 추천 2023. 3. 19.
728x90

티스토리툴바