[JavaScript] Callback 과 Promise

2023-01-28

콜백함수를 이용하면 자바스크립트의 비동기 처리의 특성에도 원하는 시간에 원하는 값을 얻어올 수 있다. 하지만 콜백 패턴은 콜백 지옥으로 인해 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하며 한계가 있다는 단점이 있다. 이를 해결하기 위해 ES6에서는 비동기 처리를 위한 패턴으로 프로미스(Promise)를 도입하였다.

Read More

[React] FontAwesome

2023-01-25

React로 클론코딩을 할때 아이콘의 경우는 Font Awesome을 자주 사용하였는데 이번 기회에 간략하게 사용법에 대해 정리해본다.

Read More

[Vue3] 할 일 관리 앱

2023-01-20

Vue.jsReact와 가장 유사하지만 React보다는 좀 더 많은 사람들이 접근하기 쉽도록 제작된 자바스크립트 프레임워크이다. Vue.js의 창시자인 에반은 Angular의 필수적인 요소들만 가지고 화면을 구현하기 시작했고, 이를 오픈 소스화하고 많은 사람들이 참여하여 기능을 점차 붙여나가면서 Angular의 양방향 데이터 바인딩과 React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임 워크로 탄생 하였다.

Read More

[JavaScript] 정규표현식(RegExp)

2023-01-10

정규표현식

정규표현식은 일정한 규칙을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어이다. 정규 표현식은 패턴과 플래그로 구성된다. 패턴은 일정한 규칙을 표현하기 위해, 플래그는 검색 방식을 설정하기 위해 사용한다.

Read More

[React] Debounce

2023-01-03

이벤트핸들러를 효율적으로 처리해야 하는 이유

이벤트가 발생할때마다 반복문을 실행하는 함수나 API 로직이 호출되는 경우 비용적인 문제가 발생할 뿐 아니라 최적화에도 좋지 않다. 이런 경우 사용하는 Debounce에 대해 알아보자.

Read More

[React] dangerouslySetInnerHTML

2023-01-03

dangerouslySetInnerHTML은 브라우저에 DOM에서 innterHTML을 사용하기 위한 React의 대체 방법이다. 일반적으로 코드에서 HTML을 설정하는 것은 XSS 공격에 쉽게 노출될 수 있기 때문에 위험하다는 것을 상기시키기 위해 dangerouslySetInnerHTML을 작성하고 __html키로 객체를 전달해주어야 한다.

Read More

[Network] 인터넷 네트워크

2022-12-11

클라이언트 컴퓨터와 서버 컴퓨터는 어떻게 통신을 하는 걸까?
클라이언트와 서버는 수많은 노드의 집합인 인터넷 망에 의해 연결이 된다. 클라이언트와 서버는 IP주소를 부여받고, 수많은 노드를 지나 이 IP를 찾아 패킷이라는 통신 단위로 데이터를 주고 받는다. 하지만 IP만으로도 통신을 할 경우 패킷을 받을 대상이 없거나 서비스 불능 상태여도 패킷을 전송하고 패킷이 순서대로 가지 않아 패킷 전달 순서 문제 등이 발생할 수 있다. 이를 보완해주는 것이 TCP이다.

Read More

[JavaScript] 타입 변환과 단축평가

2022-12-10

타입 변환 (명시적, 암묵적)

자바스크립트의 모든 값은 타입이 있다. 타입 변환이란 이러한 타입을 변환시키는 것을 말하는데 개발자가 의도적, 명시적으로 타입을 변환시키는 경우를 ‘명시적 타입 변환’이라 하고 개발자 의도와는 상관없이 자바스크립트 엔진에서 암묵적으로 타입을 변환시키는 것을 ‘암묵적 타입 변환’ 혹은 ‘타입 강제 변환’이라고 한다.

Read More

[AWS] AWS EC2 생성하여 서버 배포하기

2022-12-06

개인 프로젝트를 진행하면서 실제 서비스는 어떻게 구동되는지 궁금했고, 직접 프론트엔드부터 백엔드까지 구현해보기로 마음먹었다. 아래는 백엔드 서버를 AWS EC2를 통해 배포하는 방법에 대해 간략히 설명하겠다.

Read More

[JavaScript] try...catch를 이용한 에러 핸들링

2022-11-08

자바스크립트에서 에러가 발생하면 코드는 멈추게 되고, 콘솔에 에러가 출력된다. 하지만 try...catch 문법을 사용하면 스크립트가 죽는 것을 방지하고, 에러 상황을 잡아 예외처리를 할 수 있게 한다. 기본적인 형태는 두 블록으로 구성되며 예시 코드는 아래와 같다.

Read More

[JavaScript] 얕은 복사, 깊은 복사

2022-10-18

깊은 복사와 얕은 복사에 대해 알아보겠다. 이 글의 초반 내용은 이전 포스팅의 (원시 타입과 참조 타입의 차이)과 맥락이 비슷하며, 위 포스팅은 원시 타입과 참조 타입의 차이점이라면 아래는 참조 타입의 깊은 복사하는 방법에 대해 알아보도록 하겠다.

Read More