본문 바로가기

분류 전체보기236

Context API props문법을 사용하지 않고 하위 컴포넌트와 같은 값을 공유하는 방법 import { useContext } from 'react'; let stockContext = React.createContext(); // 범위 생성 문법 // 위에 context로 선언한 변수를 이용하여 아래처럼 작성한다. value라는 이름은 고정값이다. // 이렇게 작성하고 나면 해당 블록 안에서는 stock을 공통으로 공유한다. { shoes.map((data, index) => { return }) } function ShoesInfo(props) { // useContext라는 훅을 이용하여 stockContext를 변수에 담았다. 이제 사용 가능하다. let stock = useContext(stockContext).. 2021. 11. 3.
ajax in react 방법 3가지 jQuery 설치해서 $.ajax() 사용 axios 설치해서 axios.get() 사용 자바스크립트 문법 중 fetch() 사용 axios 모듈 설치 yarn add axios or npm install axios -S 사용법 예제 import axios from 'axios'; function App() { // 요청주소로 get방식 요청 (promise) axios.get('요청 주소') .then((result) => { console.log(`성공시 결과값 : ${result}`); }) .catch((err) => { console.log(err)// catch문은 반드시 넣어야 하며, 요청 실패 시 해당 블록 실행 }) .finally(() => { console.log('용도는.. 2021. 11. 2.
lifecycle hook, useEffect 컴포넌트의 생명주기(lifecycle) 중간 중간 액션을 넣을 수 있는 기능 가령 onCreate(), onDistroy() 등등의 기능을 임의적으로 넣을 수 있다. 이전 방식(lifecycle hook) class Detail2 extends React.Component { // 가장 많이 쓰는 라이프사이클 훅 componentDidMount() { // 화면에 보일 때 } componentWillUnmount() { // 시야에서 사라질 때 } // 현재 살아있는 라이프사이클 훅 componentDidCatch(error, errorInfo) { // 에러 발생 시 } componentDidUpdate(prevProps, prevState, snapshot) { // 컴포넌트 업데이트 시 } shou.. 2021. 11. 2.
SCSS 일종의 프로그래밍적인 기능을 지원하는 css 전처리기이다. scss 양식으로 작성하고 컴파일 기능을 제공하는 모듈을 이용해 css로 변환해준 뒤 사용되는 구조. 비교를 위한 기존 방식의 CSS .my-alert { background: #ff0000; padding: 20px; border-radius: 10px; max-width: 500px; width: 300px; margin: auto; } .my-alert2 { background: #eeeeee; padding: 20px; border-radius: 10px; max-width: 500px; width: 300px; margin: auto; } div.container div{ background: #00ff00; padding: 20px; .. 2021. 10. 28.
styled-components css-in-js 즉, js파일 안에 css를 설정할 수 있는 컴포넌트라고 보면 된다. 사용법은 아래처럼. App.js import styled from 'styled-components'; let TestComponent = styled.div` font-size : 12px; color : #ff0000; `; let TestComponentWithProps = styled.h4` font-size : 30px; color : ${ props.임의의컬러 }; `; return ( ) yarn add styled-components 명령어로 모듈을 설치하고 import한다. 대문자로 시작하는 변수를 생성하여 TestComponent 처럼 작성하되, 아래 WithPorps처럼 Props문법을 이용하여 공.. 2021. 10. 27.
import, export로 코드 줄이기 변수 및 데이터, 객체 등이 너무 길어질 경우 파일을 따로 구분하여 export하고 사용하고자 하는 파일에서 import Datas.js // export 파일당 default는 하나만 지정 가능하다. export default [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", price : 130000 } ] Variables.js var name = 'k.. 2021. 10. 26.
react-bootstrap react-bootstrap : https://react-bootstrap.github.io/ React-Bootstrap The most popular front-end framework, rebuilt for React. react-bootstrap.github.io bootstrap : https://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 설치명령어 npm install react-bootstrap bootstrap yarn add react-bootscrap bootstrap 특정 스타일을 사용할 때 bootstrap css 파일을 요구할 경우 대비 htt.. 2021. 10. 26.
[Kotlin] enum값을 순차적으로 이동(앞,뒤)하여 가져올 수 있는 코드 enum값을 메뉴의 flow에 따라 배치하거나 enum에 parameter를 주고 다른 용도로 활용할 경우 다음 값, 이전 값을 가져올 필요가 있을 때가 발생한다. 그 경우 활용할 수 있는 코드를 공개한다. 확장함수로 Enum.함수명 으로 사용하면 된다. 현재 값이 enum의 마지막인데 next()를 콜 할경우 첫번째 값으로 순회하여 리턴한다. 마찬가지로 첫번째 값인데 previous()를 호출할 경우 마지막 값으로 순회하여 리턴한다. inline fun T.next(): T { val values = enumValues() val nextOrdinal = (ordinal + 1) % values.size return values[nextOrdinal] } inline fun T.previous(): T.. 2021. 4. 19.
맥(Mac)에서 ssh로 접속 시, no matching cipher found 에러 맥에서 ssh로 다른 pc에 연결하려 할 때 아래와 같은 메세지가 발생한다. 원인은 암호화 방식이 맞지 않기 때문이며, 몇가지 제공되는 방식 중 선택하여 지정해 주면 정상적으로 접근이 가능하다. Last login: Mon Apr 12 14:44:03 on ttys001 kygenesis@gwon-yeong-gag-ui-MacBookAir ~ % ssh dra@10.90.101.101 -p 22 Unable to negotiate with 10.90.101.101 port 22: no matching cipher found. Their offer: aes128-cbc,aes192-cbc,aes256-cbc,blowfish-cbc,arcfour kygenesis@gwon-yeong-gag-ui-MacBoo.. 2021. 4. 12.

티스토리툴바