본문 바로가기

분류 전체보기

 (153)
Kotlin - 고차함수와 스코프함수 (Higher Order Function and Scope Function) 내가 코틀린을 배우면서 코틀린에 있어 특별하다고 생각되는 부분들 또는 메모해두어야 할 점들을 여기에 적어놓으려고 한다. 고차함수 어떤 함수의 파라미터로 함수를 받아올 때, 해당 함수를 하나의 인스턴스처럼 넘겨줄 수 있는데, 이러하게 넘겨지는 함수를 고차함수라고 한다. 코틀린에서는 어떤 함수든 고차함수가 될 수 있다. 함수를 파라미터로 받아올 때에도 함수의 자료형을 지정해주어야 하는데, 함수의 자료형은 다음과 같이 표시한다. 예를 들어, String형의 파라미터가 들어가서 String형의 파라미터가 나오는 함수를 파라미터로써 집어넣고 싶다면, 다음과 같이 표현하면 된다. 참고로 반환하는 값이 없을 경우에는 Unit이라고 적어주면 된다. 또한, 일반함수를 고차함수로 넘기려면 :: 연산자를 사용하면 되는데, ..
Kotlin - 클래스 (Class) 내가 코틀린을 배우면서 코틀린에 있어 특별하다고 생각되는 부분들 또는 메모해두어야 할 점들을 여기에 적어놓으려고 한다. 생성자 코틀린은 클래스를 생성자와 함께 선언할 수 있다. 이 경우 마치 함수와 같이 들어갈 변수들을 지정하는 방식으로 진행된다. 이 같은 방법을 통해 생성자와 속성을 동시에 선언하는 방법이다. 예시 fun main() { val beom = Person(24, "Beom Seok") beom.sayName(); } class Person (val age: Int, val name: String) { fun sayName () { println("My name is ${name}") } } 출력 My name is Beom Seok 그러나 위와 같은 경우 생성자의 기능이 제한적이다. 단순..
Kotlin - 함수, 조건문, 반복문 (Function, Conditional, Iteration) 내가 코틀린을 배우면서 코틀린에 있어 특별하다고 생각되는 부분들 또는 메모해두어야 할 점들을 여기에 적어놓으려고 한다. 단일 표현식 함수 단일 표현식 함수 (Single-Expression Function) 는 간단한 함수들의 반환값을 마치 변수에 결과값을 할당하듯 식을 할당하여 만든다. 또한 이 경우 반환형의 타입추론이 가능하므로, 반환형 또한 생략이 가능하다. 자바스크립트의 화살표 함수와 비슷하게 사용할 수 있다. 예시 fun main() { println(add(1,2)) } fun add(a: Int, b: Int) = a + b; 출력 3 is 연산자 코틀린에는 자료형을 확인할 수 있는 is 연산자가 있다. 따라서 같은 is이지만 파이썬의 is와는 쓰임이 다르다. 가령 아래와 같이 사용할 수 있..
Kotlin - 변수와 타입 (Variable and Data Type) 내가 코틀린을 배우면서 코틀린에 있어 특별하다고 생각되는 부분들 또는 메모해두어야 할 점들을 여기에 적어놓으려고 한다. 변수선언 var 먼저, 변수를 선언하는 방식에는 두 가지 방식이 있는데, 첫번째는 var를 사용하는 방식이다. 이 방식을 사용하면 언제든 읽고 쓰고 수정할 수 있는 변수 (variable) 가 생성된다. 이 경우 변수에 객체가 담기더라도 언제든 수정할 수 있다. 예시 fun main() { var a: Int = 10; println(a); a = 20; println(a); } 출력 10 20 val 두번째는 val를 사용하는 방식이다. 이 방식을 사용하면 선언시에만 초기화가 가능한 변수 (value) 가 생성된다. 이 방식을 통해서 초기화된 변수는 그 값을 후에 변경할 수가 없다. ..
Next.js - 데이터 가져오기 (Data Fetching) Next.js에서 데이터를 가져와 컴포넌트에 props로 적용해주자. Next.js는 페이지에 데이터를 가져오기 위한 표준 API를 제공하는데, 바로 getInitialProps라고 불리는 비동기 함수를 사용한 구현이다. 데이터를 어디서 가져와야 할텐데, JSONPlaceholder에서 유저정보를 가져오는 방식으로 하도록 하겠다. 먼저 axios를 설치하고, /pages/users.js 파일을 만들어 다음과 같이 컴포넌트를 작성해준다. import Layout from "../components/Layout"; import axios from "axios"; const Users = ({ users }) => ( Users page {users.map((user) => ( {user.name}: {use..
Next.js - Express와 연결 (Connect to Express) 포트 분리 Next.js를 Express와 연결시켜보자. 가장 간단히는 포트를 분리하여 실행하는 방법이 있다. 먼저, Next.js를 포트 3000에서, 그리고 Express 서버를 포트 8000에서 실행시키는 방법으로 해보자. 루트 디렉터리에서 app.js 파일을 다음과 같이 작성해준다. const express = require("express"); const cors = require("cors"); const app = express(); app.use(cors()); app.get("/getdata", (req, res) => { return res.send("Responding from server!"); }); app.listen(8000); 그 후, package.json의 scripts를..
Next.js - 빌드와 배포 (Build and Deploy) 배포 Next.js 앱을 자신의 환경에서 배포해보자. 먼저 next.js 앱을 빌드해주자. 이전에 package.json 파일에서 스크립트를 확인해준다. "scripts": { "dev": "next", "build": "next build", "start": "next start" }, 먼저 앱을 빌드해준다. 다음과 같은 커맨드를 쳐준다. > npm run build 위 커맨드를 사용하면 배포를 위한 최적화된 코드를 생성한다. 그 후, 포트를 지정하여 Next.js 앱을 실행하여야 한다. 포트 값 없이 start를 통해 실행하면, > npm start localhost:3000에서 앱이 실행되는 것을 확인할 수 있다. 포트 지정 포트를 지정하여 배포를 할 수도 있다. 먼저 package.json의 sc..
Next.js - 컴포넌트와 스타일링 (Component and Styling) 컴포넌트화 Next.js에서 컴포넌트를 만들어 사용하는 것은 리액트 앱에서 하는 방법과 크게 다르지 않다. 그러나 앞선 예시들과 같이, react를 import 해줄 필요가 없다. 먼저, components 폴더를 만든 후, Header.js 파일을 만들어 다음과 같이 코드를 작성해준다. const Header = () => This is header; export default Header; 이제 pages/index.js 파일에 들어가서 다음과 같이 헤더를 추가해준다. import Link from "next/link"; import Header from "../components/HeaderExample"; const index = () => ( hello world Hello Page ); exp..

티스토리툴바