이야기 정리

while문이란? 조건식이 true일 때까지 반복하는 문법이다. 오직 true일 때만 실행되고, false일 때는 조건문을 반복 후 실행하지 않고 넘어간다. for문과 달리 횟수가 아닌 조건만을 지정하기 때문에 횟수를 몰라도 사용할 수 있다. 때문에 반복 횟수를 모르거나(무한루프 등), 특정 조건 달성때까지 반복해야하는 함수를 쓸 때 유용하다. while(true)로 설정할 시 무한 루프를 의미한다. 조건을 별도로 설정할 시 조건 달성 후 while문을 중단한다는 차이점이 있다. // 사용법 while (/*조건*/) { //콜백할 코드 } Do While 문이란? While문의 변형문 반복 시킬 조건이 true인지 확인하기 전에 코드를 먼저 코드를 실행한 다음, 조건이 true이면 반복한다. 때문에 조..

클론 코딩은 도움이 되지 않는다는 이야기가 있다. 그저 강의만 보고 따라한다면 크게 도움이 되지 않는다. 그러나 이미 잘 만들어진 사이트를 분석해 내 방식으로 코드를 짜보는 건 색다른 경험이며, 추후 실제 사이트를 제작할 때 도움이 된다. 첫 클론 코딩으로는 가장 유명한 사이트 중 하나인 유튜브를 선택했다. 만들어진 페이지 보기 https://clone-coding-youtube.netlify.app/ 전체 코드는 아래에서 확인할 수 있다. https://github.com/beren-105/Mini-Project/tree/main/4_youtube 제작기간 7일 사용할 것 React Tailwind 유튜브 API Git & GitHub 목표 깃을 사용하여 작성한 코드를 깃허브에 올린다. 리액트에서 테일..

자바스크립트 없이 input의 radio 기능을 사용해 간단하게 클릭 애니메이션을 구현할 것이다. 만들어볼 애니메이션은 총 4종류다. 완성 코드는 아래와 같으며, 스크롤을 내리면 나머지 3종도 볼 수 있다. See the Pen Navigation CSS by beren-105 (@beren-105) on CodePen. 0. 기본 레이아웃 기본 레이아웃을 기반으로 4가지를 모두 만들 것이기 때문에 span 태그는 기본적으로 display:none로 두고, 필요할 때만 block으로 사용했다. 보통이라면 label 안에 input을 넣어 코드를 간결하게 적었겠지만, 애니메이션 효과를 만들기 위해 둘을 따로 분리해서 작성했다. 색상 통일을 위해 :root로 기본 색상과 자주 쓰는 transition을 넣어..

이번에는 useNavigate의 사용법과, 이를 이용해 값을 가져오는 방법, 그리고 리액트에서 페이지 뒤로가기 버튼을 만드는 간단한 방법에 대해 설명할 것이다. useNavigate란? 조건을 만족했을 시(로그인, 양식 제출 등), 혹은 특정 이벤트 발생 시 url을 조작할 수 있는 Hook 특정 조건을 달 수 있다는 점에서 Link와 차이점이 있다. Link는 a태그라고 생각하면 편하다. react v6부터 useHistory의 대체제로 등장했다. useHistory에서 사용했던 기능을 useNavigate에서도 사용할 수 있는 것이다. 기본 사용법 react router dom을 설치한 후 다음과 같이 코드를 작성한다. 설치 코드 : npm install react-router-dom import {..

얼마전 트위터에서 한 유저가 공유한 코드가 있었다. 새로고침을 해도 다크 모드가 유지되는 코드였는데, 이 코드에 사용된 것이 localStorage였다. (해당 유저의 코드는 최하단 참조란에 링크를 넣었다.) localStorage을 사용하는 방법과 이를 이용해 다크 모드를 만드는 방법 두가지에 대해 알아보려 한다. 다음은 완성된 코드다. See the Pen Dark Mode by beren-105 (@beren-105) on CodePen. localStorage란? 브라우저의 key-value 값을 Storage에 저장할 수 있으며, 저장된 데이터는 세션간 공유된다. 즉, 세션이 바뀌어도 저장된 데이터 값은 유지된다. 같은 컴퓨터에서 같은 브라우저를 사용하는 이상 브라우저에 저장되는 것이다. 브라우..

eval 함수는 왜 사용하면 안될까? 계산기를 만들기 위해 코드들을 참고하다보면 자주보는 코드가 있다. 바로 eval 함수다. eval 함수는 전달된 문자열을 JS코드로 해석해 해석된 코드를 실행한다. 얼핏 편리해보이는 이 함수를 어째서 사용해선 안될까? 이유는 크게 3가지로 나눌 수 있다. 성능 : 어떤 문자열이 함수에 전달될지 예측하기 어렵다. 보안 : 텍스트 필드에 악성 코드를 입력하면, eval 함수로 실행되어 보안에 위험이 생긴다. 디버깅 : eval 함수에 전달되는 값은 문자열이기 때문에 ‘,’를 제대로 명시 하지 않을 시 문제가 발생한다. 참고 : https://developer-talk.tistory.com/271 위와 같은 이유로 eval함수를 사용하지 않고, 간단한 계산기를 만들었다. ..

HTML 삽입 미리보기할 수 없는 소스 발생한 문제점 타이머에서 index가 서로 공유되는 현상이 발생했다. 해결 하나의 index를 사용해 두 곳에 적용해 발생한 문제로, 각각 index를 따로 선언해주었다. 우선 스톱워치와 타이머를 오갈 수 있는 탭버튼 이벤트를 만들어주었다. // tap 버튼 이벤트 const tapBtn = document.querySelectorAll('.tap') const tapCont = document.querySelectorAll('.tapcon') tapBtn.forEach((tapBtns)=> { tapBtns.addEventListener('click', (e)=> { let id = e.currentTarget.dataset.id if (id) { for (let..

1. 문자열을 배열로 반환하기 split() 문자열을 잘라 배열로 변환하는 메서드 숫자는 문자열로 변환한 뒤에 사용할 수 있다. string.split() string.split(separator) string.split(separator, limit) separator : 끊어야할 부분을 나타내는 문자열(띄어쓰기, 반점 등등) 미 입력시 문자열 전체를 배열로 리턴한다. limit : 최대 분할 수 / 몇개까지 분할할 것인가를 나타낸다. 리미트 이상의 값은 버린다. 사용예시 const string = 'FooBarBaz' const a = string.split() // ['FooBarBaz'] const c = string.split(" ") // ['FooBarBaz'] const b = string..

HTML 삽입 미리보기할 수 없는 소스 현대인에게 한시도 떼어놓을 수 없는 물건은 무엇일까? 당연히 핸드폰이다. 핸드폰 배터리가 10% 이하로 내려가면 점점 초조해지는건 많은 사람들이 공감할 것이다. 사람들에게 중요한 핸드폰에 꼭 들어가는 초기 어플들이 몇가지 있다. 캘린더, 사진, 메모, 카메라, 그리고 시계다. 어떤 핸드폰도 시계에 알람과 스톱워치, 타이머 기능이 탑재되어 있다. 그만큼 시간은 사람들에게 중요한 요소이다. 때문에 두번째 프로젝트로는 스톱워치와 타이머를 선택했다. 두개의 기능을 동시에 만드는 만큼 각각 필요한 요소들을 적어보았다. 어떤 기능이 필요할까? : 스톱워치 현재 초를 표기하는 화면 시작 버튼 리셋 버튼 중간에 시간을 저장할 수 있는 랩 버튼 랩을 하단 리스트로 보기 어떤 기능이..

개발공부를 시작하면 DOM이란 단어를 쉽게 볼 수 있다. 그렇다면 DOM이란 무엇이고 무슨 뜻일까? DOM과 브라우저를 비롯해 웹 사이트의 간단한 개념에 대해 알아볼 것이다. 웹사이트 웹 사이트란? 일반 URL을 통해 보이는 웹 페이지를 의미한다. HTML, CSS JavaScript로 이뤄져있다. HTML, CSS JavaScript의 차이 HTML : HyperText Markup Language 브러우저에게 웹 사이트의 요소들이 어떻게 구성되어 있는지 알려주는 역할, 사람으로 치자면 뼈대에 해당한다. CSS : Cascading Style Sheets 웹 사이트의 요소들을 꾸며주는 역할로, 사람의 외관이라 생각하면 된다. JavaScript 브라우저에 다양한 일을 수행하고, 웹 사이트의 요소를 생성..