heeney.log

1. 카카오 개발자 페이지에 가서 로그인 후 내 애플리케이션에서 애플리케이션을 추가한다. 2. Javascript 앱 키를 env 파일에 저장해둔다. 3. 웹 플랫폼을 등록한다. www. 으로 시작하는 사이트를 가장 첫줄에 둔다. 나의 경우 개발서버, 상용서버, localhost를 등록해두었다. 4. 해당 스크립트를 index.html에 추가한다. 5. 코드를 작성한다. 가이드는 카카오 개발자 페이지에 나와있으니 따라하면 된다. const shareKakao = () => { // kakao init try { if (window.Kakao) { window.Kakao.init(KAKAO_KEY); } } catch (e) { console.log(e); } window.Kakao.Link.sendDef..

거두절미하고 document.exeCommand() 방식은 정상적으로 동작은 하지만 웹 표준에서 Deprecated 되었기 때문에 공식문서에서도 사용되지 않으며, 대체 방법으로 Clipboard API 사용이 권장되고 있다. 그럼에도 불구하고 exeCommand를 사용해야했는데 이유는 http 사이트였기 때문이다. Clipboard API는 https OR localhost인 사이트에서만 동작한다. http 사이트에서는 복사가 안되는 문제가 발생하는 것이다.. 추후에 https로 변경될 가능성이 있으나 안전하게 가보기로 했다. 이 부분을 보완하기 위해 조건에 따라 실행하기로 결정했다. if (navigator.clipboard !== undefined) { navigator.clipboard .write..

[JS] 객체안에 객체에서 원하는 값만 가져오기 (feat. entries, filter) 2차 프로젝트 - 마이리얼트립 (마이코드트립)를 진행하는 도중에 mock data에서 데이터를 가져오려는데 객체 안에 객체에서 조건에 맞는 데이터만 가져와야만 했다. 객체에 접근하는건 어려워도 천천히 생각하면 다 가능했는데 이건 조건이 들어가니까 어렵게 느껴져서 끙끙대고 있었다. 어떤 조건? 👩🏻‍🎨 마이리얼트립에서 항공권을 검색하는 부분에서 인원 및 좌석을 선택하는 곳이 있다. 성인, 소아, 유아의 데이터를 mock data에서 관리했는데 데이터를 관리할 때 0명인 승객은 보여주지 않아야 한다. 승객이 1명 이상일 때에만 표시된다. 예시) 성인 1, 소아 0, 유아 2일 경우 성인 1, 유아 2만 보여주도록 한다..

[JS] westagram - 댓글 게시 기능 구현 메인 페이지 내에서 피드에 댓글을 다는 기능을 구현하였다. 쉽게 말해서 해당 댓글 게시 기능은 사용자가 입력한 input값을 담은 요소가 새로 생성되는 것이다. Check List ✅ 사용자가 원하는 내용의 댓글을 입력할 수 있도록 input 요소가 있어야 한다. => input ❌, textarea ⭕️ input으로 구성하려던 도중 인스타그램의 경우 textarea로 구성되어 있었다. 생각해보니 사용자가 정말 긴 내용을 코멘트로 달 수도 있었다. 실제로 인스타그램에서는 많은 양의 내용을 담은 코멘트를 다는 사용자도 있으니 필요한 부분이었다. 사용자가 댓글을 입력을 할 때에만 게시 버튼이 활성화 되어야 한다. keyup 이벤트를 줘서 사용자가 입력하면..

로그인 버튼 활성화&비활성화 (feat. westagram) instagram을 클론코딩(westagram)하면서 과제로 주어졌던 로그인 버튼 활성화 & 비활성화 기능에 대한 내용을 정리했다.  과제 ➡️ 로그인 페이지 1-1. 로그인 페이지 레이아웃 1-2. 로그인 페이지의 로그인 버튼 활성화 & 비활성화 메인 페이지 2-1. 메인 페이지 레이아웃 2-2. 메인 페이지 댓글 생성 기능 그 중 로그인 페이지를 먼저 작업하였다. 전체적인 westagram 레이아웃을 잡은 후 Javascript를 이용해 ID와 PassWord 입력란에 값이 모두 들어왔을 때만 로그인 버튼이 활성화 되도록 구현한다. checkList ✅ ID와 PassWord 둘 다 입력이 들어왔을 때만 로그인 버튼이 활성화 되는가? =>..

ES6 ES ? ECMA Script의 줄임말이다. Javascript를 표준화 시키고 규격화하기 위해 탄생했다. 현재는 ES10까지 나왔으나 주로 쓰이는 것은 ES6이다. ES6 ? 6번째 ES라는 뜻이다. 2015년에 처음 등장해 ECMA Script 2015라고도 불린다. ES5 이하 명세에서 문제 되었던 부분들이 ES6에서 많은 부분 해결이 되었고 다양한 기능들이 추가되었다. React, Vue 등의 라이브러리들이 개발 환경을 ES6로 바꾸다보니 ES6가 더 많은 관심을 갖게 되었다. 즉, ES6는 프로그래밍 언어가 아닌 스크립트 언어에 대한 표준 및 규격이다. arrow function 기본 형태 //ES5 function() {} //ES6 () = {} 이름이 있는 함수 //ES5 funct..

매개변수(parameter)와 인자(argument) 매개 변수(parameter) function(parameter) { // parameter == 매개변수 } 함수의 바로 옆 괄호에 들어가는 내용이 바로 매개 변수이다. 어떤 이름을 주어도 상관 없으며 이름에 나왔다시피 함수 안에서 '변수'의 역할을 한다. 해당 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값의 정의된다. 인자(argument) function test(params) { // ... } test(200); // argument 매개 변수에서 해당 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값이 정의된다고 했다. 호출될 때 전달받는 값이 바로 인자이다. 즉, 어떤 함수를 호출하면서 호출문의 괄호 안에 어떤 값 또는 값이 정..