UX/UI 디자이너

오랜만에 학습이라 지역콤포넌트/전역콤포넌트부터 다시 공부했다. 헤헤.. [한줄 요약] -실무에서 쓰는건 지역콤포넌트! -콤포넌트마다 개별 vue 파일로 제작! -한 파일안에는 하나의 div 파일만 존재! -App.vue 파일에 모을때는 import와 new vue에서 콤포넌트 정의 필수! Vue.js 투두리스트를 만들기위해 기본 셋팅하기 + 지역콤포넌트 설정 2022/04/15 [반드시 필요한 개발 환경] -NPM -Visual Studio -vue.js -github -Chrome [Visual Studio code] -무료 프로그램, 홈페이지에서 다운 받기 https://code.visualstudio.com/ -플러그인 vetur 사용하기 :코드를 인식하여 가독성 좋게 변경 -TSLint 사용하기 ..

git사용하기 (4) - git컴플릭트 해결하기 2022/04/14 1.깃 컴플릭트 해결 -두명 이상의 작업자가 같은 파일을 고칠시, 상반되는 내용이 있을시, -각각의 변경 사항을 비교(compare)하고 직접 수정하기 2.user1 마스터에서 새로운 기능 브랜치 제작(예:resevation) 2-1.user1: 새로운 내용 추가 > 소스트리로 스테이지/커밋/푸쉬 -파일 하나에 내용을 덧붙인다 -소스트리를 이용하여 커밋과 푸쉬를 한다 -브랜치 잘 올라갔는지 확인하기 3. user2 마스터 클릭 > 같은 파일에 내용변경 -vs에서 2번의 파일에서 다른 코드를 입력하고 -소스트리로 푸쉬/커밋을 진행 -두개의 내용 확인하기 4. 2번에서 만든 브랜치 > 병합클릭 -2번에서 만든 브랜치에서 병합 클릭 -컨플릭트..

git사용하기 (3) - 포크/풀리퀘스트/어멘드/리버트/체리픽 2022/04/13 1.포크 -콜라보레이터로 권한을 요청하지 않아도 타인의 깃을 통재로 복사 -포크해온 브랜치를 마스터로 푸쉬가능 -원본을 유지하되, 여러 원격저장소에서 사용할수 있다는 점 a. 포크가 가능한 저장소 상단에 포크 버튼 클릭 b.이름 지정 c.본인의 계정 확인 -본인 계정에 복사된 내용 확인 가능하다. -원본은 어디에서 왔는지도 표기된다. d.코드 버튼 클릭하여 URL 복사 e.소스트리에 URL로 코드 가져오기 -자동으로 이름이 지정됨 f.스테이지/커밋/푸쉬 후 변경사항 확인 -파일 변경후 스테이지/커밋/푸쉬 후 변경 되었는지 확인한다. g.변경 한 내용을 원래의 저장소에 추가하기 -기존에 포크했던 원격 저장소 주소를 복사 -소..

push관련해서 토큰 문제로 헤매다가 진행하는 소스트리로 깃, 깃허브 활용하기. git사용하기 (1) - git환경 셋팅과, 로컬 git 생성, github에 업로드>> git사용하기 (1) - git환경 셋팅과, 로컬 git 생성, github에 업로드 2015년도 쯔음에 깃허브를 처음 사용해 보았는데 작업 기록용으로 사용했지, 협업용으로써는 사용해본적이 없어서 궁금하여 다시 공부해보기로 하였다. 개발 환경세팅할때는 어쩔수 없이 터미 studiodebbbie.tistory.com git사용하기 (1) - git환경 셋팅과, 로컬 git 생성, github에 업로드 2022/04/05 1.소스트리 웹사이트에서 프로그램 설치하기 https://www.atlassian.com/ko/software/sourc..

기본인 깃과 깃허브의 개념, 깃을 위한 세팅, 기본 푸쉬에 대해 공부하였다. 다음은 원격 저장소에 업로드 된 상대의 코드를 받아오는 방법을 공부할 예정! git사용하기 (1) - git환경 셋팅과, 로컬 git 생성, github에 업로드>> git사용하기 (1) - git환경 셋팅과, 로컬 git 생성, github에 업로드 2015년도 쯔음에 깃허브를 처음 사용해 보았는데 작업 기록용으로 사용했지, 협업용으로써는 사용해본적이 없어서 궁금하여 다시 공부해보기로 하였다. 개발 환경세팅할때는 어쩔수 없이 터미 studiodebbbie.tistory.com git사용하기 (2) - github에서 클론과 푸쉬 2022/03/18 상대의 깃을 복사하기 (*혼자서 2인의 작업이라 같은 폴더에 생성해보기) 1.새..

2015년도 쯔음에 깃허브를 처음 사용해 보았는데 작업 기록용으로 사용했지, 협업용으로써는 사용해본적이 없어서 궁금하여 다시 공부해보기로 하였다. 개발 환경세팅할때는 어쩔수 없이 터미널과 리눅스 명령어를 사용하게 되는데 한번 돌이킬겸 같이 공부용 정리하는 것으로.. git사용하기 (1) - git환경 셋팅과, 로컬 git 생성, github에 업로드 2022/03/15 깃/깃허브를 써야하는 이유? -버전관리 -클라우드 저장소 -협업 버전관리를 해야하는 이유? -팀원과 한가지 프로젝트의 여러코드를 관리 -> 중간중간 세이브 지점을 만드는것! -버전 별로 비교해서 원하는 버전으로 업데이트 가능 깃 저장하기 -개인 로컬 저장, USB저장, 서버, 클라우드(깃허브) :여러 사람과 협업하기 위해서는 클라우드 사용..

Vue.js - 프로젝트 시작과 마크업 2022/01/21 1)새로운 프로젝트 생성 -확장자가 없는 빈 화면에서 새터미널로 vue cereate vue-form을 작성 vue cereate vue-form -vue2와 vue3이 있는데 vue3을 선택 (EsLint를 기존의 vue 확장 프로그램과 사용하려면 vue2를 선택해야한다) -vue cli에서 vue 3으로 기본 프로젝트를 생성하면 크롬 확장 플러그인에서 vue를 잡아내지 못한다. beta버전을 사용하면 정상적으로 작동함! Vue.js devtools Chrome and Firefox DevTools extension for debugging Vue.js applications. chrome.google.com -cd vue form과 npm r..

Vue.js - 개발 시작하기 (w.vue-cli) 2022/01/19 1.App.vue파일 -안의 내용을 지우고 < 괄호를 타이핑하면 자동완성으로 기본 vue 파일 자동 완성 -template 태그 안에는 기본으로 하나의 엘레멘트 만 들어가야함 (*만약 두개 이상을 적었을시 lint에 하나의 엘레멘트만 가능하다고 안내) -하단의 터미널에서 로컬 호스트 8080을 클릭하면 확인가능 2.data 연결하기 -new Vue인스턴스에서는 단순히 data:{}로 객체를 연결했다면, -vue-cli에서는 data를 재사용 할 확률이 높기에, 여러 콤포넌트에서 동일한 데이터 값을 참조하지 않도록, -function으로 연결하여 return으로 새객체를 반환해야한다 (*이걸 안지키면 오류가 됨!) export defa..

Vue.js - vue-cli 사용 방법과 살펴보기 2022/01/17 1.VUE CLI -홈페이지 존재 -커맨드와 인터페이스의 약자이며, 명령어로 실행하는 보조도구 2.설치하기 -Get started의 Installation에서 실행 명령어로 설치가능 -터미널 오픈 -node -v로 현재 노드버전 확인 => v16.1.0 -npm -v로 현재 버전 확인 => v7.11.2 -아래 내용 작성하여 CLI 설치하기 npm install -g @vue/cli -npm도 자동으로 업데이트 되고 설치도 완료됨 *에러가 날때 대처 방법 a.권한이 없는 경우 sudo 포함하여 작성 sudo npm install -g @vue/cli b.패키지 설치 경로 On Unix systems they are normally p..

vue.js - watch와 computed의 차이점과 활용법 2022/01/16 1.watch 속성 이해하기 -기존처럼 동일한 html문서, vue 스크립트, div#app, new vue 인스턴스 제작 -data는 숫자 사용 (예. 10) - methods에 클릭했을때 기능을 addNum메소드를 사용하고 숫자가 1씩 더해지도록 (*주의*data에서 주는 숫자를 사용하기 위해서 this.num을 사용) new Vue({ el : '#app' data: { num: 10 }, methods: { addNum:function(){ this.num = this.num+1; } } }) -#app에 버튼을 추가하고 click동작이 있을지 addNum메소드 실행하도록 숫자가 커져용 -이슈: btn을 눌러도 바로..