지난 4/20 ~ 4/25 6일간 참여한 테오의 구글 스프린트에 대한 회고를 해보려 한다. 벨로그를 하는 개발자라면 아마 한번쯤은 다 들어봤을 정도로 이제는 너무나 유명해져버린 테오의 구글 스프린트에 드디어 참여하였다. 동료 개발자의 강력한 추천으로 신청했는데, 간신히 자리가 딱 한 자리 남아있어서 운좋게 참여할 수 있었다. (이제 너무 유명해져서 오픈런 해야 신청할 수 있게 되어버린...🚴 🔥 ) 구글 스프린트가 뭐죠? 간단히 말하면 5일 만에 고객테스트를 진행할 수 있는 프로토타입을 만들어내는 개발방법론 중 하나이다. 테오의 구글 스프린트에서는 1 cycle 만 진행하고 끝냈지만, 이것을 cycle을 반복하면 빠르게 시장에 프로토타입을 출시하고 사용자들의 피드백을 받아 주차별로 보완해나감으로써 빠른 ..
출처 : 백준 온라인 저지 https://www.acmicpc.net/problem/1110 1110번: 더하기 사이클 0보다 크거나 같고, 99보다 작거나 같은 정수가 주어질 때 다음과 같은 연산을 할 수 있다. 먼저 주어진 수가 10보다 작다면 앞에 0을 붙여 두 자리 수로 만들고, 각 자리의 숫자를 더한다. 그 다음, www.acmicpc.net 문제 요약 주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다. 다음 예를 보자. 26부터 시작한다. 2+6 = 8이다. 새로운 수는 68이다. 6+8 = 14이다. 새로운 수는 84이다. 8+4 = 12이다. 새로운 수는 42이다. 4+2 = 6이다. 새로운 수는 26이다. 위의 예는 4번만..
출처: 백준 온라인 저지 https://www.acmicpc.net/problem/2525 2525번: 오븐 시계 첫째 줄에 종료되는 시각의 시와 분을 공백을 사이에 두고 출력한다. (단, 시는 0부터 23까지의 정수, 분은 0부터 59까지의 정수이다. 디지털 시계는 23시 59분에서 1분이 지나면 0시 0분이 된다.) www.acmicpc.net 나의 코드 => 오답 const readline = require('readline'); const rl= readline.createInterface({ input: process.stdin, output: process.stdout, }); const input = []; rl.on('line', function(line){ input.push(line);..
최근 회사에서 서비스 홈페이지를 리뉴얼하는 업무를 맡아서 하고 있다. 백엔드 개발자 없이 프론트단만 업데이트를 진행하고 있는데, 기존에 있는 로그인 api 에 post 요청을 보내니 CORS 에레가 발생했다. 이전에 부트캠프에서 프로젝트를 진행했을 때, 겪었던 문제였지만 당시에 백엔드 개발자분이 서버단에서 해당 에러를 해결하기 위한 처리를 진행해주셔서 수월하게 해결했었다. 이번에 백엔드 개발자 없이 해당 문제를 해결하게 되면서 공부했던 내용들을 정리하고 백엔드 개발자가 없을 때 프론트 단에서 어떻게 해결하였는지 기록하고자 한다. SOP ( Same Origin Policy) 우선 CORS 를 이해하기 위해 SOP 에 대해 알고 있어야 한다. Same Origin Policy, 즉 동일 출처 정책은 다른 ..
리액트 프로젝트에서 리덕스를 사용할 때 가장 많이 사용하는 패턴은 주로 화면에 UI를 보여주는 프레젠테이셔널 컴포넌트와 리덕스와 연동하여 state를 받아오거나 리덕스 스토어에 액션을 디스패치하는 역할을 하는 컨테이너 컴포넌트로 분리하는 것이다. 실습할 내용 Counter 컴포넌트에는 number 변수와 onIncrease, onDecrease 함수가 props로 전달된다. Todos 컴포넌트의 TodoItem에는 todo 객체와 onToggle, onRemove 함수가 props로 전달된다. Todos에는 인풋에 입력되는 텍스트인 input, todos 객체, onChangeInput, onInsert, onToggle, onRemove 함수가 props로 전달된다. 17. 리덕스를 사용하여 리액트 애..
액션 타입과 액션 생성함수 액션 타입: 프로젝트의 상태에 변화를 일으키는 것이며 이름은 고유해야하며 대문자 문자열로 작성한다. const TOGGLE = 'TOGGLE' const ADD = 'ADD' const DELETE = 'DELETE' 액션 생성함수 : 액션 이름을 사용하여 액션 객체를 만드는 함수, 액션 객체는 type을 반드시 갖고 있어야 하며 추후 상태 업데이트 시에 참고하고 싶은 값은 마음대로 해도 상관없다. const toggle = () => ({ type: TOGGLE }); const add = difference => ({ type: ADD, difference }); const delete = () => ({ type: DELETE }); 리듀서 함수 정의 리듀서는 변화를 일으..
구글 리캡챠를 사용하여 문의 메일을 보내는 사용자 중 봇을 감지하여 스팸문자를 방지하도록 할 것이다. 구글 리캡챠는 구글에서 제공하는 봇, 스팸 방지 API이다. "나는 로봇이 아닙니다. " 혹은 "~이 있는 타일을 모두 선택하세요" 같은 그림 맞추기 라고 하면 아~ 하고 떠오르는 그게 구글 리캡챠이다. 이번에 회사에서 홈페이지 리뉴얼을 진행하면서 이따금씩 해외에서 보내지는 스팸메일들을 방지하기 위해 구글 리캡챠 기능을 사용하기로 했다. 굉장히 간단하게 생각했다가 며칠을 고생했다..😢 버전선택 구글 리캡챠는 2022년 2월 현재 v2, v3 가 있다. (v1은 예전에 서비스가 종료되었다.) v2 는 checkbox 와 invisible 2가지 종류가 있는데 checkbox는 "로봇이 아닙니다." 체크 박..
회사에서 홈페이지 리뉴얼을 진행하면서 카카오맵을 사용해야 했다. 카카오 Maps API 공식문서를 보고 구현하고자 했는데, 공식문서의 내용을 현재 개발환경에 맞게 적절하게 코드를 변환하지 못해 어려움을 겪었다. 추후에 추가로 포스팅할 예정이지만 구글 리캡챠 역시 비슷한 문제를 겪었기에 관련 내용을 정리하며 공식문서의 코드들을 이해하고 개발환경에 적합하게 변화시킬 수 있는 실력을 함양하고자 내용을 포스팅하려 한다. 사용 기술스택 - React (Next.js) - TypeScript 공식문서 가이드 우선 공식문서 가이드에 따라 작성된 코드는 아래와 같다. // 1. 지도를 담을 div 생성 // 2. 지도를 그려줄 Javascript API 불러오기 // 3. 지도를 띄우는 코드 작성 내가 구현한 코드 아..
오늘도 어김없이 에러를 마주했다. 에러 발생 상황 사용 기술 스택 : Nextjs, Typescript, airbnb style guid 부모 컴포넌트인 Footer 내부에 Map 컴포넌트가 존재한다. (단, Map 컴포넌트는 display: none) Footer 에서 클릭 이벤트가 발생하면 푸터 컴포넌트 내부의 state 값이 변하면서 (false -> true) Map 컴포넌트가 나타난다. 그리고, Map 컴포넌트 내부에서 클릭 이벤트와 키보드 이벤트가 발생하면 Footer 컴포넌트의 state 값이 변화 (true -> false)하고 Map 컴포넌트가 다시 사라지도록 로직이 구현되어 있다. 위 로직은 푸터 컴포넌트에서 mapViewState 가 true 이면 Map 컴포넌트가 나타나고, fals..
작업환경 - nextjs - typescript - airbnb styleguide 에러 발생 상황 부모 컴포넌트로부터 props로 num 을 받아오는 자식 컴포넌트인 item 컴포넌트에서 props 값에 따른 각기 다른 css 스타일 적용을 위해 삼항연산자를 사용하였는데, do not nest ternary expression 라는 에러가 발생하였다. 아마도 airbnb 스타일 가이드 때문에 발생한 에러가 아닌가 싶다. 첫번째 시도 삼항연산자를 switch 문으로 대체 하였으나 string 값 자체가 클래스명으로 적용되어서 module.css 가 적용되지 않았다. let types = 'styles.typeOne'; switch (num) { case '01': types = 'styles.typeOn..
