728x90 JavaScript97 [React] 리액트 장점과 특징 정리 리액트의 장점 Virtual DOM 사용으로 인해 속도가 빠름 페이스북이 리액트를 발표할 때 사용한 캐치프레이즈, 자바스크립트와 리액트의 간단한 개념만 알면 웹, 앱이 모두 개발 가능 리액트는 자바스크립트 친화적이며, 불변성 관리에 초점을 두고 있는 도구 이미 많은 회사들(넷플릭스, 에어비엔비 및 국내 다양한 업체)이 사용하고 있기 때문에 다양한 라이브러리가 존재하고, 질문과 답변이 활발하게 이루어짐 리액트의 특징 1. 컴포넌트(Component) 구조 리액트는 모든 것이 컴포넌트다. 컴포넌트는 레고 블록과 같이 작은 단위로 만들어서 그것들을 조립하듯이 개발할 수 있게 해주기 때문에 캡슐화, 확장성, 결합성, 재사용성 등과 같은 이점이 있다. 2. 단방향 데이터 흐름 리액트에서는 부모 컴포넌트와 자식 컴.. 2023. 4. 11. [JavaScript] 자바스크립트 객체, 내장 객체 정리 객체 알아보기 프로그래밍 언어에서 객체는 여러 가지 의미로 해석할 수 있지만, 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다는 정도로 이해하면 됨. 흔히 자바스크립트는 모든 것이 객체라는 말이 있을 정도로 자바스크립트에서 객체는 중요한 개념임. ※ 자바스크립트에서 사용하는 객체 종류 설명 문서 객체 모델(DOM) 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체임. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있음. 브라우저 관련 객체 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있음. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, .. 2023. 4. 10. [JavaScript] Audio Player 음악 플레이어 만들기 HTML, CSS 및 JavaScript를 사용하여 오디오 플레이어를 만들어보자. HTML5 오디오 요소를 사용하여 오디오를 재생한다. HTML 00:00 / 00:00 다음으로, 컨트롤러를 구성하는 요소를 추가. 이 요소들은 사용자가 오디오를 제어할 수 있는 버튼, 타임 라인, 현재 재생 시간 및 전체 재생 시간을 표시한다. CSS #controls { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 20px; } #play-pause-btn { width: 30px; height: 30px; background-image: url(play.png); background-.. 2023. 4. 9. [JavaScript] 엔터키 이벤트로 입력받기 form에서 input 값을 전송할 때 일반적으로 전송 버튼을 클릭해서 전송을 했다. 그런데 가끔은 키보드의 엔터키를 누름 으로서 form input을 전송하는 기능이 필요할 때가 있다. 엔터 누르면 기능이 수행되도록 하는 엔터키 이벤트에 대해서 알아보자. 검색 버튼이나 조회, 로그인 버튼 등에서 유용하게 쓰일 수 있다. Press Enter for Trigger the Button Press the "Enter" key to trigger the button. Button keyup : 키 누름이 해제될 때 위는 엔터키를 눌렀을 때 작동하는 코드이고 기존의 버튼을 클릭하는 기능역시 동작한다. 키가 눌렸다 떼지는 순간인 onkeyup 이벤트를 받을 곳은 버튼이 아닌 input이다. 여기서 13은 엔터키의.. 2023. 4. 8. [JavaScript] history 객체로 이전 페이지로 돌아가는 방법 history 객체 자바스크립트에서 history 객체는 브라우저의 history 정보(사용자가 방문한 URL 정보)를 저장하는 객체이다. 사용자의 개인정보를 보호하기 위하여 history 객체에 접근하는 방법을 일부분 제한하기도 한다. history 목록으로 접근하는 방법으로 크게 3가지가 있다. 1) history.back() 현재페이지에서 바로 이전의 페이지로 돌아가는 메서드이다. 이전 페이지로 이동 2) history.forword() 현재 페이지에서 다음 페이지로 이동하는 메서드이다. 다음 페이지가 없을 경우 동작하지 않는다. 다음페이지로 이동 3) history.go() 원하는 페이지로 이동할 때 사용하는 메서드이다. history.back()과 history.go(-1)는 같은 동작을 하는 .. 2023. 4. 7. [React] 최상단으로 이동하는 버튼 만들기 (Custom Hook) 화면을 페이지 최상단으로 이동시키는 top button을 만들어보자 유저가 scroll을 했을 때 특정 UI가 노출되도록 하는 custom hook을 만들어서 구현해보고자 한다. Top Button view 만들기 스크롤 바 좌측에 위치시켜 유저에게 최상단으로 이동할 수 있는 button이 있음을 알리기 '위로 이동'이라는 의미를 담은 아이콘 부착 버튼을 좌측 하단에 고정시키기 버튼을 좌측 하단에 '고정'시키려면 position 속성을 정해줘야한다. 처음에는 position 속성을 absoulte를 사용하려 했으나 부모 영향을 받게되어서 내가 원하는 위치에 고정시키기 어려웠다. 그래서 스크롤 할 때 부모 위치와 상관없이 항상 그 자리에 고정시킬 수 있는 fixed 속성을 사용하고 botton과 right.. 2023. 4. 6. [JavaScript] 자바스크립트 해당 위치로 이동하기 HTML 페이지 내에서 원하는 위치로 이동시키는 방법 두 가지 1. 특정 name의 엘리먼트를 찾아 이동하는 A 태그를 이용하는 방법 2. 위치를 기반으로 스크롤을 이동시키는 window 객체내 scrollTo, scrollBy 메서드를 이용하는 방법 1. 태그 이용 태그는 Anchor 의 약자로 닻을 의미하듯이 타겟으로 이동시키는 링크로서의 기능과 링크의 타깃이 되는 기능을 모두 수행한다. 먼저 이동을 시킬 곳(target)에 태그를 위치시키고 해당 엘리먼트에 "name" 속성을 지정해 준다. 그리고 또 다른 앵커태그를 생성하여 해당 "href" 속성을 추가하여 위 name을 지정해 주면 클릭시 위 엘리먼트 위치로 이동하게됩니다. .. .. .. 2. window.scrollTo / window.scr.. 2023. 4. 5. [React] 라이브러리 - 리액트 페이지마다 타이틀 변경하기 1. react-helmet SPA의 가장 큰 단점이 무엇일까? SEO? 우리는 고정된 타이틀만을 사용할 수 밖에 없다. 왜냐하면 싱글 페이지 내에서 컴포넌트들의 변화만 볼 수 있을 뿐이기 때문이다. react-helmet을 사용하면페이지마다 타이틀을 변경해 줄 수 있다. npm install react-helmet react-helmet을 프로젝트에 import한 후, 위와 같이 헬멧 안에 title 태그와 함께 자신이 적용하고 싶은 타이틀을 적용하면 된다. 2023. 4. 2. [JavaScript] 글자 자동 타이핑 효과 구현하기 JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있다. //HTML Language! //CSS div { height: 55px; display: flex; justify-content: center; align-items: flex-end; font-size: 1.8rem; } h1 { font-size: 2.2rem; margin-left: .6rem; } h1::after { content: ''; margin-left: .4rem; border-right: 2px solid #777; animation: cursor .9s infinite steps(2); } @keyframes cursor { from { border-right: 2px solid #222; } to { b.. 2023. 4. 2. [JavaScript] alert 경고창 줄바꿈 하는 법 //JS function handleOnClick() { alert('a\nb\nc'); alert(`d e f`); } 1. '\n'을 이용하는 방법 alert('a\nb\nc'); 줄바꿈을 하고 싶은 곳에 '\n'을 입력한다. 2. 템플릿 문자열을 이용하는 방법 alert(`a b c`); 백틱(`)으로 감싸인 문자열인 템플릿 문자열을 이용하면 백틱 사이의 내용이 그대로 문자열로 전환된다. 줄바꿈 표시도 따로 '\n'을 쓸 필요없이 보여지기 원하는 형태 그대로 문자열을 백틱(`) 사이에 작성하면 된다. alert() 창에서 줄바꿈을 표시하는 것은 Javascript의 문자열에서 줄바꿈을 표시하는 것과 같다. 2023. 4. 1. 이전 1 ··· 3 4 5 6 7 8 9 10 다음 728x90
