반응형 컴퓨터153 [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. 이전 1 2 3 4 5 6 ··· 20 다음 반응형
