일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- api 비동기처리
- 딥다이브
- Deep Dive
- 스프링부트
- 프론트엔드 과제
- bucket4j
- 유효시간 설정 url
- AWS
- concurrency limit
- oauth
- 프리코스
- 파일 url
- NestJS
- 프론트엔드
- TypeORM
- 음악 url 파일 다운로드
- 프로그래머스
- this
- redis
- 우아한 테크코스
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- 타입스크립트
- 검색
- 자바스크립트
- 우아한테크코스
- 모던 자바스크립트
- invalid_grant
- compateto
- Dev-Matching
- api 요청 수 제한
- Today
- Total
목록전체 글 (174)
개발 알다가도 모르겠네요
JSON은 JavaScript Object Notation의 약자로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다. JSON 표현할 때의 주의점 (1) JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 합니다. (2) JSON에서는 값이 문자열인 경우 큰따옴표(")를 사용해야 합니다. (3)자바스크립트에서는 프로퍼티의 값으로 사용할 수 있..
1. 이벤트 핸들러 등록하기 HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록할 수 있습니다. 2. 이벤트 핸들러 삭제하기 addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다면, Element.removeEventListner('type', 'handler')를 통해서 이벤트 핸들러를 삭제할 수 있습니다. 3. 이벤트 객체 (Event Object) 이벤트가 발생하면 이벤트 핸들러의 첫 번째 파라미터에는 자동으로 이벤트 객체가 전달됩니다. 이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고 있습..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/o1gZS/btq8R050SaH/51JNUIJhHA6m6gt0IkLopK/img.png)
마우스 이벤트를 다룰 때 자주 사용되는 이벤트 객체의 프로퍼티 clientXY, pageXY, offsetXY 1. clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역을 뜻합니다. clientX : 브라우저가 표시하는 화면 내에서 마우스의 X좌표 위치를 담고 있습니다. clientY : 브라우저가 표시하는 화면 내에서 마우스의 Y좌표 위치를 담고 있습니다. client 값은 그 순간 보여지는 화면을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다. 2. offsetX, off..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MikCi/btq8RsIJvhA/L7JEdxyYFSMKhR9jKVh0j1/img.png)
window 객체 window 객체는 브라우저 창을 대변하면서 자바스크립트에서 최상단에 존재하는 객체입니다. 자바스크립트 코드 어느 곳에서나 항상 접근할 수 있는 객체이기 때문에 전역 객체, 영어로는 Global Object라고 부릅니다. 어떤 프로퍼티나 메소드를 사용하든 결국 전역 객체 내부의 것이기 때문에 앞에 window.을 생략할 수도 있습니다. DOM DOM이란 Document Object Model의 약자로, 한국어로는 문서 객체 모델입니다. 웹 페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것으로 생각하면 됩니다. 이때 각 객체를 노드(Node)라는 용어로 표현하고, 태그는 요소 노드, 문자는 텍스트 노드로 구분됩니다. DOM 트리 HTML의 계층 구조는 DOM에서도 반영되는데 이러한..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bJWlfz/btq8UOcxWm7/QupnWJ9TaynyGZHFunbMO0/img.png)
1. element.innerHTML 요소 노드 내부의 HTML 코드를 문자열로 리턴해 줍니다. (내부에 있는 줄 바꿈이나 들여쓰기 모두 포함합니다.) const myTag = document.querySelector('#list-1'); // innerHTML console.log(myTag.innerHTML); 요소 안의 정보를 확인할 수도 있지만, 내부의 HTML 자체를 수정할 때 좀 더 자주 활용됩니다. (내부에 있던 값을 완전히 새로운 값으로 교체하기 때문에 주의해서 사용해야해요!) const myTag = document.querySelector('#list-1'); // innerHTML console.log(myTag.innerHTML); myTag.innerHTML = 'Exotic'; ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dMyLUr/btq8Pu1j6z5/JYxzllXziCFNeyZ1MlLqJK/img.png)
대부분의 브라우저에 있는 개발자 도구는 console.log와 console.dir메소드를 지원합니다. 두 메소드 모두 파라미터로 전달받은 값을 콘솔에 출력하는 역할을 합니다. 과연 이 둘은 어떤 차이가 있을까요? const str = 'Codeit'; const num = 123; const bool = true; const arr = [1, 2, 3]; const obj = { name: 'Codeit', email: 'codeit@codeit.kr', }; function func() { console.log('I love Codeit!'); } console.log('--- str ---'); console.log(str); console.dir(str); console.log('--- num -..
1. 자바스크립트로 태그 선택 document.getElementById('id') HTML id속성으로 태그 선택하기 id에 해당하는 태그 하나 document.getElementsByClassName('class') HTML class속성으로 태그 선택하기 class에 해당하는 태그 모음(HTMLCollection) document.getElementsByTagName('tag') HTML 태그 이름으로 태그 선택하기 tag에 해당하는 태그 모음(HTMLCollection) document.querySelector('css') css 선택자로 태그 선택하기 css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 document.querySelectorAll('css') css 선택자로 태그 선택하기..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/1GzhT/btq8KR8gS2x/XqfpVvByERVtCDsY0Mzkxk/img.png)
Git은 내부적으로 크게 3가지 종류의 작업 영역을 두고 동작합니다. 각 작업 영역의 이름은 working directory staging area repository 첫 번째 작업 영역인 working directory는 작업을 하는 프로젝트 디렉토리를 말합니다. 두 번째 작업 영역인 staging area는 git add를 한 파일들이 존재하는 영역입니다. 커밋을 하게되면 staging area에 있는 파일들만 커밋에 반영됩니다. 세 번째 작업 영역인 repository는 working directory의 변경 이력들이 저장되어 있는 영역입니다. working directory에서 뭔가 작업을 하고, 작업한 파일들을 git add 해주고, 커밋을 하면 staging area에 있던 파일들의 모습이 마..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cACOOe/btq8GpFx5ZQ/qv8eWgCl2n6OBdIXUylvhk/img.png)
브랜치 생성: git branch {branch_name} Head가 가리키는 브랜치 변경: git checkout {branch_name} (커밋하면 변경된 브랜치 내용 커밋) 이 상태에서 add, commit하면 됨. git merge {branch_name} : 현재 HEAD가 브랜치를 통해 가리키고 있는 커밋과 merge 뒤에 쓴 브랜치가 가리키고 있는 커밋을 합침. *머지하다가 conflict 나면 에러난 페이지 고친 후 바로 add, commit. git add . git rebase —continue Fast-forward 머지 3-way 머지
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cLGbUU/btq8HTsKxg2/m8kjEwm12xknhUxwRkRGe0/img.png)
git remote add origin {url} : url이 가리키는 외부 서버의 프로젝트를 원격 저장소로 지정. 이름은 origin. git push -u origin {branch_name} (master) : 내 프로젝트 디렉토리 내용을 origin에 업로드. master: master 브랜치의 내용을 업로드. -u: —set-upstream 내 컴퓨터의 master 브랜치가 깃헙/랩 서버의 master 브랜치를 바라보도록. (한번만 하면 다음부턴 자동으로.) 다시 push하게 되면 앞에서 add를 해줬으므로 이미 origin이 가리키는 원격 저장소를 알고 있음. 따라서 git push만 써도 됨. git push —force : 업로드 강제. 커밋 덮어씌움. 절대 사용 주의 git clone {..