코멘트란? 다들 알고있는 댓글기능입니다. 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 (한것) - 코멘트 기능 구현하기. Finding (새로 알게 된 것) Feeling (느낀 점) - 크리스마스이브 라고 술마셨더니 코딩하기가 너무 힘들다.. 또 1일 1커밋에 포스팅 하기로 했는데 결심한지 얼마 되지도 않아서 깨긴 싫어서 하긴했다.. 그러니 앞으로 1일 1커밋을 위해서라도 적당히 마셔야겠다. Affirmation(자기 선언) - 술.. 적당히 마시기..
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 ..
Facts(한것) - 리팩터링 챕터2 (리팩터링 원칙) 읽기 - TDD로 셀렉트 박스 구현해보기 Finding(배운것) - TDD 하는 방법 - search메서드 - 리팩터링도 무조건 해야하는것이 아니다. 상황따라 하는 것이지만 하는것이 옳다. Feeling(느낀 것) - 매일 라이브러리만 사용해서 자주 사용하던 SearchBox만드는거 하나 쉽지 않았다. 생각보다 시간도 오래 걸렸고 라이브러리에 크게 의존했던것같다. 라이브러리가 나쁜것이아니라 모르고 사용하는것이 나쁜것이다. 앞으로 자주 새로운 기능? 을 직접 만들어보고 라이브러리를 다루어야겠다는 생각이 들었다. 리팩터링은 볼때마다 난해하고 어려워서 안하게 되는데 그것은 리팩터링이 나쁜게 아니라 내 머리가 나쁜것이다 Affirmation(자기선언) 1일..
Facts (한것) - Tistory 블로그 개설 및 포스팅시작 - 무한 스크롤 구현 및 포스팅 - 리팩터링 2판 챕터 1 읽기 Finding (새로 알게 된 것) - 생각보다 많은 개발자가 Tistory에 포스팅하고 많이 노력한다는 점 - onScroll객체에 꽤 많은 event정보가 있다는 점 - 리팩터링 2판을 혼자 공부하듯이 포스팅하려 했으나 저작권이라는 것을 처음으로 신경쓰게 되었다. 꽤나 복잡하다는 점 - 많은 사람들이 TIL을 통해 매일 성장하고 있다는 점 - 리팩터링은 매우 정교하고 꼭 필요하다는 점 Feeling (느낀 점) - 좋은 개발자가 되기는 생각보다 험난하다. - 난 우물안의 개구리다 사실 올챙이다. 계속해서 자기발전을 위해 발버둥쳐야한다. - 좋은 개발자가 되기 위해 리팩터링,..
무한 스크롤이란? 무한 스크롤이란 뿌려주는 데이터가 너무 많아서 렌더링되는 양이 너무 많아 성능이 저하되는것을 막기위해 첫 스크롤 화면에는 적은양의 데이터만 렌더되게끔 만들어주고 사용자가 스크롤의 하단에 근접했을때 다음 데이터를 뿌려주는 기법(?) 중에 하나이다. InfiniteScrollPage.js import { useEffect, useState } from "react"; import "../App.css"; import InfiniteScroll from "../components/InfiniteScroll"; function PInfiniteScroll() { const [datas, setDatas] = useState([]); const [scrollOptions, setScrollOpt..
