더 알아보기/기능84 [React] 조건부 스타일 렌더링 React 스타일 조건부 렌더링 import './App.css'; import Hello from './Component/Hello'; const App = () => { const name = 'react'; return ( {name} ) } export default App; import React from 'react' const Hello = ({isSpecial, c.. www.crocus.co.kr React에서 특정 태그에 style 속성을 사용 할 때는 style={{}} 형식을 사용하는 데 여기에 조건을 추가하고 싶을 때는 {조건 ? {} : {}}으로 사용 해야 한다. world (전체 코드) import React, { useState } from "react"; const Tes.. 2022. 3. 11. [React] 통화 화폐 단위 표시하기 [React] 통화 화폐 단위 표시하기 - 떽떽대는 개발공부 페이지를 구현하다 보면 원화, 달러 표기 등을 할 때 단위 별 쉼표 표기가 필요할 때가 있다. 간단하게 아래의 코드를 사용하면 된다. Number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") 이를 이용한 예제 ddeck.tistory.com 변경이 자주 일어나지 않는 데이터의 경우 프론트에서 화폐 단위를 표시 해주면 되지만, 변경사항이 자주 일어나는 데이터의 경우 DB(서버)에서 데이터를 불러와서 사용하게 된다. 이때 서버에서 통화 단위를 표시해서 보내주는 경우라면 따로 필요가 없지만 어떻게 될 지 모르는 상황이기 때문에 프론트에서 통화 화폐 단위를 표시 해주는 방법을 사용했다. 1. 아직 서버에서 데.. 2022. 3. 11. [React] input 태그에 focus 이벤트 사용하기 antd Input 태그에 focus 이벤트 사용하기 React 앱에서 antd의 Input 컴포넌트를 사용하고 있을 경우 만약 특정 시점에 Input 컴포넌트에 focus 되어 커서가 위치하는 방법을 알아봅니다. webisfree.com 2년 전 교육원에서 풀스텍으로 공부 할 때 바닐라 JavaScript에 focus 이벤트를 사용했던 기억이 나서 React에서는 어떻게 사용 해야 하는 지 알아보고 정리 해보았다. 구현 과정 1. 비밀번호 기능을 만든다. import React from "react"; const Test = () => { return ( ); }; export default Test; 2. focus 이벤트를 사용하고자 하는 input 태그에 ref 속성을 넣어준다. import Re.. 2022. 3. 10. [React] Caps Lock 키 활성화 유무 체크하기 :JavaScript capsLock 활성 유무 확인하기"라고 구글링 해서 아래 블로그를 찾았다. [Javascript] Caps Lock 키 활성화 여부 체크하기 사용자에게 input 창에 입력을 받을 때, 사용자 키보드의 Caps Lock 키가 활성화 되어 있는지 확인하여, Caps Lock이 활성화 되어 있으면 메시지를 보여주는 방법을 소개합니다. Caps Lock 키 활성화 여부 hianna.tistory.com 핵심은 onKeyPress와 함수인 것 같아서 둘을 활용하여 아래처럼 코드를 작성했다. 내 경우네는 useState를 사용하여 기본값은 false, capsLock이 활성화 되어 있는 경우 true로 state를 변경 해줬다. // capsLock 확인 const passwordKeyPr.. 2022. 3. 8. [React] 화면 사이즈 구하기 - resize 이벤트 [React] resize 이벤트 다루기 ✨ Window Resize 브라우저 화면 사이즈가 변경될 때, 변경된 사이즈 값을 리액트 컴포넌트에 적용할 수 있는 방법이 있다. 바로 window 객체에 발생되는 resize 이벤트를 감지하고, 그 때마다 컴포넌트 db2dev.tistory.com 내비게이션 바 Bootstrap의 강력하고 반응형적인 내비게이션 헤더, 내비게이션 바의 문서와 예. 콜랩스(collapse) 플러그인 지원을 포함한 브랜딩, 내비게이션 등의 지원이 포함되어 있습니다. getbootstrap.kr [Bootstrap] 부트스트랩 Navbar(메뉴 바) 사용 예제 부트스트랩 Navbar 설명 부트스트랩의 Navbar는 많은 웹페이지의 화면 상단에서 볼 수 있는 메뉴 바의 기본 틀을 제공.. 2022. 3. 4. Swiper - 웹 팝업 슬라이드 수정 Swiper - 기본 설정 20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라이브러리 모바일 eundol1113.tistory.com Swiper - 양 옆에 이동 버튼 만들기 Swiper - 기본 설정 20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라 eundol1113.tistory.com 팝업에서 벗어난 부분에서 슬라이드가 나타나는 것보다는 슬라이더 넘어갈 때 width 안에서만 보이도록 수정 해달라고 하셔서.. 2022. 3. 2. Swiper - 양 옆에 이동 버튼 만들기 Swiper - 기본 설정 20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라이브러리 모바일 eundol1113.tistory.com Swiper - 양 옆에 이동 버튼 만들기 Swiper - 기본 설정 20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라 eundol1113.tistory.com 공식 문서에 의하면 기본 설정 중에서 .swiper-button-prev, .swiper-button-next를 사용하면 .. 2022. 3. 2. Swiper - 기본 설정 20220228 오후부터 진행하던 작업인데 끝마치지 못해서 20220301 오전에 시도 해보던 중 코드만 보고, 공식문서 보면서 헛발질 하는 것 보다는 검색 해보자!! 라는 마음으로 swiper 라이브러리 모바일이라고 검색했다. 다행히 좋은 참고 자료를 볼 수 있었다. 코드가 많이 달라서 어떻게 테스트 해보지라는 걱정이 있었는 데 해결 과정 중 Link와 Script 코드를 추가하고 확인 해보니 웹, 모바일 두 곳 모두 잘 동작하는 걸 볼 수 있었다!!! 역시 좋은 자료였어라는 마음으로 CSS 마무리 했다........ 이제 이미지 어떤 거 넣어야 하는 지 여쭤보고 이게 맞는 지 검사 맡은 후 새로 배포하면 될 것 같다. 가장 중요한 점은 두 가지인 것 같다. 1️⃣ 두 Swiper Class는 달라야 .. 2022. 3. 2. [React] JSX에서 Switch문 사용하는 방법 퍼블리싱 진행 하다가 경우에 따라 다른 팝업창을 띄워주는 경우가 있었는 데 한두번 일 때는 삼항연산자를 사용해도 가독성면에서 큰 불편함음 경우의 수가 많아질 수록 가독성도 떨어지고, 불필요한 코드가 많아질 것 같아 Switch문을 사용하기로 했다. Java나 Spring, Python 배울 때 Switch문을 사용 했었는 데 React의 JSX에서 사용하려니 오류가 발생했다. 구글에 "JSX에서 Switch문 사용하는 방법"을 검색 해보니 JSX에서 if문 대신 삼항연산자를 사용하고 for문 대신 배열 연산자 등을 사용하는 것처럼 Switch문도 다른 문법을 사용한다고 한다. 아래 블로그를 참고하였는 데 아직 문법을 이해 하지는 못했지만 간단해서 좋았다. {(() => { switch (game) { c.. 2022. 2. 22. 이전 1 ··· 4 5 6 7 8 9 10 다음 728x90
