분류 전체보기56 Linux ) 쉘 스크립트 작성해보기 실행파일 생성 vi 또는 vim 명령어를 이용해 [filename].sh 파일을 생성한다. 첫 줄에 #!/bin/bash 를 먼저 입력해줘야한다. #! 의 의미는 스크립트를 실행할 쉘을 지정하는 선언문이다. /bin/bash 의 의미는 bash 명령의 절대경로이다. ⇒ /bin/bash 의 쉘로 스크립트를 작성하겠다는 선언을 한 것이다. 실행권한 부여 [filename].sh 를 실행파일로 만들어주려면 chmod 명령어를 이용해 실행 권한을 부여해줘야한다. chmod 755 [filename].sh 실행하기 쉘스크립트 파일이 있는 경로로 가서 ./[filename].sh 를 입력 2023. 1. 22. Firebase ) emailVerified 상태를 변경하기 위해 sendEmailVerification VS sendSignInLinkToEmail sendEmailVerification 사용자의 이메일 주소가 유효한지 확인하는 일회성 이벤트, user 객체에 emailVerified 값을 설정 이메일이 확인되면 다시 호출하지 않으며 회원가입 과정에서 사용됨 sendSignInLinkToEmail 사용자가 이메일/패스워드를 입력하거나 통합 계정을 통해 로그인하는 대신 이메일로 전송된 링크를 클릭해 로그인하도록 하는 인증 방법 사용자가 로그인 할 때마다 호출 credential.user 의 emailVerified 속성이 true 로 변경되기 위해서는 sendEmailVerification 을 사용해야한다! 회원가입 후 최초로그인 시에는 sendEmailVerifica.. 2022. 7. 21. Next.js + TypeScript ) 스크롤 내릴 시에 특정 컴포넌트 숨기기 스크롤시 상단 메뉴바 숨기기 작동화면 Code NavBar.tsx import { useScrollDirection } from "./useScrollDirection"; import styled from "styled-components"; const Header = styled.div` position: sticky; height: 3rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; `; const HeaderDown = styled.div` top: -3rem; `; const NavBar = () => { const scrollDirecti.. 2022. 7. 15. Next.js ) Input 입력값 태그로 변환하기 (TypeScript) 태그 등록 Input 만들기 작동화면 Code export default function TagInput() { const [input, setInput] = useState(""); const [tags, setTags] = useState([]); const [isKeyReleased, setIsKeyReleased] = useState(false); // input 입력값 'input' state 에 등록 const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; // 태그 해제하기 const deleteTag = (index: number) => { setTags((prevSt.. 2022. 7. 15. Next.js + TypeScript ) event 의 Type은 어떻게 지정해야할까? Next.js (React) + TypeScript : Event Type 지정하기 Input Event Input 태그에는 onChange, onKeyUp, onKeyDown 등의 이벤트가 있습니다. 이 이벤트를 통해 함수를 실행할 때에는 onChange const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; onKeyDown, onKeyUp const onKeyDown = (e: React.KeyboardEvent) => { // ... } const onKeyUp = (e: React.KeyboardEvent) => { // ... } 위와 같이 이벤트의 타입을 지정해주면 됩니다. Sele.. 2022. 7. 14. https 적용 시 cors 에러 미니 프로젝트에 ssl 을 적용시키면서 cors 에러가 발생했다. 이유를 찾아보니 인증정보가 담긴 요청에서는 cors의 withCredentials 속성을 false 값으로 둘 수 없으며, origin 속성 또한 특정 값을 넣어주어야 했다. 이상 짧은 메모. 2022. 6. 11. React ) redux-saga 기반 api 호출 연습 redux-saga 를 활용해 News WebApp 상태관리 하기 기존에 React Hook 방식을 이용해 구현했던 HackerRank News Web App 을 redux-saga 를 이용해 다시 구현해보았습니다. 실행 화면 주요 코드 fetchNews API 를 호출해 newsList 를 불러오는 코드만 올렸습니다. - NewsList.js function NewsList() { const dispatch = useDispatch(); const newsList = useSelector((state) => state.newsList); useEffect(() => { dispatch(allAction.getNewsList()); }, []); - actions/newsActions.js export .. 2022. 5. 11. React ) Recoil 로 Axios 비동기 처리하기 React-News Web App 에 Recoil 적용하기 기존에 react hook 방식과 redux-saga 를 적용해 만든 HackerRank News Web App 을 Recoil 을 이용해 상태를 관리하는 방식으로 다시 제작해봤습니다. HackerRank News OpenAPI 를 활용했습니다. 실행 화면 Code Recoil 초기 설정 먼저 npm i recoil 을 통해 recoil 을 설치합니다. Recoil 은 Redux 와 비교하면 초기설정이랄 것도 없습니다. import { RecoilRoot } from "recoil"; function App() { return ( ... ); } 그냥 RecoillRoot 로 감싸주면 끝입니다. 너무 좋습니다. atom.js import { at.. 2022. 5. 10. React ) HackerNews WebApp 제작을 통한 React 학습 React 로 HackerRank News WebApp 만들기 전체코드 보러가기 1.hook 브랜치에서 확인하실 수 있습니다. 사용기술 react- v18 react-router-dom - v6 실행화면 학습내용 react-router-dom 사용 App.js import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; 태그를 사용하기 위해서는 위와 같이 태그로 감싸줘야합니다. path 에는 이동할 url 주소를 명시하고, element 에는 화면에 렌더링될 컴포넌트를 입력합니다. ToolBar.js import { Link } from "react-router-dom"; News Ask Jobs 클릭해서 해당 페이지로 넘어가고 싶.. 2022. 5. 7. 이전 1 2 3 4 ··· 7 다음 반응형
