영원히 흘러가는 강

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. React 공식 문서에서 제공하는 context의 정의이다! 전역적으로 사용하기 위해 사용한다 우선 파일 구조로 보자면 아래와 같다 ㄴ src ㄴcomponenets ㄴAbout.js ㄴProfile.js ㄴstore ㄴUsers.js App.js store ㄴ Users.js import React, { createContext } from "react"; // createContext import export const Usercontext = createContext(); //createContext 생성 const UsersStore = (props) => { const use..

axios 로 여러개의 api 등을 받아올때에 사용 가능한 multi request!! import axios from "axios"; import { useEffect, useState } from "react"; const [url1, setUri1] = useState(); const [url2, setUri2] = useState(); useEffect(() => { axios .all( [axios.get("api 주소1"), axios.get("api 주소2")].then( axios.spread((response1, response2) => { setUri1(response1.data); setUri2(response2.data); }) ) ) .catch((err) => console.lo..

리액트에서의 DOM 앨리먼트는 기존의 DOM 앨리먼트와 조금씩 차이점이 있다.! 리액트에서는 카멜케이스로 변경되는 부분이 많지만 innerHTML은 아예 다른 이름으로 사용하여 이 부분만 작성해보려한다! dangerouslySetInnerHTML dangerouslySetInnerHTML 은 브라우저 DOM에서 innerHTML 을 사용하기 위한 React의 대체 방법입니다. 일반적으로 코드에서 HTML을 설정하는 것은 사이트 간 스크립팅 공격에 쉽게 노출될 수 있기 때문에 위험합니다 따라서 React에서 직접 HTML을 설정할 수는 있지만, 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html 키로 객체를 전달해야 합니다 코드로 확인해보자면 function ..

자동완성 기능 ctrl+a 버튼으로 전체 선택 ctrl+k+l 만약 안된다면 플러그인 설치 prettier 검색후 install 설치 후 적용이 안된다면! file =>Preference => Setting => editor.format 입력 => Format On Save에 체크 코드 템플릿 자동완성 reactjs code snippets 검색 후 install rcc는 클래스형 rsc는 함수형

포토폴리오 혹은 회사의 주소를 클립보드에 복사하는 기능 구현! 복사하기 구현 복사 오늘의 배운점 ! text.select() 와 document.execCommand()

html5의 canvas를 활용한 그림판 만들기 canvas에 중점보다는 js와 css에 중점을 두고 구현해봄 range에 대해 처음 알게됨!!! css 에서는 @import "reset.css" 로 css 리셋 display: flex; flex-direction: column; align-items: center; cursor:pointer; 위와 같이 간단한 css 적용 js에서는 canvas에 대한 내용 제외 한다면 Array.from(colors).forEach(color=> color.addEventListener("click",changeColor)); //배열로 변환시켜서 클릭시 함수호출 nomadcoders.co/javascript-for-beginners-2/lobby Watch Now..

바닐라 자바스크립트로 구현해본 타자게임! 자바스크립트의 능력을 위해 따라해보며 배운 코드 js js코드 let score=0; const GAME_TIME=5; let isPlaying=false; let timeInterval; let words=[]; let checkInterval; const wordInput=document.querySelector('.word-input');//단어 입력 input const wordDisplay=document.querySelector('.word-display');//단어 보여주는 div const scoreView=document.querySelector('.score');//점수 const timeView=document.querySelector('.ti..

크로스 브라우징? W3C의 웹표준에 맞는 코딩을 해서 브라우저나 기기마다 동일하게 보여지고 작동하도록 하는것! gs.statcounter.com/browser-market-share/all/ Browser Market Share Worldwide | StatCounter Global Stats This graph shows the market share of browsers worldwide based on over 10 billion monthly page views. gs.statcounter.com 2021년 2월 기준. 우리나라는 1위가 크롬 2위 사파리 3위 삼성인터넷 4위 웨일 5위 엣지 순이며, 전세계적으로 보자면 1위 크롬 2위 사파리 3위 파이어폭스 4위 엣지 5위 UC Browser 이..

float와 inline-block 의 구조 형태에서 Flex는 아마 구원자 같은 느낌이다 엄청 손쉽게 레이아웃을 구성하는 방법으로 gird 또한 존재하지만 IE는.. 그리하여 flex에 대한 정리를 해보려한다! 내가 작성하며 정리 하는 개념이라서 출처에 가보면 더 자세한 설명이 존재! 출처: studiomeal.com/archives/197 이번에야말로 CSS Flex를 익혀보자 이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누 studiomeal.com heropy.blog/2018/11/24/css-flexible-box/ CSS Flex(Flexi..

조금 더 이쁜 웹 디자인을 위해서는 배치가 제일 중요하다고 생각한다. flex 와 gird가 있지만 브라우져들마다의 지원 버전이 다를수 있으니 기초의 position 도 익혀야할것이다. static : default 값으로 , 자동 배치되며 임의로 위치 설정 불가능 relative : 원래 자리하던 위치 기반으로 위치 설정 absolute : 절대 좌표와 함께 위치 지정 fixed : 스크롤과 상관없이 보여지는 화면에 항상 고정 static html 요소는 기본적으로 static .즉 초기값이다. top , bottom , left , right 속성의 값에 영향 받지 않는다. relative 요소를 위의 static처럼 문서 흐름에 배치한다. 그 후에 자기 자신을 기준으로 위치 변경 absolute 가..