꺾이지 않는 마음

웹 개발 공부를 하다 보면 데이터를 어디다가 저장할 일이 발생한다. 서버를 구축해서 데이터를 관리하면 되지만 이는 백엔드 영역으로 나름의 지식이 필요하다. 프론트엔드만을 공부했거나, 굳이 거창하게 서버까지 열어서 저장할 필요가 없는 데이터들은 로컬 스토리지만 사용해도 충분하다. 📌 로컬 스토리지(Local Storage) vs 세션 스토리지(Session Storage) 웹 저장소에는 이 두가지가 존재한다. 차이점은 데이터의 영속성에 있다. 로컬 스토리지에 저장한 데이터는 반영구적이다. 사용자가 브라우저 캐시를 삭제하거나 다른 브라우저로 변경하지 않는 이상 계속 저장된다. 반면 세션 스토리지는 웹 페이지를 닫으면 초기화된다. 휘발성 있는 데이터를 저장하기에 좋다. 또한 각각의 인터넷 창이 세션 스토리지에..

JS로 HTML 요소를 제어하는 연습을 하다가 class나 id 말고 다른 무언가로 접근할 필요성을 느꼈다. 비슷한 성질을 가진 요소끼리 묶되, 구체적인 식별자는 다르게 하고 싶었다. 그래서 찾아보니 data- 속성이 있더라 그래서 정리해보았다! 1️⃣ data 속성이란? HTML5 에서 새로 추가된 문법으로 각 데이터들을 구분할 수 있게 해주는 속성이다. 각 태그에 이름?을 붙인다고 생각하면 쉽다. 개발자가 특정 요소에 원하는 데이터를 저장하여 구분하고 싶을 때 사용한다. 브라우저가 DOM을 구성할 때 이 data- 속성으로 지정한 값들을 dataset이라는 별도의 node에 저장한다. 그래서 나중에 JS를 사용하여 DOM에 접근할 때 dataset이라는 개념을 활용하여 data- 속성을 가진 요소에 ..

요즘 리액트를 공부하면서 JS와 마크업 기본기가 부족하다는 생각이 자꾸만 들었다. 그래서 HTML/CSS/JS 기본기 관련 포스팅을 꾸준히 하면서 복습할 계획이다. 오늘 복습할 주제는 '타이머 함수'다. 🕑 타이머함수 웹 브라우저에 기본적으로 내장되어 있는 API로, 타이머를 설정하여 일정 시간에 따라 특정 코드를 실행시키는 기능을 수행한다. setTimeout, setInterval, clearTimeout, clearInterval 총 4가지가 있다. setTimeout(함수, 시간) 일정 시간 후에 함수를 실행 setInterval(함수, 시간) 일정 시간 마다 함수를 실행 clearTimeout(타이머함수) setTimeout 함수로 만든 타이머 삭제 clearInterval(타이머함수) setI..

원티드 웹 사이트를 클론코딩하는 도중에 버튼 클릭 효과를 까먹어서 정리하게 되었다. 내가 구현하고 싶은 영역은 위의 버튼이 나열된 슬라이드이다. 수많은 버튼 중 클릭한 버튼만 파란색으로 저렇게 강조효과를 주고 싶다. 이렇게 클릭한 버튼과 클릭하지 않은 버튼의 스타일에 차이를 두고 싶을 때 가상선택자를 사용한다. 버튼에 주로 쓰는 가상 선택자는 :hover, :focus, :active 등이 있는데, :hover는 마우스를 대상에 올려놨을 때, :focus는 클릭하고 난 후, :active는 클릭하는 도중을 지정한다. 우선 해당 스타일을 적용하기 위해 버튼을 만들어 보았다. 슬라이드 내에 여러 버튼을 나열할 거기 때문에 'react-slick'이라는 라이브러리를 활용하고, 현재 활용 연습중인 'compon..

리액트를 공부하다 필수개념인 라우터를 정리할 필요가 있을 거 같아 포스팅해 보았다. ❓라우팅이란? 사용자가 요청한 URL에 따라 그에 맞는 페이지를 보여주는 기능을 라우팅이라고 한다. HTML에서 쓰는 a 태그로 경로를 연결하면 전체 페이지가 랜더링 되기 때문에, 리액트에서는 필요한 컴포넌트만을 랜더링 하기 위해 라우팅 개념을 활용한다. 라우팅 관련 라이브러리가 많이 있지만, 그 중에서 가장 많이 쓰는 **리액트 라우터(React Route)**를 학습해보자. 1️⃣ 리액트 라우터 사용하기 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에 맞게끔 여러 종류의 라우터 컴포넌트가 존재한다. 일반적인 환경에서는 컴포넌트와 컴포넌트를 가장 많이 사용한다. BrowserRouter: HTML5에서 지원하..

📩 리액트에서 서버와 통신하려면 ajax를 사용하자 기존 HTML에서 서버와 통신하려면 Get과 Post를 사용했다. form 태그 안에 넣어서 인풋값으로 얻은 데이터들📩을 특정 주소로 전달할 때 이런 식으로 주로 사용했다. 근데 이러면 브라우저가 새로고침 되는 문제가 발생한다. 또한 기본적으로 자바스크립트는 동기 처리 방식인데, 이러한 방식은 서버에서 받아올 데이터 양이 많을 시 브라우저 전체의 로딩 속도를 늦추기 때문에 기본적으로 데이터 송수신은 비동기 처리방식을 채택하고 있다. ajax는 서버에 GET, POST 요청을 할 때 새로고침 없이(비동기 방식으로) 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다. AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 된다. XMLHtt..

인강으로 리액트를 배우다가 기초 개념이 부족하다는 생각이 들어서 공식문서를 정독하기로 했다. 가볍게 쭉 훑어보니까 리액트를 처음 접하는 사람은 공식문서를 첫 학습교안으로 삼기엔 다소 무리가 있어 보였다. 리액트에서 사용하는 JSX 문법과 컴포넌트의 개념에 대해 알고 있던 나에게도 공식문서는 꽤 어렵게 느껴졌다. 나는 리액트 공식문서를 학습하면서 정리한 내용을 본 게시글에 포스팅할 것이다. 어렵게 쓰여있는 공식문서의 내용을 보다 쉬운 말로 풀어서 나만의 언어로 정리하고 설명하려 한다. 리액트 공식문서 링크: https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interf..

bind 메소드는 자바스크립트에서 함수를 호출할 경우 사용할 수 있는 내장 메소드이다. 기본 문법은 다음과 같다. function.bind(thisArg, [arg1, arg2, ...]) - thisArg: this가 가리킬 객체를 지정 - arg: 함수의 인자로 전달할 값 이 때 thisArg는 선택옵션이며, null을 지정할 수도 있다. bind 메소드를 사용하면 새로운 함수를 반환한다는 점도 알아두자. MDN에 나와있는 예제로 이해해보자. const module = { x: 42, getX: function() { return this.x; } }; module 이라는 객체를 생성하고, 그 안에 변수 x와 getX를 저장하였다. console.log(getX); // 결과: 42 getX에서 th..