Front End
-
React 로 서버에 요청하기 (코드스니펫 기록)Front End/React 2023. 5. 8. 17:11
Cookie 및 CORS 관련 설정체크를 백엔드에서 충분히 검토(특히 preflight)하고 배포하기 위해 간단하게 React 를 띄워 서버에 요청할 때 jsx 문법을 찾아보는 시간을 줄이기 위한 기록용 포스팅이다. preflight 는 헤더 값을 추가하면 trigger 된다. (물론 브라우저에서 trigger 하지 않는 예외적인 헤더들도 존재한다) 1. Create React App 실행 2. Install Axios 3. 리액트 코드 작성 (App.js) import logo from './logo.svg'; import './App.css'; import axios from 'axios' const sendRequest = () => { axios({ url: 'https://www.naver.co..
-
[CSS] CSS 속성으로 placeholder 값 지정하기 (input[type="date"] placeholder 적용 처리)Front End/CSS 2023. 3. 5. 21:50
Referecne (CSS) input[type="date"] placeholder 적용 처리 "도움이 되셨다면 공감과 댓글로 지지해주세요!!" 시작일과 종료일에 캘린더 기능을 구현하기 위해 JS의 input type='date'를 이용하였다. input type='date'와 전체 페이지가 조화롭게 보이게 하기 위해 jobcoding.tistory.com 백 오피스 프로그램의 프론트단을 만들다가 유용한 속성인 attr(#variable)을 찾아 기록한다. 자세한 내용은 윗 블로그 참조! 👍 CSS input[type='date']::before { content: attr(data-placeholder); width: 100%; } HTML
-
[Node.js] MacOS Homebrew 로 node, npm, yarn 설치Front End/etc 2022. 4. 12. 22:54
# Homebrew 설치 Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 위 링크로 접속 후, 아래 사진의 명령줄을 복사하여 터미널에 붙여넣고 Enter! 다운로드 후 아래 커맨드 실행 brew update # node & npm 설치 brew install node node 에 npm 이 포함되어있다. brew list node 가 성공적으로 설치 되었는지 확인한다. # yarn 설치 brew install yarn --ignore-dependencies 의존성을 제외한 순수 yarn 을 설치한다. (의존성에 node가 포함되어있음)
-
[React] Attempted import error: 'Redirect' is not exported from 'react-router' (리액트 redirect 안됨)Front End/React 2021. 12. 1. 19:26
어서오세요..! 🤗 해결하시고 또 뵙는거겠죠....? (나쁜놈들,,,) react-router-dom 이 V5 -> V6 로 버전업되면서 변경된 사항입니다. # 변경사항 컴포넌트는 더 이상 존재하지 않음 로 바뀜 (근데 이건 제가 잘못 사용한건지 먹히질 않더라구요 😭) useNavigate() Hook 릴리즈..! (이건 잘 먹힙니다..!!) # 코드 구현 import React, {useState} from "react"; import { useNavigate } from "react-router"; export default function SignIn(props){ const navigate = useNavigate(); /// .... const click = (e)=>{ console.log("..
-
[React] Axios - [GET, POST,PUT,DELETE] 기본 사용법Front End/React 2021. 11. 30. 21:02
# Axios CSRF 보호기능 내장 JSON 데이터 자동변환 응답시간 초과 커스터마이징 가능 요청 중단 가능 Promise 기반 async/await 문법 가능 import axios from 'axios' // GET : Fetch a list of data axios.get(`url`) .then(function1) .catch(ErrorHandlingFunction) .finally(function2); // POST : Create new data axios.post(`url`, {json}) .then(function1) .catch(ErrorHandlingFunction) .finally(function2); // PUT : Update data axios.put(`url`, {json}) ..
-
[React] Redux 란 무엇인가?Front End/React 2021. 11. 25. 20:03
로그인 기능을 구현하기 위해 인증작업 구현을 하다가 이리저리 치이다 정신차려보니 이 친구를 만나게 되었다. # 리덕스란 무엇일까? Redux 는 JS App 을 위한 전역변수 관리자라고 보면 된다. (전역변수 관리자를 Store라고 Redux는 정의하고있다.) Augular, JQuery 등 다양한 JS framework와 작동되게 설계되었다. action에 반응하여 상태(전역변수)를 변경한다. 프로젝트가 복잡해지면 관리가 힘들어지는 props 들을 Store에 담아, 모든 페이지(컴포넌트)에서 접근할 수 있다는 것 하나로도 너무 매력적인 것 같다. 여태 Provider를 직접만들어서 사용했는데, 그에 비해 무슨 장점이 있는 건지 공부해보면 알겠지... 😭 공부할게 하나 더 생겨서 너무 좋다 ㅎㅎㅎㅎㅎㅎ..