기록저장소

요즘 IT,  velog  등등 IT 정보는 넘치는데 흘려보내는 것들이 많아서 정리해두는 기록✅ 읽기/요약 완료 상태⛔ 아직/미처 읽어보지 못한 상태➕ 유용한 사이트📌 다시봐도 좋을 글  ⛔  [10분 테코톡] 웨디의 프론트엔드에서의 에러 처리https://www.youtube.com/watch?v=RvsMwyysUHI  ⛔  Floating Navigation Menuhttps://blog.naver.com/rdh6327/223689396654  ⛔  Caro-Kann으로 간단?하게 알아보는 전역 상태 고급 원리https://cafe.naver.com/winterlood/242  ⛔  5년동안 집에서 서버를 운영한 썰https://docs.google.com/presentation/d/e/2PACX-..

웹 프레임워크프론트엔드 개발자/개발사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 = ({..

Q. 나이로 태어난 년도 구하기function solution(age){ let now = new Date(); let year = now.getFullYear(); let answer = year - age - 1; //+1???????? return answer;}* getFullYear() : 주어진 날짜의 현지 시간 기준 연도 반환 Q. 정수 배열 array가 매개변수로 주어질 때, 최빈값 return function solution(array){ let answer = 0; let fre={}; let max = 0; array.forEach((item) => { fre[item] = (fre[item] || 0) + 1; //빈도수 체크 if..

실습 준비하기확장프로그램 설치- ESLint : 실행전 VS Code에서 미리 오류를 보여줌- eslint 옵션 설정rules: { ... "no-unused-vars": "off", //사용하지않는 변수를 오류로 알려줌 off "react/prop-types": "off", //리액트를 더욱 안전하게 사용하도록 하는 옵션 off},  React 컴포넌트- 두가지 컴포넌트 생성 방법(+ class는 잘 사용하지 않음)function Header(){ return( HI );};const Header2 = () => { return( HI2 );}; - 화면에 렌더링하기부모컴포넌트(root컴포넌트) App, 자식컴포넌트 Header, Header2function Ap..

React.js 소개1. 컴포넌트 기반 UI 표현 2. 화면 업데이트 구현이 쉬움 (선언형 프로그래밍, 컴포넌트)3. 화면 업데이트 처리가 빠름 : Virtual DOM (가상 DOM) 이용  React App 생성Vite : 기본 설정이 적용된 React App 생성 가능//vite 설치npm create vite@latest//package정보 기반 라이브러리 설치npm i//react 실행npm run dev//http://localhost:5173 에서 실행 가능 React App 구동원리 https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard  [2024] 한입 크기로 잘라 먹는 리액트(Rea..

Node.js웹브라우저가 아닌 곳에서도  JS를 실행시킬 수 있는 실행환경(구동기)2009년 출시, 웹서버/ 모바일웹/ 데스크톱앱 등을 만들 수 있게됨 Node.js 설치하기https://nodejs.org/en Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org npm (node package manager) 까지 잘 설치됐는지 확인node -vnpm -v Node.js 사용하기패키지 : Node.js에서 사용하는 프로그램 단위npm initpackage.json 생성됨 //node에서 실행시키고자하는 파일을 터미널에 입력node index.js..

Truthy & Falsy1. Falsy한 값 : undefined, null, 0, -0, NaN, "", 0n2.Truthy 한 값 : 7가지 Falsy 한 값들 제외한 나머지 모든 값function printName(person) { //if(person === undefined || person === null) //복잡한 조건문대신 falsy활용 if (!person) { console.log("person의 값이 없음"); return; } console.log(person.name);}let person = { name: "이정환" };printName(person); 단락 평가function printName(person) { const name = person && ..