티스토리

남주는 IT블로그

검색하기

블로그 홈

남주는 IT블로그

namhandong.tistory.com/m

https://github.com/jun7867

구독자: 7

방명록 방문하기

주요 글 목록

React Hook Form 가이드 기존에 React Hook Form을 쓰면서도 잘 모르고 썻던 기능들을 정리하고 가이드 하고자 합니다. 공식문서 시작하기 시작하기 Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com API API 설명서 API 설명서 Performant, flexible and extensible forms with easy-to-use validation. react-hook-form.com React Hook Form이란? React에서 form의 validation을 빠르고 쉽게 도와주는 라이브러리이다. 전체 폼이 리랜더링 되지 않으면서도 각각의 입력값 변화를 관찰할 수 있기에 성능도 빠르고 의존성 없이 .. 공감수 0 댓글수 0 2022. 8. 2.
TDD란? React Testing Library 사용법 TDD 왜 TDD를 해야 할까? 테스트 코드가 없는 프로젝트의 경우 무엇을 개발해야 하는지 명확히 모른채 개발을 하게 되며 추후 코드 변경에 따른 버그를 예측할 수 없다. TDD란? TDD는 문제를 먼저 정의한 후 문제의 해답을 찾아가는 방식이다. 실패(Red), 성공(Green), 리팩토링(Refactoring) 이라 불리는 3단계를 반복한다. 실패: 문제 정의 단계로, 테스트 코드를 실제 코드보다 먼저 작성 성공: 문제 해결 단계로, 테스트를 통과할 수 있는 최소한의 코드를 작성 리팩토링: 불필요하고 비효율 적인 코드를 개선 문제 정의를 위한 Tip (뱅크샐러드 - 테크 스펙) 뱅크샐러드의 특별한 스펙, '테크 스펙' | 뱅크샐러드 테스트 범주 테스트 코드는 내가 만든 기능의 주요 핵심이 무엇인지 파.. 공감수 0 댓글수 0 2022. 4. 25.
React에서 Styled Component 사용법 Styled-Components 사용법 특징 자바스크립트 파일 안에 CSS를 작성하는 형태 (emotion과 대체 가능) .css파일을 따로 만들지 않아도 된다. props나 자기 자신 특정 가능. 환경 설정 $ yarn add styled-components 예제 코드 import React from 'react'; **import styled, { css } from 'styled-components';** const Box = styled.div` /* props 로 넣어준 값을 직접 전달해줄 수 있습니다. */ background: **${props => props.color || 'blue'};** padding: 1rem; display: flex; `; const Button = styled.. 공감수 0 댓글수 0 2022. 4. 22.
React 상태관리 Mobx 정리 및 사용법 Mobx 개념 정리 및 사용법 1-1. MobX의 주요 개념 1) Observable State (관찰 받고 있는 상태) 상태의 변경이 잇으면 Mobx에서 관찰하고 있다가 어떤 부분이 바뀌었는지 파악한다. 2) Computed Value (연산된 값) 기존의 상태값과 다른 연산된 값에 기반하여 만들어질 수 있는 값으로 성능 최적화를 위해 사용된다. 어떤 값을 연산할때, 연산에 기반되는 값이 바뀔때만 새로 연산하고, 바뀌지 않았다면 기존의 값을 사용한다. (vue에서 computed와 비슷한거같음..) 3) Reactions (반응) 값이 바뀜에 따라 해야 할 일을 정한다. 즉, observable state의 내부 값이 바뀌면 따로 설정해둔 할 일을 실행한다. 4) Actions (액션; 행동) 상태에 .. 공감수 0 댓글수 0 2022. 4. 22.
React 프로젝트 Ionic Capacitor 사용하여 Android, Ios Build하기 Android, Ios App 배포를 위한 Capacitor 사용법 및 빌드 적용 방법에 대해서 정리한 글입니다. 제가 담당하고 있는 프로젝트는 추후 앱으로도 출시하기 위해 처음부터 Ionic 환경으로 시작한 웹뷰 형식의 웹사이트입니다. 이 글에서는 신규 프로젝트를 Ionic으로 생성하는 방법 보다는 기존에 Ionic으로 작업했던 React 프로젝트를 Android, Ios로 Build하는 작업에 집중하겠습니다. Ionic이란? Ionic - 웹앱을 네이티브앱으로 래핑하는 개발 방식을 사용합니다. Ionic UI Frameworks : 모바일 UI + 웹UI 쉽게 도와주는 UI 컴포넌트들을 제공 Ionic Native : Capcaitor 나 Cordova 플러그인을 활용해 쉽게 디바이스 제어 기능 제공.. 공감수 0 댓글수 0 2022. 4. 22.
React Query와 상태관리 React Query와 상태관리 회사에서 새로운 프로젝트 진행을 하게 되었는데 기존 프로젝트에서 사용하던 Store에 대해 고민하였고 Store에서 API를 호출하는 과정에 Store를 이렇게 사용하는게 맞나 하는 의문점이 생겼습니다. 그 후 React Query에 대해서 알게 되었고 학습하고자 '우아한테크세미나 React Query' youtube와 배민 기술 블로그를 보고 정리하게 되었습니다. Reference에 해당 유튜브 링크를 공유해 드립니다. 상태 관리 FE에서 상태관리란? UI/UX의 중요성과 함께 프로덕트 규모가 커지면서 FE가 관리해야 하는 상태가 많아졌다. 개발자 입장에서 관리해야하는 데이터들을 효율적으로 관리하는 방법으로 사용된다. 모던 웹 프론트 환경에서는 여러가지 상태들이 존재하고.. 공감수 1 댓글수 0 2022. 3. 30.
프로젝트에서 공통으로 쓰이는 css 속성을 한곳에 정리 프로젝트가 커지다 보면 CSS를 수정해야 될 때 하나하나 찾아서 수정하는 것이 아니라 공통된 속성을 한곳에 정리하면 유지보수시에 매우 편리하다. React에서는 파일 구조를 잘 나눠서 만들어 보도록 하겠다. src안에 common이라는 폴더를 만들고 color와 size에 대한 css 속성들을 정리한다. 다음과 같이 key와 value로 설정해 놓으면 공통 속성을 정의한 후에 쉽게 사용하고 바꿀 수 있다. @value key: value; @value makerBlack: black; @value makerWhite: white; @value makerLightGrey: #e8e7e6; @value makerLightPink: #ffeae8; 그리고 사용하려는 .css 파일에서 다음과 같이 선언해 주고 .. 공감수 0 댓글수 0 2020. 12. 11.
React | button에서 onClick 이벤트 핸들링 프로젝트에서 button을 클릭했을때 해당 url 주소로 넘어가기 위해 onClick 이벤트 핸들링을 했어야 했다. 처음에 사용했던 방식으로는 그냥 버튼을 클릭했을때 this.handleClick으로 해결하려 했으나 여러개의 버튼이 별개의 url로 이동하기 위해 state로 변경하였다. state, 즉 상태값을 따로 지정 해야 했는데 react에 익숙하지 않아 고생했다.. 먼저 constructor에 state 정보를 저장한다. constructor(props) { super(props); this.state = { Data: [ { id: 1, company: "Apple Store", url: "url주소", src: "./img/apple__logo.png", }, { id: 2, company: .. 공감수 0 댓글수 0 2020. 8. 11.
React | number count 기능 구현하기 , onScroll 스크롤에 따라 animation 실행 먼저 react-spring을 사용해서 숫자 Count 애니메이션을 구현할 것이다. react-spring은 React에서 여러 애니메이션을 구현하기 위해 사용하는 애니메이션이며 이를 사용하기 위해서는 npm을 통해 설치해야 한다. https://www.react-spring.io/ react-spring Bring your components to life with simple spring animation primitives for React www.react-spring.io 사용하는 방법은 간단하다. import { Spring } from 'react-spring/renderprops'; {props => {props.number}} 내가 사용한 코드는 다음과 같다. 0부터 43109까지 Cou.. 공감수 2 댓글수 0 2020. 8. 3.
React: Webpack 설치, 환경설정 및 빌드 # 웹팩 설치하기 웹팩을 왜쓸까? -실제 개발환경에서 component를 여러개를 사용해야 한다. -컴포넌트마다 script를 사용하면 너무 길어져서 유지보수가 불가능하다. -여러개의 js 파일을 한번에 합쳐서 한개의 js파일로 만드는 기술이 웹팩이다. -합치면서 바벨적용 + 쓸모없는 코드 제거가 가능하다. *React에서 node가 필요한 이유 -자바 스크립트 실행기가 필요해서 -웹팩을 돌리기 위해서 사용하는 순서 npm init npm i react react-dom npm i -D webpack webpack-cli npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader @babel/plugin-proposal-class-pr.. 공감수 0 댓글수 0 2020. 7. 28.
React : Hooks 사용. (Class와의 차이점) useState, useEffect Hook을 쓰는 이유!? class를 쓰지말고 함수로, 함수 컴포넌트에서도 state랑 ref를 쓰기 위해 만든 것. const GuGuDan = () => { //state 선언시 함수 안에다가 써야한다. //use로 시작하면 hooks다. //비구조화 할당(= 구조 분해 할당 방식) const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = React.useState( Math.ceil(Math.random() * 9) ); const [value, setValue] = React.useState(""); const [result, setResult] = React.useState(.. 공감수 0 댓글수 0 2020. 7. 28.
React : 구구단 예시 (State, setState) 구구단 게임 만들기 State 사용하는곳 찾기 이 구구단 게임에서 입력을 누를때 바뀌는곳은 첫줄의 숫자들, 입력창, 결과창(땡,정답) 총 3곳이 바뀌게 된다. 따라서 State는 3개이다. setState를 통해 상태가 변경시킬 수 있다. onChange를 통해서 입력을 받은 값(상태)을 value에 저장시킬 수 있고 onSubmit을 통해서 정답을 맞출때, 맞추지 못할때에 따라서 state를 변화시켜서 화면에 출력시킨다. *참고 render()에서 는 의미없이 한번을 묶어주는 역할을 하는데 이를 로 빈 칸으로 만들어도 된다. setState에서 현재 값 구분해주기. this.setState((Current) => { return { result: "정답!! " + Current.value, first:.. 공감수 0 댓글수 0 2020. 7. 27.
React : JSX란 무엇인가? JSX (Javascript+ Xml) Javascript의 확장으로 element로 하는 것은 보기가 너무 불편하다. 따라서 babel을 사용해서 보기 쉽게 바꿔준다. *babel: 최신 문법을 사용하게 해주는 것으로 이걸 사용하여 content안에서 {} 안에 넣으면 javascript로 사용이 가능하다. => {this.state.liked...} JSX(JS+XML) 처럼 닫는 /가 필요하다. (문법이 엄격하다) button을 여러개 생성해 주고 싶을때는 어떻게 하는가?? 로 묶어주면 component로 여러개를 쉽게 사용할 수 있다. *주로 안에서 대문자로 시작되는 것은 컴포넌트이고 소문자로 시작되는것은 html 태그이다. 공감수 0 댓글수 0 2020. 7. 27.
React 기본 : 사용하는 이유, 컴포넌트, HTML 속성과 State 추가 React React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리(프레임워크)이다. 페이스북에서 주로 관리한다. React를 사용하는 이유에는 여러가지 이유가 있다. 크게 3가지로 나누자면, 싱글페이지 application으로 화면 깜박임 없이 자연스럽게 넘어가서 app과 비슷한 느낌을 낸다. (사용자 interface, 사용자 경험) 데이터 처리를 쉽게 도와준다. 재사용이 쉽게 component화 한다. (유지보수 좋음) head부분에 react와 dom을 추가해주면 된다. 개발할 당시에는 development를 사용하고 개발이 완료되면 product로 고치면 된다. 처음에 react, react-dom을 불러온다. render() { return e("button", null, ".. 공감수 0 댓글수 0 2020. 7. 27.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.