Facts (한것) - 공공 데이터 open API 적용 - 코로나19 프로젝트 진행 - Node js 인강 듣기 Finding (새로 알게 된 것) - 공공데이터라는 사이트에는 꽤 많은 open API가 있다. Feeling (느낀 점) - 처음으로 공공데이터에 있는 open API를 사용해보았고 인증키 이슈때문에 애를 좀 먹었다. 스스로 해결하고싶어하는 고집이 있어서 끝까지 구글링 미루었다가 시간만 날려먹었다.. - 인터넷에는 꽤 많은 open API들이 있다. Affirmation(자기 선언) - 하루에 많지는 않아도 오늘처럼 가볍게 자주 매일 쭉 하기..
공공 데이터 포털 open API 이란? 아무래도 아직 백엔드 공부를 못해서 혼자 프로젝트를 할 때 모든 정보를 클라이언트에 담아서 해야하는 불편함이 있다. 아무리 토이프로젝트지만 API를 활용하고 싶어서 구글에 open API를 검색해봤는데 꽤나 쓸만한 open API를 갖고있는 사이트가 있었다. 공공 데이터 포털 이라는 사이트다. 정말 갖가지 open API가 다 있었다. 앞으로 꽤나 자주 이용하게 될 것 같다. 우선 유행이 지나긴 했지만 만만한게 코로나 확진수에 대한 api를 제공해준다는게 눈에 들어와 한번 사용해봤다. 그러나.. 테스트 하던 도중 잘 되다가.. 알고보니 일일 요청 횟수라는게 있었다.. 그래서 우선 하다 말았지만.. 리팩토링도 못하게 되었다.. 우선 부끄럽지만.. 대충 짠 코드다. ..
Facts (한것) - SNS 로그인 연동 (카카오, 네이버) - 리팩터링 챕터2 복습 Finding (새로 알게 된 것) - SNS로그인 및 open API의 종류? Feeling (느낀 점) - 소셜 로그인에 관한 open api를 찾는데 문득 다른 open API도 눈에 들어와서 이정도로 open api가 많이 있으면 생각보다 프론트엔드 기술로 충분히 많은 프로젝트를 만들 수 있다고 생각했다. 앞으로는 기능구현 보다는 open API를 이용해서 토이 프로젝트도 진행해보는것도 괜찮다고 생각했다. - 리팩터링 챕터 2를 읽으면서 코딩은 수학보다는 문학에 더 가깝다고 느꼇다. Affirmation(자기 선언) - 한달에 최소 하나의 토이 프로젝트 하기. - NodeJs강의 최소 하루에 하나 씩 보기 (첫..
소셜 로그인이란? 웹페이지를 보다 보면 네이버 로그인, 카카오 로그인, 구글 로그인 등 사용하는 웹 페이지에 맞게 일일이 양식을 입력하지 않아도 간편하게 로그인할 수 있게 도와주는 기능이다. 취준생 때 이미 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 (한것) - 코멘트 구현 완성 (작게 TDD로..) - 리팩터링 챕터 1 복습 및 혼자 해보기 - NodeJS강의(백엔드) 구매 Finding (새로 알게 된 것) - git checkout으로 branch뿐만 아니라 깃 버전도 옮길 수 있다. Feeling (느낀 점) - 프론트엔드도 해야할 게 산더미지만 프론트만 하다보면 루즈해진다. 사실 프론트개발자는 프론트만 해도 된다고 주위에서 그러는데.. 그래도 궁금하기도 하고 내 손으로 직접 A - Z 까지 개발해보고싶다. - 리팩터링 챕터 1을 처음 읽었을때는 가벼운 마음으로 읽으면서 왜 굳이 이렇게까지 하나 싶어 공감하지 못했었다. 그치만 혼자 리팩터링 해보려고 5번 넘게 읽어봤더니 눈에 들어온다. 여태까지 읽었던 책들도 몇 번씩 다시 봐야겠다..
코멘트란? 다들 알고있는 댓글기능입니다. 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..