TIL

html의 동작을 담당하는 자바스크립트는 html의 요소를 선택해서 해당 요소의 내용이나 스타일 등을 변경할 수 있다.기본적인 문법은 아래와 같다.document.getElementById('id').style.color = 'red';'id'는 선택한 요소의 id이다

웹에 대한 공부를 하다보면 항상 눈에 보이는 친구들이 있다.GET과 POST라는 녀석들이다.오늘도 역시 강의를 듣다가 GET과 POST에 대한 이야기가 나와서이해한 만큼만 작성해보려고 한다.GET은 가져온다. POST는 수행한다.가볍게 얘기하면 이런 느낌이라고 본다.G

데이터베이스는 쉽게 말하면 '데이터가 저장되어있는 큰 폴더' 라고 생각하면 된다.데이터베이스 안에는 여러 데이터들이 테이블 별로 나뉘어져 있고, 우리는 테이블을 골라 원하는 데이터를 뽑아낸다.그러기 위해 우리는 SQL이라는 언어를 사용한다.데이터베이스를 동작하기 위한

오늘은 SQL에서 사용하는 조건문 두 가지를 가지고 왔다.바로 IF와 Switch~가 아니라 CASE 이다.자바나 C에서 Switch ~ Case로 작동되는게 바로 CASE라고 생각하면 된다.??? : "조건문이 뭐지,,?"조건문은 어떤 조건이 주어질 때 어떤 동작을

오늘 나를 힘들게 만든 녀석이 있었다. 2주차 숙제로 배열 안의 단어들을 각 단어의 n번째 인덱스의 문자와 비교해서 정렬하는 문제였는데 어렵지 않게 풀 것만 같았던 이 문제가 한 녀석때문에 망가져버렸다. Cannot read properties of undefined

개인과제를 진행하다가 검색 입력값을 받아 포함되는 자료만 보여주도록 하는 함수를 작성중이었는데.. 왜인지 모르게 자꾸 변화가 없었다.자세히 보니 변화가 있는데 0.5초만에 다시 원상복구가 되어버린 것이다..이것 저것 찾아보고 바꿔보고 별 짓을 다했는데도 자꾸만 새로고침

동기적 처리와 비동기적 처리는 javascript를 배우다 보면 자연스럽게 접하게 된다.오늘은 동기와 비동기가 무엇인지, 차이점은 뭔지 알아보려고 한다.출처 : https://smallzoodevs-organization.gitbook.io/copy-of-ja

개인 과제 진행 중 전역변수로 만든 array가 이상하게 값이 자꾸 안들어갔다.이전 게시글에서 언급한 async / await 부분에서 문제가 있는 줄 알았는데 계속 정확히 어떤 문제인지 인지하지 못하고 있었다.오랜 시간 끝에 그 문제를 해결하였는데, 과정을 살펴보겠다

개인 과제를 하다가 개선 사항으로 모듈화하기로 생각하여, 하나의 JS파일로 이루어져있던 index.js를 두 가지의 기능을 불러오는 코드로 변경해주었다.기존 영화 정보를 불러오는 async를 사용하여 api를 호출하는 getData,검색창에 검색한 문자열이 포함된 영화

다른 코드의 인자로 넘겨주는 함수를 콜백함수라고 한다.넘겨준다는 것은 넘겨받는 것도 있다는 것.forEach와 setTimeout 등이 있다.콜백함수를 넘겨받은 위와 같은 코드(forEach, setTimeout)는 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게

localStrage는 웹 스토리지 객체로, 브라우저 내에 키-값 쌍을 저장할 수 있게 해준다.이는 페이지를 새로고침하거나 브라우저를 닫아도 사라지지 않는다.개발자도구에서 Application탭에 들어가보면 Local storage가 보이는데 안에 들어있는 값을 확인해

오늘 팀 과제를 완성하고 발표를 마쳤다. 팀 과제에 대한 피드백도 받았다. 크게 요약한 기능은 아래와 같다. > - API로 불러온 영화 정보 출력(카드형태) 및 검색기능 검색은 대소문자 구분이 가능하며 내용없이 검색하면 안됨.(유효성 검사) 영화 카드를 클릭하면 영

node.js를 배우기 시작하면서 배운 개념 중 Event Loop라는 녀석이 있다.오늘은 내가 Event Loop를 이해한 내용을 바탕으로 적으려고 한다.node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.내부에 V8

우리는 이전 시간에 이벤트 루프에 대해 간단하게 알아보았다.이벤트 루프에 여러 페이즈가 존재하는데 오늘은 그 중 Timer Phase를 알아보자말 그대로 setTimeout이나 setInterval과 같은 함수가 만들어 내는 타이머들을 다룬다.Timer Phase는 s

우선 REST API는 REST를 기반으로 만들어진 API를 말한다.REST는 Representational State Transfer의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고받는 모든 것을 의미한다.그래서 REST란HTTP URI(Uniform Re

저번에 express를 사용해서 서버를 만들어 보았다.이번엔 Router 함수를 통해 express Router를 생성해보자.일반적으로 router는 아래와 같은 구조를 가진다.router.METHOD(PATH, HANDLER);router: Express.js의 라우

기존에 쿠키와 세션에 대해 아는 것이라고는쿠키는 클라이언트가 저장하는 정보, 세션은 서버가 저장하는 정보 라는 느낌정도로만 알고 있었다.이번에 쿠키와 세션을 다시 접하면서 정리해보려고 한다.브라우저가 서버로부터 응답으로 Set-Cookie 헤더를 받은 경우 해당 데이터

JWT(Json Web Token)은 웹 표준으로써, 서버와 클라이언트 사이에서 정보를 안전하게 전송하기 위해 도움을 주는 웹 토큰(Web Token)이다.JSON 형태의 데이터를 안전하게 전송하고 검증할 수 있는 기능을 제공한다.인터넷 표준으로서 자리잡은 규격이다.다

오늘은 트랜잭션의 특징인 ACID에 대해 다뤄보려 한다.그렇다면 우선 트랜잭션이 무엇인지부터 알아야 한다.트랜잭션이 뭘까?트랜잭션(Transaction)은 작업의 완전성을 보장해주기 위해 사용되는 개념입니다. 특정한 작업을 전부 처리하거나, 전부 실패하게 만들어 데이터

오늘은 SQL의 제약조건에 대해 알아보려 한다.크게 4가지로 나눠볼 수 있다.기본키(Primary key) 제약조건NULL 제약조건고유(Unique) 제약조건외래키(Foreign key) 제약조건기본 키(Primary Key)는 테이블에 있는 데이터를 고유하게 구분할

개인 과제 중 쿠키를 검증하는 미들웨어를 작성하였는데, JWT를 이용해 사용자를 조회하도록 구현하였다. 어떤 식으로 사용했는지 작성해보겠다.우선 로직은 아래와 같다.클라이언트로 부터 쿠키(Cookie)를 전달받음.쿠키(Cookie)가 Bearer 토큰 형식인지 체크.서

개인과제 하면서 생각해보는 파트가 있는데,github에 readme 파일로 올려두었으나 블로그에도 정리해두고이 때의 생각은 이러하였는데 이후에는 어떻게 바뀌게되는지 기록하려 한다.아래는 본인의 github에 개인과제 파트에 올라간 readme 내용이며,해당 내용은 부정

뜬금없지만 클로저에 대한 지식이 부족하다고 생각이 들어 클로저의 개념을 다시 찾아보고 공부하면서 블로그에 정리하려 했는데, 그 전에 스코프의 개념부터 정리해두면 좋을 것 같아서 정리해보려 한다.스코프(Scope)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적인

저번에 다루었던 accessToken과 refreshToken에 대한 이야기를 한번 더 하려고 한다.개인과제 코드 리팩토링 중 accessToken과 refrshToken을 사용할 때 접근 방식이 이상했던 것 같아 다시 개념을 정리하고 코드를 다시 짜보았다.아래는 간단

JWT 얘기만 벌써 3번째긴한데 오늘 JWT 특강이 있었기에 정리하려 한다.우선 쿠키와 세션도 함께 언급하여 정리하였는데,쿠키는 패스하고 세션에서는 세션 map을 사용해서 클라이언트가 로그인을 하면서버에서 세션ID와 해당 유저의 ID를 세션map에 저장하고, 유저에겐

nodejs기반 뉴스피드 웹사이트 팀 프로젝트를 시작하였다.우리는 취준생들이 서로 정보를 공유할 수 있는 취준생 커뮤니티 웹 사이트를 제작하기로 했다. 우리 프로젝트의 이름은 취업나침반 이다..!아래는 대충 만들어본 초기의 ERD이 아래는 초기에 생각한 와이어 프레임이

과제 하면서 고민하게 만들었던 부분을 기록하려 한다.오늘은 prisma에서 외부 테이블의 기본키를 참조할 때,하나의 기본키로 외부의 테이블에 두 개의 외래키를 지정하는 방식을 다룰 것이다.ERD로 먼저 보면 아래와 같다.Users 테이블과 Follow 테이블은 1:N

API 작성 중에 한 컬럼에 데이터를 여러개 넣어야 하는 상황이 생겼다.그래서 나는 배열 형태로 데이터를 저장하기로 했다!mysql을 사용중인데 JSON 형식을 저장할 수 있도록 지원을 하고 있지만,배열 형태의 String값을 저장하는게 더 좋을 것 같다고 생각했다.중

프로젝트 진행 중 이미지를 업로드하는 api가 있어 이를 swagger에 표현하고자 했는데,어떻게하는건지 사실 잘 몰랐다.. 그래서 찾아보니 아래와 같은 방법으로 구현했다. 파일 하나만 업로드 하는 거라면 위처럼 구현하지 않아도 된다. 그러나 우린 여러 이미지 파일을

팀 프로젝트가 마무리되었다.다양한 작업이 있었지만,내가 맡은 작업이 양이 적어서 다른 팀원분들의 작업을 조금씩 손봤는데,이게 정말 도움이 많이 되었던 것 같다.내가 맡지 않은 api의 코드를 전부 보면서 살짝씩 리팩토링하고,테스트도 하나하나 해가면서 수정해가는 작업이나

이번 포스트는 프로그래머스의 알고리즘 문제를 푼 방법에 대해 기록해보려 한다.입출력 예시 : 즉 1부터 주어진 number 사이의 수의 약수들을 모두 구하고,약수가 limit보다 높으면 power로 조정해준다.그 후, 모든 약수와 조정된 약수의 합을 반환해주면 된다.우

오늘은 javascript에서 사용 가능한 테스팅 프레임워크인 Jest를 알아보려한다. 그 전에 테스트 코드 라는 개념부터 알아보자 테스트 코드 테스트 코드란 우리가 작성한 코드에 문제가 없는지 테스트하기 위해 작성하는 코드이다. 테스트 코드의 종류는 아래와 같다

이번에도 프로그래머스 문제를 다루려 한다.로또의 최고 순위와 최저 순위를 예상하는 문제이다.로또 6/45(이하 '로또'로 표기)는 1부터 45까지의 숫자 중 6개를 찍어서 맞히는 대표적인 복권입니다. 아래는 로또의 순위를 정하는 방식입니다. 6(낙첨) 그 외로또를 구매

CommonJs -> ES6 module 변경 방법에 대해 다뤄보겠다.지금은 좀 익숙해져서 변경하는데 큰 어려움이 없지만이전에는 변경하는 방법을 몰라서 힘들었던 기억이 있었기에 포스팅 해보려 한다.우선 준비해야 할 것은 package.json에 한 줄을 추가해야한다.E

새로운 팀 프로젝트가 시작되었다.우리 팀은 음식 배달 서비스를 해주는 웹 사이트를 제작하기로 했다.위치 기반으로 동작하지는 않고, 단순하게 가게와 사용자를 연결시켜주어 사용자가 가게 메뉴를 보고 주문하고, 가게 사장님은 주문 받은 내용을 확인하고 배달해주며, 주문 현황

오늘 시간을 마구 날려버리게한 prisma의 transaction을 jest로 테스트하는 과정을 포스팅하려 한다.이것 저것 시도하다보니 시간을 많이 허비하였다.첫 번째로는 mockPrisma 리스트에 $transaction을 추가하여 사용했는데,트랜잭션 내부에 있는 p

내가 맡은 부분은 주문하기, 주문 확인, 주문에 대한 요청 관리(배달시작 or 배달 완료 or 취소)이다. 주문은 각 사용자마다 소지하고 있는 포인트로 주문하고, 가게 사장님은 배달이 완료되면 포인트를 지급받으며 매출액이 오른다.이 중에서 포인트 관련한 부분을 구현한

배달 웹 프로젝트가 완성되었다.사용자는 유저와 사장님으로 나뉘어져 있고, 유저는 이메일 인증을 하면 100만포인트를 지급해주며, 사장님은 가게 운영을 통해 포인트와 가게 매출을 늘릴 수 있다.사장님은 가게를 생성하고 메뉴를 추가하여 가게를 운영할 수 있다.가게는 카테고

팀 프로젝트가 마무리되고 팀 회고로 팀원들과 KPT도 작성해보았다.K(Keep)이해가 될 때까지 공부한 것난이도있는 프로젝트를 책임감 있게 완성한 것발견된 문제에 대한 빠른 언급 및 대처git을 통해 협업하는 과정에서 별 문제가 없었던 점도전 정신이 투철했던 점도전해보

타입스크립트의 기본 타입을 알아보자타입은 변수나 함수 뒤에 붙여서 사용한다.ex) const name: string ex) function getName(): string { ... }참(true) 또는 거짓(false) 값을 나타내는 타입이다.이 둘 외에 값은 포현

이번에는 타입스크립트의 고급타입에 대해 알아보겠다.partial<T> 타입은 타입 T의 모든 속성을 선택적으로만든다.이를 통해 기존 타입의 일부 속성만 제공하는 객체를 쉽게 생성할 수 있다.ex) 위의 updatePerson 함수를 보면 2번 째 인자로 Parti

객체 지향 설계를 할 때 중요한 SOLID 원칙에 대해 정리해보자 1. SRP 원칙 (단일 책임 원칙) 클래스는 하나의 책임만 가져야 한다는 매우 기본적인 원칙이다. 예를 들어 유저 서비스에 대한 클래스라면 유저와 관련된 액션만 해야 한다. 2. OCP 원칙 (개

오늘은 제어 역전과 의존성 주입에 대해 정리해보려 한다.IoC 원칙은 모듈 간 결합도를 낮추기 때문에 하나의 모듈이 변경되어도 다른 모듈들에는 영향을 최소화되어 웹 어플리케이션을 지속 가능하고 확장성 있게 해준다.IoC 원칙을 사용하면, AppController는 Ap

모듈@Module({모듈 속성들})imports이 모듈이 의존하는 다른 모듈의 배열다시 말해, 해당 배열에 포함된 모듈들에서 내보낸 프로바이더는 이 모듈에서 사용할 수 있다.controllers모듈에 의해 관리되는 컨트롤러의 배열이 컨트롤러들은 이 모듈에 정의된 경로를

AOP(Aspect-Oriented Programming)는 코드에서 여러 부분에 걸쳐서 반복되는 공통 관심사를 분리하고 중앙에서 관리할 수 있게 하는 프로그래밍 기법이다.이를 통해 코드의 모듈성을 향상시키고 중복을 줄일 수 있다.프록시 객체 \- 프록시 객체는

전에도 비슷한 문제를 겪었는데 이번에도 겪어서 정리 해두려 한다.외부에서 json객체 배열을 넘겨받고, 이 객체 배열에 접근하려고 시도했다.그러나, 객체 배열을 반복문이든 뭐든 사용하여 하나씩 분리하고, 분리된 객체 안의 key에 접근해서 value를 알아내려 했으나.

과제 진행 중 처음 보는 오류가 발생했는데,알고 보니 순환 종속성에 대한 문제였다.A모듈과 B모듈이 있으면, 둘이 서로 의존 주입을 하려 했을 때 발생하는 문제이다.이러한 경우 해결방법은 여러 가지가 있는데,첫 번째로 가장 간단한 방법은 forwardRef()를 사용하

사용한 라이브러리는 typeorm-transactional이다.사용법은 내부적으로 cls-hooked 라이브러리를 사용하여 @Transactional() 메서드 데코레이터를 제공하고 있어서트랜잭션 처리를 원하는 메서드에 데코레이터를 달고 사용하면 된다.여기서 알아야 할

자바스크립트는 시간을 구하는 함수로 new Date()가 있다.하지만 이는 컴퓨터 언어에서 GMT(Greenwich Mean Time) 기준으로 시간을 알려주는데,한국 시간과 비교하면 9시간이 빠르다.한국 시간을 구하려면 어떻게 해야할지 정리해보겠다.먼저 UTC 시간을

이번 팀 프로젝트로 프로젝트 협업 도구를 만들기로 했다.trello같은 칸반 보드 서비스를 만들어보는 것.그래서 간단하게 erd와 와이어프레임을 작성해보았다.erd는 위와 같다.초안이라 수정될 여지가 충분히 있긴 하지만보드 안에 List가 있고 그 안에 Card가 있는

프로젝트 협업 도구를 만드는 과정에서, 리스트나 리스트 안의 카드의 순서를 바꿀 수 있도록 만들어줘야 하는데, 프론트는 건들지 않고 백엔드로만 작업을 해주려니 문제가 조금 있었다.순서가 2번에서 7번으로 바뀐다고 치면 2번 카드가 7번으로 이동함과 동시에 원래 위치하고

이전에 올렸던 코드에서 리팩토링된 부분이 좀 많아 다시 작성하려한다.이전글을 참고해서 코드를 보면 순서를 많이 바꾸거나 새로운 카드를 추가했을 때, 순서 값을 초기화해야하는 상황이 있는데 이 부분을 추가하였고,순서 조정을 할 때, 앞 순서에서 뒷 순서로 가는 것은 상관

최종 프로젝트 주제에 대한 얘기를.. 했다.. 그리고 튜터님과 얘기한 내용들 정리주제는 PT 해주는 서비스로 점점 굳혀지는 듯 하다?웹 사이트의 경우 두 가지로 분류할 수 있겠다.필요한 정보를 모아서 제공해주는 사이트데이터가 얼마나 정확하게 필요한 정보를 제공해줄 수

docker로 자신이 작성한 코드를 빌드하여 이미지화하고, 이를 컨테이너로 실행하여 로컬에서 배포하는 작업을 진행하였다.이렇게 하는 이유는 다들 개발 환경이 각각 다를텐데 docker를 이용해 버전이 충돌나지 않고 모두가 동일한 개발환경을 지니기 위해서이다.docker

이전 글에서 나의 프로젝트를 이미지로 빌드하고 컨테이너로 실행하는 부분까지 적용시켰다.이번에는 전에 성공하지 못했던 Hot reload를 적용시킨 방법을 작성하려 한다.docker로 로컬 개발 환경을 만들었지만, 코드가 수정될 때 마다 docker-compose를 do

저번에 docker로 로컬 개발 환경을 만들었는데, 이번엔 모니터링과 로깅을 위한 EFK 스택을 구축해보려 한다.docker-compose.yaml에 아래 코드를 추가해서 elasticsearch, fluentd, kibana 컨테이너를 정의한다.그리고 fluent.c

로그가 들어오기 시작했다.어째 저째 코드를 변화시키고 적용시키니 로그가 수집은 되고 있으나,현재 어느 api에 접속한 로그인지는 안나오고 DB에 접속한 쿼리문만 로그에 저장되고 있다.사실 정확히 어떤 데이터들을 수집해야하는지 잘 모르겠어서 여기 저기 찾아보고 정말 우리

정규화는 이상현상이 있는 릴레이션을 분해하여 이상현상을 없애는 과정이다. 이상현상이 존재하는 릴레이션을 분해하여 여러 개의 릴레이션을 생성하게 된다. 이를 단계별로 구분하여 정규형이 높아질수록 이상현상은 줄어들게 된다.​​각 컬럼이 하나의 속성만을 가져야 한다.하나의

전에 EFK 스택을 구축해놓았는데, DB에 접근하는 쿼리만 logging 되었었다.그래서 이번엔 winston으로 api에 접근할 때 다양한 정보를 로그로 남기려고 한다.우선 winston을 설치하자npm i nest-winston winston그리고 winston을

오늘은 OSI 7계층에 대해 블로그에 정리해두려 한다.응용 계층(Application Layer, 7계층)에서는 OSI 7계층 모델에서 최상위 계층으로 사용자가 네트워크 자원에 접근하는 방법을 제공한다. 그리고 계층 7은 최종적으로 사용자가 볼 수 있는 유일한 계층으로

nestjs에서 테스트 코드를 작성하던 중 로그인을 하면 쿠키를 발급받는데,res.cookie로 쿠키를 발급할 때 res 정의가 문제가 되었다.일반적으로 express에서 불러오는 response를 사용하면 실제로 해당 모듈에 접근을 하는데,단위 테스트 코드에서는 모듈

HTTP 메서드란 클라이언트와 서버 사이에 이루어지는 요청(Request)과 응답(Response) 데이터를 전송하는 방식을 일컫는다.쉽게 말해 서버가 수행해야 할 동작을 지정하는 요청을 보내는 방법이다.​\---메인 요청들---GETGET 메서드는 특정 리소스의 표시

곧 프로젝트의 중간 발표회가 있다.맡은 부분이 많지는 않고, 고민할 요소도 생각보다 적었어서 기여도가 낮은 기분이 든다..그리고 막상 보니 뭔가 겉으로는 보여지는게 많이 없어서 발표할 내용이 많지 않을까 싶다.우선 된 것들을 나열해보자면docker를 활용하여 로컬 개발

docker를 사용해서 잘 개발하고 있었는데?뜬금없이 모듈을 읽지 못하는 문제가 발생했다.multer를 사용해서 이미지를 저장하고 불러오는 작업을 추가했는데,이 multer가 읽히지 않았던 것이다.분명 package.json파일을 동기화시켜주었는데 안되는 이유를 짐작할

우리는 기술적 의사결정과 트러블 슈팅에 대한 내용이 전반적으로 부실했다.이를 정리하면서 이후에도 기술을 추가하거나 문제가 발생하면 아래처럼 기록하려고 한다.openvidu 서버 배포openvidu 선택 이유DockerEFK StackOpenAI

우리는 서비스 중 스케줄을 관리해주는 서비스가 있다.스케줄에 적힌 시간에 가까워지면 알림을 보내주는 기능을 만드려고 하는데,알고 있는 것은 web socket과 pub/sub을 이용하는 방법 뿐이었다.그런데 찾다보니 sse(Server-Sent-Event)라는 것을 알

nestjs에서 사용하는 sse는 기본적으로 예제가 주어져 사용해보았다.위 예제는 /sse url로 요청하면 초당 hello: world 라는 데이터를 계속 뿌려준다.한번 요청하면 계속 진행되며, 최대 6개의 브라우저까지 지원해준다.7번째 브라우저는 나머지 브라우저 중

저번 주에 삽질만 계속 해서 마땅히 쓸만한 내용이 없다..그래서 기본적인 내가 사용하고 배우고 있는 node에 대해 본인이 정리한 개념을 작성하려고 한다.그러다보니 JS도, Express도 추가로 작성해 두면 좋을 것 같아서 정리했다.(엄청 간단하게함.)자바스크립트는

FCM에서 계속 삽질을 하다가 https 환경에서 시도해보자는 생각이 들어 로컬 환경에서 https로 접속해주려고 했다.여러 방법이 있는데 본인은 MKCert를 사용해서 인증서를 만들어 줄 것이다.우선 MKCert를 설치해줘야 하는데 windows 운영체제를 사용 중이

NestJS 프로젝트를 진행하면서 FCM에서 삽질을 참 많이 했는데,FCM 토큰을 가져오는 부분에서 계속 막힌 상태였다.근데 알고보니 Node 환경에서는 FCM 토큰을 가져올 수 없던 것..브라우저 환경에서 접근해야 FCM 토큰을 가져올 수 있었다.그래서 팀원들이 진행

저번에 클라이언트에서 FCM 토큰을 받아오는 방법을 작성하였는데,이번에는 백엔드 서버에서 fcm 알림을 전송하는 방법을 작성해보려 한다.추가로, 내가 구현해야했던 일정 시간에 알림 전송하기까지 정리해보겠다.우선 firebase-admin 라이브러리를 설치하자.그리고 f

로그인하면 해당 브라우저의 FCM 토큰을 받고,이 토큰을 유저 DB에 저장해서 접속한 최신 브라우저를 기억한다.새로운 브라우저로 들어왔는지 검사하고 만약 새로운 브라우저라면 로그인 시 유저 DB에 있는 브라우저의 FCM 토큰을 최신 브라우저의 토큰으로 변경해주고,해당