profile
하루하루는 성실하게 인생 전체는 되는대로✏️
post-thumbnail

[firebase] TodoList 구현하기

원래는 로그인으로 끝나는 사이드 프로젝트 였지만 기능을 더 사용해보면 좋을 것 같아서 구현해봤다. 1편은 여기를 참고하면 된다. 우선 cloud firestore에 데이터를 보낼 준비를 해야한다. 그런 다음 js에 다음을 추가해준다. 클릭이벤트가 필요하니 버튼에 이벤트를 걸고 이런식으로 추가해주자! 자세한 설명은 공식문서를 보면 나와있다. 이렇게 모...

2022년 3월 23일
·
0개의 댓글

컴포넌트와 객체지향적인 사고

객체지향 어디서 많이 들어본 말이다. 단순히 Object의 개념을 벗어나서 객체가 뭔지 왜 지향해야 하는지 그리고 이런 사고들이 어디서부터 오게된건지 정리해보고자 한다. 절차지향으로부터 벗어나기 절차지향의 정의는 다음과 같다. 위부터 아래 순서대로 진행되는 형태 재사용이 가능하나 기존에 썼던 코드를 복붙하는 방식 마치 setTimeOut이 없는 자바스크...

2022년 3월 20일
·
0개의 댓글
post-thumbnail

axios 사용 및 통신 해보기

우선 vue 파일에 axios를 설치해준다. >npm i axios package.json에 다음과 같이 설치된 것을 확인할 수 있다. 여기까지가 설치 및 사용준비 끝~ 이제 데이터를 생성하고 가져오기를 해보자! 우선 우리는 api를 따로 제공받을 수 없기 때문에 폴더 내에 예시 데이터 user.json을 생성해준다. 이제 이것을 깃허브에 올리면 가...

2022년 3월 13일
·
0개의 댓글

함수와 변수 네이밍 짓기

동사+명사 ex) addList vs listAdd //addList가 더 자연스럽다. get/set ex) getName(), setName() 데이터를 가지고 오거나 설정할 때 사용한다. init ex) initUserList() userList의 데이터를 초기화 시킬 때 사용한다. is/has/can 모두 boolean 값을 리턴하는 네이밍이...

2022년 3월 13일
·
0개의 댓글

var, const, let 이해하기

Scope란 무엇일까? scope는 유효범위를 뜻한다. 변수의 생존기간을 제어하며 종류는 block scope와 function scope가 있다. 자바스크립트는 block scope가 없고 function scope가 있다. (때문에 모든 변수를 맨 처음에 선언하는 것이 암묵적 룰이 되었다.) var (function-scoped) 1. 재할당, 재정...

2022년 3월 12일
·
0개의 댓글
post-thumbnail

[firebase] 로그인 구현하기

구성 UI > 이번에는 기능 구현이 더 중요하다고 생각해 따로 디자인을 하지 않고 vuetify를 사용해 적당한 ui를 만들었다. 기간 > : 2022.03.06 ~ 2022.03.09 구현한 기능 > 깃허브 소스 보기 회원가입 구글 및 이메일 로그인 구현 스토리 우선 fireba

2022년 3월 9일
·
0개의 댓글

동기 / 비동기 개념 이해

동기(Synchronous : 동시에 일어나는) 동기는 요철한 결과를 시간이 얼마나 걸리던지 그 자리에서 진행하는 것이다. ex) 놀이동산의 대기줄. 놀이기구를 타기 위해 한번 줄 서면 탈 때까지 순차적으로 기다려야 한다. / 카페에서 음료를 주문할 때 여러명이 기다려도 한명만 주문 받고 음료를 만들어 주고 다시 한명만 주문받고 음료를 만드는 방식 co...

2022년 3월 1일
·
0개의 댓글
post-thumbnail

Vue LifeCycle에 대해 알아보자

면접 때 LifeCycle에 대해 자세히 몰라서 당황했던 적이 있다. 한번 제대로 정리해서 머릿 속에 익혀보자! 라이프 사이클이 뭔데? 컴포넌트의 생명 주기 vue의 컴포넌트는 크게 생성(create) -> Dom에 부착(mount) -> 업데이트(update) -> 사라짐(destroy) 과정을 가진다. 이미지 출처 보러가기 1. Create 라이프...

2022년 2월 23일
·
0개의 댓글

호스팅은 무엇일까요?

호스팅(hosting) 호스팅이란 외부 서버의 기능을 빌려서 사용하는 것을 뜻한다. 📌서버를 왜 빌릴까? 만약 개인이 호스팅을 사용하지 않는다면 자신의 컴퓨터로 공간을 마련하고 24시간 내내 가동하며 많은 사람들의 방문을 감당하기가 힘들것이다. 호스팅의 종류 >1. 웹 호스팅 서버 호스팅 클라우드 호스팅 웹 호스팅 하나의 서버를 여러 사람이 함께 사...

2022년 2월 10일
·
0개의 댓글

DNS, 그리고 동작 방식

DNS란? 도메인 네임 시스템(Domain Name System, DNS)은 호스트의 도메인 이름을 호스트의 네트워크 주소로 바꾸거나 그 반대의 변환을 수행할 수 있도록 하기 위해 개발되었다. -위키백과 즉 사용자가 알아보기 쉬운 도메인 이름 (예를 들어 www.naver.com와 같은 주소)을 머신의 IP주소(예를 들어 195.0.1.22)로 이어주는 시...

2022년 2월 8일
·
0개의 댓글

CSS Variable 적용하기

사용자 지정 CSS 속성이란? 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자가 정의하는 개체로, 문서 전반적으로 재사용할 임의의 값을 담습니다. - MDN Web Docs 즉, CSS에도 변수를 선언할 수 있다라는 점입니다. *IE에서는 지원이 안된다. 변수를 선언해 보자 -- 뒤에 사용하고 싶은 변수명을 적어준다. 보통은 kebab-cas...

2022년 2월 4일
·
0개의 댓글
post-thumbnail

도메인 지식 쌓기

IP 아이피는 각 기기(컴퓨터, 핸드폰 등) 마다 제공되는 숫자로 이루어진 주소이다. ex) naver.com => 220.95.233.172 도메인 네임 도메인 네임(Domain name, 문화어: 령역이름)은 넓은 의미로는 네트워크상에서 컴퓨터를 식별하는 호스트명을 가리키며, 좁은 의미에서는 도메인 레지스트리에게서 등록된 이름을 의미한다. 이를 통틀...

2022년 2월 1일
·
0개의 댓글

프론트엔드 면접 질문 답변

프론트엔드로 전향하려고 공부를 하던 도중 우연히 좋은 기술 면접 글을 보게되어 작성하게 되었습니다. 💡원본 링크는 다음을 참고해주세요 https://github.com/junh0328/preparefrontendinterview/ 문제가 될 시 삭제하겠습니다. Computer Science 프로세스와 스레드 프로세스가 뭔가요? > 프로그램을 정적인 ...

2022년 1월 21일
·
0개의 댓글
post-thumbnail

[독서] 비전공자를 위한 이해할 수 있는 IT지식

항상 궁금했던 점이 있다. html, css, jquery를 할 줄 아는 사람이 퍼블리셔고 그럼 프론트엔드는 뭐지? 모호했던 경계 속에 나의 위치는 무엇인가 생각하며 일단 닥치는 대로 공부했다. 하지만 구글로 공부하는 것도 한계가 있고 너무 방대한 자료 속에 허우적 거리고 있을 때 쯤 이 책을 발견했고 앞으로 내가 무엇을 공부해야 하는지 생각하게 되었다. ...

2021년 12월 29일
·
0개의 댓글
post-thumbnail

html5 시맨틱 태그 기초다지기

🤷‍♂️ 시맨틱 태그를 사용하는 이유? SEO(Search Engine Optimization) - 검색엔진최적화 검색엔진이 웹페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여, 검색 결과의 상위에 나올 수 있게하는 행위를 말한다. 의미부여를 통한 코드의 가독성 및 유지보수가 쉬워짐 사실 필자가 시맨틱이 필요하다고 느낀 최대 이유이다....

2021년 11월 30일
·
0개의 댓글
post-thumbnail

Git 사용법

✍ use - init & push > git init git add . git commit -m "message" git config user.name "Username" git config user.email "Email address" git remote add origin "github.com/your-repo.git" git push -u or...

2021년 11월 7일
·
0개의 댓글
post-thumbnail

Vue Chart.js 정리

📁 version > chart.js ^2.9.3 vue-chartjs ^3.5.1 chartjs-plugin-annotation ^0.5.7 ✍ Draw 💡 plugins 📈 data datasets 🔨 options 1. scales 2. tooltips 3. annotation 4. layout 5. event 마우스 호버 ...

2021년 11월 3일
·
0개의 댓글
post-thumbnail

vuex store 알아보기

✍ Vuex 개념 >상태 관리를 위한 패턴이자 라이브러리이고, 중앙 집중식 저장소 역할을 담당 상태관리란? 여러 컴포넌트 간에 데이터 전달과 이벤트 통신을 한곳에서 관리하는 패턴 중앙 집중식 저장소 역할 데이터를 store라는 파일을 통해 관리하고 프로젝트 전체에 걸쳐 활용할 수 있게 해주는 방법 vuex를 사용하는 프로젝트는 프로젝트 전체에서 사용되는...

2021년 10월 14일
·
0개의 댓글
post-thumbnail

[Vue] v-on 디렉티브 정리

✍v-on 정의 >화면요소의 이벤트를 감지하여 처리할 때 사용한다. 예를 들어 v-on:click은 해당 태그의 클릭 이벤트를 감지하여 특정 메서드를 실행할 수 있다. 마우스 이벤트 |이벤트명|설명 |---|--- |click|마우스를 클릭했을 때 실행함 |dblclick|마우스를 더블 클릭했을 때 실행함 |mouseover| 마우스의 포인트가 요소 위...

2021년 10월 14일
·
0개의 댓글
post-thumbnail

TODO LIST

개요 todo list를 제작한 지는 몇개월이 지났지만 그때를 회상하면서 기록을 남기려고 한다. vue를 혼자 독학하며 정말 필요하다고 느낀 기능은 다음과 같다. > 데이터 배열의 생성 및 푸쉬 컴포넌트간의 단반향 & 양방향 바인딩 데이터 배열 삭제 todo list는 이 기능을 모두 만들어볼 수 있는 좋은 예제였다. 사용기술 📌 UI Desig...

2021년 10월 13일
·
0개의 댓글