Dev Diary 💻

Intro 안녕하세요. 이번 시간에는 Network의 CIDR 이 무엇인지 알아보도록 하겠습니다. CIDR CIDR은 Classless Inter-Domain Routing의 약자로 IP 주소 할당 및 라우팅에서 사용되는 방법입니다. 네트워크에서 CIDR은 네트워크 주소와 호스트 주소 부분의 중요한 비트수를 정의하는데 사용됩니다. 네트워크 주소는 IP주소와 중요한 비트의 수의 조합으로 쓰여진 접두사를 사용하여 표현되고 있습니다. Example CIDR 표기법인 192.168.0.0/24 예시를 들어보도록 하겠습니다. 접두사는 192.168.0 이고, 중요한 비트 숫자는 24입니다. 이는 IP 주소의 처음 24 비트가 주소의 네트워크 부분을 위해 사용되는 것을 뜻합니다. 그리고 남은 8비트가 주소의 호스트..

Intro 안녕하세요. 이번 시간에는 서버리스(serverless)의 의미에 대해 알아보겠습니다. What's Serverless? 서버리스 (Serverless)의 단어만 보면, 서버(Sever) + 리스(Less)의 합성어로 서버가 없다는 뜻처럼 보입니다. 하지만 서버리스는 애플리케이션 개발과 배포를 위해 서버 인프라를 설정하고 관리할 필요가 없는 클라우드 컴퓨팅 모델을 의미합니다. Characteristics of Serverless 서버리스는 클라우드 공급 업체가 인프라를 관리하기 때문에 애플리케이션 코드에 집중할 수 있습니다. 서버리스 애플리케이션은 필요한 경우에만 실행되며, 실행되는 각 함수에 대해 클라우드 공급 업체에서 자동으로 스케일링을 처리합니다. 이러한 이유로 서버리스는 비용 효율적이고..

이 글은 코딩애플님의쉬운 플러터 강좌를 바탕으로 정리한 내용입니다. Intro 새로운 사이드 프로젝트를 시작하면서 Flutter를 사용해보기로 했습니다. Flutter는 한번도 다뤄본 적이 없기 때문에 강좌 내용을 간단히 정리하며 공부해보려고 합니다 :-) Flutter 개발환경 셋팅 1. Flutter SDK 다운 https://docs.flutter.dev/get-started/install 2. Android Studio 설치 https://developer.android.com/studio plugin 메뉴에서 Flutter 플러그인 검색 후 설치 SDK Manager 눌러서 Android SDK Command-line Tools 설치 3. 환경변수등록 제 경우 터미널 이름이 zsh 이므로 아래 ..

Intro 안녕하세요. 타입스크립트 사용 중 다음의 에러가 발생했습니다. Could not find a declaration file for module Why? 이 오류 메시지는 연결된 declaration file 이 없는 타입스크립트 코드 안에 모듈이나 라이브러리를 사용할 때 발생하는 전형적인 오류입니다. declaration file(.d.ts)는 모듈이나 라이브러리의 types, functions 및 기타 속성을 설명하고 타입스크립트가 코드에서 이들을 사용하는 방법을 이해할 수 있도록 합니다. 따라서 설치된 특정 모듈/라이브러리에 대한 type 정의가 없어 타입스크립트에서 이해할 수 없으므로 다음의 오류가 발생한 것입니다. How to solve the problem 이 오류를 해결하기 위해서는..

Work 서비스 내부 테스트 이번 달은 리뉴얼 웹앱 개발을 마치고 테스트 및 피드백이 진행된 달이였습니다. 팀 내 인원이 충분하지 않다보니 테스트 내부에서 테스트할 인원소스는 부족했습니다. 처음 테스트는 서비스 기획 경험도 많으시고 테스트도 많이 해보셨던 팀 내의 기획자 분(동시에 팀장님)께서 해주셨습니다. 사실 저는 현 회사의 도메인 지식이 부족한 편입니다. 전기 관련된 내용이다 보니 어떤 지표가 유용하고, 무엇을 보기 위해 개발된 화면인지 이해가 안될 때가 많더라고요. 기획자분께서 도메인 지식도 많으시고, 정리도 잘 해주시고 잘 알려주셔서 참 다행이라는 생각이 들었습니다. 서비스 베타 테스트 팀 내부 테스트를 거친 후, 타부서에 베타 테스트 참여 인원을 모집하였습니다. 해당 부서는 실질적으로 해당 ..

Intro 안녕하세요. 앵귤러에서 SVG path element에 click 이벤트 함수 실행하는 방법에 대해 알아보도록 하겠습니다. My Case 제 케이스의 경우 특정 SVG 요소를 클릭했을 때 함수를 호출하도록 하고 싶었습니다. 따라서 아래와 같이 구현하였습니다. svg 파일은 다음과 같습니다. ts 파일은 다음과 같습니다. @ViewChild('myPath') myPath: ElementRef; handleClick() { console.log("handleClick!!"); } 하지만, svg 파일의 path 요소를 클릭해도 handleClick 함수가 동작하지 않았습니다. Why? 클릭 이벤트가 발생하지 않는 문제는 조건이 충족하지 않았기 때문입니다. 클릭 이벤트를 처리하기 위해서는 해당 요소..

Intro 안녕하세요. 이번 시간에는 RESTful API에 대해 알아보겠습니다. RESTful API (REST API) RESTful API란 Representational State Transfer(표현 상태 전이) 아키텍쳐를 따르는 API입니다. REST는 웹 기반 시스템에서 리소스를 정의하고, 이를 HTTP 프로토콜을 통해 CRUD(Create, Read, Update, Delete) 작업을 수행하기 위한 규칙이나 제약 조건을 제공합니다. RESTful API 특징 HTTP 프로토콜을 사용하여 클라이언트와 서버 간의 통신을 처리합니다. 클라이언트는 URL을 통해 서버의 리소스에 접근하고, HTTP 메소드(GET, POST, PUT, DELETE 등)를 사용하여 해당 리소스를 조작합니다. 이러한 ..

Intro 안녕하세요. 이번 시간에는 JWT(JSON Web Token) 에 대해 알아보겠습니다. JWT(JSON Web Token) JWT란 인증 및 권한 부여를 위해 사용되는 표준 기반의 데이터 형식입니다. JWT는 JSON 형식으로 표현되며, 데이터를 안전하게 전송하고 검증하기 위한 디지털 서명이 포함됩니다. JWT 구조 JWT는 세 가지 파트로 구성됩니다. 헤더, 페이로드, 서명입니다. 헤더 (Headder) 헤더는 토큰의 타입과 사용되는 해싱 알고리즘을 지정하는 역할을 합니다. 페이로드 (Payload) 페이로드는 토큰에 포함될 데이터를 정의합니다. 서명 (Signature) 서명은 헤더와 페이로드를 사용하여 생성되며, 이를 이용해 데이터의 무결성 (데이터의 정확성, 일관성, 유효성이 유지되는 ..

Intro 안녕하세요. 리액트에서 innerHtml을 표시하는 방법에 대해 알아보겠습니다. 최근에 스마트에디터 관련한 작업을 진행하고 있었습니다. 에디터에 저장된 내용이 그대로 html tag로 저장되고, 저장된 html tag를 그대로 화면에 표시해야 했죠. 저장된 이 innerHtml를 어떻게 표시해야 할까요? 함께 알아봅시다 :) How to solve the problem React에서 innerHtml를 표시하는 위해서는 아래 코드와 같이 dangerouslySetInnerHTML를 활용할 수 있습니다. import React from 'react'; function MyComponent() { const sampleHtml = 'Hello world! '; return ( ); } 여기서 da..

Intro 안녕하세요. 이번 시간에는 리액트에서 로딩바 표시 및 로딩 속도를 조절하는 방법에 대해 알아보겠습니다. How to solve the problem 다음의 List 컴포넌트가 있다고 가정해봅시다. handleFilterClick함수를 클릭 할때마다 필터기능이 작동되는 로직입니다. 필터를 누를 때마다 필터가 된듯한 동작을 표현하기 위해 로딩바를 추가보도록 하겠습니다. const List: NextPage = () => { const {dataList, setDataList} = useLoginStore(); const [totalCtn, setTotalCtn] = useState(); const [filterStatus, setFilterStatus] = useState("ALL"); const..