코딩테스트 문제를 풀 때, 문자열을 배열로 변환해야 하는 경우가 많이 있다. 예) 'string' -> ['s', 't', 'r', 'i', 'n', 'g'] 이럴 때, 흔히 쓰는 방법은 크게 3가지가 있다. 1)  String.prototype.split() : 스트링 프로토타입 메서드 split2)  [...string] : 스프레드 연산자 (ES6부터 추가)3) Array.from(string) : Array 객체의 정적 메서드 1. String.prototype.split()split() 메서드는 구분자로 문자열을 분리하여 배열로 변환한다. 예시1) const str = 'The quick brown fox jumps over the lazy dog.';const words = str.split(..

forEach()배열의 모든 요소에 대해, 동작하게 해주는 메소드이다. 전달하는 매개변수와 기능이 map() 과 유사하다. 그러나, forEach() 함수는 return값이 없다.따라서, 해당 메소드를 호출하면 undefined가 출력된다.예를 들어, 기존 배열을 수정하기만 하는 상황과 같이, 새로운 배열을 리턴해줘야 하는 상황이 아니라면 forEach() 를 사용하는 것이 더 바람직하다const arr=[1,2,3,4];arr.forEach((i)=>{ if(i===1){ arr[i]=4; }})console.log(arr); // [1,4,3,4]  indexOf문자열에서 특정 문자열을 찾아서 첫번째 위치를 인덱스 숫자로 리턴해주는 메소드이다. 2가지 매개변수로 '찾을 문자열'과 '시..

Javascript에서 배열의 여러 원소들 중에서 최댓값, 최솟값을 구하는 방법을 정리해보자. 0. Math.max(), Math.min() 이란?1. Function.prototype.apply() 사용2. Spread Operator 사용 0. Math.max(), Math.min() 이란?Math.max()와 Math.min()은 파아리터로 입력받은 '숫자'들 중 최대값과 최소값을 구해서 리턴하는 함수이다.  그렇다면, '배열'에 담긴 여러 숫자 중 최소값과 최대값을 구하려면 어떻게 해야할까?배열에 담긴 원소들을 하나씩 꺼내서, Math.max()함수와 Math.min()함수의 파라미터로 전달하면 된다. 이렇게 하기 위해서는 크게 두 가지 방법을 사용할 수 있다.Function.prototype.a..

array.slice(start[,end])slice() 메서드는 어떤 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환한다. 즉, 원본 배열은 바뀌지 않는다const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];console.log(animals.slice(2));// Expected output: Array ["camel", "duck", "elephant"]console.log(animals.slice(2, 4));// Expected output: Array ["camel", "duck"]console.log(animals.slice(1, 5));// Expected output: Array [..

문제 배경StyledPaginationContent에서 PaginationLink 컴포넌트로 감싸진 숫자들이 map 함수 안에 있기 때문에 숫자가 클릭될 때마다 PaginationLink 컴포넌트가 생성 =>  따라서 PaginationLink 컴포넌트가 생성되고 삭제될 때마다 레이아웃이 변경되어 숫자들이 살짝씩 밀리는 현상이 발생  해결 방법이를 해결하기 위해서는 PaginationLink 컴포넌트를 map 함수 밖으로 이동하여 PaginationLink 컴포넌트가 한 번만 생성되도록 해야 함 단순하게, map함수를 감싸는 것이 PaginationLink가 아니게 하면 된다.태그로 감싸면서 문제를 해결했다  코드 비교 ..

# OnBoarding.jsx시작하기 Button      # KakaoLogin.jsx 1) 카카오 로그인 버튼 누르기 전 : 사용자가 카카오 로그인을 시작할 수 있도록 카카오 로그인 페이지(kakaoURL)로 리디렉션하는 역할const REST_API_KEY = "ff5cfd59376e7e4e903dd4b45e1f7a50"; const Redirect_URI = "http://localhost:3000/login/oauth2/code/kakao"; const kakaoURL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${Redirect_URI}&response_..

# 배경하루네컷 서비스에서 결제기능을 맡게 되었다.결제 요청은 프론트에서 진행하고, 그것을 검증하는 단계를 백엔드에서 맡아주기로 했다. 우리가 진행한 방식은 아래와 같다  # 결제 연동 코드 작성 전 준비 단계결제 연동 코드를 작성하기 위해, 알고 있어야 할 정보가 있다. 1. 고객사 식별 코드(IMP)2. PG 상점 아이디(MID)테스트 용으로 채널 등록을 할 때, '일반 결제'를 선택했더니 제공되었다    # 포트원 라이브러리 추가- 공식 문서에는 리액트 메뉴얼이 없어서, 리액트로 변경했다. 코드는 다른께서 블로그에 잘 정리해주셔서 활용했다- useEffect 안에 스트립트를 넣었다.  useEffect(() => { // 포트원 라이브러리 추가 let script = document.queryS..

컴포넌트 레벨 스타일링 개별 컴포넌트 단위로 스타일링 애플리케이션 레벨 스타일링 모든 컴포넌트에 동일하게 적용하는 스타일 애플리케이션 레벨 스타일을 지원하기 위해서 Styled Components는 createGlobalStyle()라는 함수를 제공한다. const GlobalStyle = createGlobalStyle` body { background: #e9ecef; } `; function App() { return ( 안녕하세요 ); } export default App; 전역스타일 컴포넌트를 최상위 컴포넌트 App에 추가해주면, 하위 모든 컴포넌트에 스타일이 적용된다 => 이 때, 전역 스타일 컴포넌트 내부로 하위 컴포넌트를 포함시키는 것이 아니라(~~), 최 상위 컴포넌트로 전역 스타일 컴포..