분류 전체보기

문제 설명 임의의 양의 정수 n에 대해, n이 어떤 양의 정수 x의 제곱인지 아닌지 판단하려 합니다. n이 양의 정수 x의 제곱이라면 x+1의 제곱을 리턴하고, n이 양의 정수 x의 제곱이 아니라면 -1을 리턴하는 함수를 완성하세요. 제한 사항 n은 1이상, 50000000000000 이하인 양의 정수입니다. 입출력 예 n return 12 144 3 -1 문제 풀이 function solution(n) { var answer = 0; for(let i=1; i*i

문제 설명 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예 phone_number return "01033334444" "*******4444" "027778888" "*****8888" 문제 풀이 function solution(phone_number) { var answer = ''; for(let i=0; i=phone_number.length-4) answer+=phone_number[i..

Homebrew 설치하기 1. https://brew.sh/ 링크에 들어가 명령어를 복사해준다. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 2. 터미널을 켜서 복사한 명령어를 붙여넣고 password: 가 뜨면 맥 비밀번호를 입력해주고 Enter 혹은 return 키를 눌러주고 기다려준다.(꽤나 오래 기다려야한다) 3. 설치가 끝나면 아마 커맨드 2개를 입력하라고 뜨는데 2개 다 입력해주면 된다. (echo; echo 'eval "$(/opt/homebrew/bin/brew shellenv)"') >> /Users/nakyung/.zprofile eval "$(/opt/home..

useCallback useCallback은 useMemo와 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. useMemo는 특정 결과값을 재사용할 때 사용하는 반면, useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용한다. useMemo 에서 작성했던 Average 컴포넌트의 경우, 컴포넌트가 리렌더링 될 때마다 새로 만들어진 함수를 사용하게 된다. 이 방식의 경우 크게 문제는 없지만, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋다. useCallback 사용하기 const onChange = useCallback(e=>{ setNumber(e.target.value); },[]..

한성대학교 🦁멋쟁이사자처럼 11기 프론트엔드 트랙에 지원하여 합격하였다! 우리 학교에 생겼을 때부터 너무너무 들어가고 싶었던 동아리였는데 2학년때는 내가 너무 부족하다고 생각하여 3학년 때 지원을 하게 되었다. 나도 멋사에 지원할 때 구글링하면서 여러 블로그에서 도움을 많이 받았던지라, 나도 도움이 되었으면 좋겠다는 생각에 합격 후기를 남겨 본다!! 1차 서류 후기 📝 서류는 인스타그램에 있는 링크에 들어가 구글폼을 작성하는 방식으로 진행되었다. 한성대학교 멋사는 총 5문항의 질문에 답하는 방식이었고, 내가 받았던 질문들과 내가 쓴 답변을 정리해 보겠다. 1. 자기소개) 멋쟁이사자처럼은 1년 간 주 1회 대면 모임 및 다양한 행사를 진행합니다. 활동 기간 동안 얼마나 열정적으로, 매주 얼마만큼의 시간을 ..

useMemo useMemo는 리액트에서 컴포넌트의 성능을 최적화하는데 사용하는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 memoization이란 기존에 수행한 연산의 결괏값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 뜻한다. memoization을 잘 활용하면 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수 있다. useMemo의 구조 const value = useMemo(()=>{ return calculate(); },[item]) useMemo는 useEffect처럼 첫 번째 인자로 함수인 calculate()를 호출하여 결과값을 반환한다. calculate 함수는 여기서 비용이 많이 드는 계..

useReducer 이전까지 상태를 업데이트 할 때는 useState를 사용해서 새로운 상태를 설정해주었는데, 상태를 관리할 때 useState를 사용하는 것 말고도 다른 방법이 있다. 바로 useReducer을 사용하는 것인데, useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다. 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 리듀서는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜야 한다. function reducer(state,actio..

Hooks React Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 기능을 할 수 있게 해준다. 훅을 사용하면 클래스 컴포넌트보다 훨씬 더 간결하고 직관적인 코드를 작성할 수 있어, 프로젝트의 유지보수를 높일 수 있다. 지난번 글에서 다뤘던 useState도 React Hooks의 한 종류이며, 리액트의 가장 대표적인 Hook으로 useState와 useEffect를 꼽을 수 있다. 이외에도 useReducer, useMemo, useCallback, useRef등 다양한 훅이 있으며 오늘은 useEffect에 대해 다..

State란? State란 리액트에서 이벤트에 의해 변경되는 동적인 값이다. const, let 등으로 선언한 변수와 다르게 State 값이 변경되고 재 렌더링이 필요한 경우에 React가 자동으로 변경된 부분을 재렌더링하여 화면을 바꾼다. props는 부모 컴포넌트가 설정하는 값이며 읽기 전용이지만, State는 하위 컴포넌트도 데이터를 변경할 수 있다. 함수형 컴포넌트는 'useState'라는 React Hook을 사용하여 State를 다룰 수 있다. useState 사용하기 1. 파일 위쪽에 useState를 import 해준다. import { useState } from "react"; 2. useState 구문을 사용한다. const [state,setState]=useState(초기값); s..

Routing 라우팅이란, URL에 따라 그에 상응하는 화면을 전송해주는 것을 말한다. 쉽게 말해, 링크를 입력하면 그 링크로 이동시켜주는 역할을 한다. 라우팅은 SPA(Single Page Application)를 구현하는 데 필수적이며, SPA는 초기 로딩 시에 서버에서 모든 컨텐츠를 불러오는 것이 아닌 필요한 데이터만 가져와 화면을 구성하기 때문에, URL에 따라 다른 화면을 보여주는 라우팅이 필요하다. 리액트에서는 라우팅 기능을 사용하기 위해 react-router 라이브러리를 따로 설치해줘야 한다. SPA(Single Page Application)이란? SPA는 단일 페이지 어플리케이션으로 서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미한다. 사용..