전체 글

Final 예약어한 번 정의된 변수를 수정할 수 없게 만들기 위해 final 키워드를 사용하여 변수를 정의할 수 있다.void main() { final String name = 'dart'; name = 'flutter'; //Warn: The final vairable can only be set once.} Late 예약어late 는 final이나 var앞에 붙여쓸 수 있는 수식어 이다.late 수식어는 변수를 초기 데이터 선언없이 정의하도록 사용하는 키워드이다.void main() { late final String name; // hit the api and save the values in late variable}late 키워드를 사용하면 변수를 먼저 만들고 ..

Keyword변수를 만드는 방법은 두가지다,첫째로 명시적으로 타입을 부여해서 변수를 선언하는 것 이다.class에서 변수나 property를 선언할 때 주로 명시적 타입 선언을 활용한다.String name = 'dart';두번째는 var 키워드를 사용하여 변수를 정의한다.dart에서는 var 키워드를 통하여 변수를 정의하면, 타입을 지정할 필요가 없이 타입 추론에 의해서 변수를 정의한다.var name = 'dart';관습적으로 함수나 메소드 내부에 지역변수를 선언할 때 var를 사용하는것을 권장한다.하지만 주의할 점은 초기에 정의한 변수와 같은 타입으로만 업데이트가 가능하다.var name = 'dart';name = 1; //error ocuured!  Dynamic Variabl..

🧐 원인이 오류는 주로 new Date를 연산하는 과정에서 발생하게 된다.Javascript 코드에서는 문제가 없었지만 Typescript에서 사용할 경우는 오류로 처리된다.이는 객체로 생성한 변수의 값을 연산에 사용하기 떄문에 에러가 나는 것 이다.물론 연산이 불가능한 것은 아니지만 Typescript에서는 명시적으로 연산이 가능하도록 number 처리를 해줘야 하기때문이다.   📌 단항연산자?단항연산자(Unary Operator)는 한 개의 피연산자, 즉 한개의 인수와 짝을 이루어 역할을 하는 연산자이다.단항연산자의 종류로는 부호(+,-), 증감연산자(++, —), 비트연산자(~), 논리연산자(!) 가 있다.이 중의 부호 연산자는 기존의 + 기호와는 달리 숫자를 변환해주는 역할을 담당하는 연산자는..

개요Nextjs의 routes를 이해하기 위해선 HTTP URL의 기본 구조에 대해 알아야 하기에 잠깐 확인해보고 가도록 하자.  URL의 구조는 schema://domain:port/path/parameters#anchor 를 갖는다.⇒ (ex) https://devleoper.mozilla.org/ko/docs/search?q=URL 이라는 주소가 있을 때,”/ko/docs/search”가 path 가 되고, ? 기호 뒤로부터 이루어진 “q=URL”는 search parameter 가 된다.   Routes (라우팅 시스템)How to route in Next.jsNextjs의 route는 심플하다. Nextjs에서는 라우팅 URL은 app 디렉토리 하위 구조의 폴더명에 따른다.//Exampleroo..

Application을 build 할 때 Header, Layout, Sidebar, Footer 등의 화면과 같이 모든 파일에 컴포넌트를 복사하지 않고도 어느 위치에서나 계속해서 재사용해야하는 화면들이 존재한다. 이렇게 반복적으로 사용되는 화면들을 위한 Next.js의 레이아웃 시스템(Layout System)을 알아보자.   LayoutsNext.js에서는 Layout 컴포넌트의 export default 된 Layout Component를 먼저 렌더링 한 후, 접속 URL을 확인하여 URL의 Target Component를 Layout 컴포넌트의 child로 렌더링 한다. 설명이 장황하니 Layout 컴포넌트를 코드로 살펴보자.//Layout.tsx...export default function L..

useEffectDOM의 렌더링 이후 리액트 함수 컴포넌트에 어떤 일을 수행해야하는지 알려주기 위해 useEffect 훅을 활용할 수 있다. 그럼 useEffect의 타입정의를 알아보자. function useEffect(effect: EffectCallback, deps?: DependencyList): void;type DependencyList = ReadonlyArray;type EffectCallback = () => void | Destructor; useEffect의 첫번쨰 인자로는 effect 타입인 아무것도 반환하지 않는(void) Callback 함수이다. Promise 타입은 반환하지 않으므로 비동기 함수는 들어갈 수 없다. 두번째 인자인 deps는 옵셔널하게 제공되며 effect가 ..

지난 프로젝트에서 과업으로 레거시 프로젝트의 프로시저를 Java의 비즈니스 로직으로 전환하는 과업이 있었다. 현업에선 프로시저의 사용에 대해 뜨거운 감자처럼 찬반이 갈리는 분위기가 좀 있는 분위기다. “프로시저 안좋다” “유지보수 힘들다” “요새 읽을 수 있는 개발자가 별로없다” 등의 반대측의 여러 이유를 듣긴 했지만, 정말 왜 현업 백엔드에서는 프로시저를 선호하지 않을까? 개념과 장단점을 알아보기로 한다. Stored Procedure란 저장 프로시저 또는 스토어드 프로시저 는 일련의 쿼리를 마치 하나의 함수처럼 실행하기 위한 쿼리의 집합이다. 데이터베이스의 작업의 절차를 RDBMS에 저장한 것이다. 프로시저를 이해하기 앞서 애플리케이션의 아키텍처에 대한 간략히 정리해보자. 일반적인 애플리케이션의 아키..

React.js의 핵심 개념 중 하나는 컴포넌트의 생명주기(Life Cycle)이다. 컴포넌트의 생명주기는 컴포넌트가 브라우저에 나타나고, 업데이트 되고, 마지막으로 사라질 때까지의 과정을 말한다. 이 생명주기는 여러 단계로 나뉘며, 각 단계마다 개발자는 특정 코드를 실행할 수 있는 메서드를 이용할 수 있다. (생명주기 메소드는 Class형 컴포넌트에서만 사용할 수 있다) 먼저 마운드될 때 발생하는 생명주기는 아래와 같다 constructor : 생성자 메서드. 컴포넌트 생성시 가장 먼저 실행되는 메서드 getDerivedStateFromProps : props 로 받아온 것을 state 에 넣어주고 싶을 때 사용한다. render : 컴포넌트를 표시하는 메서드 componentDidMount : 컴포넌..