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..

내가 만든 로직이 제대로 작동하는지 확인하기 위해 작성하는 테스트 코드이다. 환경설정 /src 폴더 위치에 test라는 폴더를 만들고 그 안에 테스트 코드를 작성한 파일을 두면 된다. 파일명은 __test__ 혹은 .test.ts로 지정해준다. 함수를 테스트하는 경우 해당 컴포넌트를 import해와서 테스트를 진행하면 된다. 우선 필요한 라이브러리를 설치해야 한다. yarn add -D jest @types/jest yarn add -D ts-jest yarn add -D @testing-library/jest-dom @testing-library/react 필요한 파일로는 우선 테스트를 돌려볼 수 있는 파일이 필요할 것이다. /src/test/app.test.tsx ... root 위치에 jest.co..

[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 매개 변수에서 해당 함수가 호출될 때 값을 전달받게 되면 매개 변수에 값이 정의된다고 했다. 호출될 때 전달받는 값이 바로 인자이다. 즉, 어떤 함수를 호출하면서 호출문의 괄호 안에 어떤 값 또는 값이 정..

문제 설명 자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다. 제한사항 3 ≤ n ≤ 1,000,000 입출력 예 nresult 10 3 12 11 입출력 예 설명 입출력 예 #1 10을 3으로 나눈 나머지가 1이고, 3보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 3을 return 해야 합니다. 입출력 예 #2 12를 11로 나눈 나머지가 1이고, 11보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 11을 return 해야 합니다. 작성한 코드 function solution(n) { for(let i=2; i

[프로그래머스] 두 개 뽑아서 더하기 | javascript 정수 배열 numbers가 주어집니다. numbers에서 서로 다른 인덱스에 있는 두 개의 수를 뽑아 더해서 만들 수 있는 모든 수를 배열에 오름차순으로 담아 return 하도록 solution 함수를 완성해주세요. 제한사항 numbers의 길이는 2 이상 100 이하입니다. numbers의 모든 수는 0 이상 100 이하입니다. 입출력 예 numbers result [2,1,3,4,1] [2,3,4,5,6,7] [5,0,2,7] [2,5,7,9,12] 입출력 예 설명 입출력 예 #1 2 = 1 + 1 입니다. (1이 numbers에 두 개 있습니다.) 3 = 2 + 1 입니다. 4 = 1 + 3 입니다. 5 = 1 + 4 = 2 + 3 입니다..