자바스크립트 - var / const / let 이란? 왜 let과 const가 생겼을까?

var / let / const 이란? var 자바스크립트에서 변수를 선언할 때 var를 사용하였다. var a = 'superman'; 문자도 var 숫자도 var 하나로 동일하게 사용하여서 편리하였는데 ES6 이상 문법으로 갑자기 let과 const가 생겼다. const const b = 'batman'; // 변경 불가 const로 선언한 변수는 값을 변경할 수 없습니다. 변하지 않는 상수의 값만 선언할 수 있습니다. let let은 var와 같이 변수의 값을 변경 가능합니다. 하지만, 유효 범위가 다릅니다. var result; function add(a, b) { result = a + b; // 접근 가능 return result } let은 { } 괄호 안의 선언된 범위 안에서만 접근이 가능..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 17.
• textsms

SSR(서버 사이드 렌더링)과 CSR(클라이언트 사이드 렌더링) 차이점과 장점

SSR과 CSR 이란 무엇이고, 언제 사용하는지 알아보도록 하겠습니다. SSR (서버 사이드 렌더링) 이란?SSR의 경우 서버에서 바로 렌더링 할 수 있는 HTML 파일을 만들어서 전달합니다. 그 이후 js 파일을 로드합니다.장점미리 만들어진 HTML 파일을 가져오기 때문에 검색엔진 최적화에 좋습니다.초기화면 렌더링 속도가 빠릅니다.CSR (클라이언트 사이드 렌더링) 이란?CSR은 서버에서 HTML과 자바스크립트를 함께 전달합니다. 자바스크립트가 모두 로드된 이후에 페이지가 로드됩니다.장점매끄러운 화면 전환사용자 경험 향상 화면 렌더링 방식SSR (서버 사이드 렌더링)흰 화면 -> 서버에서 내려준 HTML 렌더링 -> 자바스크립트 파일 로드 CSR(클라이언트 사이드 렌더링)흰 화면 -> 자바스크립트 파일..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 15.
• textsms

자바스크립트 - onclick / addEventListener 이용하여 이벤트 사용하기

HTML과 자바스크립트에서 이벤트를 등록할 수 있습니다. 1. HTML에서 이벤트 등록 btn1 HTML 태그에 onclick을 입력하여 클릭 이벤트를 등록하는 방법이 있습니다. 2. JavaScript onclick 속성 추가하기 자바스크립트에서 onclick속성을 부여해서 이벤트를 추가하는 방법이 있습니다. const btn = document.querySelector('#btn2'); btn.onclick = function() { alert('Hi') }; 3. addEventListener를 이용하여 이벤트 등록하는 방법 element에서 addEventListener를 이용하여 클릭 이벤트를 등록할 수 있습니다. const btn = document.getElementById('btn'); b..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 14.
• textsms

자바스크립트 - transitionend 이용하여 배경색 슬라이드 만들기

HTML, CSS, 자바스크립트를 이용하여 배경색을 1초마다 다른 색으로 변경시켜 보도록 하겠습니다. 변경도 자연스럽게 슬라이드 되도록 한번 해보도록 하겠습니다. 아래 run pen을 누르시면 동작합니다. See the Pen slide by powerku (@powerku) on CodePen. 먼저 HTML을 이용하여 div, ul, li 태그를 만들어줍니다. li 태그들이 이동하면서 화면이 슬라이드 되는 것처럼 보이게 됩니다. css도 추가합니다. .box { width: 300px; height: 300px; position: relative; overflow: hidden; } ul { position: absolute; top: 0px; left: 0px; width: 2100px; heigh..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 11.
• textsms

춘천 코젤 맥주 맛집 - 췌스케 피보

춘천 요선동에 있는 코젤을 판매하는 맥주 맛집을 소개해드리려고 합니다. 체스케 피보입니다. 이름이 쉽지 않던데, 가게 간판을 보고 읽기 어려운 간판이 보이면 그 집이라고 생각하시면 됩니다. 가게는 1층과 2층이 있습니다. 1층에는 2 테이블, 2층에는 여러 테이블이 있습니다. 1층에는 예쁜 그림들이 있어서 마치 유럽 여행을 온 듯한 느낌을 들게 합니다. 오랜만에 흑맥주를 맛있게 먹어서 소개해드리려고 합니다. 코젤다크 맥주 620cc를 시켰습니다. 전용잔에다가 맥주를 따라서 줍니다. 거품이 너무 부드러웠습니다😀 저는 살라미 & 딥 치즈를 시켰습니다. 맥주 안주로 먹기 좋았습니다. 저 과자에 크림치즈를 바르고 소시지와 야채와 올리블 함께 먹으면 맛있습니다. 맥주 한 입, 안주 한입 먹으니 맛있더군요. 흑맥주..

• format_list_bulleted 일상/맛집
• · 2023. 2. 8.
• textsms

HTML iframe 이용해서 다른 사이트 가져오기

iframe 이란? iframe은 다른 웹사이트나, 다른 HTML을 삽입할 때 사용합니다. 간단하게 이 포스트에 iframe을 이용하여서 카카오 지도를 올려보겠습니다. map.kakao.com 사이트를 가지고 왔습니다. 아래와 같이 iframe 태그 내에 src 속성에 본인이 띄우고 싶은 사이트의 url을 작성하면 사이트를 띄울 수 있습니다. 네어버나, 구글 같은 경우에는 iframe으로 띄울 수 없게 막아 논 것 같습니다. 403 에러가 뜨더군요. src 속성 변경 src 속성을 변경하게 되면, 변경 된 url로 사이트가 변경되게 됩니다. iframe에 내용을 변경할 수 도 있씁니다. const frame = document.querySelector('iframe'); frame.setAttribute..

• format_list_bulleted Develop/CSS
• · 2023. 2. 8.
• textsms

React - useRef() DOM 요소에 접근할 수 있는 Hook

useRef() useRef는 React Hook API 중의 하나입니다. DOM 요소에 접근하거나, 상태값을 저장할 때 사용하는 API입니다. 내부 current 변수에 저장하게 됩니다. document.getElementById와 비슷한 역할을 하게 됩니다. 1. DOM 요소 가져오기 function Search() { const inputEl = React.useRef(null); function changeHandler() { console.log(inputEl); } return ( Search ) } React.useRef를 선언하고, 아래에 element 태그에 ref에 useRef()를 선언한 변수를 넣어줍니다. input의 change 이벤트와 button의 이벤트에서 동일하게 input..

• format_list_bulleted Develop/React
• · 2023. 2. 5.
• textsms

올리브영 향 좋은 바디 워시 추천 - 퓨어시카 쉐어

안녕하세요 올리브영에서 판매하는 바디워시 추천드리려고 합니다. 저는 평소에는 좋은 향이나 이런 거에 큰돈 쓰고 싶지 않아서 쿠팡에서 판매하는 해비파스나 최저가 바디워시를 구매했는데요. 이번에 올리브영에서 구매한 퓨어시카 쉐어 바디워시를 구매했었는데요. 향이 너무 좋고 용량도 1000mg으로 넉넉해서 가성비 제대로 뽑은 바디워시입니다. 이 향은 화이트 머스크 향입니다. 은은하게 나오는 이 고급스러운 향이 과연 8000원대의 바디워시가 맞나 싶을 정도로 너무 좋았습니다. 이걸 사용한 이유로 자꾸 샤워하는 시간이 너무 좋고 자꾸 기다려지네요. 화이트 머스크 향과 베이비파우더 향 두가지가 있습니다. 베이비 파우더 향도 사용해보고 싶네요. 저도 30대 아재라 점점 올인원 제품이나 간편하고를 많이 찾게 되는데 남자..

• format_list_bulleted 일상/리뷰
• · 2023. 2. 2.
• textsms

자바스크립트 - 문자열과 배열 안에 글자 확인하는 함수 includes

자바스크립트 String, Array에서 사용할 수 있는 includes 함수에 대해서 설명드리겠습니다. 간단히 includes 함수 사용법에 대해서 알아보겠습니다. String에서도 사용할 수 있고 Array에서도 사용할 수 있습니다. const array = [1, 2, 3]; console.log(array.includes(2)); // true console.log(array.includes(4)); // false const string = 'Hello Javascript'; console.log(string.includes('Hello')); // true console.log(string.includes('Hi')); // false 첫 번째는 array 함수에서는 2가 있는지 여부를 확인하..

• format_list_bulleted Develop/JavaScript
• · 2023. 2. 2.
• textsms

5개월 간 준비한 바디 프로필 후기

2021년에 12월에 바디 프로필을 촬영하였다. 약 1년 조금 넘었지만, 어떻게 준비했는지를 적어보고 싶다. 2021년 8월부터 시작했었다. 8월부터 12월 초까지 해서 약 4개월 정도 진행 했었다. 식단과 운동은 아래 표와 같이 진행했었다. 식단 운동 8월 점심 일반식 아침&저녁 식단 아침 공복 유산소 30분 퇴근 후 웨이트 1시간 유산소 1시간 9월 평일 ALL 식단 주말 한끼 일반식 아침 공복 유산소 30분 퇴근 후 웨이트 1시간 유산소 1시간 10월 평일 ALL 식단 주말 한끼 일반식 아침 공복 유산소 50분 퇴근 후 웨이트 1시간 유산소 2시간 11월 ALL 식단 아침 공복 유산소 50분 퇴근 후 웨이트 1시간 유산소 2시간 식단 식단은 닭가슴살 100g 현미밥 or 고구마 100g 삶은 계란 ..

• format_list_bulleted 일상/이야기
• · 2023. 1. 30.
• textsms