프로그래밍 잡동사니

얼마전 모던 자바스크립트 Deep Dive 완독을 목표로 3개월간 운영했던 스터디가 마무리되었다 교내 개발자들과 교류하자는 생각으로 동아리에 가입했다가 어쩌다 보니 스터디 운영까지 맡게 되었는데, 스터디원들을 만나고 커리큘럼을 짜는 과정에서 책임감이 생겨 끝까지 운영할 수 있었던 것 같다🙂 물론 일방적으로 멘토링하는 것이 아니라 나 자신도 공부를 목적으로 스터디를 운영했는데, 스터디에 단순히 참여만 하거나 혼자 공부할 때와 달리 독특한 경험을 할 수 있었다 스터디는 다음과 같은 방식으로 운영했다 0. 1주일에 2시간씩, 시험기간 제외 9주간 대면으로 진행 1. 스터디원들이 각각 책의 1챕터씩 맡아 총 3챕터 발표 2. 전체 요약/정리 및 각 챕터 주제별 심화 학습 멘토링 3. 주간 과제 피드백 + 다음주..

카카오 소셜 로그인은 구현이 어렵지 않고 친숙한 소셜 로그인 중 하나이다. 최근 자체 회원가입 없이 소셜 로그인 만을 제공하는 서비스가 늘어나고 있으며 사용자 입장에서도 부담 없이 서비스를 이용할 수 있어 간단한 서비스는 대부분 소셜 로그인을 채택하는 추세이다 그 중에서도 가장 보편적인 React + REST API 환경에서 로컬스토리지와 JWT 토큰을 활용해 카카오 소셜 로그인을 구현한 경험을 블로그에 남겨보도록 하겠다 우선 kakao developers 사이트에서 몇 가지 설정을 해준 후 클라이언트단에서 인가 코드를 추출해 서버로 전달해줘야 한다. 해당 과정까지의 설명은 카카오 공식 문서와 아래 글에 상세하게 정리되어 있다 [React] 카카오 로그인 구현하기 - REST API🔽 [React] 카카..

전자상거래 전자상거래의 개념 전자상거래(e-commerce)란 인터넷 또는 컴퓨터 네트워크와 같은 전자 시스템을 통한 제품이나 용역의 매매로, TV 홈쇼핑/온라인 홈뱅킹/웹페이지를 통한 주문/인터넷 쇼핑 등이 해당한다 전자상거래의 성립 조건 네트워크상에서 상대방 및 자신에 대한 신분 확인 수단이 필요 거래 사실(거래 내역)의 공증할 수 있는 신뢰할 만한 제3자의 중재 전자지불 방식(과정)의 안정성을 보장하기 위한 방법 확보 이 때, 메시지 암호화 및 전자 서명을 제공하는 복합적 보안 시스템으로 공개키 기반 구조(PKI, Public Key Infrastructure)를 사용하는데, CA(인증 기관) 및 공인인증서 등의 인터넷상의 신분을 증명할 수단이 함께 필요하다 공인인증서란 공개키와 소유자를 연결하는 ..

에러 처리 console.log('[Start]'); foo(); // ReferenceError: foo is not defined // 발생한 에러를 방치하면 프로그램은 강제 종료된다. // 에러에 의해 프로그램이 강제 종료되어 아래 코드는 실행되지 않는다. console.log('[End]'); 에러가 발생하지 않는 코드를 작성하는 것은 불가능하며, 에러를 방치하면 프로그램은 강제 종료된다 // DOM에 button 요소가 존재하지 않으면 querySelector 메서드는 에러를 발생시키지 않고 null을 반환한다. const $button = document.querySelector('button'); // null $button.classList.add('disabled'); // TypeErr..

제너레이터 ES6에 도입된 제너레이터(Generator)는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수이다 제너레이터 함수는 함수 호출자(caller)에게 함수 실행의 제어권을 양도(yield)할 수 있다 제너레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다 제너레이터 함수를 호출하면 이터러블인 제너레이터 객체를 반환한다 // 제너레이터 함수 선언문 function* genDecFunc() { yield 1; } // 제너레이터 함수 표현식 const genExpFunc = function* () { yield 1; }; // 제너레이터 메서드 const obj = { * genObjMethod() { yield 1; } }; // 제너레이터 클래스 메서드 c..

전통적인 콜백 패턴은 콜백 헬로 인해 가독성이 나쁘고 비동기 처리 중 에러 처리가 곤란하며 여러 비동기 처리를 한 번에 하는 것에도 한계가 있다. ES6에서는 새로운 패턴으로 프로미스(Promise)를 도입해 콜백 패턴의 단점을 보완하고 비동기 처리 시점을 명확하게 표현한다 // 프로미스 생성 const promise = new Promise((resolve, reject) => { // Promise 함수의 콜백 함수 내부에서 비동기 처리를 수행한다. if (/* 비동기 처리 성공 */) { resolve('result'); } else { /* 비동기 처리 실패 */ reject('failure reason'); } }); Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를..

마지막 미션은 다리 건너기 게임을 구현하는 것으로, 제약사항과 함께 학습 목표에 리팩터링이 추가된다 함수(또는 메서드)의 길이가 10라인을 넘어가지 않도록 구현한다 메서드의 파라미터 개수는 최대 3개까지만 허용한다 제공된 InputView, OutputView, BridgeGame, BridgeMaker 클래스를 사용한다 InputView에서만 Console.readline()을 이용해 사용자의 입력을 받을 수 있다 BridgeGame 클래스에서 InputView와 outputView를 사용하지 않는다 Random 값 추출은 제공된 BridgeRandomNumberGenerator의 generate()를 활용한다 이외에 각 클래스의 제약사항은 클래스별 세부 설명을 참고한다 클래스 분리와 메서드 구현에 있..

타이머 자바스크립트는 타이머를 생성할 수 있는 setTimeout / setInterval, 타이머를 제거할 수 있는 clearTimeout / clearInterval 함수를 제공하며, 전역 객체의 메서드로 제공되는 호스트 객체로 비동기 처리 방식으로 동작한다 // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. setTimeout(() => console.log('Hi!'), 1000); // 1초(1000ms) 후 타이머가 만료되면 콜백 함수가 호출된다. // 이때 콜백 함수에 'Lee'가 인수로 전달된다. setTimeout(name => console.log(`Hi! ${name}.`), 1000, 'Lee'); // 두 번째 인수(delay)를 생략하면 기본값 0이 지정된다. ..

브라우저는 처리해야 할 특정 사건이 발생하면 이를 감지해 이벤트를 발생시키는데, 이 때 호출될 함수를 이벤트 핸들러라고 하며 브라우저에게 이벤트 핸들러 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다 Click me! 특정 이벤트에 대응하는 다양한 이벤트 핸들러 프로퍼티를 할당해 브라우저로 호출한다 Click me! 위와 같이 함수 호출문을 할당해 이벤트 핸들러를 등록하는 방식이 있지만 권장되지 않는다 Save { /* React */ } Save Save Save JSX 상에서는 직접 HTML에 사용하는 것이 아니기 때문에 문제는 없다 Click me! DOM을 가져와 이벤트 핸들러 프로퍼티에 함수를 바인딩 해주는 방식이 존재한다 Click me! addEventListener 메서드 방식은 캡처링/..

Set Set🔽 Set - JavaScript | MDN Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있습니다. developer.mozilla.org Set 객체는 중복되지 않는 유일한 값들의 집합으로, 배열과 다음과 같은 차이가 있다 const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3) {1, 2, 3} const set2 = new Set('hello'); console.log(set2); // Set(4) {"h", "e", "l", "o"} 이터러블을 인수로 전달받아 Set 객체를 생성할 수 있다. 이 때 중복 값은 제거된다 const set = new Set(); set.add(1).add(2..