테스트 코드 작성 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 위 코드가 가능한 이유는 함수를 반환값으로 ..
리스트 값에 순서가 존재한다는 뜻이다. 간혹, 나도 그렇고 여러 사람이 처음 공부할때 헷갈릴텐데 리스트의 개념 과 리스트(배열) 를 착각 하는 경우가 많다. 알고리즘에서 얘기하는 리스트는 보통 배열이 아닌 리스트(순서가 있는 값의 집합) 이라고 생각하는게 편하다. 자, 그럼 우린 더이상 리스트와 링크드리스트의 차이를 찾아볼게 아니라 배열과 링크드리스트를 알아봐야함을 알 수 있다. 배열 배열은 첫번째 주소값으로 부터 바로 다음에 있는 순서의 주소값에 값들이 순서대로 저장되는것이다. 이미 다른 언어는 다루지않아봐서 잘 모르겠지만 필자의 주언어 인 자바스크립트를 기준으로 const testArray = ["하나", "둘", "셋", "넷", "다섯", "여섯", "일곱"]; 라는 배열이 있다고 가정할때 "넷"..
REST API란? REST 와 API의 합성어입니다. REST는 통신 체계의 스타일을 규정한 아키텍처입니다. Restful API란? REST 통신 체계 스타일을 준수한 API입니다. myRestBack.js const http = require("http"); const fs = require("fs").promises; const users = {}; // 데이터 저장용 http .createServer(async (req, res) => { try { if (req.method === "GET") { if (req.url === "/") { const data = await fs.readFile("./myRest.html"); // 메인주소일때는 myRest.html 즉 기본이 되는 메인 html..
공공 데이터 포털 open API 이란? 아무래도 아직 백엔드 공부를 못해서 혼자 프로젝트를 할 때 모든 정보를 클라이언트에 담아서 해야하는 불편함이 있다. 아무리 토이프로젝트지만 API를 활용하고 싶어서 구글에 open API를 검색해봤는데 꽤나 쓸만한 open API를 갖고있는 사이트가 있었다. 공공 데이터 포털 이라는 사이트다. 정말 갖가지 open API가 다 있었다. 앞으로 꽤나 자주 이용하게 될 것 같다. 우선 유행이 지나긴 했지만 만만한게 코로나 확진수에 대한 api를 제공해준다는게 눈에 들어와 한번 사용해봤다. 그러나.. 테스트 하던 도중 잘 되다가.. 알고보니 일일 요청 횟수라는게 있었다.. 그래서 우선 하다 말았지만.. 리팩토링도 못하게 되었다.. 우선 부끄럽지만.. 대충 짠 코드다. ..
소셜 로그인이란? 웹페이지를 보다 보면 네이버 로그인, 카카오 로그인, 구글 로그인 등 사용하는 웹 페이지에 맞게 일일이 양식을 입력하지 않아도 간편하게 로그인할 수 있게 도와주는 기능이다. 취준생 때 이미 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..
코멘트란? 다들 알고있는 댓글기능입니다. CRUD연습하기 아주 좋은것같아 예제로 선택하였습니다. 우선 테스트케이스를 준비해봅시다. comment.test.js describe("show Test", () => { const comment = [ { id: 1, userName: "zmf1111", content: "1", }, { id: 2, userName: "zmf1111", content: "2", }, { id: 3, userName: "zmf1111", content: "3", }, ]; it("should add comment", () => { const inputWord = "4"; const expected = [ { id: 1, userName: "zmf1111", content: "1"..
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..
무한 스크롤이란? 무한 스크롤이란 뿌려주는 데이터가 너무 많아서 렌더링되는 양이 너무 많아 성능이 저하되는것을 막기위해 첫 스크롤 화면에는 적은양의 데이터만 렌더되게끔 만들어주고 사용자가 스크롤의 하단에 근접했을때 다음 데이터를 뿌려주는 기법(?) 중에 하나이다. InfiniteScrollPage.js import { useEffect, useState } from "react"; import "../App.css"; import InfiniteScroll from "../components/InfiniteScroll"; function PInfiniteScroll() { const [datas, setDatas] = useState([]); const [scrollOptions, setScrollOpt..
