분류 전체보기
-
[React] JSX 문법 사용 시 지켜야 할 규칙Front-end/react 2023. 1. 17. 14:12
[React] JSX에 대해 알아보기 JSX란? - A synyax extension to JavaScript (자바스크립트의 확장 문법) - JavaScript + XML/HTML const element = Hello, world!; JSX의 역할 - XML, HTML을 JavaScript로 변환(createElement 함수 사용)하는 과정을 거친다 /* JSX를 사 zooozoo.tistory.com 1. 감싸인 요소 리액트 컴포넌트에서 요소 여러 개는 꼭 하나의 요소로 감싸주어야 한다. (root 필요) 이유🧐 Virtual DOM에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. 2. 자바스크립트 표현 JSX 내..
-
[GDSC/슈파인드] 개발 일지 #1-2주 차Front-end/GDSC 2023. 1. 9. 21:52
✅ 회원가입 페이지 구현 [1 Week] - 가입 폼 페이지 컴포넌트화 - react router 적용하기 [2 Week] - 디자인 적용 # 첫 로그인 화면 버튼 클릭 시 모달 컴포넌트 띄우기 Modal.js - styled-components CSS-in-JS 라이브러리를 설치해서 버튼 디자인을 했다. import { useState } from 'react'; import ModalBasic from './ModalBasic'; import styled from 'styled-components'; // 모달을 노출하는 페이지 function Modal() { // 모달창 노출 여부 state const [modalOpen, setModalOpen] = useState(false); // 모달창 노..
-
[GDSC/Front-End] JWT 로그인Front-end/GDSC 2022. 12. 6. 16:46
📕 JSON Web Token 인증에 필요한 정보들을 암호화시킨 JSON 토큰 웹표준으로서, 두 개체에서 JSON 객체를 사용하여 가볍고 자가수용적인(self-contained) 방식으로 정보를 안정성 있게 전달 JWT 기반 인증은 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별하는 방식 📌 JWT 사용 순서 클라이언트 사용자가 아이디, 패스워드를 통해 웹서비스 인증 서버에서 서명된 JWT를 생성하여 클라이언트에 응답으로 돌려줌 클라이언트가 서버에 데이터를 추가적으로 요구할 때 JWT를 HTTP Header에 첨부 서버에서 클라이언트로부터 온 JWT를 검증 📌 JWT 구조 WT는 ‘.’을 구분자로 3가지의 문자열로 되어 있다. aaaaaa.bbbbbb.cccccc 헤..
-
[iOS] UMC iOS 세미나 9주 차iOS/UMC 2022. 11. 21. 22:35
오늘 배운 내용 📕 Network - 클라이언트와 서버는 'HTTP 프로토콜'이라는 정해진 규칙으로 각각 요청, 응답을 수행한다. - HTTP 프로토콜은 GET, HEAD, POST, PUT, DELETE, ... 등의 옵션을 추가할 수 있다. REST API - 클라이언트와 서버가 주고받는 문장을 API라고 할 수 있다. - REST API는 Representational State Transfer의 약자로, 자원의 이름을 구분해서 자원의 정보를 주고받는 것이다. * 하나의 아키텍쳐 개념이며, 데이터를 URI 형식으로 구분한다. - REST API는 행위 / 자원 / 메세지로 구성된다. 행위 자원 메세지 GET / POST / PUT / DELETE URI를 통해 오브젝트에 접근 JSON 포맷의 데이터..
-
[iOS] UMC iOS 세미나 8주 차iOS/UMC 2022. 11. 14. 22:02
📕 Animation 애니메이션은 대표적으로 3가지 경우에 사용한다. 1. 시스템 상태 나타내기 2. 메뉴 및 전환을 나타내기 3. 시각적인 피드백 제공 애니메이션을 나타내는 방법에는 2가지가 있다. 1. UIView의 animate 사용 (iOS 4~) 2. Core Animation 사용 (iOS 10~) UIView.animate 메서드를 이용해서 애니메이션을 구현해보는 실습 // // ViewController.swift // Week8 // // Created by yeonsu on 2022/11/14. // import UIKit class ViewController: UIViewController { @IBOutlet weak var orangeView: UIView! @IBOutlet we..
-
[GDSC/Front-End] React lazy loadingFront-end/GDSC 2022. 11. 8. 15:59
📌 lazy loading 필요 시점까지 객체의 초기화를 연기시키기 위해 컴퓨터 프로그래밍에 흔히 사용되는 디자인 패턴의 하나이다. 페이지를 불러오는 시점에 당장 필요하지 않은 리소스들은 나중에 불러오자! 📌 React image placeholder 대역폭 사용량을 줄이고 사용자 경험을 개선하며 페이지 로딩 속도를 높이기 위해 뷰포트 외부에서 이미지 로드를 연기한다. 1️⃣ 코드 추가 이미지를 지연로딩 하는 방법 중 가장 쉬운 것은 img 요소 안에 loading=" lazy" 속성을 추가하는 것이다. 2️⃣ 이미지 블러 처리 라이브러리 사용 React Lazy Load Image Component 자바스크립트 라이브러리 사용 react-lazy-load-image-component React Comp..