frontend 4

[React] 리액트 초보의 로그인& 회원가입 고군분투: 1. React Hook Form 사용하기

요즘 맡고 있는 프로젝트에서 🚀로그인 & 회원가입 부분을 담당하고 있다.React는 처음인데다 이전에 야매로 만들었던 관통 프로젝트와는 다르게 토큰도 access token과 refresh token을 사용하고, 회원가입시 메일로 인증과정을 거치는 나름 업그레이드 버전 회원가입이다.(그리고 SNS 회원가입 & 로그인도 있다.) 앞으로 올라오는 게시글 시리즈는 리액트 초보의 로그인 & 회원가입 고군분투 과정이다. 나같은 React Newbie들에게 이 글을 바친다. 1. React-hook-form 이 무엇이냐리액트에서 회원가입, 정보기입 등 다양한 form을 사용할 일이 많을 것이다.그때마다 물론 useState 같은 hook을 사용하여 상태관리를 하고, 유효성 검사용 함수를 만들어서 검사를 진행하고 유..

React/회원관리 2023.02.17

<hr> vs 높이 1px <div> vs border 1px

Footer를 만들면서 구분선을 만들어야 할 일이 생겼는데습관적으로 hr을 쓰려다가 문득 div로 만들어도 상관없는거 아니야? 라는 생각이 들었다. 나와 같은 고민을 했던 분들의 대답hr element vs 1px high div vs 1px borderI have an app which has sections, and I need a 1px line between them. It seems I have a choice: An hr element. A div with a 1px border. A div which is one pixel high, and has a background color. ...https://stackoverflow.com/questions/41315990/hr-element-vs..

Html + CSS 2023.01.30

테일윈드(Tailwind)가 무엇일까

어제 UX/UI 특강을 들으면서 처음으로 테일윈드(Tailwind CSS, 이하 테일윈드) 에 대해서 처음 들었다. 부트스트랩의 만족도는 떨어지고, 사용자도 줄어드는 반면 테일윈드 사용자는 꾸준히 증가하고 있고 만족도도 크다는 것!! (근데 왜 싸피에서는 부트스트랩을….알려줘…? 어차피 하루 알려줬지만.. 트렌드에 맞게 소개라도 해주었으면.) Anyway, 트렌드를 알게 된 이상 가만히 있을 수 없다.테일윈드 홈페이지를 참고해서 공식문서를 보면서 빠르게 정체를(?) 파악해보기 시작했다. 1. Utility-First Fundamentals전통적으로 class를 만들고 → class를 한땀한땀 만들었다면 → 테일윈드는 인라인 스타일로 이미 정해져있는 style을 ‘적용’ 만하면 되는 것이다.⇒ 공식문서를 ..

FE 2023.01.06

[Vue] 1. Front-end 란 무엇인가?

1. What is Front-end?사용자에게 보여주는 화면 만들기Web app(SPA)을 만들 때 사용하는 도구SPA : Single Page Application 2. web app?웹 브라우저에서 실행되는 어플리케이션 소프트웨어쉽게 말해, web page가 디바이스 크기로 줄이면 ⇒ 디바이스에 설치된 app처럼 보이는 것 3. SPA?Single Page Application서버에서 최초 1장의 HTML만 전달받아 모든 요청에 대응하는 방식cf) 기존에 Django에서 요청에 따라 페이지별 template을 반환했었다.How? CSR (Client Side Rendering) ↔ SSR (Server Side Rendering)SSR의 단점 : 브라우저는 새로고침을 진행한다.⇒ CSR을 이용하면서..

Vue 2022.11.26