빠르게 성장하는 개발자

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

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

1. Vue를 기억하며어쩔 수 없이 Vue를 기억하게 되는건 나의 첫 사랑이 아니라 처음으로 배운게 Vue라서.Vue에서도 부모 → 자식 컴포넌트로 객체를 전달 할 때 ‘props’ 라고 사용했다.React에서도 똑같다. function Welcome(props) { return Hello, {props.name}; } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ; root.render(element) 2. Vue와의 큰 차이!Vue는 props로 받는 자식쪽에서 반드시 prop의 data type을 지정해주었다.하지만 React는 그럴 필요가 없다.⇒ 이게 단점이 될 수도 있는 것이 data 형식을..

1. 컴포넌트에 대한 이해React 2번째 글에 컴포넌트에는 ‘함수형’ 컴포넌트와 ‘클래스형’ 컴포넌트가 있다고 작성했었다.구분하는 방법은 간단하다! 그냥 class로 시작하면 컴포넌트 클래스이고, function으로 시작해서 return이 있으면 함수형 컴포넌트 이다.2. State일반적으로 함수형 컴포넌트에서는 state가 없는 컴포넌트 라고 알려져 있다.하지만, HOOK 의 등장으로 달라졌다!(나는 노마드코더님의 강의를 들으면서 진행했는데, 이분은 클래스 컴포넌트를 아예 알려주지도 않았다. ) 함수형 컴포넌트에서 state를 사용하려면 가장 기초가 되는useState()라는 훅을 이용하면 된다.const [counter, setValue] = useState(0); const onClick = ()..

1. Vue 처럼 React 에서도.맨 처음 vue를 배울 때, html의 script부분에 링크를 달아서 CDN방식으로 사용한 경험이 있다.React도 처음에 그렇게 배웠다.vue-cli방식으로 넘어간 것처럼, react도 create-react-app이라는 방식이 있다.npx create-react-app 의 형식으로 만든다.2. 장점?컴포넌트의 분리예전에 CDN방식을 사용한 것과 다르게, 목적에 따라 js파일을 분리해서 사용할 수 있다. css의 사용니꼴라스 선생님이 “super cool 😎” 한 부분이라고 강조한 것이 있다.바로 평소에 css에 class를 사용했으면 중복되지 않기 위해서 꼭 클래스 이름을 기억해야 했다.(클래스 이름 짓는 것도 일이다.)하지만 React에서는 다르다~App.mod..

1. Element 리액트 공식문서에는 Element의 정의에 대해서 이렇게 서술한다. 엘리먼트는 React 앱의 가장 작은 단위입니다. const element = Hello, world; React 엘리먼트는 일반 객체이며 불변(immutable) 하다. 즉, 한 번 생성된 이후에는 자식이나 속성을 변경 할 수 없다. 만약 내용을 변경하고 싶다면, 새로운 객체를 만들어서 rendering 하는 방식으로 사용한다. const root = ReactDOM.createRoot( document.getElementById('root') ); const element = Hello, world; root.render(element); 2. Component 그렇다면 컴포넌트는 무엇일까? Vue에서 사용한 것 ..

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을 이용하면서..