기록저장소

문득 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 && ..

한입리액트 완강후 수강예정https://smore.im/form/gIl1v0ftOn 사전등록 이벤트 | 한입 크기로 잘라먹는 Next.js사전등록자 전원 50% 할인 쿠폰 제공, 30명 추첨 100% 할인 쿠폰 제공 중smore.im

VSCode  확장자 추천1. prettier : 코드 정렬2. 파일 확장자별 아이콘 설정3. 오류 안내4. 수정사항 즉시 반영  변수와 상수1. 변수let age;age = 30;2. 상수const birth = "1997.01.07";3. 변수 명명규칙(네이밍 규칙)3-1. $, _ 제외한 기호는 사용할 수 없다.let $_name;3-2. 숫자로 시작할 수 없다.let name1;let $2name;3-3. 예약어를 사용할 수 없다.let if = a; (x)let const = 1; (x)4. 변수 명명 가이드let salesCount = 1;let refundCount = 1;let totalSalesCount = salesCount - refundCount; 자료형1. 숫자형  2. 문자형  ..