devOhzl

마크다운 ✅ 장점 문법이 쉽고 간결하다. 관리가 쉽다. 지원 가능한 플랫폼과 프로그램이 다양하다. ✅ 단점 표준이 없다. 모든 HTML 마크업을 대신하지 못한다. README.md 파일을 생성하고 VSCode에서 돋보기 아이콘을 누르면 마크다운 실행결과를 미리 볼 수 있다. 출력되는 곳에 따라서 다른 모양이 나올 수 있다. 참고용으로만 사용하자. 1️⃣ 제목 : # 2️⃣ 줄바꿈 : 띄어쓰기 2번 / 3️⃣ 강조 (이탤릭, 두껍게, 취소선, 밑줄 이 때, 밑줄같은 경우는 아래처럼 HTML 태그로 만들어도된다. 밑줄 4️⃣ 목록 들여쓰기 두번하면 하위 목록이 된다. 5️⃣ 링크 6️⃣ 이미지  를 [ ] 안에 넣으면 ..

Vue 컴포넌트 화면의 영역을 구분하여 개발할 수 있는 뷰의 기능 컴포넌트 기반으로 화면을 개발하게 되면 코드의 재사용성이 올라가고 빠르게 화면을 제작할 수 있다. Vue 컴포넌트 등록과 표시 Vue 컴포넌트 통신 뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖습니다. 컴포넌트 간에 데이터를 주고 받기 위해서는 아래와 같은 규칙을 따른다. 데이터는 항상 위에서 아래로 흐르고, 아래에서 위로 이벤트가 올라간다. * 이벤트 : 컴포넌트 간의 메세지를 주고받기 위한 장치 📌 Props - 데이터 전달 컴포넌트 간에 데이터를 전달할 수 있는 컴포넌트 통신 방법 상위 컴포넌트에서 하위 컴포넌트로 내려보내는 데이터 속성이다. v-bind:프롭스이름 = "상위 컴포넌트의 데이터 이름" 📌 Emit - 이벤트 발생 ..

뷰 인스턴스 생성 📌 Vue2 : 뷰 인스턴스 // 방법 1 new Vue({ el: '#app' }) // 방법 2 new Vue({ }).$mount('#app') 📌 Vue3 : 애플리케이션 인스턴스 Vue.createApp({ data(){ return { message: '10' } } }).mount('#app'); 인스턴스 속성 컴포넌트 옵션 속성 = 인스턴스 옵션 속성 = 옵션 API 다 같은 말 📌 Vue2 new Vue({ el: , template: , data: , methods: , created: , watch: , }); 📌 Vue3 Vue.createApp({ template: , data: , methods: , created: , watch: , }); el : 인스턴스가..

Vue.js란 간단한 화면 UI 개발부터 라우팅, SSR 등의 애플리케이션 레벨의 개발을 지원하는 프레임워크 리액트와 더불어 실무에서 가장 많이 사용되고 있는 프론트엔드 개발 라이브러리 리액트에 비해 진입 장벽이 낮고 쉽게 배울 수 있다. 개발 생산성이 높고 자바스크립트 지식이 크게 요구되지 않는다. * SSR https://joshua1988.github.io/vue-camp/nuxt/ssr.html Server Side Rendering | Cracking Vue.js 서버 사이드 렌더링이란? 서버 사이드 렌더링이란 서버에서 페이지를 그려 클라이언트(브라우저)로 보낸 후 화면에 표시하는 기법을 의미합니다. 뷰 싱글 페이지 애플리케이션을 서버 사이드 joshua1988.github.io * Next.j..

master에서 main 으로 브랜치 변경 ✅ 현재 브랜치의 이름을 main으로 변경한다. git branch -m master main ✅ 모든 버전관리 프로젝트의 기본 브랜치의 이름을 'main' 으로 설정한다. git config --global init.defaultBranch main 버전 관리를 하지 않을 폴더 및 파일 설정 (.gitignore) 프로젝트를 진행하면 자동으로 만들어지는 폴더나 파일이 있는데 이러한 폴더나 파일들은 자동으로 생성하거나 혹은 어떤 명령을 통해서 언제든지 다시 만들 수 있기 떄문에 github 저장소에 따로 업로드를 할 필요가 없다. 1️⃣ .gitignore 파일 생성 2️⃣ 버전 관리에서 무시할 폴더나 파일 명시 3️⃣ 버전 관리를 시작하면 .gitignore에..

프로젝트 복제 (Clone) 1️⃣ 저장소의 주소를 복사한다. 2️⃣ 프로젝트 복제 터미널에서 프로젝트를 세팅할 경로에 이동한 뒤 명령어를 입력한다. git clone https://github.com/kimAeris/starbucks-vanilla-app.git 해당하는 주소의 저장소 자체를 복사해서 현재 경로에 새롭게 생성을 한다. 다른 작업환경에서 브랜치를 복제해오기 위와 같은 방법으로 clone을 진행하면 주소를 복사한 'main' 브랜치만 복제가 된다. 'purple' 이라는 브랜치도 존재한다고 했을 때, 이 브랜치도 복제해오기 위해서는 ## 브랜치 상세 확인 git branch -r ## purple 브랜치 가져오기 git checkout -t origin/purple 가져온 브랜치 제거하기 ..

Branch 하나의 프로젝트를 관리해서 실제로 배포하고 사용자들이 쓸 수 있게 할 때 A는 로그인 , B는 사용자 관리, C는 커피 관련 화면 처럼 여러 팀원들이 나눠서 개발을 할 수도 있다. 각 브랜치에서 기능 개발 후, 문제가 없다고 판단되면 마스터의 브랜치로 합쳐준다. 이 때, 합치는 개념은 Merge 👉 Branch 라는 개념을 도입해서 마스터라는 이름의 줄기를 제외하고 다른 이름의 브랜치로 가지를 만들어서 별도의 개발을 하고 나중에 합칠 수 있는 구조를 만들어 프로젝트를 관리해줘야 한다. 브랜치 생성하기 1️⃣ 브랜치 목록 확인 git branch ## 원격 저장소에 있는 브랜치 확인 가능 git branch -a 2️⃣ 'signin' 브랜치를 생성한다. git branch signin 3️⃣..

GitHub 📌 Git 설치 , Local 환경 설정 1️⃣ 개행 문자(Newline) 설정 ## macOS git config --global core.autocrif input ## Windows git config --global core.autocrif true 2️⃣ 사용자 정보를 입력한다. 커밋(버전 생성)을 위한 정보 등록 git config --global user.name 'KimAeris' git config --global user.email '--@naver.com' macOS : input / windows : true 사용자 이름은 되도록 github와 맞춰준다 (필수X) 이메일은 github와 동일하게 한다. 3️⃣ git 구성을 확인한다. git config --global ..

lodash.js 📌 _.throttle(함수,시간) 실행되는 함수의 수를 계산해준다. 프로젝트가 무거워지면 화면을 스크롤할 때 함수를 많이 실행하는게 부담스러울 수 있다. 0.3초 단위로 부하를 줘서 함수가 우르르 실행되는 것을 방지하는 용도로 사용 ex) 화면이 스크롤 될 때 실행되는 함수의 개수를 일정 시간에 한 번씩만 실행되도록 제한을 걸었다. window.addEventListener('scroll', _.throttle( function () { console.log('scroll') }, 300)); gsap cdn 자바스크립트 애니메이션 라이브러리 📌 gsap.to(요소, 지속시간, 옵션) 요소와 애니메이션 지속시간, 어떤 애니메이션을 적용할건지에 대한 여러가지 옵션을 명시할 수 있다. 요..

favicon 설정 기본적으로 root 경로에 있는 'favicon.ico' 를 가져와서 사용하지만, link 태그를 통해 원하는 이미지로 변경할 수 있다. .ico파일 제작 https://iconifier.net/ 오픈 그래프( The Open Graph protocol ) 웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보를 지정합니다. og:type: 페이지의 유형(E.g, website, video.movie) og:site_name: 속한 사이트의 이름 og:title: 페이지의 이름(제목) og:description: 페이지의 간단한 설명 og:image: 페이지의 대표 이미지 주소(URL) og:url: 페이지 주소(URL) 트위터 카드 ( Twitter Cards )..