YELOPER

회사에서 일하다... datepicker와 input radio 선택 후 모달 취소버튼을 누르면 초기화작업을 해야하는데 아무리 emit으로 보내도 반응이 없었는데... 다행히 천사같은 선임님이 알려주셔서 해결할 수 있었다...defineExpose를 이때 알게 되었는데 둘의 차이를 확실히 해두면 좋을 것 같아서 작성한다 1️⃣ defineExpose자식 컴포넌트 내에서 부모 컴포넌트에게 노출할 변수나 함수를 정의하는 데 사용.자식 컴포넌트에서 expose를 사용하여 노출된 속성들을 정의.부모 컴포넌트에서 자식 컴포넌트의 인스턴스에 접근하여 해당 노출된 속성을 사용할 수 있음자식에서 부모로 데이터를 노출시킬 때 사용// ChildComponent.vueimport { defineComponent, defi..

회사에서 사이드 프로젝트로 하던 거를 집에서도 작업하려고 깃 클론을 하고 npm install을 했는데... 1시간이나 여기서 잡아먹혔다 ㅠㅠㅠ 해결했던 방법은 파이썬 설치가 아닌.. 1- npm uninstall node-sass 2- npm i -D sass ---> 에러나서 3- npm install -D sass-loader@^10 sass ---> 이렇게 했더니 성공 3- npm i 이것이었다...

🚀 VUEX란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vue.js 중고급 개발자로 성장하기 위한 필수 관문 🚀 Flux란? MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 - Unidirectional data flow action: 화면에서 발생하는 이벤트 또는 사용자의 입력 dispatcher: 데이터를 변경하는 방법, 메서드 model: 화면에 표시할 데이터 view: 사용자에게 비춰지는 화면 데이터의 흐름이 여러 갈래로 나뉘지 않고 단방향으로만 처리 🚀 Vuex가 필요한 이유 복잡한 애플리케이션에서 컴포넌트의 개수가 많아지면 컴포넌트 간에 데이터 전달이 어려워짐 🚀 Vuex로 해결할 수 있는 문제 1. MVC..

🚀 vue Transition 1. Transition 엘리먼트나 컴포넌트가 돔에 들어갈 때와 나갈 때 애니메이션을 적용 내장된 컴포넌트. 그래서 등록할 필요없이 모든 컴포넌트의 템플릿에서 사용할 수 있음 v-if 를 통한 조건적인 렌더링 v-show 를 통한 조건적인 디스플레이 스페셜 엘리먼트인 를 통해 동적인 컴포넌트 토글링 2. TransitionGroup list와 같이 여러 개의 태그가 들어가는 경우를 고려한 Transition 컴포넌트 감싸는 태그가 없이 v-for 등을 이용해 여러 개 태그가 들어가야함. 대신 tag 라는 속성을 통해 감쌀(wrap) 태그를 지정할 수 있음 리스트의 태그들은 각자 나타나거나 사라지고 순서만 바뀌기 때문에, 서로 영향을 주지 않음. 따라서 transition m..

1️⃣ UI를 컨트롤하는 디렉티브 - UserInterface 1. 선언적 렌더링 Vue.js 데이터바인딩의 가장 기본 데이터 바인딩의 가장 기본적인 형태: 이중 중괄호 {{ }} 문법을 사용한 텍스트 보간법 이중 중괄호는 데이터를 HTML이 아닌 일반 텍스트로 해석. 실제 HTML을 출력하려면 v-html 디렉티브를 사용 2. Class와 Style 바인딩 1) HTML Class 바인딩 HTML 클래스 바인딩을 하기 위해선 v-bind: class (축약형 - :class)를 사용 객체로 바인딩 되며 클래스를 동적으로 토글하기 위해 객체를 :class에 전달할 수 있음 isActive: state 영역 즉, data 영역에 선언한 임의의 변수이며 이 변수는 true와 flase 값을 가짐 2) HTM..

이직하게 된 회사에서 React나 Next가 아닌 VUE를 사용하게 되어서 출근하기 전까지 조금이라도 공부하기 위해 유튜브에 올라온 강의를 보며 학습을 시작하였다! https://www.youtube.com/watch?v=9lWaIhE05m8&t=430s 구디사는 개발자 9Din님께서 유튜브에 올려주신 강의로 학습하였다. 1️⃣ VUE 시작하기 구글링해본 결과 VUE는 Vue-CLI나 Vite 둘 중 하나로 시작을 하는 것 같았다 리액트로 예를 들면 CRA vs Vite 이런 느낌일라나.. 📚 Vue-CLI vs Vite 1. Vue-CLI의 장단점 장점 다양한 기능을 제공하며 Vue.js 애플리케이션의 빌드, 테스트 및 배포를 위한 다양한 구성을 제공합니다. 프로젝트의 개발을 위한 설정을 쉽게 커스텀 ..

드디어 1차 개발이 완료되었다! 어떤식으로 배포를 진행할까 고민하던 찰나.. vercel로 많이 한다길래 처음이니까 ㅎㅎ vercel로 배포를 진행했다! 🚀 Vercel이란? Next.js에서 제공하는 배포 플랫폼 빌드, 배포, 호스팅 제공, 공식문서에서도 Vercel을 통한 Front Project 배포 권장 Github Repository를 통해 쉽게 배포 가능 1️⃣ pakage.json에 script 추가 및 수정 { "scripts": { "dev": "next dev", "build": "next build", "start": "next start" } } 처음에 블로그를 보며 이렇게 script를 수정하고 빌드를 진행하였는데 PrismaClientInitializationError: Pris..

1️⃣ 슬라이딩 윈도우란? 고정 사이즈의 윈도우가 이동하면서 윈도우 내에 있는 데이터를 이용해 문제를 풀이하는 알고리즘 배열이나 리스트의 요소의 일정 범위 값을 비교할 때 사용하면 매우 유용 배열과 그 부분 배열을 어떤 조건하에서 계산하는 경우에 주로 사용 예) 구간 합 구하기, 부분 문자열 구하기 등 2️⃣ 구간마다 일일이 합을 구할 경우 vs 슬라이딩 윈도우 알고리즘을 활용할 경우 1. 구간마다 일일이 합을 구할 경우 앞에서 구했던 값이 있음에도 불구하고 다음 번에 또 구하고.. 또 구하고.. 시간복잡도가 늘어날 수밖에 없다 -> 효율성이 떨어짐 2. 슬라이딩 윈도우 알고리즘을 활용할 경우 최초 윈도우에 대해서만 값을 구하고 한 칸씩 윈도우를 밀 때에는 이전 구간 합을 활용함 -> 효율성 좋음 윈도우..

1️⃣ 그리디 알고리즘이란? 선택의 순간마다 당장 눈 앞에 보이는 최적의 상황만을 쫓아 최종적인 해답에 도달하는 방법 그리디 알고리즘을 해결하기 위해서는 최적이라 생각되는 해답을 찾고 이를 통해 최종 문제의 해답에 도달하는 방식으로 접근해야 함 locally optimal solution -> globally optimal solution 그러나, 이런 방법은 항상 최적의 결과를 보장하지 않음 (특정한 상황에서만 보장) 2️⃣ 그리디 알고리즘을 사용할 수 있는 두 가지 조건 탐욕적 선택 속성(Greedy Choice Property) : 앞의 선택이 이후의 선택에 영향을 주지 않는다 최적 부분 구조(Optimal Substructure) : 문제에 대한 최종 해결 방법은 부분 문제에 대한 최적 해결 방법..

드디어 마지막 관문인 게시판 만들기! 전 회사에서도 CRUD 정도는 해봤지만,, 백엔드 분이 만들어 주신 api를 받아서 프론트 쪽 작업만 했었기에,, 항상 api 만드는 과정이 궁금했었다 😳 다음 개인프로젝트에서 무조건 게시판을 만들어봐야겠다라고 결심한지 어언 몇 개월,, 드디어 실행에 옮겼다! 1️⃣ 글 작성페이지 만들기 (CREATE) 우선 퍼블리싱은 다 해놓은 상태니,, 데이터만 붙이이면 다 되니까 빨리 끝나겠지 ㅎㅎ 라고 생각했다면 경기도 오산 😧 1. schema.prisma 에서 필드 정의하기 model Post { id String @default(cuid()) @id title String content String? published Boolean @default(false) autho..