본문 바로가기
반응형

분류 전체보기395

[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.
[Vue] 뷰 lifeCycle 정리 1. lifeCycle 단계 - vue 의 lifeCycle 은 타 spa 들의 lifeCycle 과 같다.🙄 create 단계 ⬇⬇ mount 단계 ⬇⬇ 컴포넌트 생성 ⬇⬇ update 단계 ⬇⬇ unmount 단계 2. lifeCycle 단계 특징 create 단계 : 데이터만 존재하는 단계 mount 단계 : template 안에 있는 애들을 html 로 바꿔줌 컴포넌트 생성 : index.html 에 장착함 update 단계 : 컴포넌트 수정 단계 unmount 단계 : 페이지 닫을 때 + 😃 data 가 변하면 html 은 실시간 재랜더링 => 컴포넌트가 실시간 재랜더링됨 3. lifeCycle 메소드 beforeCreate() created() beforeMount() mounted() bef.. 2023. 4. 1.
[Vue] transition 이벤트 (동적 class, Transition 태그) 뷰로 서서히 뭔가가 바뀌는 이벤트를 줄 수 있는 방법이 두가지가 있습니다. 1. 동적 class 넣기 2. Transition 태그 사용 동적 class 넣는거는 정통적인 css 디자인 방법이구요 Transition 태그는 뷰 만의 방법인데 진짜 편해여 1. 동적 class 넣기 css 로 애니메이션을 주는 방법인데 일단 시작과 끝 애니메이션 css 를 만들어놓고 시작 css 는 처음부터 할당, 끝 css 는 원할 때 할당해줍니다. 2. Transition 태그 사용 근데 뷰에는 더 쉽게 애니메이션을 구현할 수 있습니다. 시작 시 처음: .class명-enter-from 시작 시 transform: .class명-enter-active 시작 시 끝: .class명-enter-to 끝날 시 처음: .cla.. 2023. 3. 19.
반응형

티스토리툴바