개발공부_Blog184 JSON.stringify() - 객체, 값을 JSON문자열 형태로 JSON.stringify() 객체, 값을 JSON문자열 형태로 2022. 9. 4. <textarea> value 속성을 사용한다면 textarea ? 여러줄 텍스트 편집 컨트롤을 나타냅니다. 버튼을 누르면 axios에서 data를 받아서 에 넣어 보여주는 코드를 작성했다. (리액트 코드 생략) axios로 API 호출해서 Data받아오기 return ( 불러오기 {data && } ) textarea에 value속성을 사용했다면 readOnly={ true }를 통해 value의 값을 고정할 것인지, onChange={ } 를 통해 수정할 수 있도록 할 것인지 정해주어야 한다. 2022. 9. 4. try catch 에러핸들링 try catch? 예외를 처리하기 위한 구문이다. 데이터를 받아온 이후 에러가 났을 때 처리할 수 있는 방법 try catch = 에러 핸들링 try catch가 없다면 웹페이지를 사용하던 중에 서버에서 전달받은 데이터가 잘못되어 갑작스런 에러가 발생했다! try catch문을 사용하지 않았다면 사용자는 어떤 상황인지 알지 모른 채 다운된 화면을 보고 있어야 한다. (개발자 콘솔을 열어볼지 않는 이상 절대 원인을 알 수 없다) 그런데 사람들은 에러의 원인을 알지 못한 채 페이지가 멈춰있는 것을 좋아할리 없다. try..catch를 사용해 에러가 발생했을 때의 처리를 해줘야 한다. try catch사용 예 try...catch 문은 실행할 코드블럭을 표시하고 예외(exception)가 발생(throw)할.. 2022. 9. 4. async - await 비동기 작업 비동기작업 2022. 9. 4. SCSS 문법 (Nesting) SCSS는 CSS의 부족한 부분을 채줘주기 위한 CSS의 확장언어이다. 중첩 Nesting 변수 Variable 모듈화 Modularity 믹스인 Mixins 확장&상속 Extend&inheritance 연산자Operators 중첩(Nesting) 상위 선택자의 반복을 피해서 편리하고 복잡한 구조를 작성할 수 있습니다. 이것은 선택자나 속성의 관계를 중첩 형태로 표현된 문법입니다. ( 단, 지나치게 중첩된 규칙은 유지하기 어려운 것으로 판명될 수 있고, 나쁜 습관으로 간주되는 CSS를 초래할 수 있음 !) // CSS nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: bl.. 2022. 9. 4. SASS, SCSS란 scss(sass)란? Syntactically Awesome StyleSheet의 약어이며, CSS를 효율적으로 작성할 수 있도록 도와주는 전처리기 SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가 .sass란? SASS는 CSS의 전처리기, 즉 해석되어 CSS로 컴파일되는 스크립트 언어이다. SASS는 { }중괄호와 세미콜론 ( ; )은 사용하지 않고, 들여 쓰기+줄 바꿈 형식으로 문법을 사용한다 또한 변수 정의를 허용하는데, 변수는 $ 기호로 시작되고, 변수 할당은 콜론(:)으로 마무리한다. $font-stack : Helvetica, sans-serif $primary-color : #333 body font : 100% $font-stack color : $pri.. 2022. 9. 4. React router - useNavigate useNavigate useNavigate는 Link컴포넌트를 사용하지 않고 다른 페이지로 이동할 수 있다. 파라미터가 숫자 타입이면 앞으로 가거나 뒤로 간다. navigate(-1) 뒤로가기 / navigate(-2) 뒤로 2번가기 페이지 이동 시, replace 옵션이 있는데, 이 옵션은 페이지 이동 기록이 남지 않아 뒤로가기 버튼을 눌러도 이전 페이지로 이동하지 않고 정해진 페이지로만 이동한다. import { Outlet, useNavigate } from "react-router-dom"; const LayOut = ()=> { const navigate = useNavigate() const goBack = ()=> { //이전페이지로 이동 navigate(-1) } const goArticl.. 2022. 8. 28. Router - URL파라미터/ 쿼리스트링 URL파라미터와 쿼리스트링 리액트에서 페이지 주소를 정의할 때 유동적인 값을 사용해야 하는 경우가 있다. URL파라미터와 쿼리스트링을 사용하면 된다. URL 파라미터 : /profile/velopert URL파라미터는 주소의 경로에 유동적인 값을 넣는 형태이다. URL파라미터가 여러개인 경우에는 /profiles/:username/:filed형태로 사용가능하다 const App = () => { return ( ) } export default App; 쿼리스트링 : /articles?page=1&keyword=react 쿼리스트링은 주소 뒷부분에 ?문자열 이후에 key=value형태로 값을 넣고 &로 구분하는 형태이다. useLocation Hook 사용 쿼리스트링 값을 사용하려면 ?을 지운 뒤, &로.. 2022. 8. 28. Router 적용, 기본사용법 Router 설치, 적용 yarn add react-router-dom 프로젝트에 라우터 적용 src/index.js파일에서 컴포넌트를 적용해 전체적으로 router를 사용할 수 있게 한다. import React from 'react'; import ReactDOM from 'react-dom/client'; import {BrowserRouter} from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); Route 컴포넌트로 특정 경로에 원하는 컴포넌트 보여주기 Route컴포넌트를 통해 라우트 설정을 해야 하며, Route컴포넌트는 Routes컴포넌트 내부에서 사용되.. 2022. 8. 28. 이전 1 ··· 3 4 5 6 7 8 9 ··· 21 다음
