wazac

리액트에서 강의를 듣던중 azure 는 처음 써봐서 간단하게 세팅하는법을 정리해 보았습니다. (클라우드상에서 서버 세팅은 처음이라 혹시 잘못된 점 있으면 지적좀요.. ) 생각보다 어렵지 않고 클릭 몇 번으로 세팅해주면 되네요. 무료 체험계정을 생성해서 하였습니다. github 계정으로도 생성이 되서 계정가입하는것도 쉽지만, 역시나 신용카드 등록 절차를 진행해야하며 12개월 동안 별도 비용없이 제공되는 서비스와 200달러 크레딧을 사용할 수 있다고 하네요. 무료체험계정생성은 여기서하면 되고 계정생성 후 vm생성은 여기서 하면 되는 것 같아요. 우선 가상머신을 추가하기 위해 시작을 누르고 원하는 소프트웨어 검색 후 클릭합니다. 저는 강의를 보면서 진행했던거라서 Window 10으로 진행했습니다. 이렇게 만들..

다양한 입력폼을 다룰때 input말고도 textarea도 상당히 많이 다루는 편인데, textarea도 input과 별개로 은근히 많은 커스텀을 해줘야 합니다. 기본 textarea 같은 경우 resize 옵션이 기본으로 들어가 있고, input과 달리 textarea 는 여러 줄의 글을 길게 입력하는데 사용되기 때문에, 출력시에도 따로 처리를 해줘야합니다. 1. textarea resize 사용하지 않기 2. textarea placeholder 에서 줄바꿈 처리하기 3. textarea 에서 tab 사용하기 1. 기본 소스 - JSX import { useState } from 'react' import './app.css' function App() { const [textValue, setText..

가끔 아무것도 안하고 npx로 리액트 설치 후 npm start를 하면 이런 에러가 난다. Would you like to run the app on another port instead? ... yes Invalid options object. React Refresh Plugin has been initialized using an options object that does not match the API schema. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! memory-game@0.1.0 start: `react-scripts start` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the memor..

기존에 포스팅되었던 글 중 select 태그 커스텀 하기, 혹은 직접 만들기 (feat. javascript) 자신을 제외한 다른 부분을 클릭할 때 닫히게 하려면 어떻게 해야 하는지 질문을 주셔서 따로 다루면 좋을 것 같아 새로 포스팅을 해봅니다. 꼭 SelectBox에만 사용되는게 아니니 알아두면 좋을 것 같습니다. 💜 참고로 여기서 지칭하는 selectbox는 html 태그가 아니라 div로 커스터마이징 된 selectbox를 의미합니다. 💜 기존 소스를 보시면 이해하기 더 편하실 꺼예요.😉 원리는 window 자체에 addeventListener를 등록하고 클릭된 event 값을 받아서 비교를 합니다. 그리고 클릭된 event.target이 Select 자신인지 아닌지 비교한 뒤 본인이 아니면 Se..

개발을 하다 보면 props로 전달받은 텍스트의 줄 바꿈을 해야 하는 경우가 종종 있습니다. 매번 까먹으니 정리해 놓으려고 합니다. 😑 먼저 텍스트를 입력받아 뿌려주는 초 간단 컴포넌트를 만들어 보겠습니다. const Item = ({ text }) => { return {text}; }; export default function App() { return ( ); } 여기에서 text에 줄바꿈이 들어간 텍스트를 입력하려고 할 때 아마 br태그를 사용하거나 '\n'를 사용하여 줄바꿈을 시도하실 수 있을 것 같습니다. 하지만 예상과는 달리 그대로 출력해 보면 문자로 출력돼 버리는 것을 알 수 있습니다. 왜 이런 문제가 생기는 걸까요? 😮 이리저리 테스트 해본 결과 value의 값이 String과 섞이게 ..

참조1: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range 참조2: https://www.fileformat.info/info/unicode/char/26/index.htm 유니코드문자표: https://ko.wikipedia.org/wiki/%EC%9C%A0%EB%8B%88%EC%BD%94%EB%93%9C_2000~2FFF 프로젝트를 하다 보면 이런 경우가 있습니다. 한글을 나눔고딕으로 해주시고, 영문,숫자는 OpensSans로 해주세요! 아무것도 모르던 시절에는 숫자마다 클래스를 주어 font를 다르게 적용시켰습니다. 하지만 정말 쉬운 방법이 있었더리구요! 바로 unicode-range를 지정하는 방법입니다. unico..

클릭했을 때 하위 메뉴가 하나씩 나타나는 사이드 메뉴를 만들어 보겠습니다. 첫 번째는 메뉴들이 TOP에서 50픽셀 정도 위로 가있고 opacity가 0이라 영역은 있지만 보이지 않는 상태입니다. 만약 display none을 하고 싶다면 활성화할 때에는 display block 후 top과 opacity의 값을 바꾸도록 해야 모션이 적용됩니다. 두 번째는 첫 번째 메뉴에 서브 메뉴들이 겹쳐있는데 하위 메뉴를 감싸고 있는 메뉴의 zIndex가 낮아야 합니다. 그래야 뒤로 가려져 보입니다. 그리고 활성화가 되면 각 메뉴별로 left값을 주면 됩니다. 먼저 마크업을 해보겠습니다. Menu sub1 sub2 sub3 sub4 Menu2 sub1 sub2 sub3 sub4 사실 저렇게 굳이 submenu를 한 번..

키보드에서 입력을 받지 않고 직접 키패드를 클릭하여 비밀번호를 체크하는 기능을 만들어보았습니다. 참고로 단순히 웹단에서 정해진 값을 입력값과 비교하는 로직만 있습니다. 자바스크립트는 OOP기반으로 작성하였습니다. 1. 마크업 스타일 1 2 3 4 5 6 7 8 9 0 1-1. SCSS사용시 $errorColor: red; $confirmColor: green; .pwWrap { width: 80%; max-width: 450px; background: lightGrey; margin: 20px auto; .pwSection { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height..

저번 포스팅에서는 node에서 package.json으로 수작업(?)으로 자동 컴파일되는 환경을 세팅했었는데, (보러가기) 이번에는 vscode에서 제공되는 Live Sass Compiler라는 플러그인을 사용해 보도록 하겠습니다. 설치하기 VSCode를 열고 확장프로그램 다운로드하는 곳에서 sass를 검색하면 나타납니다. install을 클릭하여 설치합니다. 그리고 우측 하단에 Watch Sass를 클릭하면 실시간으로 컴파일이 됩니다. 이렇게 하면 자동으로 컴파일이 됩니다. CSS경로 설정하기 vscode setting 란에서 scss에서 css로 컴파일 시 css가 저장될 경로를 지정해 줄 수 있습니다. 왼쪽 하단 Manage 버튼에서 Setting을 들어갑니다. sass를 검색하고 방금 설치한 Li..

Toast 팝업은 무언가 액션을 시작했을 때, 종료되었을 때, 상태가 바뀌었을 때 등등의 경우 알려주는 팝업입니다. 따로 닫기 버튼을 두지 않고 일정 시간이 지나면 자동으로 사라집니다. JavasScript환경에서 setTimeout을 통해 간단하게 구현이 가능합니다. // App.js import { useState, useEffect } from "react"; import "./styles.css"; export default function App() { return ( CLICK ); } // Toast.js export default function Toast({ msg = "메세지 없음" }) { return {msg}; } // styles.css .App { font-family: san..