코드존 코드존

var, let, const 변수란 ? 호이스팅이란 ? 📌 var 변수 - ES6(ECMAScript6) 등장 이전 주로 사용하던 변수 - 호이스팅(Hoisting)에 의한 Javascript 이해 난이도 상승 📌 호이스팅(Hoisting) - " 변수의 선언을 스코프(범위) 최상단으로 옮기는 행위 " - 코드의 실행을 호이스팅 단계 -> 실행 단계 로 구분 // 호이스팅 단계 1. JS 코드를 파싱(구문 분석) 2. var 키워드로 선언된 변수의 메모리 할당(변수 미리 선언) 3. Javascript 에서는 변수만 선언되면 undefined로 초기화 // 실행 단계 1. 호이스팅 단계에서 메모리가 할당되면 코드 실행 // 예제 console.log(A1); var A1 = "hello"; -> 결과 :..

VUE3 와 Typescript를 사용하여 토이 프로젝트 만들기 회사에서 2년 넘게 Vue2와 Javascript로 개발하다가 자기 개발 겸.. 공부 겸.. Vue3와 Typescript로 해보려고 하니 Vue3에 추가된 기능도 많아보이고.. Typescript는 또 나름대로 낯설고 하니.. 블로그에 정리를 해봐야 겟다..! 1. npm을 사용하여 Vue3 + Typescript 세팅하기 // cmd 창 P:\> npm init vue@latest 2. 원하는 옵션 선택 Project name - 폴더 이름 Package name - 프로젝트 생성 후 package.json 파일에서 name 3. 그 이후는 그냥 하라는 대로 진행 끗-!

$router.push() 를 사용하여 페이지를 이동, params 데이터를 함께 전달하자! 특정 버튼 클릭 시, 특정 페이지로 이동하는 로직을 적용하는 도중, 해당 페이지에 탭이 생겨버렸고... 1번 버튼 클릭 -> A 페이지 A-1 탭으로 이동 2번 버튼 클릭 -> A 페이지 A-2 탭으로 이동 을 적용하기 위해, 현재 적용한 로직 $router.push에 params로 type값(A-1, A-2)을 넣어주기로 했다. switch (key) { case '1번': { this.$router.push({ path: '/page/A', params: { type: 'A' } }) break; } case '2번': { this.$router.push({ path: '/page/A', params: { t..

Javascript의 Class를 알아보자. Javascript에서 Class는 잘 안쓰이긴 하지만, Typescript를 공부하다보니 자연스럽게 Javascript의 Class에 대해서 찾아보게 되었다. Class란? 객체(Object) 생성을 위한 템플릿. 다양한 개별 인스턴스를 생성. Typescript의 인터페이스나 타입 별칭(alias)과 다른 개념. Constructor (생성자) 인스턴스로 생성된 객체를 초기화 하기 위한 특수 함수. new로 생성한 인스턴스에 파라미터로 넣어준 값들을 초기화 하며 저장. class TempClass { constructor () { ... } } class TempClass { constructor (first, last) { this.first = firs..

새로 생성한 react 프로젝트를 그대로 git에 올려보자 1. create-react-app을 사용하여 손쉽게 react 프로젝트를 생성할 수 있다. npx create-react-app을 하면 자동 git init이 실행되어 .git 폴더가 생성된다. .git 폴더는 안보일 수 있음! 폴더 -> 보기 -> 숨긴 항목 체크 되어있는지 확인~ npx create-react-app first-react-app 2. 깃 저장소를 생성한다. git init이 자동으로 되어있기 때문에, Add a README file은 선택하지 않았고 Add .gitignore도 none으로 진행했다. 만약 git init이 안되어 있다면 둘다 체크해주자! 3. main 브랜치를 생성해주자 -M main : main 브랜치 생..

원격 저장소로 Push하기 전, 로컬 저장소의 마지막 커밋을 수정해보자! 프로젝트를 진행하면 생각보다 방금 커밋한 내용에 추가 내용을 덧붙이고 싶을 때가 있는데, 1) 커밋 메시지 변경 2) 같은 task를 처리하는 다른 파일 3) 수정된 코드 등등.. 그럴때 사용하면 좋은 명령어이다 참고한 블로그는, https://seosh817.tistory.com/291 [Git] git commit --amend로 마지막 커밋 수정하기 기능을 만들고 커밋을 했는데 방금 올린 커밋 내용을 들여다보니 무언가 내용이 빠져있거나 잘못 올린 경우가 있습니다. 그럴 경우에 가장 간단한 방법인 git commit --amend 로 커밋을 수정해주면 seosh817.tistory.com 여기서 추가로, 커밋 메시지는 유지하고 ..

이미 원격 저장소에 push한 커밋을 취소하기 위한 대장정 프로젝트를 진행하다가 develop 브랜치에서 작업하던 커밋들을 main 브랜치로 커밋 메시지를 변경하여 push 하는 과정에서 엉망진창 와장창 난리가 나버렸다. 그래서 일단 결론은 모든 push 내용들을 reset 하고 다시 올려야 하는 상황에 놓여졌는데.... 참고한 블로그는, https://jupiny.com/2019/03/19/revert-commits-in-remote-repository/ 원격 저장소에 올라간 커밋 되돌리기 Git으로 버젼 관리를 하며 개발하다보면, 작성한 커밋들을 되돌려서 다시 이전 상태로 원상복구하고 싶은 경우가 한번쯤 있을 것이다. 만약 로컬까지만 저장된 커밋인 경우는 $ git reset 명령어를 jupiny.c..

Step 1. Settings Install Typescript FOLDER > npm install typescript --save-dev tsconfig.json 파일 생성 FOLDER > npx tsc --init 폴더 생성 (src, dist) FOLDER > mkdir src dist tsconfig.json 설정 변경 { "compilerOptions": { ... "outDir": "./dist", ... }, "include": ["src"] } Watch 모드 설정 FOLDER > npx tsc --watch Step 2. DOM tsconfig.json의 lib에서 "DOM"을 적용하거나, 주석 처리 Default인 경우 DOM 사용 가능 Javascript와 같은 방식으로 DOM 사용..