Dev Diary 💻

이 글은 생활코딩의 'Java' 강좌를 바탕으로 정리한 내용입니다. 상속이란? 객체 지향에서 가장 중요한 목표 중 하나는 바로 재활용성입니다. 상속은 객체지향의 재활용성을 극대화시킨 프로그래밍 기법이라고 할 수 있습니다. 동시에 객체 지향을 복잡하게 하는 주요 원인이라고도 할 수 있습니다. 상속(Inheritance)이란 물려준다는 의미입니다. 어떤 객체가 있을 때 그 객체의 필드(변수)와 메소드를 다른 객체가 물려받을 수 있는 기능을 상속이라고 합니다. package org.opentutorials.javatutorials.object; class Calculator{ int left, right; public void setOprands(int left, int right){ this.left = l..

이 글은 생활코딩의 'Java' 강좌를 바탕으로 정리한 내용입니다. 초기화 어떤 일을 시작하기 전에 준비하게 되는데, 이를 초기화라고 합니다. 객체 지향 프로그래밍도 초기화에 해당하는 기능이 제공되는데 이를 생성자 (constructor)라고 합니다. 앞서 살펴봤던 계산기 예제를 다시 봅시다. Calculator c1 = new Calculator(); c1.setOprands(10, 20); c1.sum(); c1.avg(); 메소드 setOperands의 값으로 10과 20을 지정했습니다. 이는 객체 내부에서 인스턴스 변수 left과 right의 값으로 설정되어 유지됩니다. 하지만 아래와 같이 메소드 setOperands 호출하기 전에 sum과 avg를 호출한다면 원하는 결과를 얻을 수 없습니다. C..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 139. 모듈 소개 지난 섹션에서 중요한 리액트 개념들을 살펴보았습니다. useEffect, useContext, useReducer 등등 / 위 개념을 복습하면서 다시 살펴보도록 합시다. 140. 설정 시작하기 Layout folder : ex. Header UI folder: ex. Input 141. "헤더" 컴포넌트 추가하기 header 컴포넌트 추가 142. Adding the "Cart" Button Component Cart Button 컴포넌트 추가 143. Adding a "Meals" Component Meals 컴포넌트 추가 144. Adding I..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 117. 모듈 소개 Effects, ReducersContext Working with (Side) Effects MAnaging more Complex State with Reducers Managing App - Wide or Component - Wide State with Context 118. "Side Effects"이란 무엇이며 useEffect를 소개합니다. Main Job : Render UI & React to User Input Evaluate & Render JSX Manage State & Props React to (User) Events & ..

Intro javascript의 익명함수에 대해 알아보도록 하겠습니다. Anonymous function 익명 함수는 연결된 이름이 없는 함수입니다. 일반적으로 JavaScript에서 함수를 정의하기 위해 함수 이름 앞에 function 키워드를 사용하지만 JavaScript의 익명 함수에서는 함수 이름 없이 function 키워드만 사용합니다. 익명 함수는 처음 생성된 후에는 접근할 수 없으며 값으로 함수로 저장된 변수로만 접근할 수 있습니다. 익명 함수는 여러 인수를 가질 수도 있지만 하나의 표현식만 가질 수 있습니다. Syntax function() { // Function Body } → function 키워드를 사용하여 선언하였습니다. ( () => { // Function Body... } )..

Intro input tag 에서 최소값과 최대값을 설정하는 방법에 대해 알아보도록 하겠습니다. Syntax 숫자 (number) : 최솟값 혹은 최대값을 명시함 날짜 (date) : 최솟값 혹은 최대값을 명시함 Example http://www.tcpschool.com/html-tag-attrs/input-min

Intro 코틀린에서의 이스케이프 문자 (escape character), 그리고 Raw에 대해 알아보도록 하겠습니다. Escape character 이스케이프 문자란, 문자열 내에서 특수한 기능을 수행하는 문자입니다. 역슬래시(\) 기호가 붙은 특수한 기능을 하는 문자 리터럴 입니다. 즉 문자열 안에서 특별한 의미로 해석되는 문자입니다. 구분 의미 \a 경고음 출력 \n 줄 바꿈, 개행 (new line) \t 수평 탭으로 일정한 가격 띄우기, 탭 (tab) \b 백스페이스로 뒤로 한 칸 이동 (backspace) \r 동일한 줄의 맨 앞 칸으로 커서 이동 (carriage return) \f 출력 용지를 한 페이지 넘김 (form feed) \\ \(역슬래시) 문자 출력 \' '작은 따음표 문자 출력..

Intro Axios의 catch() 문에서 Status Code 를 받아오는 방법에 대해 알아보도록 하겠습니다. 예를 들어 다음의 axios 요청이 있다고 가정해 봅시다. axios .get('foo.example') .then((response) => {}) .catch((error) => { console.log(error); //Logs a string: Error: Request failed with status code 404 }); 다음의 방법으로 console.log 로 찍어볼 경우 단순 string 만 반환하게 됩니다. return 된 object를 받고 싶을 경우 어떻게 해야 할까요? How to solve the problem axios.get('/foo') .catch(functio..

Intro Next.js로 구현된 프로젝트에서 특정 페이지들을 숨기는 요청사항이 들어왔습니다. 보통 Next.js는 pages라는 폴더 하위에 파일 혹은 폴드를 작성하게 되면 해당 파일/폴더를 자동으로 라우팅 해줍니다. 처음 단순하게 NavBar 네비바에 있는 특정 link tag 를 주석처리했지만, url로 해당 페이지 직접 접근시 접근이 가능했습니다. How to do Next.js의 공식 문서를 살펴보면, Next.js는 Redirects라는 기능을 제공하고 있습니다. 위 기능은 Next.js 프로젝트 폴더 root에 있는 next.config.js 파일에서 설정할 수 있습니다. Redirects Redirects allow you to redirect an incoming request path ..

Intro React.FC의 의미와 사용하지 않는 이유에 대해 알아보도록 하겠습니다. type Props = { }; const TestComponent: React.FC = () => { return ( TestComponent ); }; export default TestComponent; 현재 React typescript를 사용하고 있는 프로젝트에서 컴포넌트를 작성할 때 다음과 같은 방법을 사용합니다. FC를 사용하지 말아야 하는 이유 하지만 🤨 React typescript는 그다지 좋은 방법이라고 합니다. 그중에서 가장 큰 이유는 props이 암시적으로 들어가 있기 때문입니다. children을 암시적으로 가지고 있습니다. 제네릭을 지원하지 않습니다. 네임 스페이스 패턴을 이용할 때 더 불편합..