기존 React-Router-Dom v5 버전에서 v6 버전으로 업데이트가 되었습니다. Next.js를 많이 사용하다보니 업데이트된지도 몰랐네요. 우선 리액트 라우터를 설치하기 전 v6 버전의 경우 리액트 16.8 이상 버전에서 사용해야 한다는 점 말씀드립니다. 1. Install > npm i react-router-dom 2. BrowserRouter // src/index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { BrowserRouter } from 'react-router-dom' ReactDOM.render( , document.getElementById('roo..
2022.03.11 2
리덕스는 무엇인가? 공식 문서에는 "액션"이라는 이벤트를 사용해 어플리케이션의 상태를 관리하고 업데이트하기 위한 패턴 및 라이브러리로 설명되어 있다. 즉, 상태가 예측 가능한 방식으로 데이터를 업데이트할 수 있도록 보장하는 규칙과 전체 어플리케이션에서 사용해야 하는 중앙 저장소 역할을 한다고 한다. 리덕스는 리액트 뿐만 아니라 뷰(Vue)나 앵귤러 등 자바스크립트를 사용하는 프레임워크는 모두 적용할 수 있는 라이브러리로, 리액트에 State Props Drilling을 방지하고 컴포넌트 단에서 쉽게 State에 접근 할 수 있다. 상태 예측이 가능한 방식으로 업데이트가 된다고 소개되어 있는데, 이 말은 저장되는 State의 규칙이나 방식을 사용자가 직접 정의하기 때문이다. 리덕스를 왜 사용해아할까? 하나..
2022.03.06
오늘은 리액트와 리액트 라우터를 복습해보면서 기존 Framer-motion을 사용해 구현했던 페이지 이동 애니메이션을 구현해보았습니다. 페이지 이동 애니메이션이나 컴포넌트 마운트, 언마운트 애니메이션으로 부를 수 있겠습니다. 리액트는 가상돔을 사용해 화면을 빠르고 부드럽게 렌더링해주는 장점이 있는데요. 리액트 라우터를 사용한다면 전체 페이지 이동간 깜빡임과 전환 속도는 눈깜짝할 사이에 바뀝니다. 물론 빠른것도 좋지만, 페이지가 전환될 타이밍에 약간의 애니메이션 효과를 줘서 꾸며줄 수 있습니다. 상단 네비게이션으로 페이지를 이동하는데, 이동할 때마다 슬라이드 업/다운 효과를 내줍니다. 기존 리액트 라우터가 v6로 업데이트 되면서 사용하던 컴포넌트가 조금 달려졌습니다. App.js import './App...
2022.03.03
2020년도 맛보기로만 경험했던 Vue.js를 다시 공부해보려 합니다. 벌써 Vue3 버전까지 업데이트 되었고 아마 이전 버전에서 CDN으로만 스크립트를 추가해 배웠던 기억이 나는데요. 새로 추가된 기능도 있고 알아보니 3.0 버전이라고 이 버전만 배우면 되는게 아니더라구요. 2.0 부터 다시 처음부터 다시 배워야합니다. 아마 학원에서는 Todo List를 맛보기로 구현해보고 저는 바로 리액트로 갈아탔습니다. 로고 때문인지, 처음 느껴보는 라이브러리 때문인지는 모르겠지만 Vue.js도 나름 독특한 매력이 느껴졌습니다. 지금 뷰3의 경우 공식문서 한글화가 안되어 있어 조금은 불편하지만 2.0 부터 다시 시작하면서 진행해보겠습니다. 1. Vue-CLI 설치 > sudo su > password 입력 > n..
2022.02.27
꾸준함이 생명 꾸생의 DevLog는 개발 관련 내용을 기록하는 목적의 블로그지만 가끔은 관심사나 일상적인 내용을 포스팅하고 싶었습니다. 여러 이유로 누구에게나 힘들었던 2021년을 지나 2022년 저에게 있어 가장 큰 이슈로, 프론트엔드 개발자 포지션으로 취업하게 되었습니다. 짝짝짝👏🎉👏🎉👏 2020년 후반기부터 취업 준비를 했었지만 결과가 좋지 않아 지금까지 프론트엔드 공부와 포트폴리오를 만들면서 다양한 일들을 했었습니다. 아르바이트를 하면서 워드프레스, 티스토리 블로그, 페이스북 페이지를 운영하면서 광고 수익으로 용돈벌이도 했었고 대략 1년 전 워드프레스 블로그를 접으면서 페이스북 페이지도 함께 처분했습니다. 지금은 티스토리 블로그만 남아있는 상태입니다. 개발로는 쿠팡 파트너스를 활용해서 수익을 노려..
2022.02.26
firebase storage를 게시판 이미지 서버로 사용하고 있는데요. 게시판에 이미지를 업로드하고 글을 삭제하면 글 DB는 제거되지만 이미지는 이미지 서버에 그대로 남아있어 쓸데없는 용량만 차지하게 됩니다. 그래서 사용하지 않는 이미지를 찾아내 이미지 서버에서 삭제하는 코드를 작성해 보았습니다. Node.js 환경에서 진행합니다. 1. 전체 게시글 본문 불러오기 //async function const allPost = await Post.find({}, { content : true }); 게시판 DB는 MongoDB를 사용하고 있어 전체 게시글의 내용만 가져옵니다. content는 html 문자열로 저장되어 있습니다. 2. 스토리지 이미지 불러오기 import { initializeApp } fr..
2022.02.06
이전 Toast Editor와 마찬가지로, 리액트 환경에서의 무한 스크롤(Infinite Scroll)도 개인적인 포트폴리오에서 구현한 내용을 바탕으로 포스팅을 해보려 합니다. 무한 스크롤(Infinite Scroll) 이란? 무한 스크롤은 개인적으로 UI/UX측면에서 가장 좋아하는 페이징 기법입니다. 필자의 경우 고등학생 시절 페이스북에서 처음 경험하게 되었고 개인적인 생각으로 지금보다 미래에 데스크톱 환경에서는 무한 스크롤이 필수나 더욱 대중화되지 않을까 생각됩니다. 왜냐하면 젊은 세대일수록 컴퓨터보다 스마트폰의 경험이 익숙하기 때문인데요. 유튜브, 트위터, 인스타, 페이스북 등 방대한 컨텐츠를 효과적으로 노출시키기 위해 주로 채택하고 있습니다. 하지만 무한 스크롤 선택은 무조건 적인 정답이 아니라는..
2022.02.04
개인적인 포트폴리오를 만들며 간략히 사용했던 경험담으로 글을 작성해봅니다. DB 저장은 MongoDB를 사용했으나 관련 내용은 포함하지 않으니 참고해주세요. 먼저 위지윅(WYSIWYG) 에디터로 토스트 에디터를 선택한 이유부터 시작하겠습니다. TOAST Editor 선택 이유 공식 문서의 친절함 (공식문서) MIT Lisence React 지원 여부 Brower Support 단순한 UI 계속되는 업데이트 Next.js 프로젝트에서 사용했기 때문에 리액트 지원 여부를 먼저 체크했고 개발 시간 단축을 위해 중요한 공식 문서의 친절함도 중요하게 봤습니다. MIT 라이센스는 필수겠죠. 다음으로는 여러 브라우저의 지원 여부와 단순한 UI가 있었습니다. 알고 보니 NHN이라는 친숙한 기업에서 만든 라이브러리임을 ..
2022.01.31
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev