전체 글 (20) 썸네일형 리스트형 [프로그래머스] 폰켓몬 (Javascript) 오랜만에 알고리즘 문제를 푸는 거라 감을 익히기 위해 레벨 1부터 찬찬히 풀어보려고 한다. 문제 설명 당신은 폰켓몬을 잡기 위한 오랜 여행 끝에, 홍 박사님의 연구실에 도착했습니다. 홍 박사님은 당신에게 자신의 연구실에 있는 총 N 마리의 폰켓몬 중에서 N/2마리를 가져가도 좋다고 했습니다. 홍 박사님 연구실의 폰켓몬은 종류에 따라 번호를 붙여 구분합니다. 따라서 같은 종류의 폰켓몬은 같은 번호를 가지고 있습니다. 예를 들어 연구실에 총 4마리의 폰켓몬이 있고, 각 폰켓몬의 종류 번호가 [3번, 1번, 2번, 3번]이라면 이는 3번 폰켓몬 두 마리, 1번 폰켓몬 한 마리, 2번 폰켓몬 한 마리가 있음을 나타냅니다. 이때, 4마리의 폰켓몬 중 2마리를 고르는 방법은 다음과 같이 6가지가 있습니다. 첫 번째.. Redux와 styled-components를 이용하여 다크모드 상태관리 구현하기 React와 TypeScript환경 프로젝트에서 다크모드와 라이트모드 상태관리 구현하는 프로젝트를 진행해 보겠습니다 1. 필요한 라이브러리들을 설치합니다. npm install redux react-redux @types/react-redux @reduxjs/toolkit styled-components 타입스크립트를 사용하신다면 @types/react-redux를 추가로 설치해야 합니다. 2. 필요한 파일들을 폴더에 맞게 생성합니다. 저는 theme 전역변수들을 선언할 themeSlice.js파일과 각각의 slice들을 reducer에 담아둘 store.js 파일을 redux폴더에 생성했고, 전역적으로 스타일을 관리할 GlobalStyles.tsx 파일을 style폴더에 생성했습니다. 3. 리덕스로 전.. TDD방법론 이란? 개발 관련 서치를 하거나 채용 사이트 개발자 공고에서 자격 요건으로 TDD방법론이라는 단어를 자주 보곤 한다. 나는 단순히 테스트 주도 개발 방법론이라고 간략한 뜻만 알고 있는 상태였기 때문에 좀 더 자세한 개념과 어떤 식으로 활용할 수 있는지 알아봐야겠다는 생각이 들었다. 테스트 주도 개발 TDD(Test Driven Development) 방법론은 소프트웨어 개발 방법론 중 하나로 개발자가 코드를 작성하기 전 테스트케이스를 작성한 후 코드 개발하여 리팩토링 하는 방법론이다. TDD 방법론을 왜 사용할까? 1. 버그를 초기에 발견할 수 있다 개발 초기부터 테스트케이스를 작성하기 때문에 버그를 초기에 발견하여 바로 수정 가능하다. 따라서 나중에 크게 벌질 가능성이 있는 버그를 예방하기 때문에 소프트웨어의.. styled-components의 특징 및 사용법 styled-components는 리액트의 css 스타일링 라이브러리이며, props를 활용하여 기능별로 스타일 적용이 가능하기 때문에 개인적으로 유용하게 잘 사용하고 있다. 특징1. CSS in JS자바스크립트 파일 내에서 css를 작성하기 때문에 리액트 컴포넌트 별로 스타일링하기 편하다2. 컴포넌트에 기반한 스타일링컴포넌트 별로 스타일링 유지보수하기 편하다3. props리액트의 기능인 props를 활용하여 상태변화에 따른 스타일링 적용을 유용히 사용 가능하다 사용법라이브러리를 설치한다.npm install styled-components# oryarn add styled-components 타입스크립트 사용 시, 추가적으로 설치해 준다.npm i @types/styled-components# orya.. axios와 fetch의 차이 axios와 fetch는 node.js에서 HTTP요청을 보내는 데 사용된다. axios promise기반으로서 사용자가 좀 더 직관적으로 다룰 수 있어 추가적인 래핑이 필요한 fetch보다 편리하다는 장점이 있다. 또한 브라우저 호환성이 넓어 최신 브라우저가 아닌 경우에도 잘 동작한다. fetch 외부 라이브러리가 아닌 ECMAScript6에 기본적으로 탑재되어 있는 기능이기 때문에 가볍게 사용 가능하다는 장점이 있다. 하지만 최신 브라우저에서 지원이 되기 때문에 예전 브라우저의 경우 작동이 안 될 수도 있고, 취소요청 기능이 탑재되어 있지 않아 AbortController 같은 인터페이스로 추가적인 작업이 필요하다 결론 많은 기능과 쉬운 사용성 → axios 가벼움 → fetch 나는 개인적으로는 a.. [Project] 나이스 페이먼츠 테스트용 전자결제 연동하기 (4) - 프론트엔드 폼 구현 2차 단순히 고정값을 보내어 호출한 저번 포스팅에 이어, 이번 포스팅에서는 폼에서 수정한 값으로 결제창 호출 시 데이터를 보낼 수 있도록 구현하겠습니다. 1. "가격", "결제 수단", "구매수량에 따른 최종 결제 금액"의 상태값이 변할 수 있도록 useState를 활용하여 변수를 선언해 줍니다. const [price, setPrice] = useState(1004); const [selctedMethod, setSelectedMethod] = useState(''); const [totalPrice, setTotalPrice] = useState(1004); 2. 폼 제출 시 결제 수단의 선택 유무를 판단하여 나이스페이 결제창을 호출하는 함수를 구현합니다. const handleSubmit = (e: an.. [Project] 나이스 페이먼츠 테스트용 전자결제 연동하기 (3) - 서버 연동 1차 저번포스팅에 이어서 프론트엔드로만 간단히 결제호출했던 프로젝트를 서버에서 호출하도록 구현할 예정이다. 나는 개발자 가이드에 나온 Node.js 샘플코드를 참고하여 연동하였다. https://github.com/nicepayments/nicepay-node 1. 먼저 routes 폴더에 payments.js 파일을 생성하여 아래 라이브러리들을 임포트 하였다. const uuid = require("uuid").v4; const got = require("got"); const router = require("express").Router(); 내가 설치한 라이브러리들의 버전이다. got 라이브러리의 경우 현재 기준 최신 버전으로 설치 후 연동 시 오류가 떠서 버전을 낮추었다. "cors": "^2.8.5".. [Project] 나이스 페이먼츠 테스트용 전자결제 연동하기 (2) - 키 발급 및 프론트엔드 진행 1차 https://github.com/nicepayments/nicepay-manual GitHub - nicepayments/nicepay-manual: 나이스페이먼츠 결제연동 매뉴얼 나이스페이먼츠 결제연동 매뉴얼. Contribute to nicepayments/nicepay-manual development by creating an account on GitHub. github.com 위의 링크를 통해 나이스 페이먼츠에서 제공하는 전자결제 개발자 가이드를 확인할 수 있다. 따라서 이 가이드를 참고하여 전자결제 연동을 진행할 것이다. 가이드에서 제공하는 샘플 코드 언어로 Node.js Python Ruby Asp Java php .Net 이 있는데 나는 여기서 node.js를 사용하여 프론트엔드 Rea.. 이전 1 2 3 다음
