원조맛집

[state, setState] = useState(); [state, setState] = useState(true); function handler(){ setState(!state); setState(!state); } 이렇게 사용할 경우 아무런 변화가 없을 걸 기대하지만 실제로는 true => false로 바뀌어 작용한다. 그 이유는 리액트가 컴포넌트를 불러올때 state의 값도 불러오기 때문에 setState(!true); setState(!true); 처럼 되는 셈이다. 그런데 [state, setState] = useState(true); function handler(){ setState((prev)=>!prev); setState((prev)=>!prev); } 와 같이 코드를 작성할 경..

리액트를 사용할 때 이미지 파일 같은 것들을 public 폴더와 assets 폴더에 넣곤 하는데 이 둘의 차이점이 무엇인지 궁금했다 차이점을 알아보자 Public 퍼블릭 폴더에 있는 데이터들은 빌드 과정에서 공개적으로 제공된다. 즉 접속하는 유저가 마음대로 접근할 수 있다는 뜻이다. 만약 public/image.jpg 라고 있다면 localhost:5173/image.jpg를 url로 하여 접근할 수 있다는 뜻이다. 그렇기에 코드내에서 사용할 때에도 처럼 사용할 수 있는 것이다 src/assets (정확히 말하면 assets폴더일 필요는 없고 src 폴더안에만 있으면 된다) 공개적으로 제공되지 않기에 유저가 접근할 수 없다 빌드 과정에서 최적화되어 제공하기 직전에 public 폴더에 '삽입'된다. 그렇기에

dart는 js, c와 같이 기존의 언어와 비슷한 점이 많다 int 정수형 double 실수형 bool 논리형 String 문자형 var 추론형 (알아서 추론해 주기 때문에 그냥 이거 쓰면 된다) int num1 = 3; double num2 = 3.5; bool isResult = True; String name = '홍길동'; var num10 = 1; var num11 = 3.5; var isTrue = False; var name2 = '이순신'; dynamic 자유형 변수에 넣을 수 있는 데이터 형을 자유롭게 바꿀 수 있다. 단, 잘 사용하지 않는다 dynamic car = 'benz'; car = 10; //가능 Null Safety (널 안정성) dart는 기본적으로 null 값을 허용하지 ..

mongodb express 사용중 자주 발생하는 에러 에러 발생 원인 1. 라우터(url)의 경로가 틀렸을때 발생 2. objectid가 특정 글자수를 벗어났을때 발생(기존 objectid에 몇글자 추가해서 넣어보니 발생함)

272. WebAPI와 단일 스레드 자바 스크립트는 한줄 한줄 처리하는 방식을 가지고 있다. 그렇다면 데이터를 가져오는 것과 같이 시간이 걸리는 작업이 중간에 끼어있다면 그 다음 작업까지 아무것도 하지 못하는 것일까? 그렇지 않다.(이러한 방식으로 진행된다면 아무도 사용하지 않을 것이다) 여기에서는 두가지 방법이 있는데 첫번째는 브라우저에 함수로 직접 일을 처리하는것이고 두번째는 필요한 작업이 끝나면 브라우저가 자바 스크립트에게 함수를 실행하라고 알려주는것이다(함수를 전달,콜백) 273. callback 지옥 콜백이 필요한 작업을 하다보면 (1단계가 끝나면 2단계를 실행하고 2단계가 끝나면 3단계를 실행하는 것처럼) 개발자가 무수히 중첩된 콜백 안에 콜백을 만나게 되는데 이를 콜백 지옥이라한다. 콜백 지..

고급 선택자 종류 input 요소중 select 와 check box는 특수한 요소라 webkit-appearance의 기본 스타일이 적용된다 따라서 내 입맛대로 스타일을 변경하려면 -webkit-appearance: none -moz-appearance: none appearance: none 을 설정해줘야 한다 폰트의 종류 제네릭의 종류가 계열의 느낌이고 이 제너릭의 종류를 타고가서 해당 제너릭의 기본 속성이 포함된 폰트 패밀리가 여러개 있는 것이다 (같은 제너릭 = 같은 뿌리라고 생각하면 되겠다) serif: 작은 돌출선이 있는 것 sans-serif: serif가 없는 것 cursive: 필기체 폰트가 보여지는 3가지 방법 font-familiy: "a-font" , "b-font", sans-s..

모바일 기기는 많은 픽셀이 작은 기기에 포함되기 때문에 기존의 브라우저에서 96px 을 1inch로 적용하는 계산식에 맞지 않게된다 (모니터에서는 잘 맞다) 그래서 실제 모바일 기기의 픽셀을 pixel ratio라고 부르는 비율을 참고해서 브라우저에서 실제 크기가 아닌 비율만큼 작아진 픽셀로 인식하게 하는 방법을 취한다 이때 실제 기기의 화면 크기를 '하드웨어 픽셀' 이라고 하며 소프트웨어상 조정된 화면의 크기를 '소프트웨어 픽셀'이라고 한다 브라우저에서 소프트웨어 픽셀로 인식하게 하기 위해 뷰포트 메타태그를 넣어준다 반응형을 위한 두가지 도구 메타 태그를 통해 줌 최대 배율, 최소 배율, 초기 브라우저 배율, 배율 가능 유무등을 지정할 수 있다 요즘엔 모바일 버전을 먼저 만들고 데스크탑 버전을 만드는게..

태그 직전에 을 넣어서 js 파일을 포함시켜준다 요소가 다 구현되고 이를 js가 건들이기에 안전하다 브라우저는 html의 요소들을 DOM (문서객체모델)이라는 가상의 모델로 구현하는데 js언어를 통해 이 dom에 접근할 수 있다 let element = document.querySelector('#아이디 .클래스 요소 etc...') 을 통해 요소 1개를 가져올 수 있고 let elements = document.querySelectorAll('#아이디 .클래스 요소 etc...') 을 통해 여러개의 요소를 가져올 수 있다 그 후 addEventListener()와 같은 메소드를 이용해서 이벤트(상황) 발생시 요소의 변화를 주는 코드를 작성할 수 있다 element.classList .add() .rem..

px,%,rem,em,vh,vw 등 다양한 종류의 단위가 있다 각각은 어떻게 적용되고, 나는 어떤걸 써야할까? 절대 길이 : px 뷰포트 길이: vh 폰트 상대 길이: rem, em %는 무엇을 기준으로 하는 걸까? %는 컨테이너 블록을 기준으로 하는데 이 컨테이너 블록은 position에 따라 달라진다 fixed인 경우 뷰포트가 %의 기준이 된다 absolute인 경우 조상(position이 static이 아닌 가장 인접한 부모 요소)콘텐츠와 패딩의 합이 %의 기준이 된다 그외에 경우 가장 인접한 block ㅎ 부모 요소의 컨텐츠를 %의 기준으로 한다 max-width,min-width: %로 값을 설정하게 되면 기기마다 그 크기가 다를건데 거대 tv같은 곳에서 너무 커지는 것을 방지하고자 max-wi..

background 특성 background-repeat: 이미지가 컨테이너보다 작을경우 반복을 하는데 no-repeat, x,y 등으로 반복을 하지 않거나 x축,y축으로만 반복하게끔 설정 가능 background-size: 너비,높이 크기 설정 (px ,% ,cover, contain ...) cover: 컨테이너를 꽉 채움 (확대,축소를 알아서 함, 따라서 이미지 잘림) contain: 이미지의 크기(비율) 그대로 출력 background-position: 이미지 위치 이동 (px은 그만큼 공간을 띄우고, %는 그만큼 이미지를 잘라냄,기본 50% 50%) background-origin: 이미지 컨테이너의 크기를 지정함 (기본값은 padding, 즉 컨텐츠+패딩까지 이미지를 채우고, border-bo..