삽질방지구역 (64) 썸네일형 리스트형 [vue] v-if와 v-show의 차이점 , vue3에서 v-if와 v-show 목차 v-if란 v-show란 vue3에서 v-show사용시 주의할점 v-if와 v-show 중 어떤것을 쓰는것이 좋을까?\ 요약: v-if와 v-show의 가장 큰 차이점은 v-if는 조건이 맞지않으면 아예 랜더링 하지않고 v-show는 조건에따라 css 로 display: block/ display: none처리가 됩니다. 1. v-if v-if="조건"으로 쓰면 조건의 참, 거짓 결과값에 따라 요소를 표시할지 안할지 결정할 수 있습니다. 여러가지 요소를 표시/표시하지않음 으로 한꺼번에 하고 싶으면 아래와 같이 wrapper에 v-if를 주면 됩니다. 안뇽 title ... 2. v-show v-show는 v-if와 동일하게 화면에 보여주냐 안보여주냐를 조건문 값을통해 결정할 수 있는데 v-if와 .. 입안에서 살살녹는 흑돼지 항정수육 "해수육장" 세줄요약 인기가 많은 집으로 쫌 많이 시끄럽다. 수육 너무 맛있다. 양도 많다. 초무침이 살짝 느끼함을 잡아주려 시켰지만 고기 + 고기 느낌이어 아쉬웠다. 기가막히는 술도둑 항정살 수육을 파는 "해수육장" 입니다. 해수육장 주소: 제주 제주시 동광로 6길 25 1층 영업시간: 12:00 - 23:00 (15:00-17:00 break time) 둘째, 넷째주 목요일 휴무 전화번호: 0507-1352-1273 먹기 전에는 항정살이 기름이 많은 특수부위라 느끼하지 않을까 생각했었는데, 방문 했을 때 거의 모든 테이블에서 수육을 먹고잇었고 '아 이가게 대표메뉸가?' 해서 시켜보았습니다! 기본찬! 항정살 수육 2인- 34,000 / 3-4인 - 37,000 밑에는 부추가 깔려 있으며 항정살 기름이 쮹 빠져 느끼.. 시원하게 야외러닝하고싶을때 필수코스 '삼다수 숲길' 헬스장에서 매번 달리기 하는것도 지루하다면?? 요새 밖에 미세먼지도 없어져서 쾌적한 공기를 마시면서 야외러닝 할 수 있는 곳으로 '삼다수 숲길'을 추천합니다! 주차: 네비에 '삼다수 숲길 주차장' 검색 (* 안에는 만차인 경우가 많아서 들어가는 입구에 차댈 곳이 있다면 주차하고 조금 걸어들어가는걸 추천) 소요시간: 1코스 (1.2km)/ 2코스(5.2km)/ 3코스(8.3km) (저는 2코스 돌앗는데 제 기준 50분정도 걸렸습니다. 뛰고 걷다 반복!) 준비물: 트레킹화, 무릎보호대 (있으면), 진드기퇴치 스프레이 주차한 후 조금만 길을 따라 걸어가다보면 #삼다수숲길입구 로 향하는 팻말을 볼 수 있습니다. 삼다수 숲길은 총 3가지 코스로 구성되어있고 코스를 따라가보면 시작점으로 다시 돌아오는 순환코스로 .. [javascript] javascript engine 이벤트 루프(Event Loop) 와 틱(tick) 목차 자바스크립트 엔진에 대해서 자바스크립트 엔진 동작 원리 런타임 호출스택 비동기콜백 & event loop 1. 자바스크립트 엔진에 대해서 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터(해석기), 대체적으로 웹 브라우저에서 사용됩니다. 엔진에 의한 인터프리터 방식이므로 별도의 컴파일 과정이 필요없다. 즉 웹브라우저에서 즉시 해석되어 실행됩니다. 자바스크립트는 웹브라우저 뿐만아니라 Node.js, Electron, React Native 등의 프로젝트와 그 밖의 다양한 곳에서 동작합니다. *브라우저 별 엔진 종류 스파이더몽키(SpiderMonkey) 최초의 자바스크립트 엔진. 넷스케이프 브라우저를 위해 브렌던 아이크(JS 창시자)에 의해 개발되었다. 엔진은 C++로 구현 그 뒤로 (자바스크립트 .. [javascript] javascript는 메모리관리가 어떻게 될까? (feat. 메모리 누수 사례) 목차 메모리의 생명주기 메모리의 저장공간 Heap과 Stack 가비지콜렉터 메모리 누수 사례 1. 메모리의 생명주기 자바스크립트에서 변수나 함수를 사용할 때 JS엔진은 메모리를 할당하고 더이상 필요하지 않으면 해제 합니다. 메모리 할당은 '이 공간을 내가 쓰겟다'라고 찜해놓는 과정이며, 메모리 해제를 하면 공간이 확보되어 또 다른 용도로 사용할 수 있게 됩니다. [메모리 할당] js 엔진에서 알아서 처리되는 과정이며, 자바스크립트는 생성한 객체에 필요한 메모리를 할당 합니다. (* 메모리관점에서 객체는 변수 타입 object뿐만 아니라 함수와 함수의 스코프까지 칭합니다.) [메모리사용] 변수에서 읽거나 쓰는 것 [메모리 해제] js 엔진에서 알아서 처리되며, 할당되었던 메모리가 해제되면서 해제된 메모리는.. [javascript] 변수 참조타입 메모리 접근 방식, 참조타입 복사가 필요한 이유 (shallow copy, deep copy) 목차 원시값, 참조값이란? 그리고 복사가 필요한 이유 얕은 복사의 정의와 방법 깊은 복사의 정의와 방법 들어가기전에! 자바스크립트 엔진은 가상머신으로 돌아가는데 버츄얼 머신 메모리 모델에는 힙과 콜스택 영역으로 나눠져 있습니다. (힙: 참조타입, 콜스택: 원시타입) 1. 원시값, 참조값 이란? 그리고 복사가 필요한 이유 1.1 원시값이란? 원시값은 기본자료형을 의미합니다. 예: Number, String, Boolean, Null, undefined 변수에 원시값을 저장하면 변수의 메모리 공간에 실제 데이터 값이 저장됩니다. 1.2 원시값은 어떻게 작동하는가? 자바스크립트에서 원시타입을 선언(declare)하면 이는 stack에 저장됩니다. * stack이란 LIFO(last in first out: .. [css] display: flex 완벽 정리, flex container속성, flex item속성 2편 목차 flex-basis flex-shrink flex-grow flex align-self order Flex item에 적용되는 속성들 1. flex-basis (기본값 auto) flex-basis: auto (default) flex-basis: 0 / 50% / 300px/ 10rem / content 등이 올 수 있습니다. flex-basis는 아이템의 기본 크기를 설정하는 것입니다. width와 heightd값과 별반 차이가 없어보이지만 flex-direction(flex container에 적용하는 속성) 값에 따라 축이 바뀝니다. flex-direction:row로 설정하면 flex-basis는 가로 값이 되고 flex-direction:column으로 설정하면 flex-basis는 .. [css] display: flex 완벽 정리, flex container속성, flex item속성 1편 목차 display: flex의 브라우저별 지원현황 display: flex의 html 코드구조 flex의 container(껍데기)에 적용하는 속성들 IE에서 호환안되요... 등 여러 이유로 쓰기를 망설여왔던 display: flex, float과 inline-block을 대신해서 사용하곤 했었습니다. 근데 float은 clear: left,right,both로 해제를 해줘야 다음 요소에 영향이 안가구, inline-block으로 요소를 나열하면 의도하지 않은 여백이 생겨서 부모 요소에 다른처리를 해줘야하는 불편한점이 있엇습니다. 이제는 display: flex와 grid를 적절하게 사용하는 것이 여러모로 장점이 많더라구요 알고보면 스타일 적용하는것도 더 간편합니다! 1. display: flex 브라.. 이전 1 2 3 4 5 6 7 8 다음
