본문 바로가기

전체 글

 (364)
Kossie Coder 15. 싱글 파일 컴포넌트 views 폴더 : 보통 페이지 컴포넌트. Home을 클릭했을 때, views/Home.vue 컴포넌트를 보여주고, About을 클릭했을때는 views/About.vue를 보여준다. 더 잘게 쪼개고 싶으면 components폴더 안에 넣어주면 된다. - public : Webpack의 처리를 받지않고 퍼블리싱되는 정적 자산(static assets)을 포함. (단, index.html의 경우 일부 Webpack의 처리를 받는다.) - index.html : 앱의 템플릿 파일. Vue 앱은 이 index.html 페이지로부터 실행된다. - main.js : 가장 먼저 실행되는 javascript 파일. Vue 인스턴스를 생성하는 역할. 애플리케이션의 진입점. 이 파일은 Vue 앱을 초기화하고, index...
Kossie Coder 10. v-for 리스트 렌더링 {{people[0].name}} {{people[0].age}} {{people[1].name}} {{people[1].age}} {{people[2].name}} {{people[2].age}} {{people[3].name}} {{people[3].age}} {{person["name"]}} {{person["age"]}} {{person["name"]}} {{person["age"]}} {{index}} 1/ v-for을 사용하지 않으면 배열에 요소가 추가되어도 업데이트되지 않는다. 2/ v-for in을 사용해도 되고, v-for of를 사용해도 똑같은 결과가 나온다. 3/ v-for="(person, index)" 이렇게 괄호치고 index를 하면 index를 가져올 수 있다. 4/ v-for..
박스를 가운데정렬해주는 방법 margin: 0 auto 정렬대상이 block 요소일때 사용할 수 있다. 그리고, 이 정렬대상인 block 요소의 width가 정해져있어야한다. div 태그같은 경우, width="165"과 같이 고정된 값이 있어야한다. 그래야 width를 제외한 나머지 공간을 margin값이 똑같이 나눠가지면서 가운데 정렬이 된다. margin : 0 auto margin 위아래 값은 주지 않고, 좌우는 균등하게 값을 주어 정중아에 두게 되는 것. 출처 : https://www.codeit.kr/community/threads/10663
text-align : center inline 요소가 정렬되는 방식. 정렬을 시킬 경우, 부모 block 요소를 가진 부분에 적용하면 된다. Q. inline요소에 직접 text-align:center을 할때 적용이 안되는 이유? inline 요소는 그 content의 넓이만큼 공간을 차지한다. ex: , 그래서 그 inline 요소에 직접 text-align: center를 한다면 딱 그 요소의 넓이만큼만 공간을 차지하고 있으니 거기다가 text-align을 해도 움직일 공간이 없다. 그래서 부모 block요소에 적용을 하게 된다. ex1: block 요소인 h1 태그에 text-align: center를 적용한 경우 See the Pen Untitled by 오예림 Ria Oh (@riaoh) on CodePen. ex2: inlin..
터미널에서 code . 입력하면 VSCode 실행시키기 터미널에서 'code .'를 치면 VSCode가 실행되지 않고,zsh: command not found: code. 라는 에러가 떴다. 찾아보니 VSCode에서 따로 설정이 필요하다고 한다. 1/ command+shift+p : 명령 팔레트(Command Palette) 열기현재 상황에 맞는 명령을 빠르게 검색 및 사용할 수 있다. 2/ install 'code' command in PATH 검색 및 클릭 근데 여기서 나는 에러가 떴다.cd /usr/local/binsudo rm -rf code 이렇게 code를 삭제하고 다시 VScode에 들어가서 command+shift+P를 열고 install 'code' command in PATH 클릭! 나는 ''Code will now prompt with '..
[TIL] 2022. 07. 26. TUE. 1차 프로젝트 최종 마무리 및 회고 입사 후 소위 나의 첫 프로젝트가 최종 마무리되었다. 시작부터 마무리까지 대략 한달정도 걸린 것 같다. 원래 계획대로라면 1주 반만에 끝냈어야 할 일이었는데 내 능력의 한계로 이렇게 조금씩 미뤄졌다. 아직 리팩토링 해야할 부분이 좀 남아있지만, 그래도 큰 문제 없이 테스트가 진행되어서 굉장히 뿌듯하다. 작업을 한 순서를 보면, 1/ PM님과 디자이너분이 만들어주신 figma를 보며 전체적인 앱의 flow를 이해한다. 2/ 백엔드분과 어느 화면에서 어떤 data를 받아올지 상의한다. 3/ 먼저 웹 퍼블리싱을 해놓는다. 이때 이후에 받아올 데이터 부분은 하드코딩을 해놓되, 변수처리를 해서 둔다. 4/ 서버 작업이 완료되면 data를 직접 받아오고, 변수처리한 부분에 넣는다. 잘한점 - 마지막까지 마무리한 것..
얄코 깃 끝장내기 section 3 [Lesson 1] : 여러 branch 만들어보기 하나의 줄기가 main차원 한 프로젝트에 여러 branch. commit을 해야 싹이 나간다. [Lesson2] : branch를 합치는 두 가지 방법 프로젝트의 메인 줄기는 main브랜치에서 진행되고, 다른 두 곳(add-coach, new-teams)에서 다른 실험적인 시도를 해 보고 있다. 이곳들에서 진행한 내용들이 모두 채택돼서 이들을 메인 브랜치로 가져올 것이다. 이를 진행하는 방식은 두가지가 있다. Merge vs Rebase - Merge: 두개를 이어 붙이는 것. 그 과정에서 커밋 하나가 더 생긴다. 새로 생기는 노란색 커밋에는 원래 브랜치랑 병합될 브랜치의 모든 변화들이 다 담기게 된다. 파란색 메인 브랜치에다가 초록색에서 작업했던 세 ..
얄코 깃 끝장내기 [1] [Section 1] Git : VCS란 종류의 프로그램들 중 하나. VCS : Version Control System의 약자. 프로그램의 버전관리를 위한 툴. 프로젝트의 시간과 차원을 관리하는 것. 프로그래밍을 해서 소프트웨어를 만드는 건 대부분 그 첫 결과물에서 끝나지 않는다. 새 기능을 넣고, 오류를 수정하고 성능을 개선하면서 계속해서 새 버전들이 나온다. 근데 이런것들을 진행하다보면 했던 작업을 취소해야할 일이 생긴다. 버전 5에 결함이 생겨서 버전 4로 되돌아가야하는 경우. 회사에서 어떤 앱을 만드는데 나한테 어떤 아이디어가 떠올라서 만들고 있는 앱에 시도해보고 싶다. 하지만 회사 코드에 내 멋대로 논의되지 않는 코드를 추가하고 할 수는 없다. 마치 시간여행 하는것처럼..

티스토리툴바