테스트 코드 작성 const { nextNumber } = require("./nextNumber"); test("test nextNumber function", () => { // 등차수열 테스트 expect(nextNumber([1, 3, 5])).toBe(7); expect(nextNumber([3, 6, 9, 12])).toBe(15); expect(nextNumber([-5, -2, 1, 4, 7])).toBe(10); // 등비수열 테스트 expect(nextNumber([2, 4, 8])).toBe(16); expect(nextNumber([1, 2, 4, 8])).toBe(16); expect(nextNumber([4, 12, 36])).toBe(108); }); 이번엔 음.. 굳이굳이 한..
평가 - 코드가 계산되어 값을 만드는 것 일급 - 값으로 다룰 수 있다. - 변수에 담을 수 있다. - 인자로 사용될 수 있다. - 반환값으로 전달할 수 있다. 일급 함수 일급함수란 함수를 일반 값처럼 다룰 수 있는 함수를 말합니다. 함수를 매개변수, 반환값, 변수 등으로 사용할 수 있습니다. 이러한 특징은 함수형 프로래밍에서 중요한 역할을 합니다. - 함수를 변수나 데이터 구조에 저장할 수 있습니다. - 함수를 매개변수로 전달할 수 있습니다. - 함수를 반환값으로 사용할 수 있습니다. const a = 100; const add = (test) => test + 100; const result = add(a); console.log(result) // 200 위 코드가 가능한 이유는 함수를 반환값으로 ..
정수 숫자와 정수 대상의 배열이 주어지면 두 숫자의 인덱스를 반환하여 대상에 합산합니다. 각 입력에는 솔루션이 하나만 있고 동일한 요소를 두 번 사용할 수 없다고 가정할 수 있습니다. 답변은 어떤 순서로든 반환할 수 있습니다. https://leetcode.com/problems/two-sum/ Two Sum - LeetCode Can you solve this real interview question? Two Sum - Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target. You may assume that each input would ..
소셜 로그인이란? 웹페이지를 보다 보면 네이버 로그인, 카카오 로그인, 구글 로그인 등 사용하는 웹 페이지에 맞게 일일이 양식을 입력하지 않아도 간편하게 로그인할 수 있게 도와주는 기능이다. 취준생 때 이미 firebase를 이용해서 로그인을 구현해봤지만 이번에는 firebase를 제외하고 네이버, 카카오톡에서 지원해주는 open API를 이용해서 구현해보았다. Login import React, { useContext, useEffect, useState } from "react"; import styled from "styled-components"; import { useNavigate } from "react-router-dom"; import { UserContext } from "../data..
Facts (한것) - 이미지 줌zoomImage 구현 및 포스팅 - 리팩터링 2판 챕터 3 읽기 Finding (새로 알게 된 것) - zoomImage를 구현해보면서 새로운 css속성에 대해 알게 되었다. css는 어느정도 할 수 있다고 생각했는데 완전 우물안개구리였다. - css에 대한 속성도 useRef를 통해 style을 동적으로 조작 할 수 있다는 점. 여태까지 줄곧 동적으로 조작할 수 있는건 styled-components를 통해서만 할 수 있다고 생각했다. Feeling (느낀 점) - css나 html속성, 웹 접근성에 대해 별로 신경안쓰고 자바스크립트 공부에만 급급했었는데 프론트엔드 기본인 html, css를 좀 더 잘 알아야겠다고 생각했다. Affirmation(자기 선언) - 겸손하..
이미지 확대기능이란? 말 그대로 이미지에 마우스 커서를 올려놓았을때 해당 부분을 확대해서 보여주는것입니다. 쇼핑몰같은 사이트에서 많이 사용되는 기술입니다. PZoomImage.js import React from 'react' import ZoomImage from '../components/ZoomImage' const PZoomImage = () => { return ( ) } export default PZoomImage zoomRate : 몇배만큼 확대할지 넘겨주는 props width, height: 이미지의 크기 ZoomImage.js import React, { useCallback, useRef, useState } from "react"; import styled, { css } from..
서치박스란? 서치박스는 인풋창 클릭 시 dropdown으로 아이템이 리스트형태로 나오며 input에 타이핑을하여 아이템을 쉽게 찾을 수 있게 만들어주는 기법(?) 이다. sarch.test.js describe("show Test", () => { it("should show first", () => { const datas = ["first", "second", "third", "four", "five"]; const inputWord = "first"; const expected = ["first"]; expect(searchWords(datas, inputWord)).toEqual(expected); }); it("should show firstWords f", () => { const datas ..
무한 스크롤이란? 무한 스크롤이란 뿌려주는 데이터가 너무 많아서 렌더링되는 양이 너무 많아 성능이 저하되는것을 막기위해 첫 스크롤 화면에는 적은양의 데이터만 렌더되게끔 만들어주고 사용자가 스크롤의 하단에 근접했을때 다음 데이터를 뿌려주는 기법(?) 중에 하나이다. InfiniteScrollPage.js import { useEffect, useState } from "react"; import "../App.css"; import InfiniteScroll from "../components/InfiniteScroll"; function PInfiniteScroll() { const [datas, setDatas] = useState([]); const [scrollOptions, setScrollOpt..
