TIL
메타마스크 독스 한국어로 훑어보기
전체적인 구조 이 글은 https://docs.metamask.io/guide/ 를 보고 전체적인 구조와 내용을 정리한 글입니다. 1️⃣ Guide 1. 소개 a. 왜 메타마스크인지 안전하고 유용한 이더리움 베이스 웹사이트 위해 만들어짐 계정 관리하고 유저들을 블록체인에 연결함 b. 계정 관리 다양한 방식으로 계정 관련 c. 블록체인 연결 이미 이더리움 블록체인 + 테스트 네트워크에 대한 연결리 로드되어있음 Ethereum 호환 JSON RPC API 를 노출하는 모든 블록체인과 호환됩니다. (새 창을 엽니다), 맞춤형 및 사설 블록체인을 포함합니다. 개발을 위해 Ganache 와 같은 테스트 블록체인을 실행하는 것이 좋습니다 우리는 지속적으로 새로운 프라이빗 블록체인이 생성되고 있음을 알고 있습니다. ..
2021 10월 TIL 모음
Frontend SCSS 관련 @mixin으로 정의된 것은 @include로 가져와서 쓸 수 있다 → CSS 모듈 사용할 땐 클래스명 주의해야한다. 디폴트로 파일이름이 클래스명에 붙기 때문에 부트스트랩 등 디폴트 스타일을 변경할 때에는 아래와 같이 클래스명을 직접 지정해줘야 한다. .carouselWrapper { &__indicator { position: absolute; justify-content: start; margin-left: 60px; bottom: 320px; & li { background-color: $gray-700; list-style-type: none; } & li[class='active'] { width: 1.5rem; height: 0.375rem; border-radi..
20210901~20210910 TIL in Goorm
1. 코드리뷰 관련 1-1. 스타일링 관련 https://medium.com/@utatti/번역-css-modules-8bb6edf4f2f CSS 모듈은 모든 클래스명과 애니메이션명이 지역적 스코프로 선언되어 있는 것을 말한다. 공식적인 스펙은 아니고 웹팩의 도움을 받아 빌드 과정을 거친다. 리액트스트랩 부트스트랩 기반으로 만들어진 컴포넌트 → 부트스트랩 하나하나 가져올 필요 없이 통째로 사용 가능 부트스트랩 뭉뚱그러진 css 스타일링 가능 → 리액스트렙으로 통째로 불러오는 것이 아닌, 세세한 부분 1-2. git flow master : 기준이 되는 브랜치로 제품을 배포하는 브랜치 입니다. develop : 개발 브랜치로 개발자들이 이 브랜치를 기준으로 각자 작업한 기능들을 합(Merge)칩니다. fe..
SOPT 3차 세미나 - React 기본 개념 props, state, hook
🐰 Why use? SPA 등장 SPA 등장 -> JS 유지 보구 위한 라이브러리, 프레임워크 중요성 대두 ) index.html 하나로 모든 것을 해결한다! 기존엔 MPA여서 -> html, css, js 모두 로딩해야 함 but 이젠 일부만 렌더링 장단점이 있음 -> 단점 ) 초기 구동속도 느림, 검색 엔진 최적화가 어려운데 SSR로 해결 가능 🐰 기본 문법 핵심 특징 1. Component UI 구성하는 개별 뷰 단위 ) 적절하게 쪼개서 재사용성 높이기 컴포넌트 조합새 새로운 컴포넌트 만들거나, 복잡한 웹 페이지 사용 가능 클래스형 / 함수형 두 종류가 있음 ) 클래스형은 잘 사용하지 않는다 2. Virtual Dom DOM 요소 변경되면 원래 Render Tree가 만들어짐 -> 바뀔 때마다 새로..
HTML Canvas와 JS 이용해서 그림판 만들기
🙈Intro 그림판 만들기를 통하여 처음으로 HTML Canvas를 이용해보았는데 만들면서 HTML Canvas 기초적인 내용들을 정리해보았습니다:D 1. 기본 캔버스 설정 /*실제로 우리 눈에 보일 캔버스의 모습을 구현*/ .canvas { width: 500px; height: 600px; background-color: white; border-radius: 15px; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08); } const canvas = document.getElementById("jsCanvas"); //캔버스 테그의 요소 가져옴 const ctx = canvas.getContext("2d"); //..
SOPT 2차 세미나 내용 개괄적 정리
2차 세미나 이후 순전히 내가 보기 위한 지극히 개인적인 목적의 정리임! 콜백함수, Primise, Async/Await + HTML Canvas, drag and drop 실제로 다양하게 활용해보고 다시 정리하기 호이스팅 변수의 정의나 함수의 선언이 유효 범위의 최상단으로 올라가는 것 function hoisting(){ console.log(d); //아래 선언된 것이 호이스팅 일어나서 상단부로 옴 ) undefined console.log(e); //ReferenceError var d = "be"; let e = "sopt"; fuction f(){ console.log("28th"); } } hoisting(); 주의사항 전역변수 var을 함수 내부에 같은 이름으로 적으면 내부에 있는 변수가 우..
CSS 단위 em, rem, vw, vh, vmin, vmax 속성
🙈Intro 단위는 반응형 웹의 기본이 됩니다. 단위를 잘못 사용하면 자칫 융통성 없는 화면이 구성되곤 하죠🥲 그래서 오늘은 기본적으로 반응형 웹에서 필수적으로 알아야 하는 단위들을 정리해보고자 합니다! 🐢 Font-Size 기준 1. em 1em = 부모의 폰트 크기이기 때문에 부모의 폰트크기에 따라 그 값이 달라집니다. ex ) 부모의 폰트 크기가 20px이라면 1em=20px / 부모의 폰트 크기가 16px 이라면 1em=16px 2. rem 1rem = html(root element)의 폰트 크기입니다! em과는 다르게 최상위 요소의 폰트크기에 영향을 받아 html의 폰트 크기를 따릅니다. 기본 html 폰트사이즈는 16px이니, 이것을 이용해서 제어할 수도 있겠지요? ex ) 1rem=16px..
MYSQL 8.0 DB 생성과 사용자 생성과 권한 주기
대표적인 RDB(Relational Database)인 MYSQL에 대해 JDBC를 이용해 학습하면서 이 김에 MYSQL에 대한 내용들은 조금씩이나마 정리해보고자 한다. 기본적인 MYSQL의 구동 구조 1. Database 생성하기 mysql -uroot -p MySQL 관리자 계정인 root로 데이터베이스 관리 시스템(DBMS)에 접속하겠다는 의미이다. 이렇게 MYSQL 관리자 계정으로 들어가면 비밀번호를 치라고 나올텐데, Max Os에서는 엔터를, Window Os에서는 비번을 입력해주면 된다 create database DB이름; database를 생성하겠다는 의미이다. 주의할 것은 mysql에 접속한 이상 ; 를 빼먹지 않고 써줘야한다. 2. Database 사용자 생성과 권한 부여하기 Datab..