본문 바로가기

개발일지

 (6)
[포텐데이 X 클로바 스튜디오] 우당탕탕 해커톤 후기 올해가 가기 전에 후다닥 써보는 포텐데이X클로바 스튜디오 참여 후기,,, 💫 2년 만에 사이드 프로젝트...🫣 IT 사이드 프로젝트 플랫폼 '비사이드' 에서 첨으로 외부 사람들과 사이드 프로젝트를 해봤었다. 덕분에 비사이드와 좋은 연이 되어 입사하고 잘 다닌지 벌써 2년.. 이라니 시간 넘 빠르고요?! 한동안 사이드 프로젝트는 안하다가 새로 생긴 '포텐데이' 라는 프로그램에 참여해보기로 결정! 포텐데이는 딱 10일 동안 진행하는 IT 해커톤 프로그램이다. 서로 모르는 기획자, 디자이너, 개발자들이 만나 팀빌딩하여 빠르게 프로덕트를 만들 수 있는 매력적인 프로그램이당..🌟 사실 백엔드 개발자로서 10일 동안 뭘 많이 할 수 있을까? 라는 생각도 있었고, 다소 짧은 기간인 10일 간 개발 하는게 부담스럽기..
nativescript-vue 앱 개발 도전기(라고 쓰고 포기담이라고 읽는다...) 요즘 몇 주간 블로그 기록이 뜸했다가 뜬금없이 앱 개발 도전기 라는 제목을 갖고 글을 쓴다. 한창 알고리즘 풀겠다며 올리다가 프로그래머스 2단계에서 현타오고.. 차라리 뭐라도 만드는게 낫겠다 싶어져서 이번엔 앱을 건드렸다. 사실 '도전기' 라며 올리는 거지만 '포기담'이 결론이다. 이럴거면 뭐하러 올리냐 싶겠지만 이 또한 나의 시간과 에너지를 들인 피같은 경험이기 때문에.. 더 잊기전에 간단히 내가 무엇을 하려고 했고 어떻게 포기(?)를 하게 되었는지 기록하고자 한다. 갑자기 App? 난 사실 앱 개발을 안좋아한다. 예전에 안드로이드 개발을 혼자 독학해보기도 하고 학부생때 잠깐 배워보기도 했는데 느려터진 애뮬레이터도 짜증났고 아직 개발 시작도 못했는데 설치, 환경설정 과정에서부터 에러를 너무 많이 마주쳤..
[개발일지] Vue.js Trello 만들기 - 정리 요구사항 : 기본 기능, 추가 기능 -> 기술 조사 : Vue, Vuex, Vue-router, axios, dragula -> 기능 구현 : SPA, 인증, 트렐로 기능 퍼블리셔 : HTML,CSS로 웹의 디자인을 만들어낸다 프론트엔드 : HTML, CSS, API 들을 가지고 JS기술을 통해 웹 애플리케이션을 만들어낸다. 백엔드 : 데이터 부분 개발, API로 제공, 내부 기능 로직을 만든다.
[개발일지] Vue.js Trello 만들기 - 색상 입히기, 보드 세팅, 보드 삭제 색상 입히기 [mutations] 테마 색상 셋팅하기 SET_TEHME (state, color) { state.bodyColor = color || '#ffffff' state.navbarColor = color ? 'rgba(0,0,0,.15)' : '#026aa7' } [state] 상태값 설정 bodyColor: '#ffffff', navbarColor: '#026aa7' [Home.vue] methods 추가 ...mapMutations([ 'SET_IS_ADD_BOARD', 'SET_TEHME' // 테마 세팅 메소드 추가 ]), created() this.SET_THEME() // 추가 => 작동확인해보면 mutations실행, 상태값만 변환됨. 그래서 외관적으로 아직 나타나지는 않음 [Na..
[개발일지] Vue.js Trello 만들기 - 카드 이동, 이동 리팩토링, 카드 삭제 카드 이동 드래그앤드랍 라이브러리 설치 $ npm i dragula [board.vue] import dragula from 'dragula' import 'dragula/dist/dragula.css' data() 상태값 추가 dragulaCards: null updated() 추가 - 이동작업 일어났을 때 동작 추가 updated() { // dragulaCards 초기화 작업 if(this.dragulaCards) this.dragulaCards.destroy() // 유사배열을 NodeList->Array 하고 마우스를 놓았을 때 콘솔 출력 this.dragulaCards = dragula([ ...Array.from(this.$el.querySelectorAll('.card-list')) ])...
[개발일지] Vue.js Trello 만들기 - 카드상세조회(라우팅, API 연동), 카드 수정 카드 상세 조회 - 라우팅[Board] 에 router-view 부분 추가. [CardItem] 에 router-link 추가. (링크 연결 시 board id는 state에서 가져옴, card id는 data props에서 가져옴) => card 하나씩 클릭할 때 card 컴포넌트가 router-view에 출력됨 [Card] 컴포넌트에 root div를 로 바꾸면 (모달 import,컴포넌트 등록 해야함) Card컴포넌트를 띄울 때 모달창이 뜬다. => 카드를 누르면 Modal창 뜸 카드 상세 조회 - API 연동card 누르면 api 연동해서 card 정보 불러오도록 구현하기. (api 등록) fetch 함수 만들어서 get card api 부르기. (action 등록) card 조회하는 FETCH_..

티스토리툴바