본문 바로가기

항해9973

[리액트 React] 숙련 학습 자료 정리 ✅ 컴포넌트 꾸미기(CSS-in-JS) 1️⃣ CSS-in-JS란? 단어 그대로 자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 새로운 패키지를 사용한다. 2️⃣ styled-components란? 리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지 👌 yarn add styled-components 👌 기본적인 사용법 SC의 기본적인 원리는 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고 그 안에 스타일 코드를 작성하는 방식으로 진행된다. * App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import 한다. import styled from "styled-component.. 2022. 7. 29.
[생활코딩] 입문자를 위한 자바스크립트 기초 강의 #자바스크립트 소개 # 자바스크립트 기초 초반 기초 내용은 사실 아는 내용들이지만, 천천히 정리해가면서 개념을 다져가고자 정리를 시작하려고 한다! 꾸준히 매일매일 공부하기👌 ✅ 자바스크립트란 - 자바스크립트는 프로그래밍 언어이다. - 자바스크립트는 주로 웹(웹사이트) 개발을 위해 사용한다. - 브라우저가 가진 기능을 실행 시키거나, 웹 페이지의 내용을 조작할 수 있다. ✅ 객체란 무엇일까 - 객체는 자바스크립트의 핵심 개념으로, 값 또는 기능을 가지고 있는 데이터이다. - 사용자는 자바스크립트 코드를 이용해 웹브라우저 객체에 접근할 수 있다. - 객체 뒤에 점을 찍으면, 객체가 가진 데이터가 기능을 사용할 수 있다. - 객체가 가진 기능을 '메소드'라고 한다. - 자바스크립트 문법에도 주석이 있다. 두 가지 방법으로 주석을 만들 수 있다 (//.. 2022. 7. 28.
[리액트 React] 입문 학습 자료 정리 ✅ React란 무엇일까? 1️⃣ React.js React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript라이브러리이다. "컴포넌트"라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕는다. 프론트엔드 개발자사이에서는 앵귤러, 뷰와 더불어 가장 많은 인기를 얻고 있다. SPA를 전제로 하고 있으며, Virtual DOM을 활용하여 업데이트 해야하는 DOM요소를 찾아서 해당 부분만 업데이트 하기 때문에, 리렌더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 낼 수 있다. 2️⃣ 주요 특징 🔹 컴포넌트 기반 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만든다. 그리고 이를 조합해 복잡한 UI를 만들어본다. 컴포넌트 로직은 템플릿이 아닌 JavaScri.. 2022. 7. 28.
[리액트 React] 기초반 강의 4주차 정리 ✅ keyframes 1️⃣ keyframes 사용하기 keyframes는 styled-components 안에 이미 들어있다. 웹에서 애니메이션을 구현할 때는 transition과 animation이라는 스타일 속성을 많이 사용한다. 🔹 transition : 단순한 엘리먼트 상태변화에 쓰기 좋다. 🔹 animation : 다이나믹한 효과를 주는데 쓰기 좋다. keyframes는 animation에서 사용하는 속성 중 하나이다. 👌 네모 박스를 동그라미로 바꾸고 위 아래로 움직이는 것 만들어 보기 ▶️ 새 프로젝트에 styled-components 설치해주어야 한다. ▶️ 네모박스 만들기 import React from 'react'; import './App.css'; // styled와 keyfra.. 2022. 7. 28.
[리액트 React] 기초반 강의 3주차 정리 ✅ Event Listener 1️⃣ 이벤트 리스너란? 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것 ex) 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등 이벤트 리스터는 에서처럼 엘리먼트에 직접 넣어줄 수도 있고 addEventListener를 통해 추가해볼 수도 있다. 👌 클래스형 컴포넌트에서 event listener 구독하기 🔹 이벤트 리스너의 위치 클릭을 하건, 마우스를 올리건 DOM 요소가 있어야 이벤트가 발생하는 지 지켜볼 수 있다. 즉, componentDidMount()에 넣어주면 된다. ▶️ 어떤 행동(= 이벤트 발생) 뒤에 실행할 함수 먼저 만들기 hoverEvent = (e) => { // 콘솔로 이 이벤트가 누구에게서 일어났는 지 확인할 수 있다. .. 2022. 7. 27.
[도서] 1일 1로그 100일 완성 IT지식 #통신 ✅ 통신 79번 : 곳곳에 도사리는 위험 👌 웹의 보안 위협 문제 1. 클라이언트(여러분) 공격 2. 서버(가령 온라인 매장 또는 은행) 공격 3. 전송 중인 정보 공격(무선 통신을 스누핑하거나 NSA가 광케이블상의 모든 트래픽을 탈취하는 행위 등) 1️⃣ 클라이언트 공격 스팸이나 추적같은 단순히 골칫거리를 만드는 공격뿐만 아니라 더 심각한 문제를 야기하는 공격, 특히 다른 사람이 여러분으로 가장할 수 있게 하는 신용카드 번호, 은행 계좌 번호 또는 비밀번호 같은 개인정보 유출이 포함된다. 🟡 추적을 줄이려면? 🔹 제 3자 쿠키(third-party cookie)(여러분이 방문한 웹사이트가 아닌 다른 웹사이트에서 온 쿠키)를 금지한다. 🔹 트래커를 비활성화하는 브라우저 애드온을 사용한다. 🔹 자바스크립트.. 2022. 7. 25.

티스토리툴바