전체 글

[TIL] 2022년 02월 04일

이번시간에는 백엔드를 조금 더 맛볼 수 있는 postgres 세팅에 대해 배워보았다. 커리큘럼 API를 무료로 제공한다!! => Open-API / public API 프론트엔드와 백엔드 전체 숲 구경 => Architecture 같이 데이터 베이스를 구경해 보자 => Database Node.js를 활용해 백엔드 서버를 제작해 보자 => Node.js / Apollo-server 프론트엔드와 백엔드 구조 부여받은 DB를 BackEnd에서 DB로 연결해주는 TypeORM역할 일반 Javascript에서는 nodejs를 사용해서 백엔드 구조를 잡는 반면 Typescript에는 ts-node를 사용해서 백엔드 구조를 짠다. ts-node는 개발중일때 사용하는 것 두개의 차이점을 설명하면 ts-node 는 개..

[Javascript] Object, key, values, entries, assign

이번시간에는 자바스크립트의 자료구조와 자료형에대해 알아보는 시간을 가져보겠습니다. 개별 자료 구조에서 한발 뒤로 물러나서 순회(iteration)에 관해 이야기를 나누고자 합니다. 자바스크립트에서 순회에 필요한 메서드로는 map.keys(), map.values(), map.entries()에 대해 알아봅시다. 이 메서드는 포괄적인 용도로 만들어졌기 때문에 메서드를 적용할 자료구조는 일련의 합의를 준수해야 합니다. 커스텀 자료구조를 대상으로 순회를 해야 한다면 이 메서드들은 쓰지 못하고 직접 메서드를 구현해야 합니다. keys(), values(), entries()를 사용할 수 있는 구조는 다음과 같습니다. Map 함수 Set 함수 Array 함수 일반 객체에서도 순회 관련 메서드가 존재하는데, key..

[MySQL] SQL과 NoSQL의 차이

웹 개발을 할때 가장 고민할만한 것은 바로 데이터베이스를 선택할때라고 볼 수 있다. MySQL과 같은 SQL을 쓸까? MongoDB와 같은 NoSQL을 쓸까? 보통 Spring에서는 MySQL을, Node.js에서는 MongoDB를 주로 사용할 것이다. 하지만, 그냥 단순히 프레임워크에 따라서 결정하는 것은 아니다. 프로젝트를 진행하기 앞서서 적합한 데이터 베이스를 택해야 한다. 둘의 차이점을 알아보기전 MySQL은 뭐고 SQL은 무엇인지 알아보자. SQL(Structured Query Langauge 관계형 DB) SQL은 RDBMS(관계형 데이터 베이스 관리 시스템)의 데이터를 관리하기 위해서 설계된 프로그래밍 언어로 NoSQL보다는 좀 더 오래되고 많이 사용되어 왔다. SQL의 예시로 MySQL 과..

[TIL] 2022년 02월 03일 TIL - 클래스 컴포넌트

이번시간에는 기존의 function 함수를 써왔던 것을 class형 컴포넌트로 변환해서 사용하는 방법을 배웠다. 커리큘럼 클래스 컴포넌트?? 그런데 클래스가 무슨 뜻이야?? => Class-Component 프론트엔드와 백엔드에 전체 숲을 구경해보자 => Architecture 백엔드 API 만들기 체험 => Apollo-Server / graphql 이미지 업로드하기 => Cloud-Storage 검색하는 버튼없어도 검색이 가능하다! => Debouncing / Throttling 오늘 배운 내용 클래스 컴포넌트?? 그런데 클래스가 무슨 뜻이야?? => Class-Component this란 무엇이고 왜 자꾸 말썽을 부리는 것인가 => this 컴포넌트가 살아숨셔 / 생명주기 => Component-L..

[Javascript] 디바운싱과 쓰로틀링

디바운스와 쓰르톨링모두 웹에서 발생하는 이벤트를 제어하는 방법중 하나입니다. 예를 들어서 스크롤 이벤트의 경우 스크롤링을 할 때마다 발생하는데, 그 때마다 같은 작업을 실행하게 되면 성능 문제가 발생할 수 있습니다. 디바운스와 쓰로틀링을 적절한 상황에 사용한다면 그런 상황이 발생하지 않도록 방지할 수 있습니다. 두개의 용어가 약간 생소할 수 있는데 간단히 정의해보면 쓰르톨링: 마지막 함수가 호출된 후 일정 시간이 지나기 전에 다시 호출되지 않도록 하는 것 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출되도록 하는 것 디바운싱 (Debouncing) resize 이벤트 시 실행되야할 내용을 작업하면서 디바운스를 실제로 사용해보았습니다. resize 이벤트는 브라우저의 크기를 줄이..

[Javascript] Promise.all 이란?

Promise자체의 뜻은 약속이라는 뜻입니다. 여기서 all이라는 것이 붙으면 어떤 뜻일까요? Promise.all Promise.all 이라는 뜻은 모든 프라미스가 이행될 때까지 기다리다 그 결과 값을 담은 배열을 반환하는 매서드입니다. Promise란? 위 그림은 동기와 비동기에 대한 설명을 담은 그림입니다. 데이터를 요청하고 응답이 들어올 때까지 다른 task들을 처리할 수 있도록 하는 것이 바로 비동기입니다. prmise는 위의 비유와 같이 진동벨과 같은 역할을 한다고 생각할 수 있습니다. 사장님과 손님의 진동벨을 연결하는 것과 같이, 프로미스(Promise)는 '제작 코드'와 '소비코드'를 연결해주는 특별한 자바스크립트 객체입니다. '제작 코드'와 '소비 코드'에 대한 설명은 아래에서 코드를 보..

[Wiki] 컴퓨터 바이러스 - 바이러스란 무엇인가

바이러스(Virus)라는 기본 원리의 뜻은 유기체의 살아있는 세포를 통해서만 생명활동을 하는 존재입니다. 이 생명체는 평소에는 비활성화된 상태로 있다가 생명체의 세포와 접촉하면 이에 기생하여 생명활동을 시작합니다. 이 생명체는 다른 세포가 가진 유전정보를 복제할 수 있는 능력이 있지만, 자체적으로는 신진대사를 할수가 없기 때무에 바이러스는 다른 생명체 없이는 스스로 생명활동을 할 수 없습니다. 그러나 이런 바이러스는 우리의 역사를 통틀어 가장 많이 기생하고 여러 생명체를 만들어낸 집단이었습니다. 약 700년전 천연두, 인플루엔자와 함께 대유행으로 가장 많은 사람의 목숨을 앗아간 질병인 흑사병도 이와 같은 의미가 되겠지요... 컴퓨터 바이러스(Computer Virus)라는 말도 위와 같은 바이러스라는 질..

[Wiki] 서비스 거부 공격 - Ddos(디도스)

Distributed Denial of Service attack, DDoS 디도스란 분산 서비스 거부 공격(Distributed Denial of Service attack)이란 특정 서버(컴퓨터)나 네트워크 장비를 대상으로 많은 데이터를 발생시켜 장애를 일으키는 대표적인 서비스 거부 공격입니다. 서비스 거부 공격들 중 가장 광범위하게 쓰이는 사이버테러로 애용되는 공격 방식입니다. 미 컴퓨터 비상 대응 팀에서 정의한 DoS 공격으로 의심할 수 있는 증상은 다음과 같습니다. 비정상적인 네트워크 성능 저하 특정 또는 모든 웹사이트 접근 불가 특정 전자 우편의 급속한 증가 DoS 공격은 공격을 받고 있는 컴퓨터 주위의 다른 컴퓨터들에게도 문제를 일으킬 수 있습니다. 예를 들어서 인터넷가 지역망을 연결하는 라..

[Wiki] 해킹이란 무엇인가?

해킹이란 단어를 처음 들었다면 굉장히 보안적인곳과 취약한 곳을 공격하는 행위로 생각되는 것이 일반적일 것입니다. 해킹이라는 첫 단어는 MIT의 교내 은어였던것이 대중으로 퍼진 것으로 원래 의미는 컴퓨터 매니아들이 컴퓨터에 대해서 속속들어 알아내며 일명 컴덕질을 하던 해커 컬쳐(Haker Culture)에서 유래하던 말입니다. 컴퓨터나 게임등 밑바닥까지 파고들면서 그 시스템에 대한 완벽한 이해나 주도권을 가지려는 문화를 가리키려고 쓰던 말로, 대중메체에서는 정보 보안을 뜯어내는 자극적인 이미지가 퍼지면서 보안해킹의 이미지로 굳어졌습니다. 해커라는 이름의 정의는 시간에 따라 크게 변화되어 왔습니다. 초기에는 그저 호기심이나 지적욕구의 바탕 위에 '컴퓨터와 컴퓨터간의 네트워크를 파괴하는 행위'라는 부정적인 의..

svelt란 ? 공식문서 해석기 - React와의 차이점

이번 시간에는 요즘들어서 프론트엔드 프레임워크 3대장 React Vue Angular를 이어 새롭게 등장한 Svelte라는 프레임워크에 대해 포스팅 해보겠습니다. svelte는 아직까지는 정식으로 한글 문서를 제공하지 않지만 프레임워크 3대장이라고 불리는 다른 프레임워크보다는 상당히 낮은 러닝 커브를 가집니다. Svelte의 특징 Svelte라는 특징은 날씬한, 호리호리한이라는 뜻입니다. 단어의 뜻과 같이 상당히 적은 코드와 작은 용량을 가진다는 것이 장점입니다. Svelte는 다른 라이브러리에 비해서 가상돔(Virtual DOM)을 사용하지 않습니다. Svelte는 Reactive web app과 interface를 만드는 데 사용되는 일종의 Compiler(컴파일러)입니다. 여기서 주목해야 할 단어는..

[웹 개념] 절대경로와 상대경로

경로란? 경로는 프로그래밍 언어 또는 운영체제 등에서 파일을 찾아가는 방법을 경로라고 하며 경로에는 절대경로와 상대경로로 구분하여 사용할 수 있다. 즉 파일시스템 내에서 특정 파일의 위치, 이름을 나타내는 양식이다. 절대경로 작업 디렉토리와 관계없이 절대적인 위치를 가리키는 경로 예) '서울역' 의 위치 리눅스 예시: /etc/httpd/conf/httpd.conf 윈도우 예시: C:\Windows\System32\drivers\etc\hosts 상대경로 작업 디렉토리를 기준으로 상대적인 위치를 가리키는 경로 예) "가까운 이마트 또는 건물 옆 쇼핑몰"의 위치 리눅스 예시: /conf/httpd.conf 윈도우 예시: ..\dirvers\etc\hosts 최상위 디렉토리 (루트 디렉토리) / : 최상위 ..

[CSS] SASS와 SCSS

이번 시간에는 CSS를 지원하는 라이브러리 중 제일 간단하고 스타일리시하게 css를 구성하는 SASS와 SCSS를 알아보자. SASS 란? SASS(Syntactically Awesome StyleSheets)는 CSS의 pre-processore로서 CSS의 한계와 단점을 보환하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 확장 기능(extension)이다. CSS를 배우기 쉬워 프로젝트 초기단계에서는 문제가 없지만 프로젝트가 커질수록 코드가 복잡해지고, 스타일시트도 같이 관리할게 많아지면서 더욱 복잡해진다. 따라서 추가 및 수정 등 유지 보수에 힘이 들어간다. SASS는 한마디로 CSS를 구조화하여 개발의 편의성을 높여준다. 정리하자면 SASS는 CSS보다 더욱 심플한 표기법으..