초보 개발자

this가 쓰이는 곳에서 다르게 인식 되는 경우가 있었다. 그런 애매한 부분이 있기에 이번에 포스팅을 함으로써 정리해보려고 한다!! https://youtu.be/GteV4zfqPIk this는 무엇인가? JS에서 this는 객체를 가리키는 키워드라고한다. 즉 this는 객체이다. 객체는 객체인데... this는 좀 특별하다. 대부분의 경우에 this는 함수를 호출한 방법에 의해 결정된다. 강의에선 this는 호출한 놈이라고 하였다. 호출한 놈이 없을 경우에는 기본적으로 window객체를 의미한다고 한다. let person = { fullname : 'taehyeki', age : 20, printThis : funtion() { console.log(this); console.log(this === ..

test.js라는 파일을 index.html에서 사용하려고한다. index.html에서 test.js를 가져와보자! 아래의 이미지들은 index.html, test.js, error콘솔을 나타내고 있다. test.js에서는 DOM을 사용하여 해당 버튼을 클릭하면 alert창이 나오도록 설계하였다. 그리고 error콘솔은 의도대로 되지 않고 에러가 발생한 모습이다. null에서 addEventListener라는 프로퍼티를 찾을 수 없다고한다. 나는 분명 testBtn을 설정해주었는데 말이다. 그럼 testBtn이라는 것을 console에 찍어 보도록 하자. 역시 null이라고 나온다. 이상하다. 나는 분명 testBtn을 정의해주었고 html에서도 분명히 존재하는데 말이다. 이렇게 에러가나는 이유는 시점의..

JavaScript를 접하면서 DOM이란 용어를 많이 접해보았을 것이다. 단순히 브라우저의 HTML요소에 접근할 수 있는 것이라고만 알고 있었는데 오늘 한번 정의를 해보려고 한다. DOM이란 ? 🚕 JS는 웹문서를 제어하기 위해 개발된 언어이다. document.querySeletor('h1').textContent = '제목' 위와 같이 컨텐츠 내용을 변경한다던지 HTML요소를 추가하거나 제거하는 등 JS는 HTML문서를 조작하기 위해 만들어진 언어이다. HTML파일을 JS로 어떻게 제어를 할 수 있을까?? 각 브라우저 ( 크롬, 엣지 등 )들은 웹문서를 해석할 수 있는 렌더링 엔진이 존재한다. 브라우저로 HTML파일을 열게되면 이 렌더링 엔진이 HTML로 작성된 문서를 위에서 부터 차례대로 하나씩 읽..

taehyeki/chatting: 카톡같은 채팅만들기 ! (github.com) GitHub - taehyeki/chatting: 카톡같은 채팅만들기 ! 카톡같은 채팅만들기 ! . Contribute to taehyeki/chatting development by creating an account on GitHub. github.com 상대방이 로그인 한 경우 알림 표시 🟢 상대방이 채팅을 쳤을 때 실시간 업데이트 채팅방에 들어갔을 때 상대방에게 안읽음 표시 사라지게 하기 실시간 채팅하기 채팅 삭제하기 ( 채팅방 ) 채팅 삭제하기 ( 채팅방 목록 ) 사진 올리기

로그인 🔰 올바른 아이디와 비밀번호를 입력하였을 시, 제대로 로그인이 되는 기능을 만들어보자. 화면은 아래와 같다. 간단히 인풋 2개 버튼 하나로 이루어져있다. data에 adminId와 adminPw를 만들어두고, 인풋과 v-model로 바인딩을 시켜준 뒤에 로그인 버튼을 누르면 adminId와 adminPw가 vuex에서 actions에 설정해놓은 login 함수가 실행이 될 것이다 ! ...mapActions는 여러 모듈로 나뉘어 져 있는 vuex에 있는 함수들을 쉽게 사용할 수 있도록 해주는 역할을 한다. 이 외에도 mapState, mapGetters, mapMutaion이 있다. Api와 그에 물려있는 기능들은 아래의 접은 글을 확인해보자! authApi, myAxios, interceptor..

문제점 : 안드로이드 스튜디오를 설치할 때 위의 노란 박스에 your sdk location contains non-ascii character 이라고 나오면서 Next버튼이 눌리지 않는 것을 확인할 수 있을 것이다. 해결 방법 : 경로에 한글이 포함되어 있다면 저런 오류가 발생할 수 있다고 한다. 따라서 경로에 한글을 지워주니 Next버튼이활성화 되어 해결할 수 있었다.

상대방이 현재 들어와있는지 확인 어떻게 하면 상대방이 현재 들어와있는지 확인할 수 있을까..?라는 생각이 들었다. 소켓아이디는 쉽게 바뀔 수 있기 때문에 소켓아이디를 사용하면 힘들어질 것 같았다. 따라서 유저를 식별할 수 있는 유니크한 방을 하나 만들고 로그인하면 그 소켓 방으로 입장을 시킨다. 그 이후에 어떤 유저가 채팅방 목록에 들어갔을 때 소켓 방에 현재 사람이 존재하는지 유무를 체크하고 방에 있다면 로그인 했다는 것이므로 표시를 해주고, 존재하지 않다면 아무것도 안해주는 방식을 떠올렸다. 먼저 상대가 로그인을 하면 소켓 방에 입장해주는 코드이다. vuex에서 userId를 가져와서 만약 userId가 1이라면 1-2번방으로 입장을 시킨다. 1-1이 아닌 이유는 나는 1-1에는 다른 목적으로 사용하..

Vue 에서 $(dollar)의 의미 1. vue에서 전역 객체 속성이다. private하게 사용하는게 아닌 public하게 사용하는 속성 ex) this.$emit, this.$router.push({}) ..... 등등