티스토리

ki hyun's 개발블로그

검색하기

블로그 홈

ki hyun's 개발블로그

leekihyun.tistory.com/m

먼지가 해보는 개발 블로그

구독자: 0

방명록 방문하기

주요 글 목록

[TIL] 3장 3.4 가상화 TIL (Today I Learned) 2022.06.08 오늘 읽은 범위 3장. 3계층형 시스템을 살펴보자: 3.4 가상화 가상화란? 컴퓨터 시스템에서 물리 리소스를 추상화하는 것 가상화라고 한다면 크게 와닿지 않을 수 있다. 하지만 우리의 생각보다 가상화는 우리 주변에 존재하고 있다. 대표적인 예로 OS는 우리가 하드웨어를 의식하지 않더라도 컴퓨터를 사용할 수 있게 도와주기에 가상화 기술 중 하나라고 볼 수 있다. OS가 등장하기 이전에는 하드웨어를 의식한 프로그래밍이 필요했고 이는 매우 복잡한 작업이었다. 하지만 OS 커널의 등장으로 하드웨어가 추상화되면서, 컴퓨터에 연결된 기억 장치나 네트워크를 통한 데이터 교환이 하드웨어를 의식하지 않고 이루어지고 있다. 또한, 한번에 하나의 프로그램만 실행되는.. 공감수 0 댓글수 0 2022. 6. 8.
블로그 이사 (from velog) 시작 블로그를 velog에서 티스토리로 옮겼다. 솔직히 처음 블로그를 정할때 티스토리, velog, 개인 블로그 사이에서 엄청 많이 고민했었다. 하지만 결국 velog가 디자인도 가장 이쁘고 개발자들이 애용하는 플랫폼이라 velog에 정착하게 되었는데 velog에는 몇가지 문제점이 있었다. 1. 미니멀하다 이건 장점이자 단점으로 볼 수 있다. 솔직히 처음에는 이런 미니멀함이 좋아서 velog를 선택한 것도 있었지만 이런 미니멀함이 중요한 기능 몇 가지를 빼버렸다는 사실을 알지 못하였다... velog에는 사실상 통계 기능이 존재하지 않는다.(물론 포스트 별로 통계 기능이 붙어 있기는 하지만 하나 하나 눌러서 통계를 보기는 굉장히 귀찮은 일이기에 사실상 통계를 보기가 불가능하다.) 통계가 없다는 것은 생각.. 공감수 0 댓글수 0 2022. 5. 31.
[TIL] 3장 3.3 웹 데이터 흐름 TIL (Today I Learned) 2022.05.24 오늘 읽은 범위 3장. 3계층형 시스템을 살펴보자: 3.3 웹 데이터 흐름 웹 데이터의 흐름 클라이언트 PC부터 웹 서버까지 1. 웹 브라우저가 요청을 한다 2. 이름 해석을 한다. 인터넷상의 주소는 IP라는 숫자로 표현되 있는데 이러한 숫자는 읽기도 기억하기도 매우 불편하다 따라서 읽기도 쉽고 기억하기도 편한 URL과 IP 주소를 매칭시켜서 사용하는데 이때 IP 주소를 찾아내는 과정이 이름 해석이다. 더 자세한 내용은 6장에서 다룬다고 한다. 3. 웹 서버가 요청을 받는다 ❗️ 아파치에서는 기본적으로 부모 프로세스와 자식 프로세스로 나누어 처리를 분담하고 있다. 설정을 통해 다양한 처리 방식을 선정할 수 있지만, 기본적으로는 자식 프로세스가 H.. 공감수 0 댓글수 0 2022. 5. 30.
[TIL] 3장 3.1 ~ 3.2 프로세스와 스레드 그리고 커널 TIL (Today I Learned) 2022.05.23 오늘 읽은 범위 3장. 3계층형 시스템을 살펴보자 프로세스와 스레드 프로세스 메모리 공간을 가지고 실행된다. 개별 처리 독립성이 높다. 개별적인 메모리 공간을 부여해 주어야 하기 때문에 생성시 CPU 부하가 높다. 따라서 멀티 프로세스를 사용하는 앱에서는 프로세스 생성 부담을 낮추기 위해 미리 프로세스를 시작시켜 둔다.스레드 하나의 메모리 공간을 공유한다. 개별적인 메모리 공간을 부여해 줄 필요가 없기 때문에 가볍게 생성 할 수 있다. (생성 시 부하가 낮다) 메모리 공간을 공유하기 때문에 의도치 않은 데이터 읽기/쓰기가 발생할 수 있다. ⚠️ 프로세스가 메모리 공간을 공유할 수 없는 것은 아니다. 오라클 DB에서는 여러 프로세스가 '공유.. 공감수 0 댓글수 0 2022. 5. 30.
[TIL] 2장 서버를 열어 보자 TIL (Today I Learned) 2022.04.14 오늘 읽은 범위 2장. 서버를 열어 보자 CPU Central Processing Unit의 약자 서버 중앙에서 연산 처리를 실시한다. OS에서 내리는 명령대로 작동한다. 메모리 명칭 그대로 기억 영역을 말한다. CPU 옆에 위치하며, CPU에 전달하는 내용이나 데이터를 저장하거나 처리 결과를 받는다. 메모리에 저장되는 정보는 영구성이 없다. But, 매우 빠르게 액세스 할 수 있다. CPU 에도 자체적인 메모리가 있다. 메모리보다 빠르지만 용량이 작다는 단점이 있다. 하드 디스크 드라이브 주로 장기 저장 목적의 데이터 저장 장소로 사용 자기 원반에 데이터를 저장하기 때문에 물리 법칙으로 인해 메모리처럼 빠르게 액세스 할 수 없다. 최근에는 SS.. 공감수 0 댓글수 0 2022. 5. 30.
[TIL] 1장 인프라 아키텍처를 살펴보자 TIL (Today I Learned) 2022.04.14 오늘 읽은 범위 1장. 인프라 아키텍처를 살펴보자 인프라란? 구조 자체는 복잡하지만, 전문가에 의해 관리되고 있어 사용자가 쉽게 이용할 수 있는 특징이 있다. 인터넷 검색 시스템, 편의점의 계산대 등 모두가 IT 인프라 위에서 동작하고 있다. 인프라 아키텍처는 대부분 놀라울 정도로 닮아 있어 서로 거의 같은 구조를 가지고 있다. 집약형 아키텍처 대형 컴퓨터를 이용해서 모든 업무를 처리하는 방식 💻 구성이 간단하다는 장점이 있다. 👍 컴퓨터가 한 대뿐이기 때문에 컴퓨터가 멈추지 않도록 여러 장치가 되어있다. (이중화) 복수의 서로 다른 업무를 동시에 처리하기 위해 유한 리소스 관리가 필요하다. 대형 컴퓨터는 도입 비용과 유지 비용이 비싸다는 단점이.. 공감수 0 댓글수 0 2022. 5. 30.
[TIL] 그림으로 공부하는 IT 인프라 구조를 읽기 시작하며 계기 지난번에 노마드코더에서 진행한 노개북에서 '클린코드' 를 완독한 적이 있었다. 노개북의 방식이 굉장히 마음에 들었고 평소 인프라에 관해 공부하고 싶은 마음도 컸던지라 이 블로그에서 '그림으로 공부하는 IT 인프라 구조' 라는 책을 알게 되어 노개북의 방식대로 이 책을 완독하기로 하였다. 물론 그렇게 빡세게 할 생각은 없다.. 목차 1장 인프라 아키텍처를 살펴보자 2장 서버를 열어보자 3장 3계층형 시스템을 살펴보자 4장 인프라를 지탱하는 기본 이론 5장 인프라를 지탱하는 응용 이론 6장 시스템을 연결하는 네트워크 구조 7장 무정지를 위한 인프라 구조 8장 성능 향상을 위한 인프라 구조 위 8장을 3주안에 독파할 예정이다. 물론 일이 바빠져 3주가 6주가 되는 기적이 일어날 수도.. 결론 그림으로 공.. 공감수 0 댓글수 0 2022. 5. 30.
연결 리스트 🔗 연결 리스트? 연결 리스트(linked list)는 객체가 선형적 순서를 가지도록 배치된 자료구조다. 인덱스에 의해 선형적 순서가 결정되는 배열과는 달리 연결 리스트에서는 각 객체에 있는 포인터에 의해 순서가 결정된다. 양방향 연결 리스트 key 속성값과 두 개의 포인터인 prev와 next를 속성값으로 가지는 객체다. 리스트의 원소 x가 주어질 때, x.next는 연결 리스트의 바로 다음 원소를, x.prev는 바로 직전 원소를 가리킨다. x.prev = NIL 이라면 이전 원소가 없으므로 이 리스트의 첫 번째 원소 또는 head라 한다. x.next = NIL 이라면 원소 x는 바로 다음 원소가 존재하지 않으므로 이 리스트의 마지막 원소 또는 tail이라고 한다. 단순 연결 리스트: prev 포인.. 공감수 0 댓글수 0 2022. 5. 30.
스택 & 큐 스택에서는 가장 최근에 삽입된 원소가 삭제된다. 즉, 후입선출 정책을 구현한 것이다. 큐에서는 집합에서 가장 오랜 시간 동안 존재한 원소가 삭제된다. 즉, 선입선출 정책을 구현한 것이다. 🗂 스택 스택에서는 스택에 값을 추가하는 연산을 Push, 인자를 값을 삭제하는 연산을 Pop이라고 한다. 💡 이때 Pop은 인자를 가지지않고 가장 최근에 삽입된 원소를 제거한다. 💡 이 연산들의 이름은 카페테리아 식당에서 스프링으로 접시를 받쳐 올려주는 접시 스택에서 유래된 것이라고 한다. 배열 S[1..n]으로 최대 n개의 원소를 가지는 스택을 구현할 수 있다. 배열은 가장 최근에 삽입된 원소를 가리키는 S.top을 속성값으로 가진다. S[1]은 스택의 맨 밑에 있는 원소를 나타내고 S[S.top]은 맨 위에 있는 .. 공감수 0 댓글수 0 2022. 5. 30.
SvelteKit에 대하여 🚨 SvelteKit은 초기 개발 단계입니다. 따라서 버전이 1.0에 도달하기 전까지는 몇 가지 부분이 변경될 수 있습니다. - SvelteKit 공식문서 - 🚨 이 글에서 나오는 대부분의 예제 코드는 SvelteKit 공식문서에서 가져왔음을 알립니다. SvelteKit? React에 NextJS, Vue에 Nuxt가 있듯이 Svelte에는 SvelteKit이 있다. NextJS와 Nuxt와 같이 SSR, SSG 등 여러가지 다양한 기능들을 제공한다. SvelteKit의 가장 매력적인 부분은 Svelte를 사용한다는 것이다. Svlete와 Vite를 사용하여 정말 말로 할 수 없을 정도로 만족스러운 개발자 경험을 누릴 수 있다. 💡 Vite에 대해서도 글을 썻다. SvelteKit이 지원하는 기능으로는 .. 공감수 0 댓글수 0 2022. 5. 30.
Svelte 시작하기 Svelte는 React 혹은 Vue와 같이 인터렉티브한 웹을 구축하기 위한 도구이지만 구축하는 방법이 완전히 다르다. 또한 Svelte는 React, Vue와 같이 프레임워크나 라이브러리가 아니다. 오히려 Svelte는 컴파일러에 가깝다고 볼 수 있다. React의 방식 만약 React로 웹 서비스를 빌드하고 배포한다면 사용자가 웹 사이트에 들어올때 2가지 종류의 코드를 다운로드 받아야한다. React 코드와 개발자가 작성한 코드이다. 이는 이때까지 표준화되어 사용되던 방식으로 jQuery를 사용한다면 사용자가 jQuery를 다운로드 받아야하듯이 React나 Vue도 같은 방식을 사용하고 있는 것이다. Svelte의 방식 하지만 Svelte는 위의 방식대로 작동하지 않는다. Svelte의 초기 홍보문구.. 공감수 0 댓글수 1 2022. 5. 30.
코스모스와 함께하는 블록체인 Cosmos? 이 글을 읽는 사람들 중 몇몆은 Cosmos에 대해 들어봤을 수도 있다. 노마드 코더 유튜브에 나오기도 했고 ATOM, Binance Coin 등 여러 코인들이 이 Cosmos를 기본으로 작동하고 있기 때문이다. 그렇다면 코스모스는 무엇일까? 웹사이트에서 말하는 바에 따르면 코스모스는 블록체인의 인터넷이 되려 한다. 코스모스는 블록체인들이 서로 통신할 수 있는 프로토콜(IBC)를 만들려고 하고 또한 블록체인의 Django같은 역할을 하려 하고 있다. Cosmos는 개발자들이 쉽고 빠르게 블록체인을 개발하게 하기 위해서 Cosmos SDK를 제공하는데 이 SDK를 사용하면 Transaction, Pow, Pos, Smart Contract 등 블록체인에서 사용가능한 여러가지 기능들을 SDK .. 공감수 0 댓글수 0 2022. 5. 30.
계수 정렬 O(n)의 등장 이때까지 봐온 모든 정렬 알고리즘들은 입력된 숫자들을 비교해가며 정렬을 하였다. 하지만 비교하며 정렬하는 모든 알고리즘은 O(n log n)이라는 명확한 한계를 가지고 있다. 그렇다면 어떻게하면 정렬 알고리즘을 더욱 빠르게 작동시킬 수 있을까? 바로 비교를 하지 않으면 된다. O(n) 시간에 실행되는 정렬 알고리즘들은 비교를 하지 않고 정렬을 한다는 특징을 가지고 있다. 계수 정렬 계수 정렬은 말 그대로 x에 대해서 x보다 같거나 작은 원소의 개수를 센다. 이렇게 센 값은 나중에 x를 어디에 배치할 것인가를 결정할 때에 사용된다. 예를 들어 [2, 1, 3, 4, 8, 7, 9] 라는 배열이 있다고 가정해보자 이때 x에 대해서 같거나 작은 원소의 개수를 센다면 0 = 0 1 = 1 2 =.. 공감수 0 댓글수 0 2022. 5. 30.
퀵 정렬의 성능 🚨 이번 포스트는 복잡한 식과 머리 아픈 내용이 나올 수 있습니다. 퀵 정렬의 성능 저번 포스트에서는 퀵 정렬에 대해 알아보았다. 퀵 정렬의 평균적인 수행시간이 O(n log n) 이고 최악의 수행시간이 O(n^2) 이라는 것을 알았지만 최악의 수행시간이 O(n^2) 이나 되는 알고리즘이 어째서 힙 정렬보다 더 빠른지에 대해서는 자세히 다루지 않았다. 이번 포스트에서는 퀵 정렬의 성능에 대해 알아보고 어째서 퀵 정렬이 힙 정렬보다 더 효율적인 알고리즘인가에 대해 알아볼 것이다. 퀵 정렬의 수행시간은 분할 후 양쪽 구역의 크기가 비슷한가 아닌가에 따라 달라진다. 분할이 균등하게 된다면 퀵 정렬은 병합 정렬처럼 빠르게 작동한다. 하지만 분할의 균등하지 않다면 삽입 정렬처럼 느리게 동작한다. 분할을 가장 나쁘.. 공감수 0 댓글수 0 2022. 5. 30.
퀵 정렬 퀵 정렬은 찰스 앤터니 리처드 호어가 개발한 정렬 알고리즘이다. 다른 원소와의 비교만으로 정렬을 수행하는 비교 정렬에 속한다. 퀵 정렬은 n개의 데이터를 정렬할 때, 최악의 경우에는 O(n²)번의 비교를 수행하고, 평균적으로 O(n log n)번의 비교를 수행한다. - 위키백과 - 1. 퀵 정렬? 퀵 정렬은 n개의 원소를 가진 배열을 최악의 경우에 O(n²)시간에 정렬하는 알고리즘이다. 이렇게 최악의 경우로만 봤을땐 퀵 정렬은 느리지만 평균 수행시간이 O(n lg n)으로 굉장히 효율적이고 O(n lg n)에 숨겨진 상수 인자도 굉장히 작다. 퀵 정렬은 병합 정렬과 마찬가지로 분할정복에 기반을 두고 있다. 따라서 퀵 정렬의 동작은 다음과 같이 설명할 수 있다. 분할: 배열 A[p..r]을 두 개의 부분 .. 공감수 0 댓글수 0 2022. 5. 30.
우선순위 큐? 힙에 관하여 이전 포스트에서 힙을 이용한 정렬인 힙 정렬에 대해 소개했다. 힙 정렬은 분명 훌륭한 알고리즘이지만 사실 나중에 소개할 퀵 정렬을 잘 구현하는 것이 일반적으로는 더 빠르다. 하지만 힙은 여러 방면으로 유용하게 사용할 수 있는데 이번 포스트에서는 힙을 가장 잘 응용하여 널리 쓰이고 있는 우선순위 큐를 소개해보려고 한다. 우선순위 큐 키라는 값을 가진 원소들을 다루기 위한 자료구조 보통의 큐는 FIFO를 구현한다. 따라서 우선순위에 상관없이 무조건 먼저 들어온 원소가 가장 먼저 나간다. 하지만 우선순위 큐에서는 우선순위에 따라 나가는 순서가 결정된다. 가장 나중에 들어온 원소이더라도 우선순위가 가장 높다면 가장 먼저 나가게 되는 것이다. 우선순위 큐의 종류 힙과 같이 우선순위 큐에도 최대 우선순.. 공감수 0 댓글수 0 2022. 5. 30.
Bio-O-Notation(점근 표기법)은 무엇인가? Big-O-Notation 알고리즘의 속도를 표현하는 방법이다 알고리즘의 속도는 초와 같은 단위로 나타낼 수 없다. 왜냐하면 같은 코드를 실행하더라도 코드를 돌리는 하드웨어에 따라 속도 차이가 천차만별이기 때문이다. 따라서 작업을 수행하는데 걸리는 Step에 따라 속도를 계산한다. Ex) 수행하는데 5개의 스텝이 필요한 알고리즘이 10개의 스텝이 필요한 알고리즘보다 효율적임 코드의 실제 러닝 타임을 표시하는 것이 아니며, 인풋 데이터 증가율에 따른 알고리즘의 성능을 예측하기 위해 사용한다. 실제 러닝 타임을 표시하지 않는 이유는 만약 알고리즘이 4n + 9시간이 걸린다고 가정했을때 n이 10억이라면 이 알고리즘이 돌아가는데는 40억 + 9시간이 걸린다고 말하는 사람은 아무도 없을 것이다. 따라서 Big-.. 공감수 0 댓글수 0 2022. 5. 30.
힙 정렬에 대해 알아보자 시작 오늘부터 Introduction to Algorithms에 대한 TIL을 진행하려고 한다. 왜 정렬 알고리즘인가? 수많은 컴퓨터 공학자가 정렬을 알고리즘 연구에서 가장 기본적인 문제로 여기고 있다고 저자는 말한다. 여기에는 몇가지 이유가 있는데 정보를 정렬하는 것 자체가 필요한 응용 분야가 있다. Ex) 은행에서는 고객 청구서를 준비하기 위해 수표를 수표 번호순으로 정렬해야 한다. 많은 알고리즘이 자주 정렬을 사용한다. Ex) 층을 이루는 물체를 그리는 프로그램은 밑바닥부터 꼭대기까지 순서대로 그릴 수 있도록 상하관계에 따라서 정렬해야한다. 정렬 알고리즘은 종류가 다양하고 많은 기술이 적용된다. 힙 힙 자료구조는 완전 이진 트리로 볼 수 있는 배열 객체이다. 완전 이진 트리가 뭐지...? 완전 이진.. 공감수 0 댓글수 0 2022. 5. 30.
알고리즘 공부를 시작하며 알고리즘을 공부하려는 이유 먼저 알고리즘을 공부하려고 마음먹은 계기는 내가 만드는 프로그램들을 유지 보수하면서부터 시작됐다. 나는 전형적인 P이기 때문에 개발을 할 때도 큰 계획 없이 그때그때 구현하고 싶은 기능을 빠르고 생각 없이 구현했다. 이런 식으로 생각 없이 만든 코드가 늘다 보니 여러 문제가 생기게 되었는데... 1. 프로그램의 속도가 느려진다. 별 생각 없이 코드를 짜다 보면 코드의 효율성과 속도는 딱히 신경 쓰지 않고 진행하게 된다. 처음에는 별문제가 없어 보이지만 프로젝트를 완성하고 보면 X 같은 최적화에 엄청난 속도를 보여주는 프로그램을 만날 수 있었다. 2. 내 코드가 왜 작동하는지 모른다. 아무 생각없이 코드를 짜는 나 아무 생각 없이 코드를 작성하다 보니 이 코드가 왜 작동하는지도 .. 공감수 0 댓글수 0 2022. 5. 30.
3세대 암호화폐 > **이 글은 시리즈로 연결된 글입니다. 전 시리즈를 먼저 읽어주세요. 😀** # 문제점 먼저 이전까지의 암호화폐들의 문제점에 대해 알아보자. 저번 글에서도 이야기했듯이 이때까지의 암호화폐들이 사용하던 작업증명(PoW)은 해킹으로부터 네트워크를 보호하고 데이터를 검증하는데 아주 탁월한 방법이였지만 한 사람이 계속 검증을 할 순 없기에 사람들은 검증자로 뽑히기 위해 컴퓨터를 열심히 돌려야 하는데 바로 이 과정에서 엄청난 양의 전기를 소모하기 때문에 여러가지 환경문제가 발생할 수 있다. > **그렇다면 3세대 암호화폐는 이 문제를 어떻게 해결한거지?** # 스테이킹 3세대 암호화폐는 이 문제를 해결하기위해 작업증명 자체를 없애버렸다. 대신 지분 증명이라는 새로운 시스템을 도입했는데 지분증명이란 해당 네트워.. 공감수 0 댓글수 0 2022. 5. 30.
2세대 암호화폐란? 🪙 2.0 암호화폐 먼저 2세대 암호화폐와 1세대 암호화폐의 가장 큰 차이는 사람들과의 교류가 가능한 것이다. ??? 비트코인을 거래하는 것도 교류 아닌가? 2세대 암호화폐에서 말하는 교류는 단순히 비트코인을 주고받는 거래와는 차원이 다른 교류를 말한다. 여기에서의 교류는 모두 스마트 컨트랙을 통해 이루어지며 100% 탈중앙화로 진행된다. 🔗 스마트 컨트랙 스마트 컨트랙은 말 그대로 똑똑한 계약이다. 위에서 말했듯이 100% 탈중앙화로 돌아가며 100% 코드로만 움직인다. 또한 스마트 컨트랙을 사용한다면 탈중앙화된 앱을 만들 수 있으며 코드를 공유 네트워크에 올린다면 그 누구도 통제할 수 없는 탈중앙화 앱을 만들 수 있다. 그렇다면 이러한 스마트 컨트랙으로 무엇을 할 수 있을까? 🏠 숙박 공유 서비스 스.. 공감수 0 댓글수 0 2022. 5. 30.
블록체인에 대해 알아보자 🧐 블록체인? 블록체인이란 데이터를 가지고 있는 블록들이 서로 연결되어있는 체인을 말한다. 블록체인은 데이터베이스의 일종으로 볼 수도 있는데 데이터를 가지고 있는 블록들이 서로 연결되어있기 때문이다. 블록체인이 데이터베이스라면 다른 멋진 데이터베이스도 많은데 왜 굳이 블록체인이지? 라고 생각할 수 있다. 하지만 블록체인의 멋진점은 데이터베이스가 아닌 다른곳에 있다. 1. ➕ Append only (추가만 가능) 이걸 본 개발자들은 충격을 받을 수도 있다. 데이터베이스라면 당연히 추가도 되고 수정도 되고 편집도 되어야 하는데 블록체인은 추가만 할 수 있다니 말이다. 하지만 추가만 가능하다는 건 좋은 일일 수도 있다. 왜냐하면 대학 학위, 비트코인 거래내역 등과 같은 정보들은 절대로 누군가 임의로 수정해서는.. 공감수 0 댓글수 0 2022. 5. 30.
React Hook Form 사용하기 🧐 React Hook Form? React Hook Form은 React에서 Form을 쉽게 만들기 위한 라이브러리로 공식문서에 적혀있는 그대로 성능이 좋고 유연하며 유효성 검사에 아주 탁월합니다. 장점 적은 코드로 더 좋은 퍼포먼스를 낼 수 있다. 다른 라이브러리 혹은 React에 비해 Re-render 수가 적다. Fast Mounting (로딩속도가 빠름) TS를 기본으로 지원함단점 잘 모르겠음... How to use? 먼저 React Hook Form을 사용하기 위해 yarn 혹은 npm을 사용하여 설치합니다. npm install react-hook-form yarn add react-hook-form 설치가 되었으면 React Hook Form을 사용하기 위해 Form을 만들어 보겠습니다... 공감수 0 댓글수 0 2022. 5. 30.
TailwindCSS 사용하기 🧐 Tailwind CSS? Tailwind CSS는 이름에서 부터 알 수 있듯이 CSS Framework 입니다. 하지만 Bootstrap과 같은 다른 CSS 프레임 워크들과는 다르게 Tailwind CSS는 디자인의 커스터마이징이 아주 편합니다. 공식문서에 있는 예제를 하나 들고 와서 설명해보겠습니다. 원래는 디자인을 하기위해 다음과 같이 긴 CSS를 사용했지만 Tailwind CSS를 사용한다면 저렇게 길었던 CSS를 다음과 같이 줄일 수 있습니다. 코드가 놀랍도록 줄어들었지만 class 이름이 좀 많이 더러워 보입니다. 하지만 Tailwind CSS는 이러한 문제도 이미 해결해 두었습니다. @apply라는걸 사용하면 되는데 @apply에 대해서는 뒤에 자세히 설명하도록 하겠습니다. 설치 Tailw.. 공감수 1 댓글수 0 2022. 5. 30.
깃허브 프로필 꾸미기 velog를 돌아다니다가 재미있는 글 하나를 보게 되었다. [Github] github profile 예쁘게 꾸미기라는 글인데 예전에 어떤 고수님의 깃허브 프로필을 보고 놀랐던 기억이 있어서 나도 저렇게 해보고 싶다 생각했는데 이 글을 통해서 드디어 해보게 되었다. 1. Repository 생성 자신의 github 계정 이름과 똑같은 repository를 만들면 된다. 난 이미 레포를 만들어 놔서 경고가 뜨지만 밑에 고양이가 해당 repository를 내 깃헙 프로필로 쓸 수 있다고 알려준다. ✅ Add a README file를 체크해야한다! 2. README.md 수정 이제 만들어진 README를 입맛에 맞게 수정하면 된다. 여러 사람들이 깃헙 프로필을 둘러보니 대부분 기술스택, 컨택등을 넣는것 같아.. 공감수 0 댓글수 0 2022. 5. 30.
VScode에서 Java 사용하기 💡 Spring을 배우고 싶어서 IntelliJ을 사용해 보니 너무 못생기고 무서워서 VScode로 Java를 사용해 보려 한다. 1. install Extension 저거 하나만 설치하면 아래 6가지 익스텐션이 모두 설치된다. 2. JDK 설치하기 컴퓨터에 JDK가 설치되어있지 않다면 설치 홈페이지에 들어가서 운영체제에 맞는 JDK를 설치하면 된다. 3. 테스트 해보기 왼쪽에 Run and Debug를 누르면 프로그램이 실행된다. 확실히 IntelliJ보다 이쁘고 빠르게 실행되는거 같아 좋은거 같다. 공감수 0 댓글수 0 2022. 5. 30.
Java 시작하기 Java 1995년에 썬 마이크로시스템즈에서 발표한 객체지향 언어 현재 썬 마이크로시스템즈는 오라클에 인수가 된 상태자바의 특징 플랫폼에 독립적이다. 자바는 JVM() 만 있으면 윈도우, 리눅스, 맥등 어떤 플랫폼에서도 실행이 가능 객체지향 언어이다. 메모리 관리를 자동으로 해준다. 변수 & 상수 변수 형식 int number; 변수이름을 쓸때 지켜야할 점 하나 이상의 글자로 이루어져야 함 첫 번째 글자는 문자 이거나 '$', '_'이어야 함 두번재 이후의 글자는 숫자, 문자, '$', '_'이어야 함 '$', '_' 이외의 특수문자 사용 불가능 길이 제한이 없음 키워드는 식별자로 사용할 수 없음 상수 값을 표현하는 단.. 공감수 0 댓글수 0 2022. 5. 30.
Go 시작하기 1.0 Go? Go는 2009년 구글에서 일하는 로버트 그리즈머, 롭 파이크, 켄 톰프슨이 개발한 프로그래밍 언어이다. 일단 Go는 속도가 매우 빠르다. 이처럼 Go는 Python처럼 간결한 문법 구조를 가지면서도 Python보다 훨씬 빠른 속도를 가져 많은 사람들에게 사랑받는 언어로 떠오르고 있다. 2.0 Go 시작하기 먼저 Go를 시작하기 위해서는 컴퓨터에 Go를 다운받아야 한다. 설치가 귀찮거나 개인 컴퓨터가 없다면 repl.it을 사용하는 것도 좋은 방법이다. 2.1 Go 설치 여기에 들어가서 운영체제에 맞는 Go를 다운로드 받으면 된다. Go를 설치하면 C드라이브 혹은 /usr/local 에 go라는 폴더가 생기는데 Go프로젝트는 모두 go폴더에 있어야 한다. 만약 go폴더가 없다면 C드라이브 .. 공감수 0 댓글수 0 2022. 5. 30.
NestJS는 무엇인가? 1. NestJS? 먼저 Nest.JS가 해결하는 문제가 뭔지 알아보자 Nest.js는 Node.js의 아주 중요한 문제를 해결한다. Node.js로 백엔드를 개발할때는 0부터 시작해야한다. 1개의 파일에서 시작해서 점차 크기를 키워 나가야 하는것이다. 하지만 Django같은 다른 프레임워크들에는 수많은 규칙들이 있다. 그래서 그런 규칙들을 따라 백엔드를 만들기만 하면 휼륭한 백엔드를 만들 수 있다. 하지만 Node.js에는 그런게 없다. 객체지향을 할지 함수지향을 할지 폴더명을 무엇으로 할지 그 어떤 규칙도 없다. 이런점은 장점이 될 수도 있지만 큰 프로젝트를 한다면 위의 장점은 단점이 되어버린다. 이러한 단점을 보완하기위해 Nest.JS가 나온 것이다. Nest.js를 사용한다면 Node.js를 Dj.. 공감수 0 댓글수 0 2022. 5. 30.
Next.JS를 살펴보자! ✍배우게 된 계기 약 1년 반 전부터 열심히 웹에 대해 배우기 시작했고 최근에는 React를 열심히 배우고 있었다. 그러다가 다른 프레임워크에도 관심이 생겨 찾아보게 된 것이 바로 Next.js였다. Next.js? 넥스트는 버샐(vercel)에서 만든 리액트 기반의 프레임워크로 개발자에게 뛰어난 생산성과 편의성을 제공한다. 리액트 기반이기 때문에 리액트에 관한 지식이 필요하다. 넥스트를 사용하는 이유? (리액트의 단점) 페이지를 불러올때 모든 자바스크립트 파일을 한번에 불러옴 (⏰시간이 오래걸림) 검색 엔진 최적화(SEO)에 좋지 못함 ✅ 해결법: 서버 사이드 렌더링(SSR)을 사용하면 해결됨. 서버 사이드 렌더링(SSR)? 장점 사이트에 접속시 렌덩링된 html을 불러온다. → 반응X but, 속도가.. 공감수 0 댓글수 0 2022. 5. 30.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.