profile
나도 프론트엔드 개발자할래
태그 목록
전체보기 (235)JavaScript(44)React(38)자바스크립트(28)next.js(27)vue.js(26)vue(25)vue3(22)(14)리액트(13)Firebase(9)typescript(8)method(8)타입스크립트(8)팀프로젝트 일지(8)html(7)CSS(7)ReactHooks(6)array(6)파이어베이스(6)mysql(5)class(4)emotion(4)라우터(4)useState(4)메소드(4)useRef(4)reject(3)객체(3)vue router(3)promise(3)mqtt(3)github(3)Props(3)jquery(3)concat(3)sql(3)클래스(3)배포(3)new(3)resolve(3)object(3)배열(3)MySQL Workbench(3)v if(3)gh-pages(3)reducer(2)select(2)Then(2)vue-router4(2)팀프로젝트 개인회고록(2)쿼리(2)editor(2)router(2)생성자함수(2)image(2)query(2)animation(2)input(2)Dispatch(2)프로토타입(2)action(2)slice(2)FROM(2)WHERE(2)useReducer(2)Sort(2)Map(2)runtime(2)런타임(2)this(2)promise.all(2)algorithm(2)조건문(2)스코프(2)Prototype(2)error(2)await(2)TOAST UI(2)nested Routes(2)토픽(2)catch(2)컴포넌트(2)find(2)@property(2)ajax(2)클로저(2)img(2)i18next(2)topic(2)SSR(2)component(2)splice(2)깃허브(2)type(2)filter(2)애니메이션(2)number(2)async(2)비동기(2)컴파일(2)프로퍼티(2)styled component(2)정렬(2)indexOf(2)split()(2)reverse(2)data(2)배열 메소드(2)deployment(2)pagination(2)github pages(2)String(2)알고리즘(2)mac(1)키값(1)이미지(1)프로미스(1)boolean(1)lifecycle(1)v-show(1)finally(1)Math.pow()(1)findIndex(1)통신(1)assign(1)memoization(1)구독(1)인스타(1)나머지 매개변수(1)onWheel(1)try(1)floating banner(1)databinding(1)noEmitOnError(1)연산자(1)Math.round(1)instanceof(1)조건부 연산자(1)Module(1)Read(1)codePointAt(1)라우팅(1)Spread Syntax(1)이미지 업로드(1)useRouter(1)getServerSideProps(1)lexical environment(1)text(1)getDocs(1)값에 의한 복사(1)라이프사이클(1)데이터(1)동적언어(1)null(1)oracle(1)Recoil(1){}.description(1)sessionStorage(1)JavaSpring(1)ts(1)서버(1)useEffect(1)JOIN(1)PostgreSQL(1)bit(1)후기(1)conf(1)parseFloat(1)parseInt(1)tapWindow(1)De Morgan's Law(1)Math.ceil(1)while(1)in(1)jsp(1)바벨(1)includes()(1)&&(1)page-block(1)인스타그램(1)에이잭스(1)콜백 지옥(1)login(1)GoogleLogin(1)스크롤이벤트(1)offset(1)unshift(1)프록시(1)CSSgram(1)CREATE(1)div(1)meta tag(1)keyframes(1)hoisting(1)일곱난쟁이(1)transpile(1)VOID(1)참조에 의한 복사(1)deploy(1)Parsing error: Cannot find module 'next/babel' Error(1)Math.sqrt()(1)업로드(1)prototype chain(1)공백(1)문자열(1)Math.PI(1)any(1)설치(1)반복문(1)switch(1)기본타입(1)rbenv(1)scroll(1)vue2(1)검색 엔진(1)react-pdf(1)v-bind(1)회원가입(1)hexagon(1)repeat(1)v-on:input(1)Vue 프로젝트 생성(1)계산된 프로퍼티(1)Math.min(1)10진수(1)Rest parameters(1)bootstrap(1)iOS(1)noImplicitAny(1)CSS in JS(1)data binding(1)foreach(1)TweenMax(1)v-for(1)regex(1)컴퓨티드 프로퍼티(1)interface(1)as(1)인터페이스(1)Math.floor(1)when(1)delete(1)리액트 쿼리(1)key(1)Signin(1)mosquitto(1)instagram(1)callback Hell(1)v model(1)watch(1)삼항연산자(1)이슈(1)타입(1)react-query(1)fromentries(1)스타일(1)lastIndexOf(1)entries(1)eventhandler(1)broker(1)addDoc(1)스크롤 애니메이션(1)router.query(1)values(1)모달창(1)State(1)useContext(1)useMemo(1)불리언 대수(1)함수(1)setInterval(1)setTimeout(1)boolean algebra(1)VirtualDOM(1)event bubbling(1)axios(1)tofixed(1)Enum(1)fromCodePoint()(1)메타(1)객체 구조분해(1)styled components(1)전역 심볼(1)어휘적 환경(1)animate()(1)드모르간의 법칙(1)별칭(1)Insta(1)shift(1)MQTT 통신(1)promise.race(1)end(1)Context API(1)React-slick(1)reduce(1)렌더링(1)메타데이터(1)$.ajax()(1)upload(1)비트(1)전역변수(1)localstorage(1)Pop(1)Timestamp(1)에러(1)필터(1)Metadata(1)binding(1)styledComponent(1)issue(1)overloading(1)react-reveal(1)transition(1)트랜지션(1)rerendering(1)타입 체크(1)Overriding(1)meta(1)페이지네이션(1)구조분해(1)word(1)CustomEvent(1)type check(1)Table(1)readonly(1)setState(1)tsconfig(1)for_in(1)Fetch(1)word-break(1)심볼(1)v-html(1)SQL Server(1)Cross-Cross Origin Resource Sharing(1)fufilled(1)style(1)rewrites(1)substr(1)isNaN(1)v-else-if(1)toString(1)MySQL Wrokbench(1)바인딩(1)onClick(1)옵셔널 처리(1)배열 구조분해(1)cookie(1)computed property(1)install(1)변수(1)이벤트 버블링(1)2진수(1)babel(1)rendering(1)v else(1)Math.max()(1)Math.random(1)safari(1)MySQL Worckbench(1)데이터바인딩(1)GSAP(1)페이징처리(1)useMutation(1)와일드카드(1)scrollmagic(1)ES6(1)구조분해 할당(1)참조타입(1)Date(1)Db2(1)프로토타입 체인(1)optional(1)구글 로그인(1)상태관리(1)오버라이딩(1)emit(1)closure(1)Rejected(1)trim()(1)modal(1)tuple(1)tap(1)생성자(1)심볼형(1)case(1)never(1)do while(1)육각형(1)contextAPI(1)scope(1)apply(1)call(1)룰렛(1)sop(1)html5(1)tagged union(1)전개 구문(1)Object.getOwnPropertySymbols()(1)텍스트(1)'A'를 '#'으로(1)v-on(1)(1)routing(1)로그인(1)signup(1)undefined(1)이모션(1)크로스브라우징(1)src(1)Reflect.ownKeys()(1)중앙(1)Carousel(1)usequery(1)destructuring(1)destructuring assignment(1)cors(1)타임스탬프(1)ArrayType(1)ruby(1)position(1)math(1)slick-slider(1)색인(1)stricNullChecks(1)substring(1)정적언어(1)keys(1)proto(1)subscribe(1)Math.abs()(1)Symbol.for(1)커스텀이벤트(1)조건(1)WILDCARD(1)(1)부트스트랩(1)캐러셀(1)제이쿼리(1)동기(1)absolute(1)javacsript(1)Symbol.keyFor(1)schema(1)GET(1)POST(1)플로팅 배너(1)order_by(1)push(1)compile(1)데이터 바인딩(1)toast-editor(1)파이베이스(1)scrollTop()(1)워크벤치(1)stopPropagation(1)Symbol(1)지역변수(1)개인포트폴리오(1)엑시오스(1)server(1)bind(1)isArray(1)Same Origin Policy(1)vue cli(1)reduceRight(1)호이스팅(1)조건부 렌더링(1)QoS(1)Proxy(1)react router dom(1)

v-if와 v-show의 차이

v-if는 "실제" 조건부 렌더링이다. 블록 내 이벤트 리스너와 자식 컴포넌트가 제대로 제거되거나 재생성되기 때문이다.또한 v-if는 초기 조건이 false면 아무 작업도 일어나지 않는다. 조건이 true가 될 때까지 렌더링이 일어나지 않는다.이에 비해..

3일 전
·
0개의 댓글
·
post-thumbnail

toast-editor 이미지 업로드 하기..

기존의 사용했던, 파이어베이스 이미지 업로드 로직을 재사용해서, 기존의 toast-editor에서 제공하는 이미지 업로드는 base64의 형식에서, url 업로드 형식으로 바꿔주었다..

2023년 3월 17일
·
0개의 댓글
·
post-thumbnail

react-query를 써보자..

React Query는 React 애플리케이션에서 데이터를 가져오고 관리하는 라이브러리이다. 이를 사용하면 API 호출을 간단하게 처리할 수 있고, 캐싱과 자동 업데이트 기능을 통해 데이터를 더 효율적으로 관리할 수 있다..

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

Pagination을 해보자..

페이징 처리를 할 때, 일반적으로 백엔드에서 다음과 같은 정보를 제공한다..

2023년 3월 13일
·
0개의 댓글
·
post-thumbnail

Next.js) getServerSideProps를 사용해보자.. feat. Firebase

서버사이드 렌더링이란, 클라이언트 대신 서버에서 HTML 코드를 생성하고 반환하는 방식으로 웹페이지를 렌더링하는 방식이다..

2023년 3월 11일
·
0개의 댓글
·
post-thumbnail

Firebase 정렬에러..

아래의 함수로 불러오는 데이터의 timestamp 값을 기준으로 정렬하려는데 에러가난다..

2023년 3월 9일
·
0개의 댓글
·

Next.js router.query가 undefined일 때..

router.isReady는 라우터 필드가 클라이언트 측에서 업데이트되고 사용할 준비가 되었는지 여부를 확인

2023년 3월 8일
·
0개의 댓글
·
post-thumbnail

Next.js에서 toast editor에 서버에서 불러온 값을 넣어보자..

서버에서 불러온 데이터를 state에 담고 에디터의 옵션인 initialValue에다음과 같이 처리했는데 불러온 데이터가 뜨지를 않는다..

2023년 3월 7일
·
0개의 댓글
·
post-thumbnail

Next.js에서 toast editor를 사용하자..

우선 toast-ui editor는 ssr을 지원하지 않는다. 따라서 Next.js에서 toastu-ui를 설치하고, import해서 사용하면 에러가 날 것이다. Next.js에서는 ssr을 하지 않게 하는 좋은 기능을 제공하는데 바로 Dynamic이다.

2023년 3월 7일
·
0개의 댓글
·

Uncaught TypeError: Cannot read property 'split' of undefined

api로 받은 데이터인 userInfo가 undefined인데 split을 실행해서 생기는 에러이다.

2023년 3월 2일
·
0개의 댓글
·
post-thumbnail

Firebase 조건으로 해당 문서의 데이터 가져오기

Firebase를 이용하여 해당 게시글을 클릭 했을 때, 해당하는 게시글의 데이터를 가져와보자!

2023년 3월 2일
·
0개의 댓글
·
post-thumbnail

Firebase timestamp 변환

Firebase timestamp 변환

2023년 2월 27일
·
0개의 댓글
·
post-thumbnail

Firebase 이미지 업로드, 불러오기

Firebase를 이용하여 이미지를 업로드 하고, 불러와 보자..

2023년 2월 24일
·
1개의 댓글
·
post-thumbnail

Firebase 등록, 불러오기 feat. 날짜 순

firebase를 이용해서 데이터를 등록하고, 가져와보자.. 물론 등록순서대로!

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

Firebase 회원가입

Firesebase를 이용해서 회원가입을 만들어 보자..

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

Firebase 로그인, 구글로그인

firebase 설정부터 로그인까지 구현해 보자 + 구글 로그인도

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

i18next (다국어 지원) 사용법..

i18next를 사용해서 다국어를 지원해 보자..

2023년 2월 7일
·
0개의 댓글
·

Module not found: Can't resolve 'react-i18next' 문제 해결

i18n를 설치 했음에도 yarn dev를 할 때마다 Module not found: Can't resolve 'react-i18next'라는 에러가 발생하고, 다시 설치하고를 반복 했었다.

2023년 2월 7일
·
0개의 댓글
·
post-thumbnail

v-for 요소 hover 시, 요소 하나만 오버레이 띄우기

v-for 요소 hover 시, 각각의 요소 오버레이 띄우기

2023년 1월 19일
·
0개의 댓글
·