기록저장소

웹개발 관련 도구 정리

웹 프레임워크프론트엔드 개발자/개발사React.jsUI 라이브러리,컴포넌트 기반의 빠른 렌더링과 강력한 생태계(React Router, React Native 등)로대규모 웹 애플리케이션에 적합 Meta Vue.jsUI 프레임워크,간단하고 직관적인 API 와 반응형 컴포넌트, 학습 곡선이 적어 가벼운 앱부터 대형 프로젝트까지 모두 적용 가능Vue.jsAngular풀스택 웹 애플리케이션 프레임워크,TypeScript 기반, MVC아키텍처, 양방향 데이터 바인딩으로 대규모 애플리케이션 구축에 적합GoogleSvelteUI 프레임워크,컴파일러 기반으로 빌드 시점에서 UI를 최적화 함,적은 런타임 오버헤드와 간결한 코드 작성Rich HarrisNext.js  React 기반 풀스텍 프레임워크,SSR(서버 사이드..

리액트

리액트

리액트

리액트

리액트

문득 border:0과 border: none은 둘다 border를 없애주는데 어떻게 다르지 궁금해서 검색하고 남기는 기록 border: 0;- border의 두께를 0으로 설정- 다른 속성이 있다면 (width, color 등) 그 속성들은 유지됨- 브라우저가 인식하지만 두께가 0이라 보여지지 않는것이라 렌더링은 됨- 다시 활성화해야 할 경우 초기설정 보존 border: none;- 테두리 스타일을 없음으로 설정- 테두리 자체를 렌더링하지 않으므로 더 효율적 결론!테두리 제거가 목적이라면 border:0보다 border:none이 가독성이 좋고 경제적이므로 border: none을 더 권장함기존스타일을 남겨두려면 border:0

라이프사이클이란 useEffect 사용하기React 컴포넌트의 사이드 이펙트 : 컴포넌트의 동작에 따라 파생되는 여러 효과useEffect(()=>{}, []) useEffect로 라이프 사이클 제어하기//1. 마운트 : 탄생 -> 최초1회 실행useEffect(()=>{}, []);//2. 업데이트 : 변화, 리렌더링useEffect(()=>{});//2-1. 최초 실행 무시 업데이트const isMount = useRef(false);useEffect(()=>{ if(!isMount.current){ isMount.current = true; false; } console.log("update");});//3. 언마운트 : 죽음useEffect(()=>{ //useEffect의 ca..

//App.jsx import { useState } from 'react'; import Viewer from './components/Viewer'; import Controller from './components/Controller'; import './App.css' function App() { //viewer와 controller가 형제관계이므로 부모인 app에서 useState const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); } return ( Simple counter ) } export default App//Viewer.jsx const Viewer = ({..