본문 바로가기
반응형

컴퓨터/Front70

[JavaScript] Prototype이 뭘까용(2) (Prototype 상속기능 직접 만들어보기) Prototype 은 부모의 정보 Prototype 은 생성자로 만들어야 나옵니다. 당연하죠 왜냐면 Prototype 은 부모의 정보니까요! array 로 prototype 알아보기 - 부모 정보 찍어보기 Array.prototype Array() 의 prototype 을 찍어보겠습니다. 잘은 모르겠지만 constructor 인 것만은 확실해졌네요! 심지어 더 밑으로 내려가보니 Object… Array() 의 부모의 부모는 Object 였어요 array 로 prototype 알아보기 - __proto__ 와 prototype let arr = new Array() arr = [1,2,3] arr.__proto__ Array.prototype 이렇게 한번 찍어봅시당 자식.__proto__ 랑 부모.prot.. 2023. 7. 9.
[JavaScript] Prototype이 뭘까용(1) (난 length 를 만든적이없는데 배열에 써지네?...) 시작하기 전….. 참조형 데이터 타입을 찍어볼께요 여기 안에 prototype 이라는 애가 있네용 잘 살펴보면 객체 안에는 Object, 배열 안에는 Array(0) 이 라고 적혀있습니댜 object 의 prototype을 펼쳐보면 뭔가 많이 나옵니다. toString, valueOf 같은 익숙한 함수도 보이네요 array 의 prototype를 펼쳐보면 배열에서 사용할 수 있는 함수들이 보이고 맨 마지막에 또 prototype Object 가 보이네요! 그래서 prototoye 이 뭐냐면요!! Prototype 부모의 정보 Protoype 특징 1. 자식이 부모의 데이터를 사용 할 수 있습니다. 2. 자식이 부모의 부모의 데이터를 사용할 수 있습니다. 3. 자식이 부모의 부모의 부모의….. 부모의 데.. 2023. 6. 25.
[JavaScript] 생성자(2) Constructor 이렇게 사용합니다. https://gallery-k.tistory.com/430 [JavaScript] 생성자 (1) Constructor, 생성자를 사용하는 이유 생성자 object 를 여러개 만들 때 사용 생성자를 사용하는 이유 참조형 데이터 타입인 object 를 복사해서 쓰려고 (+ 객체지향적인 코딩을 위해서 라고 말하면 간지남) 데이터 타입 종류? 기본형 참 gallery-k.tistory.com 생성자 사용1_ 객체 복사하기 // Constructor function 생성자(){ this.data1 = 'data1'; // instance this.data2 = 'data2'; // instance } let 객체1 = new 생성자() let 객체2 = new 생성자() 이제 객체1 과 객체 2 를 사용할 수 .. 2023. 6. 25.
[JavaScript] 생성자 (1) Constructor, 생성자를 사용하는 이유 생성자 object 를 여러개 만들 때 사용 생성자를 사용하는 이유 참조형 데이터 타입인 object 를 복사해서 쓰려고 (+ 객체지향적인 코딩을 위해서 라고 말하면 간지남) 데이터 타입 종류? 기본형 참조형 데이터 타입이 있습니다. 기본형 데이터 타입 : string number let 문자열 = '앙녕'; let 숫자 = 1; 참조형 데이터 타입 : array object let 배열 = [1,2,3] let 객체 = { a: '1', b: '2' } 기본형과 참조형의 차이 (복사) 둘의 제일 큰 차이점은 기본형 데이터 타입을 복사하면 값이 복사되고, 참조형 데이터 타입을 복사하면 주소값이 복사된다는 점이죠 그래서 참조형 데이터를 let 객체1 = {data:'data', data1:'data1'} .. 2023. 6. 25.
[html] sass,css 텍스트(p, h123 태그)에 그라데이션 색 넣기 대여/반납 현황 결과물 2023. 6. 20.
[JavaScript] Promise 사용해서 원하는 순서대로 코드 실행하기 Promise 원하는 코드 작동 후에, 결과에 따라서 원하는 순서대로 다음 코드를 실행하게 해주는 디자인 패턴 생긴거 /* eslint-disable */ export default () => { // promise 함수 선언 const 더하기함수 = new Promise( (성공,실패) => { // 원하는 코드 작성 if (1+1 === 2){ 성공(); }else{ 실패(); } }); // promise 함수 실행 더하기함수.then(() => { // 성공 시 실행 console.log('성공'); }).catch(() => { // 실패 시 실행 console.log('실패'); }); return( PromiseCode ) } 이렇게 생겼습니다. Promise 함수 선언 Promise 함수 .. 2023. 6. 13.
[JavaScript] 비동기 코드를 동기처럼 사용하기_콜백함수 용어정리 콜백 함수안의 함수 비동기 코드와 동기 코드가 섞여있을 경우, 동기적으로 실행시키고 싶을 때 사용 동기 위에서부터 아래로, 차례대로 실행되는 코드 비동기 비동기 코드가 있을 때 동기 -> 비동기 순으로 실행 콜백함수 근데 비동기 먼저 실행시키고 그 다음에 동기 코드를 실행시키고 싶을 때가 있는데 이때 콜백 함수를 써줍니다. 콜백함수는 함수안에 함수 라는 뜻이고 이 함수에 있는 거 실행시킨다음에 그 다음 함수 실행시켜주세요 라는 의미입니다. 콜백함수와 비동기 코드 대표적인 비동기 코드들을 살펴보면 // setTimeout setTimeout( () =>{},1000) 1초 지난 다음에 안에 코드를 실행해주세요 파라미터로 arrow function 이 들어있습니다. // 이벤트리스너 document.. 2023. 6. 13.
[JavaScript] 동기 비동기 특징 ( + Web Api) 동기 - synchronous - 위에서부터 아래로 차례대로 실행되는 코드 - 한번에 코드 한줄씩 차례차례 실행 - stack 에서 코드를 한줄씩 실행시킴 비동기 - asynchronous - 비동기적 코드 (fetch, 이벤트리스너, setTimeout, setState 함수...) 사용 시 빨리 처리되는 순서대로 실행되는 코드 - 실행이 오래걸리는 비동기적 코드들을 Web Api -> 큐에 넣어서 나중에 실행시키고, 실행이 바로 가능한 동기적 코드부터 stack 에서 꺼내서 실행시킴 - 자바스크립트 언어의 기능이 아니라 웹 브라우저의 기능 동기 비동기 실행 함수 /* eslint-disable */ export default () => { const sync = () =>{ console.log('동.. 2023. 6. 13.
[React] useState 사용하는이유 (1)_기본형 변수 useState 데이터 상태 관리를 위한 훅 입니당... useState 사용하는 이유 state 가 변하면 생기면 html도 자동으로 재렌더링해주기 때문입니다. useState 로 만든 버튼과, 일반 변수로 만든 버튼이 있습니다. /* eslint-disable */ import { useState, useReducer } from 'react' export default () => { const [ onoff, setOnOff] = useState(false); let onoff2 = false; const whenClick=()=> { console.log('useState의 값',onoff); setOnOff(!onoff); } const whenClick2=()=> { console.log('일.. 2023. 6. 12.
[React] useReducer 뜻과 의미, 완전쉽게 사용해보기😃 useReducer useState 대체 훅 입니다. useState 로는 보통 숫자형 문자열 같은 간단한 데이터를 관리하는데 반해 useReducer 는 객체 같은 복잡한 데이터를 관리합니다. 저도 예전에 회원정보 관리할때 로그인 상태를 관리하기 위해서 useReducer 를 사용했는데 처음에 익힐때는 어려웠지만 한번 써보니까 굉장히 편하더라구여 useReducer 사용해보기 버튼 눌렀을 때 값을 증가/감소 시키는 로직을 useReducer 훅을 사용해서 짜왔습니다. /* eslint-disable */ import { useReducer } from 'react' export default () => { const initialState = { count: 0 }; function reducer(st.. 2023. 6. 10.
프론트앤드 면접준비 링크 모음 (JavaScript, SPA(React/Next, Vue/Nuxt) 정리 ing...) 보통 블로그에다가 정리를 하면서 프론트앤드 공부를 하는데 정리가 되지 않아서 이미 포스팅한 지식들도 다 까먹고 있더라구요 이참에 중구난방으로 퍼져있는 프론트앤드 지식들을 하나에 모아놔야 할 필요가 생긴 것 같아서 만들었습니당 라우터처럼.. + 정리하는 김에 다른 블로그 글들도 모아볼 예정,,ㅎㅎ🤫 + 계속 업데이트 할 예정,,ㅎㅎ😮 목차 1. 자바스크립트 2. SPA 공통 3. 리액트/넥스트 4. 뷰/넉스트 1. 자바스크립트 1-1 돔 웹 브라우저 동작 원리 DOM https://gallery-k.tistory.com/345 https://gallery-k.tistory.com/346 This 전역에서 사용: window 전역 함수에서 사용: window object 의 함수 (메소드) 에서 사용: 그 .. 2023. 6. 10.
[React] 리액트에 카카오 공유버튼 추가하기(kakao api) 카카오톡 api 는 엄청 자세하고 친절한 편입니다. 잘 읽어보면 충분히 혼자서도 가능합니다. + 카카오톡 공유 기능은 자신의 웹 페이지가 배포되어있는 상태여아 작동합니다!!!! 카카오톡 공유 기능 추가 시 해야할 것들 입니다. 순서대로 1. 카카오톡 api 사이트 들어가기 2. 회원가입 또는 로그인 3. 내 어플리케이션 > 어플리케이션 추가하기 4. 문서 > 시작하기 > javascript 4-1 index.html 에 복사하기 5. 메세지 > 카카오톡 공유:javascript 5-1 js 키 init 1. 카카오톡 api 사이트 들어가기 https://developers.kakao.com/docs/latest/ko/message/common Kakao Developers 카카오 API를 활용하여 다양한.. 2023. 5. 21.
[Vue] 뷰 router 4버전 설치 및 사용_ nested routes (5) 뷰.js 에서 사용하기 뷰의 router.js 의 children 에 array로 적어주면 사용가능 const routes = [ { path: "/detail/:id", component: DetailContent, children:[ { path: "info", component:InfoPage }, { path: "post", component:PostPage }, ] }, ]; 주소/detail/10/info 주소/detail/100000/post 이런 주소 사용 가능😃 nested routes nested routes 가 뭐냐면 하위 URL 경로를 가지는 라우트를 구성하는 것 티스토리 글쓰고있는 주소인데 주소/어쩌고/어쩌고 이렇게 되어있음 어쩌고~~ 가 하위 url 경로임 끗 2023. 4. 3.
[Vue] 뷰 router 4버전 설치 및 사용_ url parameter (4) 뷰js 에서 사용하기 뷰의 router.js 의 path 에 /detail/:id 꼴로 적어주면 url parameter 를 사용할 수 있음 const routes = [ { path: "/detail/:id", component: DetailContent, }, ]; + /detail/:id/:id2/:id3 이렇게 파라미터 여러개 전달 가능 https://gallery-k.tistory.com/408 [Vue] 뷰 router 4버전 설치 및 사용_ router 와 route (2) https://router.vuejs.org/guide/ ⬆⬆ vue-router 4 참고... 1. router router 는 페이지 이동관련 기능 $router.push('/detail/0') 원하는 페이지로 이동 .. 2023. 4. 3.
[Vue] 뷰 router 4버전 설치 및 사용_라우터 주요 태그 종류 (3) https://router.vuejs.org/guide/ vue-router 4 참고... 주요기능 1. router-view 2. router-link 홈 리스트페이지 3. named views 여러개 컴포넌트를 보여줄 때 /list 방문 시 여러 컴포넌트들을 한번에 보여줄 수 있음 + 등등....😗 redirect 도 있음 찾아보면 나옴 2023. 4. 1.
반응형

티스토리툴바