본문 바로가기
반응형

전체 글405

[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.
[개발자 일기] 개발자가 지원자 360개 서류 체크를 하며 느낀점 - 사람인 이력서 보기좋기 쓰는 팁 (이건 개발자 일기일까 아닐까....) 0. 시작스타트업으로 이직하고 나서 같이 일할 개발자를 뽑게 되었습니다. 요즘 경제 불황이여서 그런가... 조그만한 회사인데도 이력서가 많이 들어왔더라구요덕분에 여러 사람들의 경력을 확인하면서 저를 돌아보게 되는 계기가 되었습니다. (세상에 열심히 사는 사람이 많구나…) 근데 엄청난 기술스택과 멋진 토이를 갖고 있으시면서 이를 잘 표현하지 못하신 분들이 많더라구요 안타까운 마음 + 나도 그러지 말아야겠다 + 이를 알려야겠다 는 생각에 글을 한번 써볼까 합니다... 1. pdf 로 이력서 올리지 마세용 (중요중요중요!!!)가끔 이력서에 아무 내용 없이 pdf 만 올린 사람이 있습니다. 이러면 곤란해용.. 왜냐면 이렇게 되거든요… 그럼 들어가서 다운받으면 되지 왜 그럴.. 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.
[bitbucket] bitbucket app password 생성 | fatal: Invalid credentials _ 망할 자꾸 비번풀리는데 빗버켓 토큰 발급방법이 없어 왜 빗버켓 망할 내가 진짜 내가 회사때문에 쓰지..... personal setting 왜 숨겨놓냐고 원래있던자리로 돌려놓으라고!!!!!! 🤬🤬🤬🤬🤬🤬🤬🤬 분노의 글작성... 1. 문제발생 & 문제원인찾기 2. 문제해결 1. 문제발생 & 문제원인찾기 pull 안하고 push 해버려서 마음 졸이는 와중에 빗버켓 인증이 풀리고 말았습니다. 망할 왜왜 급해죽겠는데 2. 문제해결 그래서 침착하게 제가 username 이랑 비번 입력했는데 안되는거에여 영어 읽어보니까 토큰 발급받으라는거같아서 빗버켓 사이트 갔는데 안보이는거에여 다른 블로그 글들 보면 우측 상단 프로필 클릭 > personal setting 누르라는데 안보인다구여 없다구여 어딨었는지 아세여??? 톱니바퀴 > Personal Bitbucket setti.. 2023. 5. 19.
[React] (mac) errno: -13, npm err! code: 'eacces', ~ 오류 해결 1. 문제발생 2. 원인찾기 3. 문제해결 1. 문제발생 npm install 은 문제없이 되길래 안심하고있었더니 firebase 세팅해주려고 하니까 바로 다음과 같은 오류가 났습니다. npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/firebase-tools npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/firebase-tools' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/f.. 2023. 5. 11.
반응형

티스토리툴바