썸네일 React Query 사용기 안녕하세요! 오늘은 제가 실무에서 쓰고 있는 react-query에 대해 글을 써볼까 합니다 지금 실무에서 쓰고는 있지만 늘 같은 형태로만 쓰고 있고, 아무것도 모른 상태에서 다른 동료가 작성한 코드를 토대로만 공부(?) 했기 때문에 모자른 부분이 굉장히 많아서... 공부 겸 내용 정리를 해보려고 합니다 블로그 글 중에 react-query에 대해 잘 정리해주신 분이 계셔서 링크 남깁니다 https://maxkim-j.github.io/posts/react-query-preview React-Query 살펴보기 React의 Server State 관리 라이브러리 React Query를 살펴봅니다. maxkim-j.github.io 1. react-query와 redux 차이점 사실 저는 redux만 알고..
썸네일 React Hook Form | 내가 실무에서 쓰는 법 안녕하세요. 오늘은 정말! 유용한 라이브러리 React Hook Form에 관해 기본적인 내용들을 정리해보려고 합니다 이젠.. 이거 없으면 개발하기 정말 귀찮을 정도로... 너무 유용한 라이브러리입니다 거의 리액트 개발에선 필수가 아닐까 싶을정도! 공홈 자체에서도 한국어를 지원해주고 있지만 필드가 많아지거나 하면 복잡해지는게 꽤나 있더라고요 그래서 제가 실무에서 써먹던 방법도 담아볼까합니다 공홈의 있는 모든 내용들을 다루진 않고 제가 실무에서 썼던 API 위주로 설명하겠습니다 1. React Hook Form 이란? 폼, 양식을 만들때 사용하는 라이브러리 해당 라이브러를 사용하지 않더라면? import React, { useState } from 'react'; const InputSample = () ..
썸네일 React | Hook 정리 + 18 버전 새로운 Hook 안녕하세요. 오랜만에 블로그에 글을 써보네요! 제가 개인 노션에서 계속 써왔던 내용들을 차근차근 블로그로 옮겨볼까 합니다. 그 중 예~전에 열심히 정리했던 react hook에 관한 내용부터 쓰려고해요 근데 저도 글을 정리하면서 검색해보니.. 새로운 hook들이 나왔더라고요! 저도 맨날 쓰던것만 쓰다보니 새로운 hook을 알아본다거나 쓸 일은 없었는데, 이 참에 저도 새로운 hook을 알아보고 기회가 될때마다 써보려고 합니다 혹시 내용이 틀리다면 댓글 부탁드립니다 (전에 써둔 내용이라 틀린 부분도 있을 듯 해요🙄) 1. 앞서 알고있어야 할 것들 1-1. 리액트가 마운트 시에 하는 작업들 props로 받은 값을 컴포넌트의 로컬 상태로 설정 외부 API 요청(REST API 등) 라이브러리 사용 (D3, V..
썸네일 react-router-dom v6 업데이트 후 달라진 점 (ft. Prompt 창 띄우는 법) 불과 몇 달전만 해도 문제없이 잘 쓰고 있었던 react-router-dom 리액트 공부를 다시 시작하면서 router 파트를 복습삼아 진행했는데 분명 그대로! 평소에 썼던거처럼 작성했는데 에러가 뜨는거다! 보니까 그 사이에 v6으로 업데이트 되었던 것... 생각보다 너무나도 많은게 달라져서 기록해보려고 합니다 1. Switch -> Routes 네이밍 변경 여러개를 감싸는 부모 컴포넌트 네이밍이 변경됨 Switch란? 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜줌 (아무것도 일치하지 않으면 Not Found 페이지를 구현할 수 있었다) // v5 // v6 2. exact 옵션 삭제 기존에 루트 ('/') 페이지 같은 경우 모든 페이지들이 다 불러오는 현상이 있었는데..
썸네일 React 아키텍쳐, 디자인 시스템, 파일 구조에 대한 고찰 반년일기 사이드 프로젝트를 진행하면서 리액트에 대한 한계점에 매일 매일 도달했다. 무엇보다 퍼블리싱과 기능 구현을 동시에 진행하려는 욕심에, 대충 짜놓았던 디렉토리 구조가 무너지는 느낌, 가뜩이나 어수선한 프로젝트가 더 어수선해지는 기분이었다. 그때 현 회사 사수가 디자인 시스템에 대해 꼭 공부 할 필요가 있다고해서 무작정 코드부터 작성하려는 급한 마음을 잠시 내려놓고, 아키텍쳐, 디자인 시스템을 기반으로 리액트 디렉토리 구조를 어떻게 하면 좋을지에 대해 공부를 해보려고한다 1. 현재 상태 아래 이미지는 현재 플젝 리액트 디렉토리 구조다 가장 크게 client, db, doc, server로 나눈 상태고 나는 client를 담당하고 있다 client의 핵심 상위 폴더는 assets, components,..
썸네일 경고! 대소문자만 다른 이름을 가진 여러 모듈이 있습니다 | React, typescript, webpack ERROR 회사 업무 중 리액트, 타입스크립트 기반으로 퍼블리싱 작업을 하고 있었던때 입니다 제 파일을 받아 프론트 개발을 하던 사수님이 경고가 뜨는데 알아보라고 하시더군요 그때 해결한 문제를 공유하려고 합니다 1. 경고 멘트 이 내용을 그대로~ 긁어서 번역기를 돌려보니 대소문자만 다른 이름을 가진 여러 모듈이 있습니다. 라고 번역되더라구요 기준은 ModalLayout 컴포넌트 같고, ModalLayout 컴포넌트를 사용한 다른 컴포넌트들 MarketSearchModal, POICategoryModal과 비교해봐~ 라는 말 같습니다 ModalLayout 컴포넌트의 디렉토리 구조는 이렇게 되어있습니다 2. ModalLayout 컴포넌트를 사용중인 다른 컴포넌트들 이렇게 ModalLayout 컴포넌트를 inport해서..
썸네일 로그인 시 header에 Authorization이 안 뜨는 현상 | React, JWT, Spring Boot 오늘은 이번 사이드 프로젝트에서 동료랑 오지게 삽질한........ 에러에 대해 기록하려고 합니다 문제를 궁극적으로 해결했다기 보다는 결국 조금 수정해서 다른 방식으로 우회(?) 했습니다 혹시... 제 코드를 보고 제가 잘 못 알았거나 이유를 아신다거나 하면 설명 부탁드립니다😅 1. 로그인 방식 React 로그인이라고 검색하면 상위에 뜨는 벨로그 게시물입니다 https://velog.io/@yaytomato/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%90%EC%84%9C-%EC%95%88%EC%A0%84%ED%95%98%EA%B2%8C-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%B2%98%EB%A6%AC%ED%95%98%EA%B8%B0 🍪 프론트에서 안전하게 로그인 처리하..
썸네일 ✍ 공부하기 | switch 조건문 안녕하세요! 이번 내용은 조건문 switch에대해 다뤄볼겁니다 아주 기본적인 내용을 다루고 있으며 내용 원본은 모던 자바스크립트 입니다 👉 주소 switch문 ko.javascript.info 저는 다시 한번 제대로 기억 하기위해 위 원본 내용을 그래도 쓰는겁니다 자세한 내용은 원본 사이트에서 확인해주세요! switch문 복수의 if 조건문은 switch문으로 바꿀 수 있습니다 (여기서 모든 의미를 다 함😆 switch를 쓰는 이유는 이 때문이다!!!!) switch문은 특정 변수를 다양한 상황에서 비교할 수 있게 해줍니다 문법은 아래와 같습니다 switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x ===..
썸네일 ✍ 공부하기 | 반복문 (loop) 안녕하세요! 오늘은 코딩하면서 정말정말 많이 쓰는 반복문에대해 내용을 정리 해볼까해요 참고한 원본은 모던 자바스크립트입니다 👉 주소 while과 for 반복문 ko.javascript.info 거의 내용 그대로 복붙한거나 다름 없어요 😊 다시한번 머리속에 상기시키기 위해서, 그리고 무엇보다 제가 몰랐던 사용법이 굉장히 많았어서 정리합니다! while 반복문 while 반복문의 문법은 다음과 같습니다 while (condition) { // body } 저~기 body가 반복문 본문이라고 불리는 곳이며, 반복 하고싶은 코드를 작성해 넣으면 됩니다 condition(조건)이 truthy(참과 비슷한)이면 반복문 본문(body)의 코드가 실행됩니다 아래 예제를 봅시다! let i = 0; while (i < ..
썸네일 HTML 기초 | html anti-pattern 안티 패턴, 나쁜 습관 이번 내용은 CSS 안티패턴에 이어서 HTML 안티패턴에대한 내용입니다 (CSS 안티패턴 내용과 함께 보면 굉장히 좋습니다 👉 이동) 제가 실무에서 지적 받았던 내용도 함께 작성했고 HTML이다보니 CSS와 연관된 내용이 많습니다! 1. 는 문서 하단에 작성한다 스크립트 태그는 태그 끝나는 부분 바로 위에 작성합니다 정말정말정말x1000000 기본적인 내용인데 제가 국비학원 다닐때 강사님이 에 작성하라고 알려줬습니다....ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 그래서 스크립트 태그가 에 들어가 있는걸 보고선 매우 혼란스러워 했죠.... 2. 외부 리소스 사용 시 URL을 직접 사용하지 않는다 이건 CSS에서 웹폰트를 쓰지 말라는 내용과 동일합니다 외부 URL을 직접 사용하지 않고 무조건 다운로드해서 불러오는걸로!!! 3. ..
썸네일 🏃‍♀️React 컴포넌트 | LifeCycle (라이프 사이클, 생명주기 메서드) 안녕하세요 오늘은 리액트의 클래스형 컴포넌트에서만 사용할 수 있는 LifeCycle에대해 내용을 정리하려고 합니다 벨로퍼트님 강의를 토대로 제가 여기저기 살을 덧붙혀서 작성을 하려고 합니다! 1. React LifeCycle란? React에서 컴포넌트는 여러 종류의 "생명주기 메서드"를 가지며 이 메서드를 오버라이딩(상속하여 재정의)하여 특정 시점에 코드가 실행되도록 설정할 수 있습니다 출처:https://ko.reactjs.org/docs/react-component.html 💥 여러분! 이 LifeCycle은 클래스형 컴포넌트에만 해당되는 내용입니다! (사실 저는 헷갈리는게 어디서는 LifeCycle API라고 하고 어디서는 LifeCycle Method라고 하고.. 어디는 LifeCycle Even..
썸네일 CSS 기초 | CSS guidelines, 나쁜 CSS 습관 안녕하세요! 요번 포스팅은 CSS 기초를 다뤄볼까합니다 SI 회사에 다니면서 CSS가 얼마나 말썽을 피우는지 절실하게 느꼈습니다 그리고 꼼꼼한 사수 밑에 작업하다보니 제가 웹표준과 웹접근성의 어긋나 트릭을 사용한 몇몇개도 알게되었고.. ie 호환성 이슈... (진짜 빡친다) 이미 구축 된 서비스에 일부분을 만들어 붙칠 때의 CSS 문제... 등등 원래 가장 쉬우면서도 가장 말썽이라는게 CSS라고는 하지만.... 제가 잘 몰랐던게 꽤나 많구나를 느꼈습니다 그래서 MDN에서 제시하는 CSS 가이드라인과 제가 실무에서 느낀 가이드라인을 정리해서 써볼까합니다 MDN 내용은 아래 링크에서 확인 가능합니다 👉 MDN이 제시하는 CSS 지침 👈 CSS guidelines - The MDN project | MDN T..
라이브러리 브랜드 그룹 | Hi, Kyung-a log

티스토리툴바