[2023 회고] 주니어 프론트엔드 개발자의 2023년 회고 😉 사실은 반성문

[2023 회고] 주니어 프론트엔드 개발자의 2023년 회고 😉 사실은 반성문

welcome 2024한 해가 순식간에 지나갔습니다! 마치⚡️사실 2023년은 .. 회고라기엔 반성문에 가깝습니다..  1. 개망한 개인 공부커밋이 전부는 아니겠지만, 제 상태를 보여주기에는 제일 적당한 것 같아요. 보시다시피 7월까지는 그냥 놀았어요 🤭 공부고 뭐고 양심 찔릴 때만 조금씩 하다가 결국 4월부터 완전히 놓아버린 나ㅜ 지금 생각해보면 제 정신 아니었던 것 같아요ㅠ 아무튼 시간과 돈을 흥청망청 쓰다 보니 심각성을 깨닫고 지금은 정신을 차렸답니다 😌  정보처리기사 실기 광탈7월부터는 정보처리기사 실기를 준비했습니다. 자격증이 필요해서는 아니고, CS 기초 좀 할 겸 뭔가 환기?가 필요했어서 가볍게 공부 시작! 결과는 물론 광탈 🤣 하하하하 다시는 정처기를 만만하게 보지 않겠습니다. 솔직히..

  • format_list_bulleted 📃 기록/개발자 일지
  • · 2024. 1. 15.
  • textsms
컴포넌트 디자인 패턴 (common, slot, controlled, renderless) 간단 정리

컴포넌트 디자인 패턴 (common, slot, controlled, renderless) 간단 정리

아웅 정리할수록 복잡하고 더 헷갈리네ㅎ 이런 것들 언젠가 편하게 사용하겠지?ㅜ 아무튼 common, slot, controlled, renderless 디자인 패턴에 대해 알아보자 컴포넌트 디자인 패턴 Common 간단하고 기본적인 컴포넌트 등록과 컴포넌트 통신 AppContent, Appheader 컴포넌트를 불러옴 이벤트, props 활용 before after 버튼을 클릭하면 내용이 바뀌도록 구현해보자 // CommonView.vue import한 AppHeader 컴포넌트와 AppContent 컴포넌트 간 데이터를 이벤트, props로 주고받고 있다. // AppHeader.vue {{ name }} AppHeader에서는 userName을 props로 받아서 그대로 표시 // AppContent..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 1. 12.
  • textsms
mixin 간단 정리

mixin 간단 정리

mixin vue 컴포넌트에 비슷한 기능들을 재사용할 수 있는 방법 재사용 로직은 data, methods, created 등과 같은 컴포넌트 옵션 mix 형식 // mixin 정의 var mixins = { // 컴포넌트 옵션 (data, methods, created 등) }; // mixin 주입 new Vue({ mixins: [mixins] }) 만들면서 이해해보자 /mixin1 링크 이동 시 A 페이지, /mixin2 링크 이동 시 B 페이지를 띄우며 각 페이지의 데이터를 mixin 을 통해 불러오자 일단, route 연결 // routes/index.js export const router = new VueRouter({ routes: [ { path: '/mixin1', name: 'mix..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 1. 9.
  • textsms
git 레파지토리 히스토리, 커밋까지 초간단 옮기기

git 레파지토리 히스토리, 커밋까지 초간단 옮기기

OLD 프로젝트의 커밋들을 NEW 프로젝트로 복사해야하는 상황 OLD프로젝트 디렉토리에서 아래 명령어 입력 (1) 이동할 원격저장소(NEW)를 연결 git remote set-url --push origin NEW주소 (2) 이동할 원격저장소로 push git push --mirror 끝 지금까지 OLD 프로젝트에서 작업한 코드들을 NEW 프로젝트에서 확인할 수 있다. 복사할 거 다 복사했는데, OLD 프로젝트가 원격의 NEW 프로젝트에 그대로 연결되어 있으면 찜찜하니까 .. 원격 저장소 연결 정보 확인하고 삭제하고 새로 연결하기 OLD프로젝트 디렉토리에서 아래 명령어 입력 (1) 원격저장소 연결 정보 확인 git remote -v (2) 원격저장소 연결 정보 삭제 git remote remove ori..

  • format_list_bulleted 🧠 저장/Git
  • · 2024. 1. 8.
  • textsms
하이오더컴포넌트(HOC) 간단 정리

하이오더컴포넌트(HOC) 간단 정리

Higher Order Component (HOC) 함수형 기반 재사용 방식이다. 컴포넌트 로직을 재사용할 수 있다. 컴포넌트를 인자로 받고 컴포넌트를 반환하는 컴포넌트이다. 예를 들어 ... /hoc1 링크로 이동하면 A페이지, /hoc2 링크로 이동하면 B페이지가 나오는 구조일 때 A, B페이지가 거의 똑같다면 각각 view를 만들기보단 컴포넌트의 컴포넌트를 만들고 용도에 맞게 컴포넌트를 return 하는 식으로 만들어보자. 즉, 한 컴포넌트 로직을 그대로 재사용하기! 코드를 보면서 이해해보자 // routes/index.js import Vue from 'vue'; import VueRouter from 'vue-router' import createView from '../views/HocView..

  • format_list_bulleted 🧠 저장/Vue
  • · 2024. 1. 3.
  • textsms