본문 바로가기
반응형

컴퓨터167

[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.
[Vue3] Module not found: Error: Can't resolve '@fullcalendar/daygrid, interaction' (FullCalendar.js) 1. 문제발생 2. 원인찾기 3. 문제해결 1. 문제발생 작업중인 프로젝트의 데이터 바인딩 시 calendar 형태로 표현해야된다고 해서 FullCalendar.js vue 버전을 찾아 install 을 했습니다. https://fullcalendar.io/docs/vue Vue Component - Docs | FullCalendar FullCalendar seamlessly integrates with the Vue JavaScript framework. It provides a component that exactly matches the functionality of FullCalendar’s standard API. This package is released under an MIT licens.. 2023. 5. 9.
[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.
[Vue] 뷰 router 4버전 설치 및 사용_ router 와 route (2) https://router.vuejs.org/guide/ ⬆⬆ vue-router 4 참고... 1. router router 는 페이지 이동관련 기능 $router.push('/detail/0') 원하는 페이지로 이동 $router.go(1) 앞으로 한페이지 이동 $router.go(-1) 뒤로가기 한번 (-2는 두번) 제목 2. route $route: 현재 URL 정보가 담겨있음 $route.params: 현재 URL 정보의 파라미터 (여러개 존재할 수 있음) $route.params.id: 현재 URL 정보의 id 파라미터 {{블로그글[$route.params.id].title}} 2023. 4. 1.
[Vue] 뷰 router 4버전 설치 및 사용 (1) 1. 설치npm install vue-router@4 yarn add vue-router@4 2. main.js 에 라우터 세팅import router from './router' // 원래 여기서 라우터를 설정을 하는데 // 코드가 기니까 router 파일을 따로 만들어서 import 한다. createApp(App).use(router).mount('#app') 3. router.js 만들기import { createWebHistory, createRouter } from "vue-router"; const routes = [ { path: "/list", component: DetailList.vue, }, ]; const router = createRouter({ history: createWeb.. 2023. 4. 1.
[Vue] 뷰에서 bootstrap 설치 (5버전) https://getbootstrap.com/ 사이트 접속 vue 프로젝트 경로에 다음 명령어로 bootstrap 5 설치 npm i bootstrap@5.3.0-alpha1 main.js 에 다음 파일 import import 'bootstrap' import 'bootstrap/dist/css/bootstrap.min.css' 2023. 4. 1.
[Vue] 뷰 component 사용법 및 정리 컴포넌트화 시키면 좋은 거 다른 곳에서 쓸거 같을 때 (재사용해야될 때) 라우터화 시킬 때 (라이브러리) html 이 너무 복잡하고 길 때 순서 💜 자식 1. 컴포넌트화 시킬 자식 파일 만들기 이름은 multiword 로 짓기 (DetailModal.vue ◀◀ 이런 식으로) 2. 자식컴포넌트 name key : 자식컴포넌트 이름 value export default { name:'DetailModal', // 생략 } 💜 부모 1. 부모컴포넌트에 import 시켜주기 // templete 태그 밖에다가 해준다. import DetailModal from './DetailModal.vue'; 2. 부모컴포넌트 components key : 자식컴포넌트 이름 value export default { com.. 2023. 4. 1.
반응형

티스토리툴바