1. Computer Science

브라우저 저장소 (WebStorage : Local, Session / Cookie)

▶️ 브라우저 저장소의 종류 1. Web Storage a. Local Storage b. Session Storage 2. Cookie ▶️ Cookie 란? Cookie는 HTTP 쿠키, 웹 쿠키, 브라우저 쿠키라고도 불린다. 쿠키는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 이 데이터 조각을 저장해 놓았다가 동일한 서버에 재 요청 시 이 정보를 함께 전송합니다. 쿠키가 클라이언트 측에 정보를 저장할 수 있는 유일한 방법이었을 때는 클라이언트 측에 정보를 저장하기 위해 쿠키가 주로 사용되었지만, 모든 요청 마다 쿠키가 함께 전송되기 때문에 성능 저하의 원인이 될 수 있어 지금은 클라이언트 측에 데이터를 저장하기 위해서 로컬 스토리지나 세션 스토리지를 사용하는 것이 좋다..

2023. 8. 29. 18:56
1. Computer Science

크로스 브라우징(Cross Browsing)이란?

▶️ 크로스 브라우징(Cross Browsing)이란? 웹 페이지 제작시, 모든 브라우저에서 깨지지 않고 의도한대로 올바르게(=호환성) 나오게 하는 작업 (=브라우저 간 웹 페이지의 상호 호환성) (다양한 웹브라우저에서 깨지지 않게 보이는 웹페이지 제작 기술) (HTML, CSS, Javascript 작성 시 W3C의 웹 규격에 맞는 코딩을 함으로써 어느 브라우저, 기기에서 사이트가 의도된 대로 보여지고 작동되는 기법) 모든 브라우저에서 화면이 동일하게 표시되게 하는 것을 의미하지는 않습니다. 동일하게 보이는 것이 아니라, 동등한 수준의 정보, 기능 제공이 우선입니다. ▶️ 크로스 브라우징(Cross Browsing) 작업이 필요한 원인 ? 브라우저마다 사용하는 OS가 다르고, 렌더링 엔진이 다르기 때문..

2023. 8. 24. 15:02
4. Git

[Git] Commit Convention

커밋 메시지 구조는 크게 3가지로 나뉜다(제목, 본문, 꼬리말) type: Subject -> 제목 (한칸 띄우기) body(생략 가능) -> 본문 (한칸 띄우기) footer(생략 가능) -> 꼬리말 예시) Feat: Add signin, signup 회원가입 기능, 로그인 기능 추가(예시를 위해 간단히 작성) Resolves: #1 💡 첫 글자를 대문자 / 명령문 사용 (개조식구문) / 제목 끝에 마침표(.) 금지 제목과 본문을 한 줄 띄워 분리하기 본문은 "어떻게" 보다 "무엇을", "왜"를 설명한다. 본문에 여러줄의 메시지를 작성할 땐 "-"로 구분 Feat 새로운 기능 추가 Fix 버그 수정 Refactor 리팩토링 Design CSS 등 사용자 UI 디자인 변경 Comment 필요한 주석 추가..

2023. 8. 24. 14:38
2. FrontEnd/TypeScript

[TS] 타입스크립트 동작 원리

대부분의 프로그래밍 언어는 사실 컴퓨터보단 인간에게 더 친화적이다. 컴퓨터는 인간과는 달리 바이트코드나 기계어, 이진수 같은 아주 단순한 형태의 언어를 기반으로 동작한다 따라서 프로그래밍 언어를 컴퓨터가 바로 이해하고 실행할수는 없다. 컴파일 = 컴퓨터는 우리가 작성한 코드를 실행하기 위해서 해석하기 쉬운 형태로 변환 하는 과정 우리가 작성한 프로그래밍 언어로 작성한 코드를 컴파일하면 코드가 컴퓨터가 이해할 수 있는 기계어 같은 형태로 변환된다 컴퓨터가 이걸 읽어서 실행하고 결과적으로 코드가 실행됨 자바나 자바스크립트 프로그래밍 언어를 컴파일하면 바이트코드(기계어) 형식으로 변환된다 컴파일러 동작 과정 우선, 컴파일러는 프로그래밍언어를 바로 바이트코드로 변환하는것이 아니라 그 전에 추상문법트리(AST)..

2023. 5. 30. 18:33
2. FrontEnd/TypeScript

[TS] JS의 한계점, TS 차이점

목표 - 자바스립트에는 어떤 한계점? - 타입스크립트는 이 한계점을 어떻게 극복함? - 타입스크립트가 다른 언어 대비 갖는 차별점은? ✅ 모든 프로그래밍 언어에는 타입 시스템이 있다. 자바스크립트를 포함해서 우리가 알고 있는 모든 프로그래밍언어에는 사실 타입 시스템이라는게 존재한다. ✅ 타입 시스템이란? 언어에서 사용할 수 있는 아주 여러가지 값들을 어떤 기준으로 묶어서 타입으로 정할지 결정하고 또 코드의 타입을 언제 검사할지 그리고 어떻게 검사할지 등의 우리가 프로그래밍 언어를 사용할때 타입과 관련해서 지켜야 하는 규칙들을 모아둔 체계입니다. 즉, 언어의 타입 관련된 문법 체계 라고도 볼 수 있습니다. 이 타입 시스템은 크게 두가지로 나눌 수 있는데요 - 정적 타입 시스템 : 코드 실행전에 모든 변수의..

2023. 5. 26. 17:39
2. FrontEnd/TypeScript

[TS] TypeScript의 탄생

✅ TypeScript 의 탄생 타입스크립트는 2012년에 마이크로소프트의 개발자이자 C#의 창시자로도 알려진 아주 유명한 덴마크 출신의 개발자 Anders Hejlsberg(앤더스 하일스버그)의 손에서 처음으로 탄생했습니다. (* C#의 창시자가 타입스크립트도 만들었기 때문에 둘이 비슷한점이 꽤 있다.) ✅ TypeScript는 오픈소스이다. 또 타입스크립트는 오픈소스로 공개되어있다. 그래서 현재도 많은 프로그래머들이 이 언어의 개발과 유지보수에 참여하고 있고 다양한 토론을 이어가고 있어서 앞으로도 발전 가능성이 아주 창창한 언어라고 볼 수 있습니다. ✅ TypeScript는 JavaScript의 확장판 타입스크립트는 기존의 자바스크립트를 더 안전하게 사용할 수 있도록 타입 관련된 여러가지 기능들을 추..

2023. 5. 23. 15:02
2. FrontEnd/Three.js

Three.js (01. 정의, 구조 및 개념)

1️⃣ Three.js란? Three.js는 웹페이지에 3D객체를 쉽게 렌더링하도록 도와주는 자바스크립트 3D 라이브러리 Scene을 만들어 그 안에 3D 객체를 넣고, 그걸 Camera로 비추는 것 그리고 그 전체를 Renderer를 통해 HTML Canvas안에 Rendering하여 보여주는 것 대부분의 경우,Three.js는 3D객체를 렌더링하는 데 webgL을 사용 한다. WebGL = 점,선,삼각형만을 그리는 아주 단순한 시스템 WebGL vs Three.js API가 low레벨(개발을 기초부터 해야함) 직접 무언가를 만들려면 상당히 많은 양의 코드를 짜야할 것이고 코드 자체도 복잡하다. WebGL의 단점을 보완하여 쉽고 간편하게 쓸 수 있는 라이브러리 이런 3D요소들의 처리를 도와 직관적인 코..

2023. 5. 23. 12:33
2. FrontEnd/Javascript

[JS] object에 key:value 추가하는 방법

obj라는 object에 ,key3: value3를 추가하여 넣는 방법 const obj = {key1: value1, key2: value2}; 방법01. Using dot notation: obj.key3 = "value3"; 방법02. Using square bracket notation: obj["key3"] = "value3";

2023. 5. 8. 16:10
2. FrontEnd/React

[React Query] isLoading vs isFetching

▶️ isFetching 비동기쿼리가 해결되지 않음 Fetching을 완료하지 않았다는 의미 쿼리가 Axios호출이거나 GraphQL호출일 수도 있다 ▶️ isLoading isFetching에 대한 하위집합 데이터를 가져오는 상태이고, 표시할 캐시 데이터도 없다는 의미 쿼리함수가 아직 해결되지 않은 것이고, 캐시된 데이터도 없다 즉, 이 쿼리를 만든 적이 없다는 의미 no cached data, plus isFetching 많은 차이가 없어보이지만, 나중에 페이지 매김(pagination)을 진행할 때 캐시된 데이터가 있을 떄와 없을 때를 구분해야하한다. 👍🏻참고자료 https://www.udemy.com/course/react-query-react/

2022. 10. 3. 15:14
2. FrontEnd/CSS

[CSS] 반응형 사이트 만들기

▶️ 시맨틱 태그 원래 시맨틱태그가 들어오기 전(=HTML5이전)에는 다음과 같이 class를 지정하여 CSS를 했다고 한다. 하지만, HTML5부터는 시맨틱태그가 나와서 아래와 같은 의미없는 div들을 의미를 가진 명시된 태그가 나왔다. (지금까지 느낀바로는 시멘틱태그 = div+class이름 같다.) header -> 미디어쿼리 @media only all and (조건문) {실행문} 1 2 3 4 5 1️⃣ 유형1 header nav aside section footer 👍🏻 강의 자료 https://www.inflearn.com/course/%EB%B0%98%EC%9D%91%ED%98%95-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%..

2022. 9. 26. 11:58
1. Computer Science

JWT / Cookie / Http Only Cookie

브라우저에서 equest(요청) GET 또는 POST 하게 되는 경우, 모든 쿠키들이 서버에 넘어가 사용자를 체크를 한다 대부분의 사이트가 쿠키를 통해 사용자 식별정보를 쿠키에 저장하며, 쿠키에 저장된 정보를 통해 각 사용자를 구별 사용자 인증을 진행합니다 → 인증을 계속 체크하는 이유는, HTTP 프로토콜이 Stateless (무상태성) 이기에 요청한 사람의 상태정보를 계속 갖고 있지 않고 연결이 끊어지기에 다음 요청 시, 누구인지, 이전에 요청한 같은 사람인지, 해커인지 알 수 없다 이렇게 쿠키를 통해 인증을 하기 때문에 민감한 정보들이 쿠키에 담겨져 있는 데, 해커들은 다양한 방법으로 이 쿠키를 탈취한다. 이러한 쿠키에 대한 보안 공격 중 가장 대중적인 것 중 하나는 바로 세션 하이재킹 공격(Ses..

2022. 9. 19. 10:37
6. Error

[SSR] ":nth-child is potentially unsafe" warning

1️⃣ 원인 : Next.js(SSR)에서의 nth-child경고문 SSR에서 nth-child를 사용하는것은 안전하지 않다 ➡️ nth-child를 nth-of-type으로 변경을 해라. 2️⃣ 해결 : nth-of-type으로 변경 1) 발생 이유 SSR이 구성요소를 렌더링 할 때, 스타일 요소도 함께 렌더링이 된다. 그로인해 nth-child을 사용하면 의도하지 않은 동작으로 될 수 있기에 안전하지 않다는 경고문이 뜬것이다. 2) 두가지는 어떻게 다른지? 2-1) nth-child https://developer.mozilla.org/ko/docs/Web/CSS/:nth-child nth-child(N) = 부모안에 모든 요소 중 N번째 요소 (MDN) - sibling목록에서, 선택하려는 요소의 ..

2022. 9. 19. 09:55
2. FrontEnd/Javascript

[JS] LocalStorage, SessionStorage, Cookie의 차이점

▶️ WEB STORAGE HTML5에는 웹 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage 스펙이 포함된다. Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다. 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다. Web Storage는 기존 웹 환경의 쿠키(Cookie)와 매우 유사한 개념이다. 거의 차이가 없지만 몇 가지 쿠키의 단점을 극복하는 개선점이 도입되었다. (쿠키는 여전히 존재하고 적절한 클라이언트 저장도구이다) HTML5에서 Web Storage 스펙을 새로 추가했지만 쿠키를 배제한다는 의미는 아니므로 ..

2022. 9. 18. 18:59
2. FrontEnd/Javascript

[JS] 호이스팅

노션에 적어서 했던 이론들을 정리하여 올려봅니다 : > ✅ 호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것 ✅ 호이스팅이란 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 { } 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것 실제 메모리에서는 변화가 없다 ✅ 호이스팅의 대상 ..

2022. 9. 11. 16:39
2. FrontEnd/React

[React] React 와 Next 비교

1. Framework vs. Library React.js는 라이브러리이고, Next.js는 React.js의 프레임워크이다. 이 둘의 궁극적인 차이점은 "응용 프로그램의 흐름 주도권을 누가 가지고 있느냐"이다. 1) Framework • 코드를 작성하는 기본적인 틀을 제공해서 보다 효율적으로 어플리케이션을 만들 수 있도록 하는 소프트웨어 환경 • 응용 프로그램은 프레임워크에 의해 사용된다. • 키워드: Rule, Logic, Auto 2) Library • 어플리케이션을 만들 때 필요한 자원(기능: 함수)의 모임 • 응용 프로그램이 라이브러리를 사용한다. • 키워드: Freedom, Custom 즉, React에서는 우리가 모든 것을 직접 생성하고 설정해 주었던 것들이 Next에서는 이미 만들어져 있..

2022. 9. 11. 16:35
5. Blockchain

[Wagmi] Connect Wallet 방법

Wagmi를 사용할 때 당신의 앱에 지갑을 연결하는 것은 매우 간단하며 MetaMask, WalletConnect, Coinbase Wallet으로 시작하고 실행하는 데 5분도 걸리지 않는다. 아래 예제는 useConnect, useAccount 및 useDisconnect를 사용하여 지갑을 연결하고 연결된 계정에 대한 ENS 정보를 볼 수 있는 예제이다. 🍀Connect Wallet 방법 1. Connectors 설정 Injected(예: MetaMask), WalletConnect 및 Coinbase Wallet connectors로 설정된 새로운 Wagmi client를 만든다. import { WagmiConfig, createClient, defaultChains, configureChains,..

2022. 9. 11. 16:27
5. Blockchain

[Wagmi] 개념 및 사용방법

🍀 Wagmi이란? ▶️ React Hooks for Ethereum Wagmi는 Ethereum 작업을 시작하는 데 필요한 모든 것을 포함하는 React Hooks의 모음이다. Wagmi를 사용하면 캐싱, 요청 중복 제거 및 지속성을 통해 "Connect Wallet", ENS 표시 및 균형 정보, 메시지 서명, 계약 및 기타 작업을 쉽게 수행할 수 있다. 🍀 설치 방법 npm i wagmi ethers 🍀 사용 예시 import { WagmiConfig, createClient } from 'wagmi' import { getDefaultProvider } from 'ethers' const client = createClient({ autoConnect: true, provider: getDefau..

2022. 9. 8. 21:40