JavaScript51 [JavaScript]바닐라자바스크립트 컴포넌트생성하기 // 페이지(컴포넌트) 임포트 import Home from "./public/pages/Home.js"; import Design from "./public/pages/Design.js"; import Board from "./public/pages/Board.js"; import Submit from "./public/pages/Submit.js"; // 경로 문자열을 정규 표현식으로 변환하는 함수 const pathToRegex = path => new RegExp("^" + path.replace(/\//g, "\\/").replace(/:\w+/g, "(.+)") + "$"); // 매개변수와 일치하는 값을 추출하는 함수 const getParams = match => { const values.. 2023. 12. 5. [JavaScript]Vanilla Javascript로 웹 컴포넌트 만들기 --스크랩 https://junilhwang.github.io/TIL/Javascript/Design/Vanilla-JS-Component/#_1-%E1%84%80%E1%85%B5%E1%84%82%E1%85%B3%E1%86%BC-%E1%84%80%E1%85%AE%E1%84%92%E1%85%A7%E1%86%AB Vanilla Javascript로 웹 컴포넌트 만들기 | 개발자 황준일 Vanilla Javascript로 웹 컴포넌트 만들기 9월에 넥스트 스텝open in new window에서 진행하는 블랙커피 스터디open in new window에 참여했다. 이 포스트는 스터디 기간동안 계속 고민하며 만들었던 컴포넌트 junilhwang.github.io 2023. 12. 4. [JavaScript]비동기 작업 수행하는 코드 뜯기 아래 코드는 unbookClub 프로젝트를 진행하면서 API 도서검색 기능구현을 하며 사용한 코드다. onClick 함수로 아래의 아래의 코드와 연결시켰다. 기능 목록 event.preventDeafault(); => 새로고침 방지 setSearchError(null); => 검색 오류를 나타내는 상태 변수를 초기화.(useState 리액트 내장함수 사용) startLoading(); => customHook(contextAPI와 함께 사용함) 으로써 로딩 이미지를 보여주는 커스텀훅 호출 async { ... } await(error) { ... } => async 키워드는 함수를 비동기 함수로 선언. 이는 함수 내에서 await 키워드를 사용할 수 있게 하고, 함수가 항상 Promise를 반환. asy.. 2023. 11. 21. [JavaScript ES6]map 함수, 백틱 || 문자열리터럴 map함수는 배열을 변형할 수 도 있지만 새로 만들 수도 있다. https://hans-j.tistory.com/144 [JavaScript]배열 정렬하기 feat. sort, map, filter /리액트 응용 배! 열! 이! 란! 이름과 인덱스로 참조되는 정렬된 값의 집합 자세한 설명은 넘어가고 바로 예시로 고고. 문자 정렬 (A-Z,가-하 오름차순) **sort함수는 원본을 변형시키니 주의!- //어레이는 변수명 hans-j.tistory.com 여기에 간단하게 써둠ㅋ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map Array.prototype.map() - JavaScript | MDN m.. 2023. 9. 14. [JavaScript && HTML]script 요소 배치 script 요소를 어디에 배치하냐에 따라서 오류가 나거나 undefined이 출력되는 것을 보고 ... '그동안 안에 script 요소를 배치했을 때 오류가 안 난 이유는 뭐지?' 하고 궁금해졌다... 이런거 미리 알고 있었어야했는데 이제서야 찾아보는게 부끄럽다;; 이번에 클론코딩을 진행하면서 큰 플랫폼들의 코드를 뜯어보는데 script가 에 있기도 하고 에 있기도 해서 궁금했다. 문서의 DOM구조가 필요한 경우에는에 위치시키고 앞에 위치 시키는 경우는 대부분의 스크립트 위치로 추천되는 위치이며 이벤트리스너처럼 동적으로 (브라우저 렌더링이 끝난 후) 컨텐츠를 변경할 때. 위의 글 출처 : https://ko.wikibooks.org/wiki/JavaScript/%EC%BD%94%EB%93%9C_%EB%.. 2023. 9. 14. [JavaScript]화살표 함수 || Arrow function 하이 ㅎㅇ ㅎ . 이런 느낌의 화살표 함수 매개변수 (Parameter) 한 개 인 경우에는 괄호를 없앨 수 있기 때문에 위의 이미지에서 가장 아래에 있는 hey2함수처럼 구현할 수 도 있다. 화살표 함수는 this 키워드를 사용 할 수 없으니 주의해야 함. https://hans-j.tistory.com/101 [JavaScript/자바스크립트]this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing variable다. 암묵적으로 생성되며 코드 어디서든 참조 할 수 있다. 함수를 호출하면 arguments 객체와 th hans-j.tistory.com 2023. 9. 14. [JavaScript] Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')에러 자바스크립트 언어는 위에서부터 아래로 순차적으로 작동함. 위의 코드를 보면 p태그는 맨 아래에 있기때문에 script가 실행되고 있을 때 없는 태그에 html을 붙이라고 명령하고 있는 것과 같다. 따라서 이 에러는 순서만 바꿔주면 쉽게 해결됨 ㅋ ↓↓↓위의 오류 해결하면서 찾아보고 작성한 글 ↓↓↓ https://hans-j.tistory.com/234 [JavaScript && HTML]script 요소 배치 script 요소를 어디에 배치하냐에 따라서 오류가 나거나 undefined이 출력되는 것을 보고 ... '그동안 안에 script 요소를 배치했을 때 오류가 안 난 이유는 뭐지?' 하고 궁금해졌다... 이런거 미리 알고 hans-j.tistory.com 위와 같은 오류가 발생했을 경우 오류 해결.. 2023. 9. 14. [JavaScript ES6]상속도 feat.class extends 키워드를 사용해서 상속받는 함수 클래스는 항상 생성자가 있어야한다 -> constructor 자식함수 : Gender 부모 함수 : Student가 된다. super()를 호출해서 상속받는 프로퍼티를 정의하고 //// 오브젝트의 각각의 프로퍼티는 프로퍼티 디스크립터라고 하는 객체로 저장됨 ex) const descriptors = Object.getOwnPropertyDescriptors(dog); console.log(descriptors); Student함수에서 받는 값은 this.gender를 통하여 정의해준다. 위와 같은 코드를 입력하면 값은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Object.. 2023. 9. 13. [Jquery]슬라이드 || carousel 라이브러리 Slick 이번에 알라딘 클론코딩을 진행하면서 슬라이더를 구현해야할 일이 많았다..! Slick 라이브러리로 손쉽게 ㄱㄱ https://kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io 위의 라이브러리로 구현한 것 1. 슬라이더 (카카오 도서 API로 받아온 데이터로 구성됨) 2. 버튼 커스터마이징 이 두 개가 가장 중요했다. 슬라이더의 기본 기능 중에 버튼이 있었지만.. 2023. 9. 13. [Three.JS]소개글 Three.JS는 미스터 둡..(Mr.doob)씨가 개발한 JS 라이브러리. 이것은 3D오브젝트들을 브라우저에서 직접적으로 컨트롤할 수 있도록 한다. 쉽게말해서, HTML5 캔버스안에서 WebGL을 사용할 수 있다는 소리. 별로안쉽네 (WebGL은 웹 기반의 그래픽 라이브러리로써, 2D/3D 그래픽 렌더링을 가능하게해주는 API) https://ko.wikipedia.org/wiki/WebGL Three.JS의 다른 좋은 점은 추가적인 플러그인 설치가 필요 없다는 것!! 작동은 어떻게 할까? (2D,3D를 조절하기 위해서 필요한 것) 1.Scene 2. Meshes 3. Camera 4. Rendering Engine (Octane이나 Redshift같은 툴을 의미함) 참고 사이트 https://www... 2023. 5. 31. [Javascript]styled-component 도움 많이 된 포스트 --스크랩 https://nykim.work/107 [ReactJS] 4. styled-components 💅🏾 이 글은 NomadCoders의 와 의 내용 일부를 정리한 글입니다. 🙇🏻♀️ 멋진 강의 감사합니다 🙇🏻♀️ 개인 스터디 글로, 맞지 않는 내용이나 더 나은 방법을 공유해 주신다면 복받으실 거예 nykim.work https://react.vlpt.us/styling/03-styled-components.html 3. styled-components · GitBook 03. styled-components 이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는데요, 우리는 이번 튜토리얼에서 해당 기술을 사용하 reac.. 2023. 3. 10. [Javascript]웹팩 --스크랩 https://onlydev.tistory.com/111 웹팩(Webpack) 이해하기 처음 리액트를 배울 때 이런 생각이 들었다. "이렇게까지 어려운 문법을 배우면서 굳이 써야하나? 내 개인 프로젝트에 쓰일 정도로 편하긴 한가?" 반은 억지로 하다보니 따라치기 수준의 학습밖 onlydev.tistory.com 2023. 3. 7. [Javascript]SPA Netlify로 배포 feat. memory limits 에러 해결방법 : package.json에서 빌드환경설정 변경 배포하는 방법 요약 Netlify에 로그인하고, 새로운 사이트를 생성. "Deploys" 탭으로 이동하여 "New deploy" 버튼을 클릭. "Drag and drop your site folder here"를 선택하거나 "Choose from your computer"을 클릭하여 빌드된 정적 파일이 들어 있는 폴더를 업로드. 빌드 및 배포 설정을 구성. 예를 들어, netlify.toml 파일을 사용하여 설정. "Deploy site" 버튼을 클릭하여 프로젝트를 배포. 간단 설명 리디렉션 세팅 ( 세팅을 하는 이유는 일반적으로 서버 측 코드가 실행되어야 할 때 사용한다. 예를들어 서버에서 데이터 베이스에서 동적으로 생성된 HTML을 가져와 렌더.. 2023. 3. 5. [JavaScript]some메서드 some() 메서드는 JavaScript에서 기본적으로 제공되는 메서드 중 하나로, 주어진 조건을 만족하는 요소가 배열 내에 적어도 하나 이상 있는지 확인하는 메서드입니다. 만족하는 요소가 적어도 하나 이상 있다면 true를 반환하고, 그렇지 않다면 false를 반환합니다. const arr = [1, 2, 3, 4, 5]; const hasEvenNumber = arr.some((num) => num % 2 === 0); console.log(hasEvenNumber); // Output: true 이 예시에서는 숫자 배열 arr에서 some() 메서드를 호출합니다. 메서드는 배열 내에 적어도 하나의 요소가 짝수인지 확인하기 위해, 조건으로 화살표 함수를 사용합니다: num % 2 === 0. 배열에는.. 2023. 2. 28. [Routing]SPA - frontend router Single Page Application SPA ! 요런느낌으로 깔쌈하게 줄여진 채로 많이 불리는 SPA 처음에 코딩에 ㅋ도 몰랐을때 스파오를 잘못쓴줄 알았다 환장.. 암튼!! 이 강의가 정~~~말~~~! 도움 많이 됐다. 댓글들에도 칭찬일색이었음. https://www.youtube.com/watch?v=6BozpmSjk-Y&t=601s 강의는 37분짜린데 한 3시간 걸렸다;; 중간에 계~속 오류가 나기도하고 내가 모르는 지식이 계속 튀어나와서 중간중간 찾아보느라 ㅠㅠ.. 한 게 굉장히 많은데 간단히 정리해보자면! HTML만들기 (아무런 파일을 만들지 않은 상태이지만 그래도 script로 index.js 파일을 먼!저! 연결해주기 server.js ( 내 서버에서 GET요청 처리) index.js (.. 2023. 2. 22. [JavaScript]async async는 말입니다. 비동기처리 패턴 중 하나. Promise패턴과 같은 역할을 함! https://hans-j.tistory.com/147 [JavaScript]웹개발시 자주 사용하는 메서드들 JavaScript로 HTML 내용 변경하기 주의해야할 점! getElementById는 Element로! s가 없다. 근데 다른 메서드들은 모두 s가 있다. 이유는! Id는 중복사용이 안되기때문에 하나일 수 밖에 없기 떄문!!! 주의합시 hans-j.tistory.com 여기 중간에 Promise설명 써둠ㅋ 짧게 말하면 Promise라는 객체는 비동기작업 (순차적으로 진행되지 않는 작업)에 대한 성공과 실패에 대한 결과를 미리 정해놓음. 또한 Promise패턴은 new Promise()이렇게 선언을 해주어야 .. 2023. 2. 3. [VScode]노드몬 실행이 안 될 때 ! -스크랩 https://prefer2.tistory.com/entry/error-VSCode-%EC%98%A4%EB%A5%98%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C-ps1-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%A1%9C%EB%93%9C%ED%95%A0-%EC%88%98-%EC%97%86%EC%9D%8C [error] VSCode 오류(이 시스템에서 스크립트를 실행할 수 없으므로 ~ps1 파일을 로드할 수 없음) nodem.. 2023. 2. 1. [JavaScript]웹개발시 자주 사용하는 메서드들 JavaScript로 HTML 내용 변경하기 주의해야할 점! getElementById는 s가 없다. 근데 다른 메서드들은 모두 s가 있다. 이유는! Id는 중복사용이 안되기때문에 하나일 수 밖에 없Da. 주의합시다. 버튼 누르면 HTML내용 바꾸기 click하면 내가 설정한 함수가 실행됨!! JSON에서 값 받아오기 + Promise패턴 백틱!!을 사용해서 레이아웃 잡아주고 forEach로 배열의 길이만큼 레이아웃을 추가/append 해준다. 해당 메서드가 이행해서 data를 받아오면! products 변수에 = data.products를 담아두도록 명령. then() 메서드는 Promise (en-US)를 리턴하고 두 개의 콜백 함수를 인수로 받음. 하나는 Promise가 이행했을 때, 다른 하나는 .. 2023. 2. 1. [JavaScript]로컬스토리지 브라우저의 저장공간 중 하나인 로컬스토리지(Local Storage) Local Storage / Session Storage (key : value 형태로 문자, 숫자 데이터 저장가능) Indexed DB (크고 많은 구조화된 데이터를 DB처럼 저장가능, 문법더러움) Cookies (유저 로그인정보 저장공간) Cache Storage (html css js img 파일 저장해두는 공간) Local Storage에는 문자, 숫자만 key : value 형태로 저장 할 수 있다. 총 용량은 5MB Local Storage는 브라우저 재접속해도 영구적으로 남아있는데 Session Storage는 브라우저 끄면 초기화된다. 유저가 브라우저 청소하지 않는 이상 반영구적으로 데이터저장이 가능 사용 예 ) 쇼핑몰 .. 2023. 1. 30. [JavaScript]DOM이란? 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. 요약하자면 자바스크립트가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 object 자료로 정리한걸 DOM이라고 부름. 문서 객체 모델 (Document Object Model) : 객체 지향 모델로써 구조화된 문서를 표현하는 형식 DOM은 XML이나 HTML 문서의 프로그래밍 인터페이스 DOM은 문서의 구조화된 표현(structured representation)을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 함 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, met.. 2023. 1. 30. [JavaScript]배열 정렬하기 feat. sort, map, filter /리액트 응용 배! 열! 이! 란! 이름과 인덱스로 참조되는 정렬된 값의 집합 자세한 설명은 넘어가고 바로 예시로 고고. 문자 정렬 (A-Z,가-하 오름차순) **sort함수는 원본을 변형시키니 주의!- //어레이는 변수명 어레이.sort(); 숫자 정렬(오름차 순) 어레이.sort( function (a,b) { return a - b; } ); console.log(어레이); return 오른쪽이 양수면 a를 오른쪽으로 보냄. return 오른쪽이 음수면 b를 오른쪽으로 보냄. 숫자 정렬(내림차 순) 어레이.sort( function (a,b) { return b - a; } ); console.log(어레이); 배열의 객체들을 값 오름차순으로 정렬한 예제 let products = [ { id: 0, price:.. 2023. 1. 30. [JavaScript]Ajax란? AJAX = Asynchronous JavaScript And XML 비동기 JavaScript 및 XML AJAX is not a programming language. AJAX는 웹 서버와 데이터를 뒤에서 교환함으로써 웹 페이지를 비동기적으로 업데이트할 수 있도록 한다. 즉, 전체 페이지를 다시 로드하지 않고 웹 페이지의 일부를 업데이트할 수 있습니다. Ajax는 서버와 데이터주고받는 법 중 하나인데 새로고침 없이 GET, POST를 요청하는 기능!! 서버와 유저는 문자자료만 주고 받을 수 있음. 따라서 Object, array를 보내고 싶으면 따옴표로 감싸서 문자처럼 JSON으로 변환하여 보내줌. '{ "price" : 5000 }' //JSON 예제 근데!! 이런건 JQuery로 요청하면 자동 변.. 2023. 1. 29. [JavaScript]이벤트 버블링 Event bubbling 이벤트 버블링은 이벤트가 가장 안쪽의 대상 요소에서 먼저 트리거된 다음 가장 바깥쪽 DOM 요소 또는 문서 개체에 도달할 때까지 동일한 중첩 계층에서 대상 요소의 상위 요소에서 연속적으로 트리거되는 DOM 이벤트 전파 유형 /출처: 위키피디아 어떤 HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 이벤트가 실행되는 현상 /출처:코딩애플 예를 들어 이벤트버블링 예제 위의 코드에서 span태그의 요소를 클릭하면 브라우저는 사용자가 클릭을 총 3번 했다고 인지함. 이유는 이벤트 버블링때문에 이렇게!! 세개를 인식한다. *이벤트 버블링은 항상 일어나는 현상* 해결방법! document.querySelector('.클래스명').addEventListener('click', fun.. 2023. 1. 28. [JavaScript]Jquery +사용법 긴~ JS 코드를 깔쌈하게 줄여주는 천사같은 라이브러리 Jquery!!! 구글 검색창에 Jquery CDN 검색!! https://releases.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr releases.jquery.com 접.속 CDN코드 복붙!! 설.. 2023. 1. 25. [JavaScript]addEventListner EventTarget 인터페이스의 addEventListener() 메서드는 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정 https://hans-j.tistory.com/138 [HTML]자바스크립트로 객체 불러오기 getElementById / getElementByClassName 함수!! Id나 class 명으로 요소 불러오는 역할을 한다. 쟤네를 이용해서 객체를 호출할 것. 둘의 차이점은!! Id는 중복을 허용하지 않는다. Class는 중복을 허용하기 때문 hans-j.tistory.com 위의 게시글에서는 저런식으로 onclick을 요소마다 일일이 써줬지만 이제는 script로 어떤 동작을 하면! 내가 원하는 함수가 실행되도록!!! addEvenetListener() 메서드를.. 2023. 1. 25. [JavaScript] parent, parents의 차이 parent() Method parents() Method It only traverses one level up in the DOM of the selected element. It traverses all levels up in the DOM of the selected element until the root i.e HTML tag. It returns only an element that is the direct parent. It returns all elements that are ancestors to the selected element 간단히 정리하면 parent 메소드는 한 단계의 상위 요소를 반환하고 (부모요소) parents 메소드는 모~든 상위 요소를 반환한다. (모든 조상요소) .. 2023. 1. 13. [JavaScript/자바스크립트]클로저 간단히 말하면 클로저(closure)는 자신이 생성될 때의 렉시컬 환경(Lexical environment)을 기억하는 함수다. 안 간단히 말하면 외부 함수보다 중첩 함수가 더 오래 유지되는 경우 중첩 함수는 이미 생명 주기가 종료한 외부 함수의 변수를 참조할 수 있다. 이러한 중첩 함수를 클로저(closure)라고 부른다. MDN에 따르면 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다. 렉시컬 환경이란?????????? 코드가 어디서 실행되며 주변에 어떤 코드가 있는지, 식별자-변수 매핑을 포함하는 데이터 구조. 키와 값을 갖는 객체 형태의 스코프(전역, 함수, 블록 스코프)를 생성하여 식별자를 키로 등록하고 식별자에 바인딩 된 값을 관리. 즉, 스코프를 구분하여 식별자를 등록하고 관리하는.. 2023. 1. 2. [JavaScript/자바스크립트]프로토타입 JavaScript는 흔히 '프로토타입 기반 언어(prototype-based language)' 라 불린다. 왜냐???? Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용하며, 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 하는 근간이다. 프로토타입을 상속받은 하위(자식) 객체는 상위 객체의 프로퍼티를 자신의 프로퍼티 처럼 자유롭게 사용할 수 있다. 모든 객체는 하나의 프로토타입을 갖는다. 모든 객체는 프로토타입의 계층구조인 프로토타입 체인에 묶여있다. 상속되는 속성과 메소드들은 각 객체가 아니라 객체의 생성자의 prototype이라는 속성에 정의되어 있다. 구분 소유 값 사용 주체 사용 목적 __proto__접근자 프로퍼티 모든객체 프로토타입의 참조 모든.. 2023. 1. 2. [JavaScript/자바스크립트]this 키워드 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수 self-referencing variable다. 암묵적으로 생성되며 코드 어디서든 참조 할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 지역변수 처럼 사용할 수 있다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. //바인딩 : 식별자와 값을 연결하는 과정을 의미한다. 예를 들어, 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩하는 것이다. //this 바인딩 : this(키워드로 분류되지만 식별자 역할을 한다.)와 this가 가리킬 객체를 바인딩하는 것이다. 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할.. 2023. 1. 2. [JavaScript/자바스크립트]엄격모드 엄격 모드 strict mode strict 모드는 자바스크립트 언어의 문법을 좀더 엄격히 적용하여 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. strict모드를 적용하려면 전역의 선두 또는 함수 몸체의 선두에 'use strict;'를 추가한다. 전역의 선두에 추가하면 스크립트 전체에 strict mode가 적용된다. 'use strict'; function foo(){ x = 10; } foo(); 함수 몸체의 선두에 추가하면 해당 함수와 중첩 함수에 strict mode가 적용된다. function foo() { 'use strict'; x = 10; } foo(); 코드 선두에 'use strict';를 위치시키.. 2023. 1. 1. 이전 1 2 다음
