본문 바로가기

전체 글51

수린이 되기 위해 준비하기 취미부자로 거듭나기 위한!! 살이 너무 쪄서 무릎이 너무 아프다. 재밌게 운동하고 싶다. 이런생각들을하던 찰나에 지인의 수영 추천으로 인해 귀가 팔랑팔랑 !! 아니 근데!! 구민센터는 원래 이렇게 박터지나요???! 너무해 ㅠㅠ 기초반 등록도 못했다.... 다 마감마감마감... 그래서 회사 근처로 15만원이나 내고 주3회 수영을 등록했다. 같은 팀 아조씨가 화목을 다닌다길래 그거 피해서 월수금으로다가! 수린이가 되기도 전에 장비빨 무시 못해지~~~~~~~~~~~~~~ 일단 내가 산거 나열 좀 해볼게여 캬캬캬캬 참나 살게 왜이렇게 많아요?! 수영장 가기도 전에 이미 내 마음 포세이돈 ~~~~~~~~~ 2022. 7. 26.
자바스크립트 (기초편) 자바스크립트 쌩기초를 벗어난 당신 대단해. 👏👏👏👏👏 자바스크립트를 알기 전에 알아야 할 몇가지가 있다. 기초 지식 👇👇👇 프로세스 (Process) 사용자가 작성한 프로그램이 메모리 공간을 할당 받아 실행 중인 프로그램 단위를 뜻한다. 프로세스는 프로그램에서 사용되는 데이터, 메모리 등의 자원 + 스레드로 구성 된다. 스레드 (Thread) 스레드란 실제로 작업을 수행하는 주체를 뜻한다. 모든 프로세스에는 한 개 이상의 스레드가 존재하며 수행한다. 한개의 스레드는 싱글 스레드, 두개 이상의 스레드를 가지는 프로세스를 멀티 스레드 프로세스라고 칭한다. 동기, 비동기 동기란 ‘동시에 일어나는’ / 비동기란 ‘동시에 일어나지 않는' 을 뜻한다. 동기적이란 뜻은 쉽게 표한하자면 이렇다. 나는 A사이트에 들어간.. 2022. 4. 29.
자바스크립트 (쌩기초편🤷🏻‍♀️) 바닐라 자바스크립트 성능 (속도) 비교 자바스크립트란 무엇일까? 이 페이지는 이것에 대한 간단한 소개이다. 초심자 중에도 초초초초초초심자 문서이기 때문에 가볍게 넘어갈 수 있다. 대체 자바스크립트란 무엇인가? 그리고 바닐라JS란 무엇인가? 제이쿼리는 무엇이지? 정말 아무것도 모르는 사람들은 이렇게 궁금해 할 것 이다. 자바스크립트 그것이 궁금해! 자바스크립트는 웹 브라우저에서 주로 사용되는 객체 기반의 스크립트 언어이다. (오잉 함수기반 아닌가?) JAVASCRIPT ? JAVA ? 그거 같은거 아냐? 간단히 말하자면 같은거 아니다. 자바스크립트 왜 만들었나? 자바스크립트의 등장 계기는 다음과 같다. 옛날 옛적에.. 네스케이프사에서 만든 ‘네비게이터’라는 웹 브라우저가 시장을 지배했던 때가 있다. 이때 .. 2022. 4. 29.
기본 타입 정리 오랜만에 다시 정리 포스팅 시작! 이란 말은 공부를 다시 시작했다는 뜻입니다. 요즘 프론트엔드 기술에 기본으로 많이 보이는 타입스크립트를 느즈막히 시작해봅니다. 나란 인간은 기본 정의부터 보고 시작하는 타입이라 기본 타입부터 정리해봅니다. Boolean (true/false) let name: boolean = true; String let name1: string = 'I am Jeon'; let name2: string = `Jeon`; let name3: string = `I am ${ name2 }`; Number let name: Number = 333; Array 방법1. 배열 요소 타입 뒤에 []를 쓰는 것 let array1: number[] = [1, 2, 3]; 방법2. 제네릭 배열 타.. 2022. 2. 14.
데이터 전달 방식 Vue.js에서 기본으로 제공하는 데이터 전달 방식으로 두개를 꼽아 생각할 수 있다. 하나는 부모에서 자식으로 전달하는 방식인 Props와 자식에서 부모로 전달하는 Emit이다. 이 문서는 이를 정리하는 문서이다. Props (부모에서 자식) props 속성을 통해 부모 컴포넌트가 가진 데이터를 자식 컴포넌트로 전달해준다. 코드 /* 부모 컴포넌트 */ var parentComponent = { template: '#parentComponent', data: function() { return { age: '30', name: 'Jeon' } } } /* 자식 컴포넌트 */ 내 이름은 {{ name }} 이다. 내 나이는 {{ age }}이다. var childComponent = { template: .. 2021. 9. 8.
SPA(single page application)의 GA 적용기 (google analytics) Vue.js 를 통해서 SPA의 형태로 만든 사이트에 GTM(google tag manager)을 설치해달라는 요청이 들어왔다. 스크립트 코드가 메일로 전달 됐기 때문에 아무 생각없이 /public/index.html 에 추가하면 될거라 생각했던건 경기도 오산시였다. 처음엔 위에 방법으로 추가한 후에 배포를 했다. 그러나 GA가 활성화가 안된다는 연락이 온 것이다. 그래서 찾아보니 Vue.js에서는 vue-gtag 를 쓰는것을 확인했다. [공식] Get started vue-gtag documentation page matteo-gabriele.gitbook.io 설치 방법 npm install --save vue-gtag // 공식click // main.js import VueGtag from 'vu.. 2021. 7. 29.
Vue에서 상태관리란? Vuex로 정리하기 공식 : https://vuex.vuejs.org/kr/ 이번엔 Vue에서 상태관리를 어떻게 할 것인가에 대해 정리해본다. 공부의 순서는 이러했다. 내가 봤을때 vue를 처음부터 끝까지 작은 프로젝트를 해보면서.. 삽질도 해보면서.. 정리가 잡힌거같다. 만약 뷰를 처음 공부하는 사람이 있다면 나는 이 순서대로 공부해보라고 말해주고 싶다. 꼬리물기처럼 하다보면 필요한 기능들이 보이고 그게 결국 도달하는 점을 말해주는 것 같다. vue-cli를 통해 프로젝트 생성 후, 처음 한 페이지의 기본적인 레이아웃을 짰다. 그러다보니 Vue에서 페이지 이동시 각 페이지에 맞게 불러오는 기능이 필요해졌다. 그게 vue-router 이다. 뷰-라우터 설치 후, 아무래도 SPA로 만들어진 사이트에서 SEO가 필요할 것으로 .. 2021. 7. 27.
README.md 입력시 트리구조 만들기 프로젝트가 하나 끝나고, README.md를 작성하는데 있어서 프로젝트 구조를 넣고 싶을때의 방법을 기입해본다. 이걸 하나하나 다 쳐서 써야하나.. 고민을 하던 찰나에 찾아보니 역시 그것은 무식한 방법이였다. 일단 cmd 창을 켜서 해당 프로젝트 root 위치로 이동한다. tree > 파일명.txt 해당 위치에서 위의 명령어를 치면, 아주 빠르게! root 디렉토리에 원하는 파일명의 텍스트 파일이 생성된다. 이를 열어보면 프로젝트의 디렉토리 구조가 촤르르르르! 이를 정리할건 정리해서 README.md 파일에 복붙을 해주면 아주 간편하게 끝! 아주 증말! 바보였어! *좋아요는 아주 큰 힘이 됩니다! 2021. 7. 26.
해시태그 컴포넌트 만들기 (Hashtags component) 나중에 쓸지도 몰라서 해시태그를 추가하는 컴포넌트를 만들었다. 기본적인 기능은 네이버 블로그의 해시태그 기능을 보며 참고했다. 아래는 내가 만든 해시태그 첫 진입시 UI 이걸 클릭하게되면.. 이런식으로 focus가 input에 들어가게된다. enter나 space를 누를때마다 태그가 추가되고, 특수문자나 중복은 안된다. 위의 이미지처럼 중복태그나, 특수문자 입력 후 태그 추가시(enter, space) 경고창이 뜬다. 아래는 만든 해시태그를 불러올 부모 컴포넌트이다. // 부모 컴포넌트 바인딩된 placeholder로 기본 설명을 넣을 수 있다. 기본값이 들어가 있으니 굳이 쓰고 싶지 않다면 제외해도 된다. // 부모 js import Hashtags from '@/components/Hashtags';.. 2021. 7. 23.

티스토리툴바