반응형 분류 전체보기379 [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. 이전 1 2 3 4 5 6 7 ··· 48 다음 반응형
