키자드에 등록된 collcr의 네이버 블로그 포스트 목록

collcr의 등록된 링크

collcr로 등록된 네이버 블로그 포스트 수는 259건입니다.

[Android] BMI 계산기 [내부링크]

1. 기능 설명 사용자에게 신장과 체중을 입력 받습니다. 입력받은 신장과 체중을 통해 BMI 를 계산합니다. 계산된 BMI 결과에 따라 비만도를 판정합니다. 2. 기능 구현 1) 사용자에게 신장과 체중 입력받기 EdtiText 를 사용하여 신장과 체중을 입력받습니다. inputType속성을 number 로 설정하여 신장과 체중을 정수로만 입력 받습니다. 사용자가 값을 입력하지 않았을 경우, 값을 입력하라고 Toast 메시지를 출력합니다. 2) BMI 계산하기 BMI = 몸무게(kg) / (키(m) x 키(m)) 저체중 : 18.5 이하 정상체중 : 18.5 ~ 23 과체중 : 23 ~ 25 경도 비만 : 25 ~ 30 중정도 비만 : 30 ~ 35 고도 비만 : 35 이상 신장과 체중을 이용하여 BMI 를 계산합니다. 화면에 BMI, 비만도를 출력합니다. 3. 결과 화면 Previous image Next image BMIActivity.kt(좌) / BMIResultActivity

[Android] 로또 번호 추첨기 [내부링크]

1. 기능 설명 사용자가 로또 번호를 0~5개까지 수동으로 선택합니다. 사용자가 수동으로 선택한 번호를 제외한 나머지 번호를 랜덤으로 추출합니다. 2. 기능 구현 1) 사용자에게 로또 번호 입력 받기 NumberPicker 를 사용하여 로또 번호를 입력받습니다. 로또 번호 숫자는 1 ~ 45 입니다. 사용자가 중복된 번호를 입력할 경우, 중복된 값을 입력했다고 Toast 메시지를 출력합니다. 사용자가 6개 이상의 번호를 입력할 경우, 번호는 5개까지만 선택할 수 있다고 Toast 메시지를 출력합니다. 2) 로또 번호 랜덤으로 추출하기 1~45 숫자가 담긴 리스트를 생성합니다. 리스트를 생성할 때, 사용자가 입력한 번호는 리스트에 담지 않습니다. 생성된 리스트는 shuffle() 함수를 사용해 리스트의 요소를 랜덤하게 재배치합니다. 사용자가 입력한 로또 번호와 랜덤하게 생성된 리스트를 합칩니다. 이때 랜덤하게 생성된 리스트는 subList() 함수를 사용해 로또 번호 개수에 맞게 잘라

[Android] 비밀 다이어리 [내부링크]

1. 기능 설명 1) 비밀번호 입력하는 화면 다이어리를 열람하는 버튼과 비밀번호를 변경하는 버튼이 있습니다. 다이어리를 열람하는 버튼 사용자는 세자리 비밀번호를 입력하여 비밀 다이어리를 열람할 수 있습니다. 초기 비밀번호는 000 입니다. 비밀번호를 변경하는 버튼 사용자가 올바른 세자리 비밀번호를 입력할 경우에만 비밀번호를 변경할 수 있습니다. 버튼 색상이 빨간색으로 바뀌면 비밀번호를 변경할 수 있습니다. 2) 비밀 다이어리를 작성하는 화면 사용자가 입력한 글들은 자동 저장됩니다. 2. 기능 구현 1) 사용자에게 비밀번호 입력 받기 NumberPicker 를 비밀번호를 입력받습니다. 비밀번호는 000 ~ 999 사이에 있는 세 자리 숫자입니다. 초기 비밀번호는 000 입니다. 2) 다이어리 열람 버튼 클릭 사용자가 입력한 비밀번호와 SharedPreference 에 저장된 비밀번호를 비교합니다. 비밀번호가 일치한 경우, 다이어리 페이지 화면으로 이동합니다. 비밀번호가 일치하지 않는

[Android 기능] 17 SharedPreference [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. SharedPreference 공유 가능한 사용자의 기호(선호도) 데이터를 저장합니다. 공유 가능한 앱끼리 데이터 공유가 가능합니다. 사용자의 기호(선호도) 간단한 데이터를 저장해야 합니다. key - value 방식으로 데이터를 저장합니다. 휴대폰에 데이터를 저장하며, 데이터는 앱 밑에 위치합니다. 즉, 앱을 삭제하게 되면 데이터도 삭제됩니다. 또한 앱 밑에 저장되기 때문에, 앱을 종료해도 데이터는 존재합니다. 많이 사용하지 않으며, 앱 로그인 정보와 같은 간단한 데이터를 저장할 때 사용합니다. 2. SharedPreference 사용방법 getSharedPreferences(테이블명, 모드) 함수를 사용하여 SharedPreferences 객체를 생성합니다. 모드는 99% MODE_PRIVATE 를 사용합니다. 생성한 SharedPreferences 객체의 edit

[Android 기능] 18 Room [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Room 데이터 베이스를 쉽게 사용하기 위한 API 입니다. Room 을 이용하여 SQLite 를 조작합니다. 관계형 데이터 베이스를 조작하기 위해 사용합니다. Room 에는 3가지 주요 구성요소가 있습니다. 데이터베이스 클래스 DB 를 보유하고 연결을 위한 액세스 포인트 데이터 항목 앱 DB의 테이블 데이터 액세스 객체(DAO) 앱의 DB 를 조작하는 메서드 제공 아래 그림은 Room 라이브러리 아키텍쳐 다이어그램입니다. Room 라이브러리 아키텍처 다이어그램 (출처 : https://developer.android.com/training/data-storage/room?hl=ko#groovy) 2. Room 사용 방법 build.gradle 파일에 라이브러리를 추가합니다. apply plugin: 'kotlin-kapt' dependencies { ... def r

[Android 기능] 19 Network (1) [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Network 네트워크는 두 대 이상의 컴퓨터를 연결하는 것을 의미합니다. 여기서 두 대는 클라이언트와 서버를 이야기합니다. 클라이언트 사용자가 볼 수 있는 기기 (N개) 서버 사용자가 볼 수 없는 기기 (1개) 즉, 클라이언트와 서버의 연결을 네트워크라고 합니다. 2. 네트워크의 문제점 대부분의 앱들은 서버로부터 정보를 받아서 화면을 구성합니다. 똑같은 화면을 매번 그린다면, 매번 서버에게 요청하는 것은 낭비입니다. 이러한 문제를 해결하는 기술이 캐싱입니다. 3. 캐싱 캐싱이란 한번 받은 데이터를 클라이언트가 로컬 데이터베이스(SharedPreferences 혹은 Room)에 저장을 하고, 다시 필요한 경우에 서버에게 요청을 하는 것이 아니라 로컬 데이터베이스에 있는 데이터를 이용합니다. **캐싱은 구현 난이도가 굉장히 높습니다. 4. 네트워크 프로토콜 (규약) 서버

[Android 기능] 19 Network (2) [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 9. 안드로이드에서 네트워크 사용하는 방법 안드로이드에서는 기본으로 제공해주는 네트워크 모듈인 HttpURLConnection 이 있습니다. 이는 사용하기가 매우 번거롭기 때문에 보통 외부 라이브러리를 사용해서 네트워크를 사용합니다. 대표적으로 Volly, Retrofit, OKHttp 등이 있습니다. 네트워크를 사용한다면 AndroidManifest.xml 파일 안에 인터넷 권한을 꼭 설정해 주어야 합니다. <uses-permission android:name="android.permission.INTERNET" /> 10. Retrofit 사용 방법 1) build 파일에 Retrofit 과 GsonConverter 라이브러리를 추가합니다. def retrofit_version = "2.9.0" implementation "com.squareup.retrofit2:ret

[Android 기능] 20 권한 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 권한 특정 기능(부분)에 접근하기 위해서는 권한이 필요합니다. 권한의 종류에는 일반 권한, 위험 권한이 있습니다. 안드로이드에서의 권한은 API 버전에 따라 다릅니다. ** 버전은 Device Manager 에서 확인 가능합니다. 2. 일반 권한 일반 권한(인터넷, GPS 등)은 사용자에게 권한을 요청하지 않습니다. 그래서 AndroidManifest.xml 파일에 일반권한을 등록하면 됩니다. <uses-permission android:name="android.permission.권한종류" /> 3. 위험 권한 위험 권한은 사진, 카메라, 주소록과 같은 개인 정보에 관련된 정보들을 포함하며, 위험 권한은 사용자에게 권한을 요청해야 합니다. 위험 권한은 AndroidManifest.xml 파일에 등록도 하고, kt 파일에서 사용자에게 위험 권한에 대해 요청을 해야합니다

Kotlin 문법 훑어보기 [내부링크]

30개 프로젝트로 배우는 Android 앱 개발 with Kotlin 초격자 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Function expression fun sum(a: Int, b: Int): Int { return a + b } fun sum(a: Int, b: Int) = a + b fun max(a: Int, b: Int) = if (a > b) a else b 2. Value, Variable val a: Int = 1 val b = 2 val c = 3.14 val d: String = "필수로 초기화해야합니다." val e: String? var f: String = "첫 번째 초기화" f = "두 번째 초기화" 3. Type val a = 123 // Int val b = 123L // Long val c = 123.4f // Float val d = 123.4 // Double var e = "abc" e = "abc" + 1 // "abc1" e

Kotlin 문법 훑어보기 (2) [내부링크]

30개 프로젝트로 배우는 Android 앱 개발 with Kotlin 초격자 패키지 Online 강의를 듣고 정리한 내용입니다. 7. Null Safe val a: Int? = null b?.sum() // b가 null 일 경우, sum() 을 실행하지 않습니다. 8. Scope Funtion apply val person = Person().apply { firstName = "Fast" lastName = "Campus" } also Random.nextInt(100).also { print("$it") } Random.nextInt(100).also { value -> print("$value") } let val number: Int? val sumNumber1 = number?.let { "${sum(10, it)}" } val sumNumber2 = number?.let { "${sum(10, it)}" }.orEmpty() with val person = Person(

나의 깃허브 [내부링크]

Android UI 정리

[Android 기능] 10 Resource [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Resources res 폴더 안에 존재하는 자원들입니다. 2. Resources Manager res 폴더 안에 있는 resources 를 한눈에 볼 수 있습니다. 좌측 상단에 + 버튼을 사용하여 이미지를 추가할 수 있습니다. 해상도 별로 이미지 추가도 가능합니다. 3. res 폴더 안에 있는 Resource 를 코드로 가져오는 방법 resources.get속성(값) 속성 Drawable, String, Text, Color, ... 값 R.drawable.파일명, R.string.이름, R.color.이름, ... ex) resources.getText(R.string.app_name) resources.getDrawable(R.drawable.snow, null) resources.getDrawable(R.drawable.snow, this.theme) 4. 실습

[Android 기능] 11 Library [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 라이브러리 (Library) 공통으로 사용될 수 있는 특정 기능을 모듈화한 것입니다. 라이브러리는 외부에서 가져온 도구(기능들)입니다. 라이브러리는 build.gradle (Module) 파일 안의 dependencies 에 쓰여져 있습니다. 만약 라이브러리를 사용(추가)하고 싶다면, dependencies 안에 코드를 추가하면 됩니다. 라이브러리를 추가하는 방법은 해당 라이브러리의 documentation 에 써져 있습니다. 라이브러리를 사용하기 전, 관리가 잘 되고 있는 라이브러리인지 확인해야 합니다. 상업적 용도로 사용한다면, 라이선스를 확인해봐야 합니다. **documentation 은 라이브러리에 대한 기능들, 라이브러리를 설치하는 방법 등 라이브러리를 사용하는 방법에 대한 설명서입니다. 2. 실습 Glide 라이브러리 사용하기 val imageUrl = "h

필기체 쓰기 [내부링크]

오늘은 필기체 쓰기 강의를 들었다. 텍스트를 사용해 글씨를 꾸미는 방법에 대해 배웠다. 아래 있는 그림이 오늘 강의를 들으면서 꾸민 글씨이다! 폰트, 굵기, 그림자 등 여러가지 옵션들을 활용해서 다양한 글씨를 표현할 수 있다는게 너무 신기하다! 오늘은 그림을 그리는게 아니라서 시간이 오래 걸리지는 않았다

[Android 기능] 12 AddView [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. AddView 란? 부모 뷰가 될 수 있는 뷰에 자식 뷰들을 붙여 넣습니다. 소스코드로 직접 view 를 만들어서 액티비티가 호출하는 xml 레이아웃에 붙여 넣습니다. 코드상에서 동적으로 view 를 넣어줍니다. 코드상으로 자식 뷰를 만들고, 자식 뷰를 부모 뷰(액티비티가 호출하는 xml)에 붙여 넣습니다. 자식 뷰의 형태(xml의 배치나 속성)는 동일하지만, 그 안의 컨텐츠(내용물)은 다릅니다. 2. 실습 부모 뷰의 xml 파일 ... <androidx.appcompat.widget.LinearLayoutCompat android:id="@+id/container" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" /> ... 부모

[Android 기능] 13 ListView [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. ListView 기본적인 동작 원리는 AddView 와 동일합니다. 어댑터(Adapter)를 통해 데이터 목록을 화면에 출력합니다. BaseAdapter 클래스를 상속받아 어댑터를 사용합니다. ListView 는 스크롤 기능을 가지고 있는 뷰입니다. 2. 어댑터 (Adapter) 어댑터는 데이터와 뷰를 짝지어줍니다. 어댑터는 요청시 해당 번째 데이터를 반환해줍니다. 어댑터는 데이터가 변경되었을 때 갱신해줍니다. 3. BaseAdapter 클래스 어댑터에서 가장 기초가 되는 클래스로, 데이터와 View 를 연결하는 역할을 합니다. ArrayAdapter, CursorAdapter, SimpleAdapter 클래스는 BaseAdapter 클래스를 상속받습니다. ArrayAdapter 배열과 어댑터 뷰를 연결하는 클래스입니다. CursorAdapter 데이터를 하나씩 가져오

[Android 기능] 14 RecyclerView [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. RecyclerView RecyclerView 는 리스트뷰의 단점을 개선한 View 입니다. 리스트 뷰의 단점 뷰 홀더를 사용하지 않는 경우, 새롭게 뷰를 만들어 줘야 합니다. 뷰 홀더를 사용한다고 하더라도, 여전히 안드로이드의 리소스를 많이 차지하는 성능 이슈가 있습니다. RecyclerView 는 유연하다는 장점이 있습니다. layoutManager 를 사용해서 세로, 가로, 그리드, 스태거드 그리드 방향으로 아이템을 자유롭게 배치할 수 있습니다. 아이템이 들어갈 뷰를 동적으로 변경하는게 가능합니다. 2. RecyclerView 생성 방법 xml 파일 RecyclerView 컴포넌트를 생성합니다. kt 파일 메소드 설명 onCreateViewHolder( parent: ViewGroup, viewType: Int ): RecyclerView.ViewHolder 아이

동물 그리기 [내부링크]

오늘은 동물 그리기 강의를 들었다. 돌고래, 거북이, 기린을 그리는 방법에 대해 배웠다. (사실 새와 나방 그리는 방법도 배웠는데, 어려워서 내일 한번 더 듣고 그릴 예정...) 아래 그림은 오늘 강의를 들으면서 그린 동물이다! Previous image Next image unsplash 에 있는 동물 사진을 보고 그림을 그렸다. 눈과 거북이 등껍질 패턴을 제외하고 모든 그림은 펜과 연필을 이용하여 그렸다! 피그마를 이용해서 귀여운 동물 그림을 그릴 수 있다니... 너무 신기하다! p.s. 내일은 오늘 그리지 못한 새와 나방을 그려봐야겠다.

[Android 기능] 15 TabLayout & Pager [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. TabLayout Tab 을 담당하는 역할을 하는 뷰입니다. xml 파일 다른 뷰와 다르게 google 라이브러리를 의존합니다. <com.google.android.material.tabs.TabLayout /> kt 파일 TabLayout 클래스 addTab() 함수를 사용하여 탭을 추가합니다. addTabSelectedListener() 함수를 사용하여 이벤트를 추가합니다. 2. Pager 종이 넘기듯이 화면을 전환시켜주는 역할을 하는 뷰입니다. xml 파일 <androidx.viewpager.widget.ViewPager /> <androidx.viewpager2.widget.ViewPager2 /> kt 파일 ViewPager 클래스, ViewPater2 클래스 adapter 속성을 사용하여 Fragment 혹은 Layout 을 연결합니다. Adapter Fra

[Android 기능] 16 데이터베이스 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 데이터 데이터는 디지털화 되어 있는 모든 것입니다. 예를 들어 우리가 가지고 있는 사진은 데이터가 아닙니다. 우리가 가지고 있는 사진을 컴퓨터에 옮겨 png, jpg 등 파일이 되면 데이터가 됩니다. 2. 데이터베이스 (Database) 데이터 베이스는 한마디로 정의하면 "데이터의 집합" 입니다. 여러 사람이 공유하여 사용할 목적으로 체계화 하여 통합 및 관리하는 데이터의 집합입니다. 3. 데이터베이스 관련 직군 DBA (DataBase Administration) 서버 개발자, 백엔드 개발자 4. 데이터 저장 목적 데이터를 저장하는 목적은 크게 두 가지로 나눌 수 있습니다. 단순 데이터 보관 목적 데이터를 보관해 놓고 데이터를 불러오기 위한 목적 데이터를 사용하는 목적에 따라 데이터 저장 방식을 다르게 합니다. 데이터 저장을 빠르게 하는 것이 목적 저장해 놓은 데이터

[Android 기능] 04 Context [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Context 애플리케이션의 현재 상태를 나타내고 있는 역할을 합니다. 그래서 Acitivity 와 Application 에 대한 정보를 얻기 위해서 Context 를 사용합니다. Context 는 Application 의 현재 상태를 가지고 있습니다. Context 는 시스템이 관리하고 있는 Activity, Application 의 정보를 얻기 위해 사용합니다. Context 는 안드로이드 시스템 서비스에서 제공하는 Resource, DB 등과 같은 API 에 접근하기 위해 사용합니다. Activity, Application 클래스는 Context 를 상속받습니다. 2. Application Context 싱글톤 인스턴스이며, getApplicationContext() 를 통해 접근합니다. Application 의 라이프 사이클의 영향을 받습니다. 현재 Applic

[Android 기능] 05 Activity Stack [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Activity Stack 앱을 실행하여 Activity 가 생성될 때 Task 가 생성되고, 이후 Activity 가 호출되면 해당 Task Stack 에 Activity 가 쌓이게 됩니다. 기본적으로 후입 선출(LIFO, Last In First Out)의 구조를 가집니다. stack 조작은 될 수 있으면 하지 않는게 좋습니다. stack 조작은 외우는게 아닙니다. stack 을 조작할 일이 발생할 경우, 적용 가능한 launchMode 나 Flag 를 찾아서 사용합니다. 2. Stack 관리 1) Mainfest 사용하기 <activity android:launchMode="스택운영방식" /> 스택 운영 방식 singleTop, singleTask, singleInstance 등 2) IntentFlag 사용하기 // 기존에 적용된 플래그를 삭제하고 다시 설정 인

풍경 그리기 [내부링크]

오늘은 풍경 그리기 강의를 들었다. 파도라는 주제를 가지고 새벽 풍경과 노을 풍경을 그렸다. 아래 그림은 오늘 강의를 들으면서 그린 그림이다! Previous image Next image 강사님이 그리시는걸 그대로 따라 그리기만 했는데 시간이 엄청 오래걸렸다... (한 작품당 거의 1시간정도 걸린듯...) 시간이 오래 걸려서 많이 힘들었지만, 시간을 들인 만큼 멋진 작품이 나와서 뿌듯하다 :)

[Android 기능] 06 Fragment [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Fragment 란? Fragment 는 Fragment Activity(Fragment 가 속해있는 Activity) 내의 어떤 동작 또는 사용자 인터페이스의 일부(xml)를 나타내니다. 여러 개의 Fragment 를 하나의 Activity 에 결합하여 창이 여러 개인 UI 를 빌드할 수 있으며, 하나의 Fragment 를 여러 Activity 에서 재사용할 수 있습니다. Fragment 는 Activity 의 모듈식 섹션이라고 생각하면 됩니다. Fragment 는 자체적인 생명주기를 가지고 있고, 자체 입력 이벤트를 수신합니다. 생명 주기는 호스트 Activity 의 생명주기에 직접적으로 영향을 받습니다. 즉, Fragment 는 Activity 에 종속적입니다. Fragment 는 다른 Activity 에서 재사용할 수 있는 하위 Activity 와 같은 개념입니

[Android 기능] 07 Thread [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Thread 쓰레드는 프로그램(앱)을 실행하는 흐름입니다. 쉽게 말하면, 우리가 프로그램을 실행하려면 쓰레드가 프로그램에 작성된 코드를 읽어 프로그램을 실행합니다. 쓰레드는 다른 쓰레드에 의해서 추가될 수 있습니다. (멀티 쓰레드) ex) Thread1(사용자 input 담당), Thraed2(화면 그리기 담당), Thread3(네트워크 담당) 쓰레드는 필요에 따라서 다른 쓰레드에 의해서 언제든지 만들어질 수 있고, 제거될 수 있습니다. ex) 메인 쓰레드가 앱을 실행하고 있습니다. 사용자가 앱에 있는 버튼을 클릭하면, 메인 쓰레드가 버튼 이벤트를 담당하는 쓰레드를 생성합니다. 생성된 쓰레드는 버튼 클릭에 대한 작업을 실행합니다. 쓰레드는 서로 독립적이기 때문에 어떤 스레드가 언제 어떤 작업을 하는지 알 수 없습니다. 2. Main Thread 메인 쓰레드는 최초로 실

[Android 기능] 08 Sync & Async [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Sync (동기) & Async (비동기) sync 와 async 는 프로세스 실행 방법에 대한 종류입니다. sync 는 한 번에 한 가지 작업만 처리하며, 관리가 쉽습니다. async 는 한 번에 여러 가지 작업을 처리할 수 있으며, 관리가 어렵습니다. 오래 걸리는 작업(프로세스)이 있을 경우, 비동기 처리를 하는 것이 좋습니다. 동기(sync) vs 비동기(async) 2. 비동기 사용하는 방법 AsyncTask(Params: Int, Progress: Int, Result: Int) 객체를 상속받습니다. Params doInBackgroung() 함수에서 사용하는 타입 Progress onProgressUpdate() 함수에서 사용하는 타입 Result onPostExecute() 함수에서 사용하는 타입 아래 함수들을 오버라이드 합니다. 함수 설명 doInBack

[Android 기능] 09 Application Context [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Context 복습 Context 는 애플리케이션의 현재 상태를 나타내고 있는 역할을 합니다. Application Context 는 현재 앱의 상태를 표현하고 있습니다. Activity Context 는 현재 Activity 의 상태를 표현하고 있습니다. 2. Application Context vs Activity Context Application Context Activity Context 하나만 존재합니다. 애플리케이션이 살아있는 동안 유지됩니다. 로그인 정보와 같이 앱을 사용하는 동안 필요한 자원들을 넣어 놓으면 좋습니다. 여러 개가 존재합니다. 액티비티가 살아있는 동안 유지됩니다. 3. Application Context 의 기능 현재 실행되고 있는 Activity 의 정보를 알 수 있습니다. 즉, 모든 Activity 의 라이프 사이클을 볼 수 있습니다.

[Android] 13 Resource [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Resource 리소스는 자원이라는 뜻이며, 안드로이드에서 사용하는 xml, 이미지, 문자열, 애니메이션, 아이콘 등을 리소스로 정의합니다. 2. drawable 실제 이미지 파일(jpg, png) 등 혹은 xml 로 된 이미지 파일이 있습니다. 3. layout 화면을 구성하는 xml 파일이 들어있습니다. layout 파일들은 MainAcitivy.kt 코드에서 사용되거나, layout 파일들 안에서 사용됩니다. 4. mipmap 앱 아이콘 이미지 파일이 들어있습니다. 아이콘 이미지 파일은 dpi(해상도) 별로 있습니다. 안드로이드 핸드폰은 해상도에 맞는 적합한 이미지를 알아서 선택합니다. AnroidManifest.xml 파일에서 아이콘을 불러옵니다. 5. values colors.xml 과 string.xml 그리고 themes.xml 파일이 들어있습니다. col

[Android] 14 Drawable [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Drawable 이미지 리소스 파일이 위치하는 곳입니다. 이미지 리소스 종류 jpg, png 파일 복잡한 이미지 xml 파일 도형과 같은 간단한 이미지 이미지 파일로는 그릴 수 없는 이미지 2. drawable 리스소 파일 파일 생성 방법 res\drawable 마우스 우클릭 > New > Drawable Resource File 도형 이미지 그리기 shape, size, stroke, solid 태그 사용 이미지 파일로 그릴 수 없는 이미지 그리기 selector, item 태그 사용 3. 실습 1) drawable 파일 사용하기 @drawable/파일명 2) drawable 파일 생성 - 도형 shape, size, stroke, solid 태그 rectangle oval 3) drawable 파일 생성 - 이미지 파일로 그릴 수 없는 이미지 selector, it

나의 취미 찾기 [내부링크]

취미란 무엇일까? 위키백과 사전에 따르면 "취미는 인간이 금전이 아닌 기쁨을 얻기 위해 하는 활동." "즉, 전문적으로 하는 것이 아니라 즐기기 위하여 하는 일로써 여가에 즐길 수 있는 정기적 활동." 이라고 정의한다. 나는 요즘 취업을 위해 공부만 하다보니 행복하지 않을때가 많다. 그래서 나의 행복을 위해 취미 활동을 가져보기로 결심했다. 내가 좋아하고 즐거워하는 일이 무엇이 있을까... 끄적여 봤다. 꾸미기 만들기 음악 듣기 춤추기 ... 이 중에서 취미 활동으로 하면 좋은게 무엇이 있을 까 고민하던 중 "클래스 101" 이라는 온라인 강의 사이트를 발견했다. "클래스 101" 사이트는 취미부터 부업, 새로운 적성까지 교육해주는 온라인 강의 사이트이다. 나는 "클래스 101" 사이트에서 나의 취미 생활을 더 생산성 있고 재미있게 해줄 수 있는 강의가 무엇이 있을까 살펴보던 중 *No 아이패드, No 포토샵, No 어도비* 무료로 그려요! 피그마 일러스트 라는 강의가 내 눈에 들어

기초 도형으로 그림 그리기 [내부링크]

오늘 들은 강의는 기초 도형으로 그림 그리기! 동그라미, 네모, 세모, 선 을 활용하여 다양한 그림을 그리는 방법에 대해 배웠다. 그림은 피그마 라는 무료 디자인 툴을 이용하여 그렸다. 아래 그림은 오늘 수업 시간에 강사님과 함께 실습하면서 그린 그림이다! 처음으로 그려본 그림이라서 엄청난 퀄리티의 그림은 아니다 동그라미, 네모, 세모, 선만을 사용해서 태양, 구름, 나무, 곰, 집, 자동차 등등 다양한 그림을 그릴 수 있다는게 너무 신기하다! 지금 당장 나의 그림 실력은 많이 부족하지만 꾸준히 그리다 보면 멋진 그림을 완성할 수 있을 것이라고 생각한다! p.s. 그림 그리기 너무 재밌다

[Android 기능] 01 Activity [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Activity 화면을 구성하는 가장 기본이 되는 요소입니다. Activity 를 생성하면, 생성된 Activity 와 매칭된 xml 파일이 자동으로 생성됩니다. 화면을 그리는 기능과 화면에서 발생할 수 있는 일들을 처리하는 기능이 내장되어 있습니다. 2. 특수한 Activity AndroidManifest.xml 코드에서 MAIN 과 LAUNCH 필터를 가지는 Activity 는 앱 실행 시, 최초로 실행되는 Activity 입니다. 3. LifeCycle Activity 생명 주기 (출처 : https://programmingfbf7290.tistory.com/entry/안드로이드-액티비티Activity-생명주기-총정리) 안드로이드 생명주기에는 onCreate, onStart, onResume, onPause, onStop, onDestroy, onRestart 가

[Android 기능] 02 ViewControl [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. ViewControl 사용자와의 상호작용으로 뷰를 컨트롤(조작)할 수 있습니다. 뷰에 이벤트가 발생했을때, 뷰를 컨트롤할 수 있습니다. 이벤트가 발생했을때, Listener 가 수신하는 역할을 합니다. 2. xml 에 존재하는 뷰를 Activity(코틀린 파일)로 가져오는 방법 findViewById xml 에서 부여한 view 의 id 로 뷰를 가져옵니다. findViewById(R.id.뷰의아이디) kotlinx findViewById 과정을 생략할 수 있습니다. deprecated 되었으며, 가급적이면 사용을 피해야합니다. databinding 뷰와 데이터를 연결합니다. 3. Listener 사용 방법 람다 표현식 1 (대중적인 방법) 뷰.setOn이벤트Listener { // 이벤트가 발생했을때 동작할 코드 } 람다 표현식 2 val listener = View

[Android 기능] 03 Intent [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Intent 직역하면 의도, 의사로 나의 어떤 뜻을 전달하는 것을 의미합니다. 즉, "나는 이런 것을 하고 싶다." 할 때 intent 를 사용합니다. Intent 는 애플리케이션 구성 요소(컴포넌트)간에 작업 수행을 위한 정보를 전달하는 역할을 합니다. Intent 는 데이터를 전달하고, 결과값도 받을 수 있습니다. Intent 의 종류 1 암묵적 인텐트 (Implicit Intent) 명시적 인텐트 (Explicit Intent) Intent 의 종류 2 결과가 필요한 Intent 결과가 필요하지 않은 Intent 2. Intent 호출 대상 앱 내 액티비티끼리 서로 호출합니다. ex) Activity A 호출하기 앱 외부 안드로이드 os, 시스템을 호출합니다. ex 1) system : 이 앱 킬 수 있는 애 나와! intent-filter 안의 launcher

[Android] 04 뷰 컴포넌트 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 뷰 컴포넌트 View 는 안드로이드 UI(화면)를 구성하는 최상위 클래스입니다. View 를 다른 용어로 위젯(Widget), 뷰 클래스(View Class), 컴포넌트(Component), 레이아웃(Layout) 이라고도 부릅니다. View 클래스 계층도 2. 뷰의 종류 부모 뷰 다른 뷰를 가질 수 있는 뷰로, 루트 뷰 혹은 컨테이너 뷰 라고도 합니다. 자식 뷰 다른 뷰를 가질 수 없는 뷰입니다. 부모 뷰는 자식 뷰가 될 수도 있습니다. ex) 부모 뷰 > 부모 뷰 > 자식 뷰 (O) 부모 뷰 > 자식 뷰 > 부모 뷰 (X) 3. 특수한 뷰 레이아웃 뷰(Layout View)는 자식을 가질 수 있는 부모 뷰로, 자식 뷰의 배치(위치)를 설정합니다. 레이아웃 뷰의 예시 4. xml 파일에서 View 종류 살펴보기 xml 파일의 Design 탭

[Android] 05 뷰 속성 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 뷰 속성 뷰가 가지고 있는 속성을 통해서 뷰를 설정합니다. ex) 글자 색상, 버튼 크기 등 뷰가 가지고 있는 속성은 암기하는게 아닙니다. 필요한 경우에 그런 속성이 있는지 확인하고 사용합니다. 2. 뷰의 속성 보기 Design 탭 Code 탭

[Android] 06 LinearLayout [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Linear Layout 부모가 될 수 있는 뷰(부모 뷰 = 컨테이너 뷰)입니다. 자식 뷰의 배치(위치)를 가로 혹은 세로로 설정할 수 있습니다. 2. Linear Layou 속성 orientation 자식 뷰의 방향을 설정합니다. 가로 horizontal 세로 vertical weight 자식 뷰가 차지할 크기의 비율을 설정합니다. 3. 크기를 설정하는 특수한 속성 값 match_parent 부모 뷰의 크기만큼 설정합니다. wrap_content 컨텐츠(내용물)의 크기만큼 설정합니다. 4. 실습 1) 파일 생성 res\layout 마우스 우클릭 > New > Layout Resource File 2) MainActivity.kt 코드 변경 java\...\MainActivity.kt class MainActivity : AppCompatActivity() { over

[Android] 07 RelativeLayout [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Relative Layout 부모가 될 수 있는 뷰(부모 뷰 = 컨테이너 뷰)입니다. 기준점을 중심으로 뷰를 배치합니다. 기준점 부모 뷰 자식 뷰 Relative Layout 은 핸드폰 리소스를 많이 차지하여, 사용하는 것을 권장하지 않습니다. 2. 기준점이 부모 뷰인 Relative Layout 의 속성 속성 값 true false 속성 의미 layout_centerHorizontal 부모 뷰의 수평방향 중간에 맞춤 layout_centerVertical 부모 뷰의 수직방향 중간에 맞춤 layout_centerInParent 부모 뷰의 수직 & 수평 방향 중간에 맞춤 layout_alignParentRight 부모 뷰의 오른 끝과 뷰의 오른쪽 끝을 맞춤 layout_alignParentLeft 부모 뷰의 왼쪽 끝과 뷰의 왼쪽 끝을 맞춤 layout_alignParen

[Android] 08 Margin & Padding [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 마진 (Margin) / 패딩 (Padding) 마진과 패딩은 여백을 설정하는 속성입니다. 마진 (Margin) 외부와 해당 뷰 사이의 여백을 설정합니다. 패딩 (Padding) 해당 뷰 안의 여백을 설정합니다. 마진과 패딩 2. 실습 1) margin 과 padding 설정하기

[Android] 09 ConstraintLayout [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Constraint Layout 제약을 통해서 뷰를 배치하는 컨테이너 뷰입니다. Relative Layout 에서 할 수 있는 모든 것이 가능합니다. 기능이 엄청나게 많습니다. 반대 방향으로 작용하는 두 개의 제약을 동시에 적용하면 두 제약의 가운데에 배치됩니다. 2. 상대적 위치 배치 (Relative Layout 기능) 속성 layout_constraint제약 ex) layout_constraintLeft_toLeftOf B Left_toLeftOf A : B의 왼쪽은 A의 왼쪽에 위치 값 parent id 3. 여백 해당 방향으로 여백을 두기 위해서는 반드시 해당 방향에 제약이 있어야 합니다. ex) "layout_marginLeft=100dp" 을 설정하기 위해서는 "layout_constraintLef_to방향Of=값" 이 설정되어 있어야 합니다. 4. Bia

[Android] 10 FrameLayout [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. FrameLayout 부모가 될 수 있는 컨테이너 뷰 입니다. 액자에 사진을 넣는 것처럼, 프레임에 뷰를 넣을 수 있습니다. 중첩이 필요할 때 사용합니다. 먼저 적힌 자식 뷰가 맨 뒤로 깔리게 됩니다.

[Android] 11 Gravity [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Gravity gravity 는 속성으로, 이 속성이 부여된 뷰를 설정된 값 방향으로 끌어 당깁니다. 속성은 gravity 와 layout_gravity 가 있습니다. gravity 속성을 부여하는 뷰와 그 안에 있는 뷰의 관계 layout_gravity 속성을 부여하는 뷰와 그 외부에 있는 뷰의 관계 속성 값의 종류 방향 top, bottom, left, right, start, end 중앙 center, center_vertical, center_horizontal 자르기 clip_vertical, clip_horizontal 채우기 fill, fill_vertical, fill_horizontal |(or) 키워드를 사용하여 두 가지 속성을 부여할 수 있습니다. ex) gravity="top | right" 2. 실습 1) gravity 와 layout_gravi

[Android] 12 ScrollView [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. ScrollView 위젯의 내용이 화면 영역을 벗어나면 스크롤 표시가 자동으로 보이는 뷰입니다. 자식 뷰를 가질 수 있는 컨테이너 뷰입니다. 자식 뷰는 오직 하나만 가질 수 있습니다. 속성 scrollbars 스크롤바 막대를 설정합니다. vertical, horizontal, none scrollbarSize 스크롤바 크기를 설정합니다. scrollbarStyle 스크롤바 스타일을 설정합니다. fillViewport 스크롤 뷰의 자식 뷰의 높이를 스크롤 뷰의 높이로 지정하면 적용되지 않습니다. 하지만 fillViewport 속성값을 true 로 주면 자식 뷰의 크기만큼 스크롤 뷰가 늘어나게 됩니다. 2. 실습 1) fillViewport 2) scrollbar

[Kotlin] 01 기본 문법 [내부링크]

1. 주석 // 한 줄 주석 /* 여러줄 주석 */ 코틀린은 세 가지 주석(comment)을 지원합니다. 한 줄 주석 // 로 시작하며 줄이 끝나면 주석도 끝난다. 여러 줄 주석 /* 로 시작하고 */ 로 끝난다. KDoc 여러 줄 주석 /** 로 시작하고 */ 로 끝난다. 2. 변수 정의하기 val timeInSeconds = 15 val 키워드 값을 뜻하는 value 에서 유래했습니다. 변수 식별자 새 변수에 이름을 부여하고, 나중에 이를 가리킬 때 사용합니다. 변수의 초깃값 = 기호 뒤에 옵니다. 타입을 명시하려면 변수 이름 뒤에 콜론(:)을 표히사고, 그 뒤에 타입을 적는다. val n: Int = 100 val text: String = "Hello!" 3. 식별자 식별자는 변수나 함수 등 프로그램에 정의된 대상에 붙은 이름이다. 코틀린 식별자는 다음 규칙을 만족하는 임의의 문자열입니다. 오직 문자, 숫자, 밑줄(_) 만 포함합니다. 숫자로 시작할 수 없습니다. 하드 키워드

[Kotlin] 02 기본 타입 [내부링크]

1. 정수 타입 코틀린에는 정수를 표현하는 네 가지 기본 타입이 있습니다. 이름 Byte Short Int Long 크기 (Byte) 1 2 4 8 val n = 12345 코틀린 1.1 부터는 수 리터럴에 _ 를 넣어서 가독성을 높일 수 있습니다. val n = 34_721_189 리터럴에 L 이나 l 을 접두사로 붙이면 Long 타입이 됩니다. val hundredLong = 100L 수 리터럴의 경우 0 을 표현하는 경우가 아니라면 맨 앞에 0을 올 수 없습니다. val zero = 0 // OK val zeroOne = 01 // ERROR 각 정수 타입에는 최소값(MIN_VALUE)과 최댓값(MAX_VALUE)을 포함하는 상수 정의가 들어있습니다. Short.MIN_VALUE // -32768 Short.MAX_VALUE // 32767 Int.MAX_VALUE + 1 // -2147483648 (정수 오버플로우) 2. 부동소수점 수 코틀린은 부동 소수점 수를 따르는 Flo

[Kotlin] 03 문자열 [내부링크]

String 타입은 문자들로 이루어진 문자열을 표현합니다. 1. 문자열 템플릿 문자열 리터럴을 정의하는 가장 간단한 방법은 큰 따옴표(")로 문자열을 감싸는 것입니다. val hello = "Hello, world!" 문자열에 새줄 문자 같은 특수 문자가 들어가면 이스케이프 시퀀스를 사용해야 합니다. val text1 = "Hello, world!\nThis is \"multiline\" string." val text2 = "\u03C0 \u2248" 문자열 안에 변수를 넣고 싶을 때, ${} 를 사용합니다. import java.util.Date val name = readLine() println("Hello! $name") println("Today is ${Date()}.") 문자열 리터럴을 큰따옴표 세 개로 감싸면 새줄 문자를 포함한 임의의 문자를 포함할 수 있습니다. val message = """ Hello, $name Today is ${Date()}. """.tri

[Kotlin] 04 배열 [내부링크]

배열은 내장된 코틀린 데이터 구조로, 미리 정해진 숫자만큼 같은 타입의 원소를 모아서 저장하고 각각을 인덱스로 참조할 수 있게 해줍니다. 1. 배열 정의하기 배열 구조를 구현하는 가장 일반적인 코틀린 타입은 Array<T> 입니다. arrayOf<T> 도 사용할 수 있습니다. val a = Array<String>(5, { "" }) // ["", "", "", "", ""] val arr = Array<Int>(3, { it * 10 }) // [0, 10, 20] val c = arrayOf<Int>(10, 20, 30) // [10, 20, 30] 2. 배열 사용하기 배열 타입은 문자열 타입과 꽤 비슷합니다. 특히 size 와 lastIndex 프로퍼티가 있다는 점과 인덱스 연산으로 원소에 접근할 수 있다는 점이 비슷합니다. val squares = arrayOf<Int>(1, 4, 9, 16) squares.size // 4 squares.lastIndex // 3 squar

[Android] 01 안드로이드 세팅하기 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 안드로이드 프로젝트로 변경 Android 로 선택합니다. 2. Activity 생성 app 마우스 우클릭 > Next > Activity > Empty Activity 선택 생성 후 결과 app\java\...\MainActivity 생성 app\res\layout\activity_main.xml 생성 3. emulator 설정 Device Manager > Create device > 핸드폰 기종 : Pixel5 > 안드로이드 버전 : API 27(Oreo) emulator 는 여러개 설치 가능합니다. 4. 실행을 위한 여러가기 설정 변경 Gradle Scripts\build.gradle(Module) minSdk 를 27로 설정 > Sync Now 선택 Edit Configurations > Lauch Option 설정 번경 app\manifests\AndroidM

[Android] 02 XML 이란? [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 언어의 종류 언어는 목적에 따라 두 가지 언어로 나눌 수 있습니다. General Purpose Language 범용적인 목적을 가지고 있는 언어입니다. ex) Kotlin, Python, Java, C, ... 대부분의 프로그래밍 언어들 Domain Specific Language (DSL) 도메인 특화 언어로, 특수한 목적을 달성하기 위한 언어입니다. 문법이 간단합니다. ex) xml 2. XML (eXtensive Markup Language) 확장이 가능한 마크업 언어입니다. 마크업 언어 (Markup Language) 태그를 사용하는 언어입니다. 확장 가능한 (Extensive) 태그 안에 태그를 사용할 수 있습니다. <태그></태그> or <태그 /> 안드로이드에서 UI(화면)을 그리기 위해 채택한 언어입니다. app\res\layout 폴더 밑에 있는 xm

[Android] 03 UI를 그리기 위한 단위 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Px (Pixel) (물리적인) 화면을 구성하는 최소 단위입니다. 같은 단위 면적에 픽셀이 많이 있을수록 해상도가 높습니다. 즉, 해상도가 높다는 것은 화면에 픽셀이 많다는 뜻입니다. 픽셀 단위를 사용해서 안드로이드 UI 를 그리면 문제가 발생합니다. 핸드폰(화면)마다 픽셀의 수가 다르기 때문에 화면에 같은 이미지가 있어도 크기가 다르게 보입니다. 2. Dp (Density-Independent Pixel) 픽셀 독립 단위입니다. 즉, 픽셀과는 관련이 없는 단위입니다. 화면의 크기가 달라도 동일한 비율로 보여주기 위해서 안드로이드에서 정의한 단위입니다. 비율로 크기를 정합니다. ex) 가로는 2/3, 세로는 1/3 크기의 비율로 화면 그리기 3. Sp (Scale-Independent Pixel) 시스템 설정에 영향을 받는 단위로, 대부분 텍스트 크기를 지정하기 위해

[Kotlin] 18 NullSafety [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. NullSafety 코틀린은 NullSafety 언어입니다. Null 을 처리하기 위한 문법이 있습니다. 2. ? val num1: Int = 3 val num2: Int? = null 자료형? null 을 포함하는 자료형을 표현할 때 사용합니다. 3. !! val num1: Int? = 10 val num2: Int = num1!! 변수명!! null 이 아님을 보장할 때 사용합니다. 보장은 코틀린이 아니라 코드를 작성한 개발자가 보장합니다. 사용을 권장하지 않으며, 정말 필요한 경우에만 사용합니다. 4. Safe Call (?.) val text: String? = null val len: Int? = str?.length A?.B A 가 null 인 경우 null 을 반환하고, null 이 아닌 경우 B를 반환(실행)합니다. 5. Safe Casting (as?)

[Kotlin] 19 인터페이스 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 클래스, 상속, 인터페이스는 객체지향 프로그래밍을 하기 위해서 중요한 개념입니다. 1. 인터페이스 (interface) interface 인터페이스명 { ... } interface Animal { val name: String fun cry() fun eat(food: String) { println(" $food 쩝쩝") } } class Dog: Animal { override val name: String = "강아지" override cry() { println() } override eat(food: String) { println("$food 냠냠") } } 인터페이스는 규약(프로토콜, 약속)입니다. 개발하면서 꼭 지켜야할 "규약" 같은 존재로, 바꿔 말하면 개발할 때 반드시 포함해야 하는 멤버를 모아놓은 것이 인터페이스 입니다. 인터페이스는 구현부가 없습니다.

[Kotlin] 20 스코프 함수 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 스코프 함수 (Scope Function) { 본문 } 과 같이 스코프는 범위입니다. 스코프 함수는 범위(스코프)안에서 어떤 기능을 수행하는 것입니다. 스코프 함수는 apply, also, run(with), let 이 있습니다. apply 와 aslo 는 스코프 함수 실행이 완료된 후, 인스턴스(객체)를 반환합니다. run(with) 와 let 은 스코프 함수 실행이 완료된 후, 최종값을 리턴합니다. 즉, 마지막 줄을 리턴합니다. apply 와 run(with) 는 스코프 함수안에 this 가 넘어옵니다. also 와 let 은 스코프 함수안에 it 이 넘어옵니다. 2. apply val person = Person().apply { name = "사람" age = 100 } apply 는 객체를 초기화(init)때 사용하면 좋습니다. apply 는 스코프 함수 안에

[Kotlin] 11 예외 처리 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 예외 처리 try 문 예외가 발생하는 부분 catch 문 예외를 처리하는 부분 finally 문 예외 발생 유무에 상관없이 무조건 실행되는 부분 try 문과 catch 문은 독립적으로 사용할 수 없습니다. 즉, try 문과 catch 문은 항상 쌍으로 같이 사용해야 합니다. finally 문은 생략 가능합니다. Exception 은 모든 종류의 예외를 포함하는 예외 타입입니다. 기본 포맷 try { 예외 발생 가능한 코드 } catch (변수명: 예외타입A) { 예외A를 처리하는 코드 } catch (변수명: 예외타입B) { 예외B를 처리하는 코드 } catch (변수명: Exception) { 모든 예외를 처리하는 코드 } finally { 예외 발생 상관없이 무조건 실행되는 코드 } 2. 실습 1) try - catch val numbers = arrayOf<Int

[Kotlin] 12 출력 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 문자열을 직접 넣어 출력하는 방법 println(문자열) println("안녕하세요") 2. 변수를 출력하는 방법 $변수 ${변수} val age: Int = 30 println("나이 : $age") // 나이 : 30 println("나이 : ${age}") // 나이 : 30 3. 특수 문자를 출력하는 방법 \특수문자 ${"특수문자"} ${'특수문자'} println("\$달러\$") // $달러$ println("${"$"}달려${'$'}") // $달러$ 4. 실습 1) 문자열을 직접 넣어 출력하는 방법 println("안녕하세요.") // 안녕하세요. 2) 변수를 출력하는 방법 val name: String = "이름" val myName: String = "체리" println("내 ${name}은 $myName 입니다.") // 내 이름은 체리 입니다.

[Kotlin] 13 고차함수 & 람다 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 고차 함수(High-order Function) 함수를 인자로 받고 결과값으로 내보낼 수 있습니다. 즉, 고차 함수는 함수의 매개변수를 값이 아닌 함수로 받을 수 있습니다. 함수의 매개변수 : 값 함수의 매개변수 : 함수 타입 표시 변수명: 타입 변수명: (함수인자타입, 함수인자타입, ...) -> 함수반환타입 호출 함수(값) 함수(::함수) 예시 fun add(a: Int, b: Int): Int { return a + b } println(add(5, 5)) fun add(a: Int, b: Int): Int { return a + b } fun addOne(func: (Int, Int) -> Int): Int { val result: Int = func(1, 1) return result } println(addOne(::add)) 2. 람다 (Lambda) 람다

[Kotlin] 14 클래스 정의와 생성자 (1) [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 코틀린은 객체 지향(Object Oriented Programming) 패러다임 언어입니다. 1. 객체 지향 객체는 말 그대로 대상을 나타내는 단어입니다. ex) 축구 게임을 만든다고 가정합니다. A 방법 : 객체 = 축구선수, 심판, 관중, 경기장, ... B 방법 : 객체 = 사람, 공, 경기장, ... 객체를 통해서 문제 또는 원하는 바를 해결합니다. 객체는 class 문법을 통해서 만들 수 있습니다. 객체를 어떻게 구성하는지는 노하우이자 개발을 잘하는 방법입니다. 객체 지향을 잘하기 위해서는 지식보다는 경험이 더 중요합니다. 2. 클래스 class 클래스명() { ... } // 주 생성자가 있는 경우 class 클래스명 { ... } // 주 생성자가 없는 경우 클래스는 객체(Object)를 만드는 문법적인 요소입니다. 클래스는 객체를 만드는 방법(설명서) 입니다.

[Kotlin] 04 연산자 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 산술 연산자 +, -, *, /, % 2. 대입 연산자 = 우변에 있는 값은 좌변에 있는 변수에 할당합니다. 3. 복합 대입 연산자 산술 연산자와 대입 연산자를 합성한 연산자입니다. +=, -=, *=, /=, %= 4. 증감 연산자 ++ 1 증가 -- 1 감소 5. 비교 연산자 >, >=, <, <= ==, != 값을 비교합니다. ===, !== 주소값을 비교합니다. 비교 연산자의 결과는 항상 Boolean 입니다. 자료형이 다르면 비교 연산자를 사용할 수 없습니다. 6. 논리 연산자 논리 연산자는 Boolean 을 대상으로 연산합니다. && (and), || (or), ! (not) 7. 실습 1) 산술 연산자 val num1: Int = 1 + 10 // 11 val num2: Int = 2 - 10 // -8 val num3: Int = 2 * 40 // 80

[Kotlin] 05 메소드 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 함수란?? 함수는 공장과 같습니다. 공장은 재료를 넣어주면 완제품이 나옵니다. 공장 : 함수 재료 : 매개 변수 (인자) 완제품 : 반환값 2. 기본 함수 선언 fun 함수명(변수명: 타입, 변수명: 타입, ...): 반환타입 { 함수 내용 ... return 반환값 } 3. 기본값이 있는 함수 선언 fun 함수명(변수명: 타입 = 기본값, 변수명: 타입, ...): 반환타입 { 함수 내용 ... return 반환값 } 4. 반환값이 없는 함수 fun 함수명(변수명: 타입, 변수명: 타입, ...): Unit { 함수 내용 ... } fun 함수명(변수명: 타입, 변수명: 타입, ...) { 함수 내용 ... } 5. 간단하게 선언하는 방법 fun 함수명(변수명: 타입, 변수명: 타입, ...): 반환타입 = 함수 내용 6. 가변 인자를 갖는 함수 가변 인자 매번 함수

[Kotlin] 06 흐름제어 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. if 조건문 조건식은 Boolean 타입이어야 합니다. else if 는 여러 개 쓸 수 있습니다. if 와 else 는 한 개만 쓸 수 있습니다. else 와 else if 는 필요하지 않으면 사용하지 않아도 됩니다. else 와 else if 는 단독으로 사용할 수 없습니다. 1) if 문 if (조건식) { 실행문 } 2) if - else 문 if (조건식) { 실행문 } else { 실행문 } 3) if - else if 문 if (조건식) { 실행문 } else if (조건식) { 실행문 } else if (조건식) { 실행문 } ... 4) if - else if - else 문 if (조건식) { 실행문 } else if (조건식) { 실행문 } ... else { 실행문 } 2. when 문 when (조건을 검사할 변수) { 값 -> { 실행문 } 값

[Kotlin] 07 배열 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 배열 특정 하나의 변수에 복수개의 값을 할당하고 싶을 때 사용합니다. 배열은 저장될 수 있는 값의 개수를 정해 놓아야 하고, 이 개수는 변경할 수 없습니다. 2. 배열을 선언하는 방법 1 - arrayOf() arrayOf(값1, 값2, 값3, ...) arrayOf<자료형>(값1, 값2, 값3, ...) 자료형ArrayOf(값1, 값2, 값3) var arr1 = arrayOf(true, "안녕", 10, 2.2) var arr2 = arrayOf<Int>(10, 20, 30) // 선호 var arr3 = booleanArrayOf(true, true, false) 3. 배열을 선언하는 방법 2 - Array() Array(크기, { 초기화값 }) Array<자료형>(크기, { 초기화값 }) 자료형Array(크기, { 초기화값 }) var arr1 = Array(1

[Kotlin] 08 콜렉션 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 콜렉션 (Collection) 변경 가능 여부로 분리합니다. immutable 변경 불가능 mutable 변경 가능 특징으로 분리합니다. List Set Map 콜렉션은 크기가 고정되어 있지 않습니다. 1) List immutable listOf<자료형>(값1, 값2, 값3, ...) 리스트[인덱스] 리스트.get(인덱스) 리스트.first() 리스트.last() 리스트.contains(값) 리스트.containsAll(컬렉션) 리스트.size 리스트.isEmpty() 리스트.indexOf(값) mutable mutableListOf<자료형>(값1, 값2, 값3, ..) 리스트.set(인덱스, 값) 리스트.add(*인덱스, 값) 리스트.remove(값) 리스트.removeAt(인덱스) 리스트.removeFirst() 리스트.removeLast() 리스트.addAll(*

[Kotlin] 09 이터러블 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Iterable 이터러블, 아이터러블 "반복이 가능하다 = 시작과 끝이 있다 = 범위가 있다" 는 뜻입니다. 배열, 콜렉션, Progression 은 이터러블합니다. 2. Progression 시작과 끝점 그리고 구간(step) 을 가지고 있으며, 범위를 정할 수 있습니다. 구간이 1인 progression 을 Range 라고 합니다. 1..10 → 1, 2, 3, ..., 10 1.rangeTo(10) → 1, 2, 3, ..., 10 1 until 10 → 1, 2, 3, ... 9 구간은 step 키워드로 명시할 수 있으며, step 은 양수입니다. 1..10 step 2 → 1, 3, 5, 7, 9 10 downTo step 2 → 10, 8, 6, 4, 2 (1..10).reversed() step 5 → 10, 5 실무에서는 step 보다는 range 가 많

[Kotlin] 10 반복문 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. for 문 기본 포맷 for (변수명 in 이터러블값) { 반복 내용 } 예시 for (number in 1..10) { println(number) } 2. forEach 문 기본 포맷 이터러블값.forEach { 반복 내용 } 예시 (1..10).forEach { println(it) } (1..10).forEach { num -> println(num) } 3. while 문 조건을 만족하는 동안 본문(내용)을 반복합니다. 기본 포맷 while (조건) { 반복 내용 } 4. do-while 문 while 문과 동일하게 조건을 만족하는 동안 본문(내용)을 반복합니다. 조건을 만족하지 못하더라도 최초 한번은 무조건 실행됩니다. 기본 포맷 do { 반복 내용 } while(조건) 5. 키워드 break 반복문 실행 중에 가장 가까운 루프를 탈출합니다. continue

03 자바스크립트 기초 - 타입과 구문 [내부링크]

1. 변수 선언 자바스크립트는 느슨한 타입(loose typing)을 가진 언어이기 때문에 데이터 타입을 따로 명시하지 않고 변수를 선언합니다. 자바스크립트에서는 var, let, const 세 가지 키워드를 사용해 변수를 선언하며, 이 변수에 값을 할당합니다. 변수를 선언하고 초기화하지 않으면 undefined 값이 자동으로 할당됩니다. 1) var var 로 선언된 변수는 기존에 선언된 변수의 값을 덮어쓰며, 함수 스코프를 기준으로 동작합니다. var a = 1; if(isSomthing()) { var a = 2; } conosle.log(a); // 2 function foo() { var a = 1; console.log(a); // 1 } console.log(a); // Uncaught ReferenceError: a is not defined 2) let 과 const let 과 const 는 var 와 달리 재선언을 허용하지 않으며, 함수 스코프가 아닌 블록 스코프를

18 스프링 프레임워크 시작하기 [내부링크]

애플리케이션 규모가 커질수록 각 기능을 개발자가 따로 개발하는 것보다는 표준화된 방법으로 개발하는 것이 좋습니다. 즉, 애플리케이션 개발 시 일반적인 웹 애플리케이션에서 많이 사용하는 기능은 미리 만들어서 제공하고, 그 외에 필요한 부분만 추가 및 수정하는 것입니다. 이렇게 표준화된 형식으로 개발을 진행하면 생산성을 높일 수 있습니다. 따라서 지금은 대부분의 웹 애플리케이션을 스프링이나 스트러츠 같은 프레임워크 환경에서 개발합니다. 1. 프레임워크(Framework) 란? 프레임워크의 사전적 의미는 "어떤 것을 구성하는 구조 또는 뼈대" 입니다. 소프트웨어적 의미로는 "기능을 미리 클래스나 인터페이스 등으로 만들어 제공하는 반제품" 으로 해석할 수 있습니다. 즉, 프레임 워크는 애플리케이션 개발 시 자주 사용하는 기능을 클래스나 인터페이스 등으로 미리 어느 정도 만들어서 제공합니다. 개발자는 이 프레임 워크를 활용하여 자신의 상황에 맞게 변형 및 추가하기만 하면 되므로, 애플리케이션

[Kotlin] 01 변수 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 변수 var (variable, 변수) 변경 가능한 변수입니다. val (value, 값) 변경 불가능한 변수입니다. 2. 변수 선언 var 변수명 val 변수명 var school val school 3. 변수에 값 할당 var 변수명 = 값 val 변수명 = 값 var school = "학교" val school = "학교" 반드시 변수 선언과 동시에 값을 초기화(할당)해야 합니다. 4. 코딩 컨벤션 - https://kotlinlang.org/docs/coding-conventions.html#names-for-test-methods Coding conventions | Kotlin kotlinlang.org 5. 변수 네이밍 규칙 var 를 선언할 때는 소문자 그리고 카멜 케이스로 표기합니다. val 을 선언할 때는 대문자 그리고 스네이크 케이스로 표기합니다.

[Kotlin] 02 자료형 [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. 정수형 음수와 양수를 표현합니다. Byte (1byte) Short (2byte) Int (4byte) Long (8byte) 양수만 표현할 수 있습니다. UByte (1byte) UShort (2byte) UInt (4byte) ULong (8byte) 2. 실수형 소수점이 있는 숫자를 표현합니다. Float (4byte) Double (8byte) 3. 논리형 Boolean 참(true)과 거짓(false) 를 표현합니다. 4. 문자형 Char 한 글자를 표현합니다. ex) 'A', '가' 5. 문자열형 String 여러 글자를 표현합니다. ex) "안녕하세요", "Hello", "A" ※ 자료형 추론 정수의 경우 코틀린은 기본적으로 Int 로 추론합니다. 실수의 경우 코틀린은 기본적으로 Double 로 추론합니다. 다음은 자료형을 명시하는 코드입니다. var 변수

[Kotlin] 03 Null [내부링크]

Android 앱 개발의 정석 with Kotlin 올인원 패키지 Online 강의를 듣고 정리한 내용입니다. 1. Null "존재하지 않는다", "상태를 모른다" 는 의미입니다. 0 과는 다릅니다. Null 을 대상으로 연산은 불가능합니다. 하지만 == 과 != 연산은 가능합니다. 2. Null 을 표현하는 방법 var 변수명: 자료형? = 값 val 변수명: 자료형? = 값 var number: Int? = null val text: String? = null ※ 용어 nullable 변수 null 이 들어갈 수 있는 변수 non-null 변수 null 이 들어갈 수 없는 변수 3. 실습 1) Null 선언 및 할당 val nullNum1: Int? = null val num1: Int = null // ERROR var nullNum2: Int? = 2 var nullNum3: Int? = nullNum2 nullNum2 = 100 val num2: Int = 100 val n

07 JSP 응용 (1) [내부링크]

1. 액션 태그 1) 액션 태그란? 액션(Action) 태그란 JSP 에서 객체 생성과 공유, 페이지 이동과 전달, 태그 파일 작성 등에 필요한 기능을 제공하는 일종의 커스텀 태그입니다. 커스텀 태그 기반이지만 별도의 taglib 지시어 사용 없이 jsp 접두어를 사용합니다. 액션 태그는 JSP 에서 프로그램적인 요소를 많이 구현하거나 컨트롤러로 활용할 때 유용합니다. JSP 파일에서 커스텀 태그의 구조적인 특징을 살려 HTML 형태로 프로그램 요소를 처리할 수 있기 때문에 간편하다는 장점이 있습니다. 아래 표는 주로 사용되는 액션 태그들입니다. 액션 태그 설명 jsp:forward request 와 response 객체를 포함해 다른 페이지로 포워드함. jsp:include 다른 페이지의 실행 결과를 포함시킴. jsp:useBean 자바 빈즈 객체를 생성하거나 불러옴. jsp:setProperty 자바 빈즈 객체의 속성(멤버 변수)에 값을 할당함. jsp:getProperty 자바

07 JSP 응용 (2) [내부링크]

3. 커스텀 태그와 EL 1) 커스텀 태그(Custom Tag) 란? 커스텀 태그란 사용자 정의 태그를 의미합니다. 스크립트릿 사용을 줄이고 태그와 같은 형태로 프로그램 코드를 대체하거나 재활용 가능한 구조를 통해 태그 라이브러리로 활용하고자 개발된 규격입니다. 커스텀 태그를 사용하기 위해서는 taglib 지시어를 사용하여 커스텀 태그가 어디에 정의되어 있는지를 먼저 선언해야 하며 태그에 사용할 접두어를 지정해야 합니다. **JSTL(JSP Standard Tag Library)은 커스텀 태그 기술로 만들어 졌습니다. 다음은 특정 상품 코드를 전달하면 해당 상품에 대한 세부 정보를 출력하기 위해 커스텀 태그를 사용한 예시입니다. <%@ taglib prefix="m" tagdir="/WEB-INF/tags" %> <m:printData pid="87459989" /> **useBean 액션 역시 커스텀 태그 기술을 통해 만들어졌습니다. 2) EL(Expression Language)

08 MVC 패턴의 이해 [내부링크]

1. MVC 패턴 1) 디자인 패턴(Design Pattern) 이란? 디자인 패턴은 처음에는 건축학적 관점에서 출발한 개념이었으나, 소프트웨어 설계에서 공통적으로 발생하는 문제에 대한 재사용 가능한 솔루션으로 제시되었습니다. 물론 완벽한 설계란 없으며 시대의 흐름에 따라 달라질 수 있지만, 시행착오를 통해 스스로 터득해야 할 문제를 정리해둔 솔루션이 있다면 당연히 검토할 가치가 있는 것입니다. 소프트웨어의 디자인 패턴은 생성, 구조, 행동, 동시 실행 등의 문제에 대해 여러 패턴을 제시하고 있으며 UML 클래스 다이어 그램을 이용해 구조를 표현하고 있습니다. UML 이란 Undefined Modeling Language 의 약어로, 객체지향 설계와 구현을 지원하기 위해 만들어진 일종의 모델링 언어입니다. 프로그래밍 언어와 같은 형태는 아니고 시스템 분석, 설계에 필요한 내용을 여러 다이어그램 형태로 정의한 규격입니다. 2) 추상 팩토리 패턴(Abstract Factory Patte

09 데이터베이스와 JDBC (1) [내부링크]

1. 데이터베이스의 개요 1) 데이터베이스란? 데이터베이스는 데이터를 체계적으로 관리할 수 있도록 해주는 소프트웨어입니다. ① 데이터베이스(Database) 데이터베이스는 사전적으로 여러 사람이 공유하여 사용할 목적으로 체계화하여 통합, 관리하는 데이터의 집합을 의미합니다. 즉, 데이터베이스는 방대한 데이터를 쉽게 검색하거나 찾을 수 있도록 체계적으로 분류하고 정리해둔 정보의 집합이라고 할 수 있습니다. ② DBMS (DataBase Management System) 데이터베이스는 DBMS 라고 불리는 소프트웨어 시스템을 사용합니다. 널리 알려진 Oracle, MySQL, IBM, DB2, MS SQL 등은 모두 DBMS 입니다. DBMS 는 효과적인 데이터 파일 관리와 운영을 위한 구조와 함께 인덱싱, 캐싱, 네트워크 서버, 사용자 및 권한 관리, 백업/복원, 클러스터링 등 다양한 기능을 제공합니다. 데이터베이스의 일반적인 특징은 다음과 같습니다. 데이터 중복을 최소화할 수 있다.

09 데이터베이스와 JDBC (2) [내부링크]

5. JDBC 기본 구조와 API 의 이해 JDBC 는 Java DataBase Connectivity 의 약어로, 자바 프로그램에서 다른 기종 간의 데이터 베이스를 표준화된 방법으로 접속할 수 있도록 만든 API 규격입니다. 1) JDBC 의 개념 JDBC 구조 JDBC 는 자바 애플리케이션에서 표준화된 방법으로 다양한 데이터베이스에 접속할 수 있도록 설계된 인터페이스입니다. 따라서 개발자는 각 데이터베이스에 대해 자세히 알지 못해도 JDBC API만 알면 모든 데이터베이스에서 동작할 수 있는 애플리케이션을 개발할 수 있습니다. 응용 프로그램에서는 자바에 기본적으로 포함된 JDBC API(인터페이스로 규격만 정의)를 사용해프로그램 코드를 작성하고 실제 데이터베이스 연결은 각 데이터베이스 회사가 제공하는 JDBC 드라이버(JDBC API 구현 클래스)를 이용해 SQL문으로 데이터를 조작하는 형태로 동작합니다. 2) JDBC 드라이버 설치 JDBC는 자바 인터페이스로 정의된 일종의 규

10 리스너와 필터 [내부링크]

1. 리스너 (Listener) 1) 리스너란? 리스너란 컨테이너에서 발생하는 이벤트를 모니터링하다가 특정 이벤트가 발생하면 실행되는 특수한 서블릿으로, "이벤트 리스너" 라고도 합니다. 웹 애플리케이션 실행에 필요한 정보를 제공하거나 톰캣 시작/종료와 같은 특정 상황에 자동으로 동작하는 프로그램을 구현할 때 사용합니다. 리스너는 일반적인 형태의 서블릿이 아니라 특정 이벤트에 따라 동작하는 인터페이스를 구현한 클래스입니다. 리스너는 기본적으로 생명 주기 변화와 Scope Object 에 관리하는 속성의 변화를 모니터링하고 해당 이벤트가 발생하면 실행되는 구조입니다. 아래 그림은 리스너의 동작 구조입니다. 리스너의 동작 구조 리스터의 경우 특정 서블릿이나 JSP 에서 사용하기 위한 목적보다는 웹 애플리케이션 전체의 설계나 운영 관점에서 사용한다고 볼 수 있으며, 리스너 활용의 대표적인 유형은 다음과 같습니다. 초기화 매개변수 연동 톰캣이 시작될 때 web.xml 의 ServletCon

02 자바 웹 개발을 위한 환경 구축 [내부링크]

1. 자바 웹 개발환경의 개요 1) 자바란? 자바는 대표적인 프로그래밍 언어입니다. 자바의 대표적인 특징은 다음과 같습니다. 간결하면서도 강력한 객체지향 프로그래밍 언어다. 플랫폼에 독립적이어서 여러 운영체제나 하드웨어에서도 동일하게 실행할 수 있다. 많은 오픈소스 라이브러리를 통해 생산성이 향상되고 유지보수 비용이 절감된다. GUI 기반의 응용 프로그램 개발에는 적합하지 않다. 하드웨어를 정밀하게 제어해야 하는 프로그램 개발에는 비교적 적합하지 않다. 최신 모던 프로그래밍 언어에 비해 간결함이 떨어지고 코드가 복잡하며 불필요한 코드가 많다. JVM 과 자바 플랫폼 ① 자바 가상머신(JVM) 자바의 가장 큰 특징은 가상 머신(Virtual Machine)이라는 개념입니다. 가상 머신은 말 그대로 물리적인 기계 장치가 아닌 가상의 기계를 의미합니다. 즉, 소프트웨어로 구현된 하드웨어를 말합니다. 자바는 이러한 가상머신의 특징으로 인해 특정 하드웨어나 운영체제의 영향을 받지 않고 동일한

03 웹 프로그래밍의 기초 [내부링크]

1. HTML 기초 1) HTML 이란? HTML 은 HyperText Markup Language 의 약어로, 모든 웹 콘텐츠는 HTML 로 이루어져 있습니다. 크롬과 같은 웹 브라우저는 서버로부터 전달받은 HTML 문서의 구조를 해석해 화면을 구성합니다. 어떤 형태이든 클라이언트인 웹 브라우저가 서버로부터 수신하는 데이터의 구조는 HTML 입니다. ① 하이퍼텍스트 하이퍼텍스트(HyperText)는 다른 정보와 연결된 텍스트를 의미하며 사용자가 관련 문서를 링크를 통해 이동하여 정보를 얻을 수 있습니다. ② 마크업 언어 마크업 언어(Markup Language)란 텍스트에 의미를 부여하기 위해 문서에 주석을 다는 표현 시스템을 말하며, 표현하고자 하는 정보가 있을 때 정보의 앞뒤에 태그(Tag)라는 표기를 달아 정보에 의미를 부여하는 형식입니다. 2) HTML의 기본 용어 ① 태그 (Tag) HTML 의 기본 구성 요소인 태그는 "<>" 를 사용하여 나타내며, 아래와 같이 사용합니

04 자바 웹 개발 개요 [내부링크]

1. 서블릿과 JSP 1) 서블릿이란? 서블릿이란 자바 기반의 웹 프로그램 개발을 위해 만들어진 기술입니다. 따라서 자바로 작성된 프로그램을 실행할 수 있는 서버 소프트웨어(톰캣)를 통해 관리됩니다. 즉, 서블릿을 실행하기 위해서는 톰캣과 같은 서블릿 컨테이너가 필요하며 이러한 소프트웨어는 일반적으로 WAS(Web Application Server) 로 불리기도 합니다. 서블릿 동작 구조는 다음과 같습니다. 서블릿 동작 구조 ① 클라이언트(웹 브라우저)가 서버에 페이지(url)를 요청한다. ② 서버는 요청 url 매핑되는 서블릿을 호출하면서 파라미터를 전달한다. ③ 서블릿이 실행되고 파라미터로 전달된 값을 처리하거나 데이터베이스와 연동한다. ④ HTML 과 데이터를 조합하여 재구성한 다음 클라이언트에 전달한다. ⑤ 웹 브라우저는 수신받은 HTML 내용(CSS, 자바스크립트 포함)을 해석해서 화면에 표시한다. 서블릿은 아래 코드와 같이 HTML 과 데이터를 조합하는 방식에 어려움이 있

05 서블릿의 이해 [내부링크]

1. 서블릿의 개요 서블릿은 자바로 만들어진 프로그램을 서버에서 실행하기 위해 만들어졌습니다. 특히 웹 서비스 개발에 특화되어 있는데 데이터베이스 연동, 외부 서비스 연동을 통해 정적인 웹에 동적인 정보 제공을 가능하게 합니다. 서블릿은 순수 자바 코드로 작성되며, HttpServlet 클래스를 상속하여 서블릿 등록에 필요한 정보를 추가해야 합니다. 서블릿은 단독으로 실행할 수 없고 서블릿 컨테이를 통해 실행해야 합니다. 1) 서블릿의 동작 과정 서블릿 코드 작성에서 부터 컨테이너 등록, 클라이언트 요청에 따른 동작 과정은 다음과 같습니다. 서블릿 개발과 동작 과정 ① HttpServlet 클래스를 상속받는 서블릿 클래스(MyServlet)를 구현한다. ② 컨테이너는 url mapping 설정을 참고하여 서블릿을 등록(load)한다. ③ 서블릿 객체 생성 및 init() 메서드를 실행한다. ④ 클라이언트 요청은 스레드로 동시 처리되며, 각각 service() 메서드를 호출한다. ⑤

06 JSP의 기초 다지기 [내부링크]

1. JSP 의 개요 JSP 는 서블릿의 화면단 처리의 어려움을 해결하기 위해 등장하였으며, HTML과 데이터를 조합합니다. 1) JSP 의 특징과 구성 요소 JSP는 다음과 같은 특징을 가집니다. HTML 페이지에 자바 코드를 직접 사용한다. 서블릿 컨테이너에 의해 관리되는 내장 객체의 생명 주기를 이용하여 페이지 간 속성을 관리한다. 커스텀 태그 기술을 사용하여 코드를 태그화(action, JSTL 등)한다. EL(Expression Language)을 통해 데이터를 표현한다. JSP 파일의 구성 요소는 다음과 같습니다. 지시어(Standard Directives) 액션(Standard Action) 템플릿 데이터(Templete Data) 스크립트 요소(Script Element) 커스텀 태그(Custome Tag) 와 EL(Expression Language) **각각의 구성 요소는 서블릿 형태의 소스로 변환되는 과정에서 자바 코드로 바뀌게 됩니다. 2) JSP 의 동작 과정

12 리스너와 필터 (2) [내부링크]

3. 리스너 1) 리스너란 리스너는 컨테이너에서 발생하는 특정 이벤트 상황을 모니터링하다가 실행되는 특수한 형태의 서블릿입니다. 웹 애플리케이션에 초기 데이터를 공급하거나 특정 상황에 따라 자동으로 동작하는 프로그램을 구현할 때 사용합니다. 리스너는 일반적인 형태의 서블릿이 아니라, 특정 이벤트에 따라 동작하는 인터페이스를 구현한 클래스입니다. 서블릿과 마찬가지로 애너테이션 기반으로 코드를 작성할 수 있습니다. 리스너 활용의 대표적인 유형은 다음과 같습니다. 초기화 매개변수와 연동 톰캣이 시작될 때, 초기화 매개변수를 읽어 그에 따라 특정 객체를 초기화한 후 서블릿이나 JSP 에 제공. 예제 프로그램 등을 배포할 때 샘플 데이터 제공 데이터베이스의 연결, 테이블 생성 및 샘플 데이터 로딩 등의 작업을 사전에 수행. 복잡한 환경 설정 제공 프로그램 실행에 필요한 여러 정보를 파일로부터 읽어와 JSP 및 서블릿 등에 제공. 특정 이벤트에 동작하는 기능 구현 웹 애플리케이션을 실행할 때

12 리스너와 필터 (3) [내부링크]

5. 필터 필터는 리스너와 마찬가지로 웹 애플리케이션을 지원하기 위한 특수한 형태의 서블릿입니다. 사용자 요청에 따라 서블릿이나 JSP 가 실행되기 전에 response 혹은 request 객체의 조작이나 추가적인 처리를 합니다. 1) 필터란 필터란 특정 요청에 대해서만 동작하는 특수한 형태의 웹 프로그램으로, 여러 개가 정해진 순서에 따라 배치될 수 있으며 사용자 요청 처리 이전에 먼저 실행됩니다. 일반적으로 필터를 활용하는 분야는 다음과 같으며, 기존의 코드 변경 없이 애플리케이션에서 공통적으로 사용할 수 있는 기능 구현에 널리 사용됩니다. 인증 (Authentication) 특정 페이지에서 로그인 여부 혹은 특정 권한을 확인해야할 필요가 있을 때 각각의 페이지에서 인증을 위한 빈즈 클래스를 실행하거나 컨트롤러에서 처리하는 방법을 필터로 이용한다. 로깅/감사 (Logging and Auditing) 특정 페이지 혹은 기능들에 대해 사용 현환을 모니터링하고 로그로 관리할 필요가 있

13 웹 애플리케이션 로그와 오류 관리 (1) [내부링크]

1. 로그 관리 개요 로그(Log)는 프로그램을 개발하거나 운영할 때 발생하는 문제점을 추적하거나 운영 상태를 모니터링하기 위한 텍스트 형식의 데이터입니다. 1) 로그 관리의 필요성 콘솔(System.out.println())을 이용해 프로그램 개발이나 운영 과정에서 문제점을 추적하기 위한 메시지 출력은 가장 초보적인 로깅의 형태입니다. 일반적으로 로깅은 기록을 남긴다는 의미로, 단순한 메시지의 출력보다는 파일 형태의 기록으로 남기는 형태를 말합니다. 로깅의 필요성을 정리하면 다음과 같습니다. 프로그램 개발 과정에서의 간단한 구현 검증 운영 시스템에서 프로그램 진행 과정의 모니터링 서버 기반 프로그램에서 사용자 접속 및 시스템 이용 관리 문제 발생 시 원인 파악을 위한 시스템 분석 사용자 접속 및 요청 등 보안 관점에서의 데이터 관리 이용 형태 분석을 통한 사후 서비스 개선 목적 이 외에도 다양한 목적에서 로그를 분석하며, 어떤 측면에서는 휴대폰 통화기록, SNS 메시지 기록, 쇼핑

13 웹 애플리케이션 로그와 오류 관리 (2) [내부링크]

3. 웹 애플리케이션 로깅 방법 기본적인 로깅 기법은 slf4j 와 log4j 를 연동해서 활용하는 것입니다. 1) 서블릿 컨테이너 제공 로깅 서블릿 컨테이너 제공 로깅은 javax.servlet.ServletContext 클래스에서 제공하는 API 를 이용합니다. 아래 표는 ServletContext 클래스 로깅 메서드입니다. 메서드 설명 public void log(String msg) 컨테이너 로깅 시스템을 통해 문자열 형태의 내용을 출력한다. 기본 톰캣의 경우 localhost.yyyy-MM-dd.log 형태의 파일에 리고된다. 이클립스의 경우 콘솔 메시지로만 출력된다. 로그 레벨은 INFO 로 취급된다. public void log (String msg, Throwable throwable) Throwable 클래스는 모든 자바 오류와 예외의 슈퍼 클래스다. 메시지와 함께 특정 예외 처리 메시지를 함께 로깅할 수 있다. 로그 레벨은 SEVERE(심각)로 취급된다. Servl

13 웹 애플리케이션 로그와 오류 관리 (3) [내부링크]

5. 웹 애플리케이션 오류 관리 1) 컨테이너 오류 처리 설정 컨테이너 오류 처리 설정은 톰캣과 같은 애플리케이션 서버 설정을 통해 웹 애플리케이션 단위별로 오류 상황에 대처하도록 합니다. 즉, 웹 애플리케이션 실행 중 발생하는 오류 유형별로 페이지를 지정해서 오류를 처리합니다. 웹 애플리케이션 실행 중 발생하는 오류는 컨테이너에서 출력하는 것으로 웹 표준 프로토콜인 HTTP 규격에 정의된 오류 코드가 됩니다. 웹 애플리케이션의 대표적인 오류 처리 코드는 다음과 같습니다. 오류 처리 코드 내용 100 Continue 200 OK, 오류 없이 전송 성공 201 Created, POST 명령 실행 및 성공 400 Bad request, 클라이언트의 잘못된 요청으로 처리할 수 없음. 403 Forbidden, 접근이 거부된 문서를 요청함. 404 Not found, 문서를 찾을 수 없음. 405 Method not allowed, 리소스를 허용하지 않음. 406 Not acceptable

01 웹 프로그램의 이해 [내부링크]

1. 웹의 개요 1) 웹이란? Word Wide Web은 줄여서 WWW 또는 웹이라고 합니다. 웹은 인터넷에서 운영되는 서비스 중 하나로, 웹 자체가 인터넷을 의미하는 것은 아닙니다. 웹의 처음 개발 목적은 연구자들이 흩어져 있는 정보를 손쉽게 정리하고 공유하기 위한 차원이였습니다. 즉, HTML(HyperText Markup Language) 이라는 간단한 마크업 언어를 통해 정보의 연결이 가능하도록 하이퍼텍스트를 포함한 컨텐츠를 제공하며, HTTP(HypterText Transfer Protocol) 라는 프로토콜을 사용해 TCP/IP 네트워크 상에서 서비스를 운영하게 된 것이 웹의 시작입니다. 웹은 다음과 같은 특징을 가지고 있습니다. 인터넷은 컴퓨터 네크워크망을 의미하고, 웹은 인터넷 서비스 중 하나를 의미한다. 웹은 인터넷상의 정보를 하이퍼텍스트 방식과 멀티미디어 환경에서 검색할 수 있게 해주는 정보 검색 시스템을 의미한다. 웹은 HTTP 프로토콜을 사용하며, HTML 로

09 표현 언어와 커스텀 태그 (2) [내부링크]

3. 커스텀 태그 (Custom Tag) 커스텀 태그는 JSTL 의 기본이 되며, 완전한 MVC 패턴을 구현하려면 꼭 필요한 요소입니다. 1) 커스텀 태그란 커스텀 태그는 원래 JSP 페이지에서 반복적인 프로그램 로직을 캡슐화하려고 고안된 것으로, 기본적으로 제공되는 태그 이외에 사용자가 확장한 태그라는 의미에서 붙여진 이름입니다. HTML 문서는 브라우저에 의해 해석되므로 커스텀 태그를 구현할 수 없지만, JSP 는 서버에서 해석되므로 커스텀 태그를 구현할 수 있습니다. 일반적으로 스크립트릿을 많이 사용하면 프로그램 로직과 디자인 부분이 섞여서 소스가 복잡해지고 관리하기가 어려워집니다. 그래서 이러한 문제를 해결하려고 나온 것이 '빈즈' 입니다. 하지만 빈즈는 비즈니스 로직에 해당하는 부분들에 대한 처리를 캡슐화할 수 있지만, 데이터를 화면에 표시하기 위해 필요한 프로그램적인 요소를 줄이는 데에는 도움이 되지 않습니다. 예를 들어, 게시판 목록을 보여주는 경우에는 빈즈를 이용해 데

09 표현 언어와 커스텀 태그 (3) [내부링크]

7. 태그 핸들러 기반 커스텀 태그 태그 핸들러 기반 커스텀 태그는 라이브러리 활용이 가능합니다. 1) 태그 핸들러의 개요 태그 핸들러란 커스텀 태그를 처리하는 객체를 말합니다. 즉, 태그를 처리하는 별도의 자바 클래스를 이용해 커스텀 태그를 구현하는 방법입니다. SimpleTagSupport 클래스를 상속받아 구현할 수 있습니다. 태그 핸들러 기반 커스텀 태그는 아래 표와 같이 세 가지 구성 요소로 이루어져 있습니다. 구성 요소 비고 태그 핸들러 클래스 (Tag Handler Class) 태그 파일의 경우에는 별도 핸들러 클래스가 없다. 태그 라이브러리 기술자 (Tag Library Descriptor) 태그 파일의 경우 태그 파일이 기술자를 겸한다. taglib 지시어 (taglib Directives) 커스텀 태그를 사용하는 모든 JSP 에서 선언해야 한다. 태그 핸들러 클래스 커스텀 태그를 실제 구현한 자바 클래스다. 태그 라이브러리 기술자에서 설계된 내용을 구현해야 한다.

10 JSTL의 이해와 활용 (1) [내부링크]

JSTL은 JSP 에서 유용하게 사용될 수 있는 기능을 만들어 둔 커스텀 태그 라이브러리 입니다. JSTL 을 사용하면 JSP 에서 스크립트릿의 사용을 줄일 수 있으며 특히 화면에 데이터를 표현할 때 필요한 프로그램 요소를 대체할 수 있어 매우 유용합니다. 1. JSTL 의 개념과 구성 1) JSTL 이란 JSTL(JSP Standard Tag Library)은 커스텀 태그 라이브러리 기술을 이용해서 일반적으로 필요한 기능들을 표준화한 것으로, 크게 CORE, XML, SQL, Function 라이브러리로 나눠집니다. JSTL 초기 스펙 중 표현 언어는 JSP 2.0에 기본으로 포함되었지만, JSTL 은 별도로 설치 후 사용할 수 있습니다. http://tomcat.apache.org/taglibs/standard/ 에서 다운받을 수 있습니다. **JSTL 은 웹 개발에 있어 가장 널리 쓰이고 있는 커스텀 태그 라이브러리입니다. JSP 파일의 taglib 지시어에서 이들 라이브러리를

10 JSTL의 이해와 활용 (2) [내부링크]

3. [응용 실습] 스크립트릿을 JSTL 로 변환 이전에 사용한 ProductList.jsp, ProductSel.jsp 소스를 JSTL 을 이용한 버전으로 변경해 보도록 하겠습니다. 1) 소스 수정 ① 이전 소스 내용 <jsp:useBean id="product" class="ch10.Product" scope="session" /> <select name="sel"> <% for(String item: product.getProductList()) { out.println("<option>" + item + "</option>"); } %> </select> ② 수정된 소스 내용 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> ... <jsp:useBean id="product" class="ch10.Product" scope="session" /> <select name="sel"> <c:forEach item

11 데이터베이스 커넥션 풀과 트랜잭션 (1) [내부링크]

1. 커넥션과 트랜잭션 데이터베이스 연동 프로그램에서 가장 중요한 것은 '커넥션' 과 '트랜잭션' 입니다. 1) 커넥션이란 커넥션이란 애플리케이션과 데이터베이스의 연결로서, 애플리케이션에서 데이터베이스에 접속하고 접속을 종료하는 일련의 과정을 말합니다. 동시 접속 사용자가 늘어나면 프로그램에서 데이터베이스를 연결하고 종료하는 일련의 과정(커넥션)은 시스템에 많은 부하를 주게 됩니다. 이러한 비효율적인 커넥션 관리는 비용적 손실도 초래하게 됩니다. 따라서 대규모 시스템일수록 커넥션 관리는 애플리케이션 개발에서 중요한 역할을 합니다. 그리고 만약 연결을 종료하지 않고 연결을 계속 유지한다면, 불필요한 연결이 유지되어 데이터베이스 서버 자원을 낭비하게 됩니다. (연결을 종료하지 않으면 데이터베이스의 최대 커넥션을 초과해 애플리케이션에서 데이터베이스에 접속하지 못하는 경우가 종종 생깁니다.) 그래서 최근에는 간단한 데이터 처리는 데이터베이스에 매번 접속하는 것이 아니라 웹 서버의 메모리상에

11 데이터베이스 커넥션 풀과 트랜잭션 (2) [내부링크]

4. 트랜잭션 처리 1) 트랜잭션(Transaction)이란 트랜잭션은 데이터베이스에서 일련의 작업을 하나로 묶어 처리하는 것을 의미합니다. 한 고객이 통장A에서 통장B로 계좌를 이체하려고 한다. 이러한 경우 통장A에서 돈을 인출한 후, 통장B로 입금하는 과정을 거친다. 그런데 만약 통장A에서는 정상적으로 돈이 인출되고, 통장B로 입금을 하는데 문제가 생길 경우 통장A에서 인출된 돈은 어떻게 처리해야 할까? 위 예시를 살펴보면, 데이터베이스 관점에서 통장A가 있는 테이블에서 update 문을 수행해서 지정한 금액만큼을 원래 금액에서 차감하고, 통장B에 지정한 금액을 추가하는 update 문을 수행하면 됩니다. 하지만 통장 B에서 수행하는 update 문에서 예외가 발생했다면, 먼저 수행한 통장A의 update 결과를 이전 금액으로 복귀시켜야 합니다. 이러한 과정은 프로그램 내에서 if문을 통해 개별 sql문의 처리를 확인하거나 exception 처리 등을 통해 구현할 수 있습니다.

12 리스너와 필터 (1) [내부링크]

1. 웹 애플리케이션 초기화 매개변수 관리 웹 애플리케이션 초기화 매개변수는 웹 애플리케이션이 컨테이너에 의해 구동될 때 로딩되는 정보로서, 웹 애플리케이션 전반에 걸쳐 공통적으로 참조하는 값을 설정하려는 용도로 사용합니다. 일반적으로 프로그램을 동작시킬 때 필요한 기본 정보는 소스 코드 내에 하드코딩하지 않고, 별도의 환경 설정 파일을 통해 제공됩니다. (ex 데이터베이스 접속 주소나 환경설정 파일의 위치 같은 정보) 초기화 매개 변수를 사용하면 여러 프로그램에서 동일한 값을 필요로 할 때 유용하게 활용할 수 있습니다. 초기화 매개변수는 값의 공유 범위에 따라 ServeltConfig 와 SevletContext 객체를 통해 사용할 수 있으며, web.xml 에서 설정합니다. 구분 적용 범위 web.xml 설정 ServletConfig 해당 서블릿에서만 사용. <sevlet> <init-param> <param-name></param-name> <param-value></param

06 JSP와 자바빈즈 (2) [내부링크]

3. [기본실습] JSP 빈즈 프로그래밍 : 사용자 로그인 구현 1) 프로그램 소스 목록 파일 이름 역할 login_form.html 사용자 로그인을 위한 아이디와 비밀번호를 입력받는 화면. login.jsp 입력받은 아이디 정보를 빈즈 클래스를 이용해서 확인하고 처리하는 jsp 파일. LoginBean.java 사용자가 입력한 계정 정보를 매핑하는 빈즈 클래스. 미리 저장된 계정 값과 비교해 로그인 성공 여부를 반환하는 checkUser() 메서드 포함. 2) 소스 코드 ① 사용자 정보 입력 화면 : login_form.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>login_form.html</title> </head> <body> <center> <h2>로그인</h2> <hr /> <form method="post" action="login.jsp"> <table border="1" cellpadding="5

07 데이터베이스와 JDBC (1) [내부링크]

1. 데이터베이스 개요 1) 데이터 베이스란 일반적으로 데이터 베이스는 다음과 같이 정의합니다. 데이터 베이스(Database) 여러 사람이 공유할 목적으로 방대한 데이터를 체계적으로 정리하여 저장한 것 데이터 베이스 관리 시스템(DBMS, DataBase Management System) 데이터 베이스를 구성하고 운영하는 소프트웨어 시스템 ex) MySQL, MS SQL, Oracle 등 정리하면 데이터베이스는 관리할 수 있는 형태로 정리된 자료를 말하며, 데이터베이스 관리 시스템은 데이터베이스를 만들고 사용하기 위한 도구를 지칭합니다. 데이터 베이스는 모두 관계형 데이터 베이스(Realational DataBase)에 기본을 두고 있으며, SQL(Structured Query Language)이라는 표준 데이터베이스 관리 언어를 지원합니다. 2) 데이터 베이스의 장단점 데이터를 사용하고 처리하는데 있어 가장 중요한 기술적 관점은 데이터를 저장하고 이를 이용하는 방법입니다. 일반적

07 데이터베이스와 JDBC (2) [내부링크]

4. JDBC 기본 구조와 API 이해 JDBC(Java DataBase Connectivity)는 자바 프로그램에서 다른 기종 간의 데이터베이스를 표준화된 방법으로 접속할 수 있도록 만든 API 규격입니다. 1) JDBC 개념과 역할 JDBC 는 자바 애플리케이션에서 표준화된 방법으로 다양한 데이터베이스에 접속할 수 있도록 설계된 인터페이스 입니다. 따라서 애플리케이션 개발자는 각 데이터 베이스에 대해 자세히 알지 못해도 JDBC 클래스 API 만 알면 모든 데이터베이스에서 동작할 수 있는 애플리케이션을 개발할 수 있습니다. JDBC 구조 (출처 : https://codedragon.tistory.com/5960) 위 그림처럼 애플리케이션에서는 드라이버 관리자를 통해 데이터베이스 드라이버를 로드한 다음 해당 데이터베이스에 접속합니다. JDBC 스펙에 따라 데이터 베이스 개발 회사는 자사 제품에 접속할 수 있는 JDBC 드라이버를 제공합니다. 현재 대부분의 DBMS는 자바를 지원하고

08 웹 애플리케이션 아키텍처 (1) [내부링크]

1. 웹 애플리케이션 1) 웹 애플리케이션이란 웹 애플리케이션이란 웹 서비스를 제공하기 위해 만들어진 일종의 프로그램으로, 웹 브라우저의 URL 요청에 따라 웹 서버를 통해 실행됩니다. 웹 서비스는 여러 HTML 파일로 구성되어 있고, HTML 파일에는 화면을 구성하는 이미지 파일, css 및 js 파일 등 부가적인 컨텐츠가 포함되어 있습니다. 물론 JSP, ASP, PHP 와 같은 프로그램 요소도 웹 애플리케이션의 구성 요소에 포함됩니다. 2) 웹 애플리케이션 컨텐츠 구성 자바 웹 애플리케이션은 웹 애플리케이션 중 자바 기술이 적용된 것을 말하며, 다음과 같은 컨텐츠들로 구성됩니다. 동적 컨텐츠 단순한 텍스트가 아닌 프로그램으로서, 서비스 제공자의 의도나 사용자 및 상황에 따라 다른 내용을 제공한다. 서블릿, JSP, 빈즈, 클래식, 유틸리티 클래스 정적 컨텐츠 파일에 작성된 내용을 수정하기 전까지는 모든 사용자에게 동일한 내용을 보여준다. HTML, 이미지 보조 컨텐츠 정적 컨텐

08 웹 애플리케이션 아키텍처 (2) [내부링크]

3. 아파치 톰캣 시스템 관리 아파치 톰캣은 다른 상용 WAS 에 비해 관리 프로그램이 빈약한 편이지만 기본적인 기능은 모두 갖추고 있으므로 잘 알아두고 관리에 활용하면 좋습니다. 1) 아파치 톰캣 사용자 설정 서버 시스템은 항상 보안과 밀접한 관련이 있습니다. 대부분의 서버는 서버를 전문적으로 운영하는 공간에서 네트워크 보안이 유지되는 상태로 운영됩니다. 그러나 웹 서비스는 기본적으로 방화벽에 오픈되어 있어야 하고 언제든지 웹 애플리케이션에 접근할 수 있으므로 네트워크나 운영체제 보안 이외에도 애플리케이션에 대한 보안 설정이 필요합니다. 가장 기본이 되는 것은 사용자를 등록하고 보안이 요구되는 웹 리소스 접근에 대해 권한 관리를 하는것입니다. 톰캣 사용자 등록은 tomcat-user.xml 파일에서 합니다. 톰캣 설치 시 등록한 관리자 계정도 tomcat-user.xml 에 등록되어 있습니다. [톰캣 설치 디렉터리\conf\디렉터리] 에서 찾을 수 있으며, 이클립스의 경우 등록된

09 표현 언어와 커스텀 태그 (1) [내부링크]

1. 표현 언어 (Expression Language) 1) 표현 언어란 표현 언어는 처음 JSTL(JSP Standard Tag Library) 이 소개되었을 때 나온 것으로, MVC 패턴에 따라 뷰(View) 역할을 수행하는 JSP 를 더욱 효과적으로 만들려는 목적으로 개발되었습니다. JSP 의 데이터를 표현할 때 스크립트(<% %>) 이나 표현식(<%= %>) 혹은 <jsp:getProperty /> 등을 사용했습니다. 그런데 스크립트릿이나 표현식은 페이지 내에서 객체 선언 부분이 따로 들어가야 하고, <jsp:Property />의 경우에도 <jsp:useBean> 과 함께 사용해야 하며 단순 출력 이외의 표현은 안된다는 문제가 있었습니다. 표현 언어는 이러한 문제를 해결하고 만들어진 기술로, 빈즈 속성 값을 더욱 쉽고 제약을 덜 받는 방법으로 사용할 수 있도록 해줍니다. 표현 언어를 사용하면 코드가 복잡해지는 것을 줄일 수 있고, JSP를 일종의 템플릿 코드처럼 사용할 수

04 JSP 기본 문법 [내부링크]

1. 주석 주석은 프로그램 소스에 텍스트로 된 간단한 설명문을 넣는 것을 말합니다. JSP는 특성상 자바, HTML, JSP 코드가 섞여 있으므로 각각의 주석 처리 방법을 알아두어야 합니다. 1) HTML 주석  HTML 주석은 클라이언트로 전달됩니다. 그래서 웹 브라우저에서 [소스보기] 를 했을 때 주석 내용을 확인할 수 있습니다. 2) JSP 주석 <%-- JSP 주석입니다. --> JSP 주석은 HTML 주석과 달리 클라이언트로 전달되지 않는 주석입니다. 2. 지시어 (Directives) 지시어는 해당하는 JSP 파일의 속성을 기술하는 곳으로, JSP 컨테이너에게 해당 페이지를 어떻게 처리해야 하는지 전달하기 위한 내용을 담고 있습니다. 지시어는 크게 page, include, taglib 로 나뉩니다. 1) page 지시어 <%@ page 속성1="값1" 속성2="값2" ... %> page 지시어는 현재의 JSP 페이지를 컨테이너에서 처

05 JSP 내장 객체 (1) [내부링크]

1. JSP 내장객체의 개요 JSP 내장 객체란 JSP 내에서 선언하지 않고 사용하는 객체를 의미합니다. JSP 가 서블릿형태로 자동 변환된 코드 내에 포함되어 있는 멤버 변수, 매개 변수 등의 각종 참조 변수(객체)로 생각하면 쉬울 것입니다. 각각의 내장 객체들은 특정 클래스에 대한 인스턴스 형태로서, 컨테이너를 통해 초기화되고 특정 기능이나 정보를 제공합니다. 즉, 내장 객체는 해당 클래스의 메서드를 이용해 컨테이너가 제공하는 기능을 사용하는 것입니다. 보통 스크립트릿에서 사용하며, 내장 객체를 통해 사용자 요청을 컨트롤하거나 페이지 간의 데이터를 공유할 수 있습니다. 아래 표는 JSP 내장 객체입니다. 일반적으로 request, response, session, out, application 등이 주로 사용됩니다. 참조 변수 이름 (내장 객체) 주요 역할 request HTML 폼 요소의 선택 값 등 사용자 입력 정보를 읽기위해 사용합니다. response 사용자 요청에 댛나

05 JSP 내장 객체 (2) [내부링크]

8. [기본 실습] JSP 내장 객체 : 세션을 이용한 장바구니 기능 1) 쇼핑몰의 기본적인 흐름 ① 사용자가 로그인한다. ② 원하는 만큼 상품을 선택한다. ③ [주문] 버튼을 클릭하면 지금까지 선택했던 상품이 모두 나타난다. 2) 프로그램 소스 목록 파일 이름 역할 login.jsp 로그인하는 화면. 비밀번호 입력은 없으며, 사용자 이름을 입력하는 양식만 제공. selProduct.jsp 상품을 선택하는 화면. 리스트에서 원하는 상품을 선택하고 [추가] 버튼을 눌러 상품 추가. add.jsp selProduct.jsp 에서 선택한 상품을 세선에 추가. 선택된 데이터를 모두 저장해야 하므로 ArrayList를 이용. 상품이 추가되었다는 메시지를 보여주고 다시 selProduct.jsp 로 되돌아감. checkOut.jsp 세션이 살아 있고 하나 이상의 상품을 선택한 상태라면 선택한 상품의 목록을 보여줌. 3) 소스 코드 ① 로그인 화면 : login.jsp <%@ page langu

06 JSP와 자바빈즈 (1) [내부링크]

1. 빈즈(Beans) 개요 빈즈는 특정한 일을 독립적으로 수행하는 컴포넌트를 의미합니다. 일반적으로 컴포넌트라고 하면 다른 무언가를 만들기 위한 부품을 말합니다. 컴포넌트는 각각 독립적인 기능이 있으며, 컴포넌트 조합을 통해 다양한 형태의 결과물을 만들 수 있습니다. 1) 자바 빈즈 프로그램 관점에서는 객체지향 프로그래밍의 핵심 컨셉으로 컴포넌트 모델을 꼽을 수 있습니다. 자바에서는 POJO(Plain Old Java Object)가 기본이라고 할 수 있는데, POJO는 특정 기술이나 프레임워크에 종속적이지 않고 기본 생성자와 멤버 변수에 대한 getter/setter 메서드를 제공하고 직렬화할 수 있는 자바 클래스 입니다. 원래 자바 빈즈는 GUI 프로그램을 만들려는 컴포넌트 모델로 처음 사용 되었습니다. 즉, 창이나 버튼, 스크롤바 등 화면을 구성하는 다양한 위젯을 제작하려고 빈즈를 만들었습니다. 하지만 최근에는 EJB나 JSP 빈즈에서 '빈즈' 라는 표현을 더 많이 사용하고,

02 JSP와의 첫 만남 [내부링크]

1. JSP 개요 JSP 는 자바로 구현된 기술로서, 특히 서블릿이라는 서버 프로그래밍 기술에 기반한 웹 프로그래밍 언어입니다. 1) 서블릿과 JSP 서블릿(Servlet)은 자바를 이용한 서버 프로그래밍 기술로서, 일반 애플리케이션을 개발하기 위해 만들어진 자바를 웹 환경에서 사용하려고 등장했습니다. 서블릿은 초기의 웹 프로그래밍 기술인 CGI(Common Gateway Interface) 를 대체하려고 개발되었으나, 느린 처리 속도, 많은 메모리 요구, 불편한 화면 제어 등의 한계가 있었습니다. 그러다 썬에서 서블릿을 기반으로 한 JSP(Java Server Page)를 선보이면서 JSP는 대표적인 웹 프로그래밍 언어로 자리 잡게 되었습니다. 아래는 동일한 실행 결과를 보여주는 예를 서블릿과 JSP 로 구현한 것입니다. 프로그램 문법을 모르더라도 JSP 가 서블릿보다 더 단순하다는 것을 직관적으로 알 수 있습니다. ① 서블릿으로 구현한 코드 public class HelloWor

03 서블릿의 이해 [내부링크]

1. 서블릿 개요 1) 서블릿이란 서블릿(Servlet)은 자바 플랫폼에서 컴포넌트를 기반으로 하는 웹 애플리케이션을 개발할 때 사용하는 핵심 기술로, 장점은 다음과 같습니다. 자바를 기반으로 하므로 자바 API 를 모두 사용할 수 있다. 운영체제나 하드웨어에 영향을 받지 않으므로, 한 번 개발된 애플리케이션은 다양한 서버 환경에서도 실행할 수 있다. 웹 애플리케이션에서 효율적인 자료 공유 방법을 제공한다. 다양한 오픈소스 라이브러리와 개발도구를 활용할 수 있다. 그리고 웹 애플리케이션을 개발할 때, 서블릿을 사용하면 다음과 같은 이점이 생깁니다. MVC 패턴을 쉽게 적용할 수 있고, 컨테이너와 밀접한 서버 프로그램을 구현할 수 있다. MVC 패턴을 적용할 때 콘텐츠와 비즈니스 로직을 분리할 수 있으며, 컨트롤러와 뷰가 역할을 분담하으로서 웹 디자이너와 개발자 간에 작업을 원활하게 할 수 있다. 리스너 및 필터 서블릿 등 고급 프로그래밍 기법을 통해 더욱 효과적인 웹 애플리케이션을

01 JDBC API [내부링크]

1. JDBC API 란? JDBC(Java DataBase Connectivity) API(Application Programming Interface) 는 자바 프로그래밍 언어와 다양한 데이터 베이스 SQL(Standard Query Language) 사이에 독립적인 연결을 지원하는 표준입니다. 즉, 다양항 형태의 관계형 데이터베이스에 접속하여 자바 프로그래밍 언어와 데이터베이스 사이에 데이터를 주고받을 수 있도록 지원하는 표준 자바 응용 프로그래밍 인터페이스입니다. JDBC API 는 SQL을 이용해 자바 프로그래밍 언어로 데이터베이스 응용 프로그래밍을 작성할 수 있도록 지원합니다. JDBC API 의 가장 큰 장점은 자바 응용 프로그램이 거의 모든 데이터에 접근할 수 있도록 지원하는 것이며, 자바 가상 머신(JVM)이 설치된 모든 종류의 데이터베이스 플랫폼에서 실행될 수 있다는 것입니다. 즉, JDBC API 를 이용하게 되면 하나의 응용 프로그램만으로 어떠한 종류의 DBMS

02 MySQL [내부링크]

1. MySQL의 SQL 기본 명령문 1) 데이터 베이스 -- 데이터 베이스 생성 create database [if not exists] 데이터베이스명; create database if not exists test; -- 데이터 베이스 선택 use 데이터베이스명; use test; -- 데이터 베이스 삭제 drop database 데이터베이스명; drop database test; -- 데이터 베이스 목록 표시 show database; 2) 테이블 -- 테이블 생성 create table [if not exists] 테이블명 (열이름1 자료형, 열이름2 자료형, ...); create table customer( customer_id char(6) not null primary key, customer_name varchar(15) not null, customer_tel varchar(13), customer_addr varchar(20) ); -- 테이블 삭제 drop ta

03 JDBC 기본 프로그래밍 (1) [내부링크]

자바 JDBC API 를 이용해 데이터베이스 응용 프로그램을 구현하기 위해서는 우선 사용하고자 하는 데이터베이스와의 연결을 설정합니다. 그리고 SQL 명령문을 통해 연결된 데이터베이스에 데이터를 요청하고, 전송된 결과를 사용자에게 보여준 후, 작업이 완료되면 데이터베이스와의 연결을 끊는 과정으로 이루어집니다. 1. JDBC 프로그래밍 개발 환경 구축 ① 자바 JDK 설치 ② 데이터 베이스 설치 ③ JDBC 드라이버 설치 2. 데이터 베이스 연결하기 데이터 베이스와의 연결은 JDBC 의 DriverManager 클래스를 이용하며, 드라이버의 로딩과 데이터 베이스와의 연결의 두 단계로 이루어집니다. 1) 드라이버의 로딩 데이터 베이스에 연결하기 전에 우선 사용하려는 드라이버를 로딩해주어야 합니다. 드라이버의 로딩은 다음과 같은 코드로 이루어집니다. Class.forName("com.mysql.cj.jdbc.Driver); Class.forName() 메소드는 Class 의 정적 메소드로

03 JDBC 기본 프로그래밍 (2) [내부링크]

고객 테이블과 계좌 테이블 4. SQL 사용 예제 - 고객 정보 1) 테이블 생성 (CREATE) ① customer 테이블 생성하기 package jdbc.basic; import java.sql.Connection; import java.sql.DriverManager; import java.sql.Statement; public class CreateCustomer { public static void main(String[] args) { Connection conn = null; Statement stmt = null; String url = "jdbc:mysql://127.0.0.1:3306/banksystem"; String user = "root"; String password = "1234"; String sql = "create table if not exists customer(" + "customer_id char(6) not null primary key,"

04 JDBC 중급 프로그래밍 (1) [내부링크]

1. PreparedStatement 인터페이스 1) PreparedStatement 인터페이스의 형식 PreparedStatement 의 객체는 Statement 객체와 달리 SQL문이 생성될 때 SQL문을 인자로 넘겨주며, 인자로 넘겨진 SQL문을 미리 컴파일하여 가지고 있다가 동적으로 컬럼값을 채워 이를 DMS에게 직접 전송합니다. 이것은 DBMS가 PreparedStatement 의 SQL문을 실행할 때, PreparedStatement 의 SQL문을 컴파일하지 않고 바로 실행할 수 있다는 것을 의미합니다. PreparedStatement의 객체는 컴파일 전의 SQL문뿐만 아니라 컴파일된 SQL문도 가지고 있는 것입니다. 그래서 하나의 SQL문을 컬럼 값만 변경하여 여러 번 실행하고자 한다면, 실행할 때마다 매번 이를 해석해야 하는 Statement의 SQL문 보다는 미리 컴파일된 SQL문을 가지고 있어 이를 매번 해석할 필요가 없는 PreparedStatement 의 SQL

04 JDBC 중급 프로그래밍 (2) [내부링크]

3. 트랜잭션 트랜잭션(transaction)은 데이터 소스에 동시 액세스하는 동안 데이터의 무결성과 일관성을 유지하기 위해 사용됩니다. 트랜잭션은 모두 실행되거나 또는 취소될 수 있는 하나의 특정 단위로 수행되는 한 세트 또는 한 묶음의 SQL명령문들의 집합이며, SQL명령문들의 실행 결과가 메모리상에서만 이루어지다가 commit문에 의해 데이터베이스에 저장되게 됩니다. 데이터의 무결성과 일관성을 유지하기 위해 세트 안에 있는 SQL명령문들은 모두 성공하든지, 아니면 성공한 명령문이 하나도 없어야만 합니다. 1) Auto-commit 데이터베이스는 트랜잭션을 시작할 때 이를 명시적으로 기술하여 시작합니다. 예를 들어 MySQL 의 경우 "start transaction" 이라는 SQL문을 사용하여 트랜잭션 시작을 명시하고 일련의 묶음으로 된 SQL명령문들을 수행한 후 commit문을 사용해 묶음 안에 있는 모든 SQL문을 실행하든지, 아니면 rollback문을 사용하여 묶음 안에

01 자바 웹 프로그래밍 개발환경 구축 [내부링크]

1. JSP 개발 환경 개요 JSP 개발환경을 구축하려면 여러 개발 툴을 상호 연동하여 설치해야 합니다. 아래 표는 JSP 개발 환경 구축을 위해 필요한 프로그램을 정리한 내용입니다. 항목 필요 프로그램 자바 개발환경 JDK JSP 운영환경(서블릿 컨테이너) 아파치 톰캣 통합 개발 환경 이클립스 2. JSP 개발 환경 구축 1) 자바 개발환경 구축 : JDK Java JDK(Java Development Kit)은 자바 실행환경과 컴파일 도구를 포함한 개발자 도구로써, 자바 소스를 클래스 파일러 컴파일 하는 컴파일러 및 디버거, JavaDoc 등 개발에 필요한 유틸리티로 구성되어 있습니다. 물론 자바 실행의 기반이 되는 자바 가상머신(JVM, Java Virtural Machine)과 기본적으로 제공되는 다양한 클래스 집합인 API, 자바 프로그램을 실행하기 위한 환경인 JRE(Java Runtime Environment)도 포함되어 있습니다. **JDK 는 오라클 홈페이지에서 다운

01 자바 시작하기 [내부링크]

1. 프로그래밍 언어와 자바 프로그램은 프로그래밍 언어로 작성된 소스 파일을 기계어로 컴파일(compile)한 뒤 실행됩니다. 프로그램 실행 과정 (출처 : https://www.slideserve.com/mayes/1-5608584) 1) 자바 소개 자바는 1995년 썬 마이크로시스템즈에서 발표한 후, 가장 성공한 프로그래밍 언어로서 전세계적으로 다양한 분야에서 사용되고 있습니다. 안드로이드 애플리케이션뿐만 아니라 웹 사이트를 개발하는 핵심 언어로 사용되며, 모든 운영체제에서 실행 가능한 데스크탑 애플리케이션 개발에도 사용할 수 있습니다. 자바는 오라클에서 라이선스를 가지고 있습니다. 오라클은 자바 개발 도구(JDK: Java Development Kit)를 배포하여 자바로 프로그램을 쉽게 개발할 수 있도록 기술적 지원을 하고 있습니다. 자바는 다음과 같은 특징을 가지고 있습니다. 모든 운영체제에서 실행 가능 객체 지향 프로그래밍 메모리 자동 관리 풍부한 무료 라이브러리 2) 자바

02 변수와 타입 [내부링크]

1. 변수 변수는 값을 저장할 수 있는 메모리의 특정 번지에 붙이는 이름입니다. 프로그램은 변수를 통해 메모리의 특정 번지에 값을 저장하고 읽을 수 있습니다. 메모리에 값을 저장하고 싶다면 변수를 선언하고 변수에 값을 지정하면 됩니다. 그러면 메모리의 어디에 저장하고, 어떤 방식으로 저장할지는 프로그래밍 언어와 운영체제가 정합니다. 자바의 경우 JVM이 하는 일입니다. 1) 변수 선언 변수 선언은 어떤 타입(type)의 데이터를 저장할 것인지 그리고 변수 이름이 무엇인지를 결정합니다. 변수 선언은 아래와 같이 합니다. 타입 변수이름; int age; double value; 변수 이름은 자바 언어에서 정한 명명 규칙을 따라야하는데, 다음과 같습니다. 첫 번째 글자는 문자이거나 '$', '_' 이어야 하고, 숫자로 시작할 수 없습니다. 영어 대소문자를 구분합니다. 첫 문자는 영어 소문자로 시작하되, 다른 단어가 붙을 경우 첫 문자를 대문자로 합니다. (카멜 케이스) 문자 수(길이)의

03 연산자 [내부링크]

1. 연산자와 연산식 연산에서 사용되는 기호를 연산자라고 하고, 연산자와 함께 사용되는 데이터를 피연산자라고 하며, 연산자와 피연산자를 이용하여 연산의 과정을 기술한 것을 연산식 이라고 합니다. 1) 연산자의 종류 자바 언어에서는 아래표와 같이 다양한 연산자를 제공하고 있습니다. 연산자 종류 연산자 피연산자 수 산출값 기능 산술 +, -, *, /, % 이항 숫자 사칙연산 및 나머지 계산 부호 +, - 단항 숫자 음수와 양수의 부호 문자열 + 이항 문자열 두 문자열을 연결 대입 =, +=, -=, *=, /=, %= 이항 다양 우변의 값을 좌변의 변수에 대입 증감 ++, -- 단항 숫자 1만큼 증가/감소 비교 ==, !=, <, >, <=, >=, instanceof 이항 boolean 값의 비교 논리 !, &, |, &&, || 단항, 이항 boolean 논리 부정, 논리곱, 논리합 조건 (조건식) ? A : B 삼항 다양 조건식에 따라 A 또는 B 중 하나 선택 보통 연산식의 값

04 조건문과 반복문 [내부링크]

1. 조건문 : if문, switch문 조건문은 조건식에 따라 실행문을 실행하기 위해 사용됩니다. 조건문의 종류로는 if문, switch 문이 있습니다. if 문은 조건식의 결과가 true 냐 false 이냐에 따라, switch 문은 변수의 값에 따라 실행문이 결정됩니다. 1) if 문 if 문은 조건식의 결과에 따라 블록 실행 여부가 결정됩니다. 조건식에는 boolean 값만 올 수 있습니다. if (조건식) { 실행문1; 실행문2; ... } int score = 90; if(score >= 70) { System.out.println("합격"); } if (score < 70) { System.out.println("불합격"); } 2) if-else 문 if 문은 else 블록과 함께 사용되어 조건식의 결과에 따라 실행 블록을 선택합니다. if 문의 조건식이 true 이면 if 문의 블록이 실행되고, false 이면 else 블록이 실행됩니다. if (조건식) { 실행문A;

05 참조 타입 (1) [내부링크]

1. 참조 타입과 참조 변수 자바 타입은 크게 기본 타입(primitive type)과 참조 타입(reference type)으로 분류됩니다. 기본 타입 정수 byte, char, short, int, long 실수 float, double 논리 boolean 참조 타입 배열 열거 클래스 인터페이스 1) 기본 타입과 참조 타입 기본 타입인 byte, char, short, int, long, float, double, boolean 변수는 실제 값을 변수 안에 저장하지만, 참조 타입인 배열, 열거, 클래스, 인터페이스 변수는 메모리의 번지를 변수 안에 저장합니다. // 기본 타입 변수 int age = 27; double price = 100.5; // 참조 타입 변수 String name = "체리"; String hobby= "인방보기"; 메모리에서 위 변수들이 갖는 값을 그림으로 표현하면 아래와 같습니다. 메모리 2) 메모리 사용 영역 JVM은 운영체제에서 할당받은 메모리 영역

05 참조 타입 (2) [내부링크]

2. 배열 1) 배열이란? 배열은 같은 타입의 데이터를 연속된 공간에 나열하고, 각 데이터에 인덱스를 부여해 놓은 자료구조입니다. 배열은 다음과 같은 특징을 가지고 있습니다. 배열은 같은 타입의 데이터만 저장할 수 있습니다. 한 번 생성된 배열은 길이를 늘리거나 줄일 수 없습니다. 2) 배열 선언 배열 선언은 다음과 같은 형식으로 작성합니다. 타입[] 변수; int[] intArray; double[] doubleArray; String[] strArray; 3) 배열 생성 배열 객체를 생성하려면 값 목록을 이용하거나 new 연산자를 이용합니다. ① 값 목록으로 배열 생성 값의 목록으로 배열 객체를 생성할 때는 배열 변수를 선언과 동시에 값을 할당해야 합니다. 타입[] 변수 = { 값0, 값1, 값2, ... }; String[] names = { "이순신", "김유신", "홍길동" }; System.out.println(names[0]); System.out.println(name

17 모델2 방식으로 효율적으로 개발하기 (1) [내부링크]

1. 웹 애플리케이션 모델 일반적으로 어떤 일을 맡아 진행하게 되면 기존에 주로 사용했던 방법이나 방식을 따릅니다. 웹 애플리케이션을 개발할 때도 마찬가지 입니다. 일일이 처음부터 새로 개발하는 것이 아니라 기존 웹 애플리케이션 개발 방법이나 방식을 따릅니다. 지금 웹 애플리케이션 개발은 일반적으로 많이 사용하는 표준화 소스 구조를 만들어 개발을 진행합니다. 이러한 표준화 소스 구조를 웹 애플리케이션 모델이라고 합니다. 웹 애플리케이션 모델의 종류에는 모델1과 모델2가 있습니다. 1) 모델1 방식 모델 1 동작 방식 (출처 : https://hleee.medium.com/모델-2-방식-개발-df8da43d1ff3) 모델1 방식은 데이터베이스 연동과 같은 비즈니스 로직 작업과 그 작업 결과를 나타내주는 화면 작업을 동일한 JSP 에서 수행하는 방식입니다. 즉, 모든 클라이언트의 요청과 비즈니스 로직 처리를 JSP 가 담당하는 구조입니다. 모델 1방식은 기능 구현이 쉽고 편리하다는 장점

17 모델2 방식으로 효율적으로 개발하기 (2) [내부링크]

3. MVC 를 이용한 회원 관리 1) 회원 정보 조회 기능 구현 아래 그림은 MVC 로 구현한 회원 정보 조회 기능을 실행하는 과정입니다. 회원 정보 조회 ① 브라우저에 /mem.do 로 요청합니다. ② 서블릿 MemberController 가 요청을 받아 MemberDAO 의 listMembers() 메서드를 호출합니다. ③ MemberDAO 의 listMembers() 메서드에서 SQL 문으로 회원 정보를 조회한 후 회원 정보를 MemberVO 에 설정하여 반환합니다. ④ 다시 MemberController 에서는 조회한 회원 정보를 회원 목록창(listMembers.jsp)으로 포워딩합니다. ⑤ 회원 목록창에서 포워딩한 회원 정보를 목록으로 출력합니다. 회원 정보 조회 기능을 실제로 구현해 보겠습니다. ① 프로젝트 pro17 에 sec01.ex01 패키지를 만든 후, MemberController, MemberDAO, MemberVO 클래스를 추가합니다. 그리고 test01

14 표현 언어와 JSTL (3) [내부링크]

8. 다국어 태그 라이브러리 사용하기 JSP 에서 다국어 태그 라이브러리를 사용하면 다국어 기능을 쉽게 구현할 수 있습니다. 아래 표는 JSP 에서 다국어 기능을 구현하는 태그들입니다. 태그 설명 <fmt:setLocale> Locale(언어)을 지정합니다. <fmt:message> 지정한 언어에 해당하는 언어를 표시합니다. <fmt:setBundle> 사용할 번들을 지정합니다. <fmt:setParam> 전달할 매개변수를 지정합니다. <fmt:requestEncoding> 요청 매개변수의 문자 인코딩을 지정합니다. 9. 한글을 아스키 코드로 변환하기 다국어 기능을 사용하려면 미리 한글을 아스키 코드로 변환한 형태로 저장하고 있다가 요청 시 이 아스키 코드를 다시 한글로 변환해서 표시합니다. 1) Properties Editor 설치하기 이클립스에 한글을 아스키 코드로 변환하는 기능을 제공하는 Properties Editor 플러그인을 설치합니다. ① 이클립스 상단 메뉴에서 Help

15 JSP 페이지를 풍부하게 하는 오픈 소스 기능 [내부링크]

JSP 는 대부분의 기능을 오픈 소스로 제공합니다. 대표적인 기능이 파일 업로드와 파일 다운로드 기능이며, 이 외에도 이메일 등 수 많은 오픈 소스 라이브러리를 제공하고 있습니다. 1. JSP 의 파일 업로드 및 다운로드 기능 1) 파일 라이브러리 설치 파일 업로드 및 다운로드를 하기 위해서는 2개의 라이브러리 파일이 필요합니다. 각각 라이브러리는 Apache Commons 사이트에서 다운로드 받을 수 있습니다. fileupload io 2개의 라이브 러리를 다운로드 받아 압축을 푼뒤, 프로젝트 pro15 의 WEB-INF 하위에 있는 lib 폴더에 압축을 풀어서 나온 .jar 파일을 넣습니다. 2) 파일 관련 API 파일 라이브러리에서 제공하는 클래스는 DiskFileItemFactory, ServletFileUpload 가 있습니다. 아래 표는 DiskFileItemFactory 클래스가 제공하는 메서드입니다. 메서드 기능 setRepository() 파일을 저장할 디렉터리를 설

16 HTML5와 제이쿼리 (1) [내부링크]

웹 브라우저는 웹 사이트를 만드는 프로그래밍 언어인 HTML, CSS, JavaScript 로 이루어진 구문만 인식하여 화면에 나타냅니다. 그리고 JSP는 웹 사이트 화면을 구성하는 HTML 을 좀 더 동적으로 구현하기 위해 도입된 기능입니다. HTML 기능도 꾸준히 업그레이드되어 지금은 HTML5 버전이 사용되고 있습니다. 1. HTML5 주요 개념 HTML5 는 HTML4 에서는 지원하지 않는 동영상이나 오디오 기능 그리고 지리 위치 정보 등을 지원합니다. 플러그인을 따로 설치하지 않아도 화려한 그래픽 효과를 구현할 수 있으며, 운영체제에 상관없이 스마트폰, 태블릿 같은 모바일 환경에서도 기능을 구현할 수 있습니다. 아래 표는 HTML5 에서 제공하는 기능들입니다. 기능 설명 Web Form 입력 형태를 보다 다양하게 제공합니다. Video 동영상 재생을 위한 API 를 제공합니다. Audio 음성 재생을 위한 API 를 제공합니다. Offline Web 인터넷 연결이 되지 않은

16 HTML5와 제이쿼리 (2) [내부링크]

3. 제이 쿼리 주요 개념 제이쿼리란 화면의 동적 기능을 자바스크립트보다 좀 더 쉽고 편리하게 개발할 수 있게 해주는 자바스크립트 기반 라이브러리입니다. 다음은 제이쿼리의 주요 특징입니다. CSS 선택자를 사용해 각 HTML 태그에 접근해서 작업하므로 명료하면서도 읽기 쉬운 형태로 표현할 수 있습니다. 메서드 체인 방식으로 수행하므로 여러 개의 동작이 한 줄로 나열되어 코드가 불필요하게 반복되는 것을 피할 수 있습니다. 풍부한 플러그인을 제공하므로 이미 개발된 많은 플러그인을 쉽고 빠르게 이용할 수 있습니다. 크로스 브라우징을 제공하므로 브라우저 종류에 상관 없이 동일하게 기능을 수행합니다. 제이 쿼리를 사용하는 방법으로는 두 가지가 있습니다. www.jquery.com 에서 라이브러리를 다운로드해서 사용하기 네트워크로 CDN 호스트를 설정해서 사용하기 HTML 이나 JSP 에서 제이 쿼리 CDN 호스트를 설정하는 방법은 아래와 같습니다. <!-- 가장 최신 버전의 제이쿼리 사용하기

12 JSP 스크립트 요소 기능 (2) [내부링크]

7. 내장 객체(내장 변수) 기능 JSP 페이지의 내장 객체(내장 변수)란 JSP 가 서블릿으로 변환될 때 컨테이너가 자동으로 생성시키는 서블릿 멤버 변수를 말합니다. 즉, 서블릿으로 구현 시 자주 사용했던 객체를 서블릿으로 변환 시 컨테이너가 자동으로 생성하여 사용하게끔 제공하는 것입니다. JSP 파일이 서블릿으로 변환되었을 때 _jspService() 메서드에 생성된 내장 객체를 저장하는 내장 변수가 선언된 코드입니다. _jspService() 메서드에 생성된 내장 객체(변수)를 저장하는 변수 선언 아래 표는 JSP 페이지에서 제공하는 여러 가지 내장 객체를 정리한 것입니다. 내장 객체 서블릿 타입 설명 request javax.servlet.http.HttpServletRequest 클라이언트의 요청 정보 저장 response javax.servlet.http.HttpServletResponse 응답 정보 저장 out javax.servlet.jsp.JspWriter JSP 페

13 자바 코드를 없애는 액션 태그 [내부링크]

JSP는 스크립트릿의 자바 코드를 사용하지 않고도 쉽게 화면을 구현할 수 있도록 태그 형태로 기능을 제공하기 위해 액션 태그를 제공하게 되었습니다. 즉, 액션 태그들이 자바 코드를 대신하게 된 것입니다. 아래 표는 JSP 의 여러 가지 액션 태그입니다. 이름 형식 설명 인클루드 액션 태그 <jsp:include> 이미 있는 JSP 를 현재 JSP 에 포함하는 태그 포워드 액션 태그 <jsp:forward> 서블릿에서 RequestDispatcher 클래스의 포워드 기능을 대신하는 태그 유즈빈 액션 태그 <jsp:useBean> 객체를 생성하기 위한 new 연산자를 대신하는 태그 셋프로퍼티 액션 태그 <jsp:setProperty> setter 를 대신하는 태그 겟프로퍼티 액션 태그 <jsp:getProperty> getter 를 대신하는 태그 1. 인클루드 액션 태그 사용하기 인클루드 액션 태그(Include Action Tag)는 인클루드 디렉티브 태그처럼 화면을 분할해서 관리할

14 표현 언어와 JSTL (1) [내부링크]

1. 표현 언어란? JSP 의 발전 과정을 한 번 더 정리해 보겠습니다. 초기에는 HTML 태그를 중심으로 자바를 이용해 화면을 구현했습니다. 그런데 화면에 대한 요구 사항이 복잡해지면서 자바 코드를 대체하는 액션 태그가 등장했습니다. 이어서 JSP 2.0 에서는 페이지 안에서 복잡한 자바 코드를 제거하는 쪽으로 발전했습니다. 그리고 현재 JSP 페이지는 스크립트 요소보다는 표현 언어(EL, Expression Language)와 JSTL(JSP Standard Tag Library) 을 사용해서 구현합니다. 표현 언어는 자바 코드가 들어가는 표현식을 좀 더 편리하게 사용하기 위해 JSP 2.0 부터 도입된 데이터 출력 기능입니다. 표현식에는 자바 변수나 여러 가지 자바코드로 된 식을 사용하는데, 표현식의 자바 코드가 복잡해짐에 따라 JSP 2.0 부터는 자바 코드로 출력하는 표현식을 대체하기 위해 표현 언어라는 것이 등장했습니다. 표현 언어의 특징은 다음과 같습니다. 기존 표현식보

14 표현 언어와 JSTL (2) [내부링크]

4. 커스텀 태그 JSP 페이지의 기능 중 액션 태그나 표현 언어를 사용하더라도 조건식이나 반복문에서는 여전히 자바 코드를 사용하고 있습니다. 이러한 자바 코드를 제거하기 위해 커스텀 태그가 등장했습니다. 커스텀 태그란 JSP 페이지에서 자주 사용하는 자바 코드를 대체하기 위해 만든 태그입니다. 커스탬 태그의 종류는 다음과 같이 2가지가 있습니다. JSTP (JSP Standard Tag Library) JSP 페이지에서 가장 많이 사용하는 기능을 태그로 제공 JSTL 라이브러리를 따로 설치해서 사용 개발자가 만든 커스텀 태그 개발자가 필요에 의해 만든 태그 스프링프레임워크에서 미리 만들어서 제공 5. JSP 표준 태그 라이브러리 (JSTL) JSTL(JSP Standard Tag Library) 이란 커스텀 태그 중 가장 많이 사용되는 태그를 표준화하여 라이브러리로 제공하는 것을 말합니다. JSTL 에서 지원하는 태그는 아래와 같습니다. 라이브러리 세부 기능 접두어 관련 URI 코

09 쿠키와 세션 알아보기 (3) [내부링크]

5. encodeURL() 사용법 만약 브라우저에서 쿠키 기능을 사용할 수 없게 설정했다면 쿠키 기능은 물론 세션 기능도 사용할 수 없습니다. 이럴 때는 encodeURL() 메서드를 이용해 직접 서버에서 브라우저로 응답을 보낸 후, URL Rewriting 방법을 이용해 jsessionid 를 서버로 전송하여 세션 기능을 사용하면 됩니다. 1) 브라우저에서 쿠키 사용 금지하기 ① 크롬 브라우저의 오른쪽 상단에서 더보기 아이콘 클릭 후, 설정을 클릭합니다. 더보기 아이콘 클릭 후 설정 클릭 ② 왼쪽 탭에 개인 정보 및 보안 메뉴를 클릭한 후, 쿠키 및 기타 사이트 데이터를 선택합니다. 쿠키 및 기타 사이트 데이터 선택 ③ 가장 하단에 쿠키를 사용할 수 없는 사이트에 localhost:8090 사이트를 추가합니다. 쿠키 차단 사이트 설정 2) encodeURL() 메서드를 이용한 세션 사용 실습 세션 쿠키를 사용하지 않고, encodeURL() 메서드를 이용해 jsessionId의 세

10 서블릿의 필터와 리스너 기능 [내부링크]

1. 서블릿 속성과 스코프 서블릿 속성은 서블릿 API 클래스(ServletContext, HttpSession, HttpServletRequest)에 저장되는 객체(정보) 입니다. 서블릿 API의 setAttribute() 로 바인딩하고, 필요할 때 getAttribute() 로 바인딩된 속성을 가져옵니다. 그리고 removeAttribute() 를 이용해 속성을 서블릿 API에서 제거합니다. 서블릿의 스코프(Scope)는 서블릿 API에 바인딩된 속성에 대한 접근 범위를 의미합니다. ServletContext 에 바인딩된 속성을 애플리케이션 전체에서 접근할 수 있고, HttpSession 에 바인딩된 속성은 해당 브라우저에만 접근할 수 있고, HttpServeltRequest 는 해당 요청/응답에 대해서만 접근할 수 있습니다. 스코프는 로그인 상태 유지 기능, 장바구니 기능, MVC의 Model과 View의 데이터 전달 기능을 갖습니다. 아래 표는 스코프의 종류와 특징을 정리한

11 JSP 정의와 구성 요소 [내부링크]

1. JSP 등장 배경 초기 웹 프로그래밍은 서블릿을 이용해서 구현했습니다. 그런데 인터넷 사용자가 폭발적으로 증가하고 사용자에게 보여주는 화면의 기능이나 구성이 복잡해짐에 따라 화면 요구 사항이 점점 늘어났습니다. 기존 서블릿에서 화면을 구현할 때는 서블릿의 응답 기능을 이용했습니다. 즉, pintlin() 같은 자바 코드와 함께 HTML 태그를 사용해 화면을 구성해 브라우저로 전송하였습니다. 그런데 화면 구성이 복잡해짐에 따라 디자이너의 역할이 커지기 시작했는데, 디자이너는 개발자와 달리 자바 코드에 익숙하지 않은 경우가 많아 화면 기능 구현 시 많은 불편함이 있어습니다. 그래서 서블릿의 기능 중 별도로 화면 기능을 디자이너가 작업하기 쉽게 하기 위해 JSP 가 등장했습니다. 1) 서블릿으로 화면 구현 시 문제점 서블릿은 아래 코드처럼응답 기능을 이용해 화면을 구현합니다. ... @WebServlet("/login") public class LoginServlet extends

12 JSP 스크립트 요소 기능 (1) [내부링크]

HTML 은 컨테이너 작업 없이 바로 브라우저로 전송되어 화면을 구현합니다. 그래서 조건에 따라 화면을 동적으로 구성할 수 없습니다. 하지만 JSP 는 컨테이너에서 자바로 변환되는 과정을 거치므로 JSP에서 제공하는 스크립트 요소를 사용하면 조건이나 상황에 맞게 HTML 태그를 선택적으로 사용할 수 있습니다. 즉, 화면을 동적으로 구성할 수 있습니다. 1. JSP 스크립트 요소 JSP 스크립트 요소(Scriptiong Element)란 JSP 페이지에서 여러 가지 동적인 처리를 제공하는 기능으로, <% %> 기호 안에 자바 코드로 구현합니다. 스크립트 요소의 종류는 다음과 같이 세 가지 입니다. 스크립트 요소 설명 선언문 (Declaration Tag) JSP 에서 변수나 메서드를 선언할 때 사용합니다. <%! %> 스크립트릿 (Scriptlet) JSP 에서 자바 코드를 작성할 때 사용합니다. <% %> 표현식 (Expression Tag) JSP 에서 변수의 값을 출력할 때 사용

07 서블릿 비즈니스 로직 처리 (2) [내부링크]

3. DataSource 이용해 데이터베이스 연동하기 이전 실습에서 회원 테이블에서 회원 정보를 조회하는 과정을 실슴해 봤습니다. 이러한 데이터베이스 연동 과정은 웹 애플리케이션이 필요할 때마다 데이터베이스에 연결하여 작업하는 방식입니다. 그런데 이런 식으로 필요할 때마다 연동해서 작업하는 경우, 데이터 베이스 연결에 시간이 많이 걸린다는 문제점이 생깁니다. 이 문제를 해결하기 위해 현재는 웹 애플리케이션이 실행됨과 동시에 연동할 데이터베이스와의 연결을 미리 설정해 둡니다. 그리고 필요할 때마다 미리 연결해 놓은 것을 이용해 빠르게 데이터베이스와 연동하여 작업을 합니다. 이렇게 미리 데이터베이스와 연결시킨 상태를 유지하는 기술을 커넥션 풀(ConnectionPool)이라고 부릅니다. 1) 커넥션풀 동작 과정 커넥션 풀의 동작 과정 (출처 : https://codevang.tistory.com/206) 톰캣 컨테이너는 자체적으로 ConnectionPool 기능을 제공합니다. 톰캣 실행

08 서블릿 확장 API 사용하기 (1) [내부링크]

1. 서블릿 포워드 기능 사용하기 프로그램을 실행하다 보면 서블릿끼리 또는 서블릿과 JSP 를 연동해서 작업해야하는 경우가 있습니다. 예를 들어 쇼핑몰의 경우, 상품 관리 서블릿과 조회된 상품을 화면에 표시하는 JSP 는 각각 따로 존재합니다. 따라서 사용자가 상품 조회를 요청하면, 상품 관리 서블릿은 데이터베이스에 상품 정보를 조회한 후 다시 JSP 에게 전달하여 상품 정보를 표시합니다. 이처럼 하나의 서블릿에서 다른 서블릿이나 JSP와 연동하는 방법을 포워드(forward) 라고 합니다. 포워드 기능이 사용되는 용도는 여러 가지 이며 요약하면 다음과 같습니다. 요청에 대한 추가 작업을 다른 서블릿에게 수행하게 합니다. 요청에 포함된 정보를 다른 서블릿이나 JSP 와 공유할 수 있습니다. 요청에 정보를 포함시켜 다른 서블릿에 전달할 수 있습니다. 모델2 개발 시, 서블릿에서 JSP로 데이터를 전달하는데 사용됩니다. 한마디로 포워드 기능은 서블릿에서 다른 서블릿이나 JSP 로 요청을

08 서블릿 확장 API 사용하기 (2) [내부링크]

5. ServletContext 와 ServletConfig 사용법 1) ServletContext 클래스 ServletContext 클래스는 톰캣 컨테이너 실행 시 각 컨텍스트(웹 애플리케이션)마다 한 개의 ServletContext 객체를 생성합니다. 그리고 톰켓 컨테이너가 종료되면 ServletContext 객체도 소멸됩니다. ServletContext 객체는 웹 애플리케이션이 실행되면서 애플리케이션 전체의 공통 자원이나 정보를 미리 바인딩해서 서블릿들이 공유하여 사용합니다. ServletContext 클래스의 특징은 다음과 같습니다. javax.servlet.ServletContext 로 정의되어 있습니다. 서블릿과 컨테이너 간의 연동을 위해 사용합니다. 컨텍스트(웹 애플리케이션)마다 하나의 ServletContext 가 생성됩니다. 서블릿끼리 데이터를 공유하는데 사용합니다. 컨테이너 실행 시 생성되고, 컨테이너 종료 시 소멸됩니다. ServletContext 가 제공하는 기

09 쿠키와 세션 알아보기 (1) [내부링크]

1. 웹 페이지 연결 기능 (세션 트래킹) 보통 웹 프로그램에서 사용되는 데이터는 서블릿의 비즈니스 로직 처리 기능을 이용해 데이터베이스에서 가져옵니다. 동시 사용자 수가 많아지면 데이터 베이스 연동 속도가 느려지게 됩니다. 그래서 필요에 따라 데이터는 클라이언트 PC 나 서버의 메모리에 저장해두고 사용하면 좀 더 빠르게 실행시킬 수 있습니다. 웹 사이트를 이용하는 일반 사용자들은 로그인 상태를 각각의 웹 페이지들이 자동으로 알고 있을 것이라고 생각할 것입니다. 하지만 실제 HTTP 프로토콜 방식으로 통신하는 웹 페이지들은 서로 어떤 데이터도 공유하지 않습니다. 사용자 입장에서 웹 페이지 사이의 상태나 데이터를 공유하려면 개발자가 세션 트래킹(Session Tracking)이라는 웹 페이지 연결 기능을 구현해야 합니다. HTTP 프로토콜은 서버-클라이언트 통신 시 아래 그림과 같이 statelesss 방식으로 통신합니다. stateless (출처 : https://hanamon.kr

09 쿠키와 세션 알아보기 (2) [내부링크]

3. 쿠키를 이용한 웹 페이지 연동 기능 쿠키(Cookie)란 웹 페이지들 사이의 공유 정보를 클라이언트 PC에 저장해 놓고 필요할 때 여러 웹 페이지들이 공유해서 사용할 수 있또록 매개 역할을 하는 방법입니다. 쿠키의 특징은 다음과 같습니다. 정보가 클라이언트 PC 에 저장됩니다. 저장 정보 용량에 제한이 있습니다. (4KB) 보안이 취약합니다. 클라이언트 브라우저에서 사용 유무를 설정할 수 있습니다. 도메인당 쿠키가 만들어집니다. 쿠키는 클라이언트 PC 에 정보를 저장해서 사용하므로 보안에 취약합니다. 따라서 쿠키는 주로 보안과 무관한 경우에 한해 사용합니다. 쿠키는 아래와 같이 두 종류로 나눌 수 있습니다. 속성 Persistance 쿠키 Session 쿠키 생성 위치 파일로 생성 브라우저 메모리에 생성 종료 시기 쿠키를 삭제하거나 쿠키 설정값이 종료된 경우 브라우저를 종료한 경우 최초 접속시 전송 여부 최초 접속 시 서버로 전송 최초 접속시 서버로 전송되지 않음 용도 로그인

06 서블릿 기초 (3) [내부링크]

8. 서블릿을 이용한 여러 가지 실습 예제 실습용 HTML 파일을 따로 저장하는 폴더를 만들도록 하겠습니다. src/main/webapp 폴더 밑에 test01 폴더를 생성합니다. 폴더 구조 1) 실습 예제 1: 서블릿에 로그인 요청 시 유효성 검사하기 ① test01 폴더에 login.html 파일을 만들고, 아래와 같이 작성합니다. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>로그인 창</title> </head> <body> <form name="frmLogin" method="post" action="/pro06/loginTest" enctype="UTF-8"> 아이디 : <input type="text" name="user_id" /><br /> 비밀번호 : <input type="password" name="user_pw" /><br /> <input type="submit" value="로그인" /> <inp

07 서블릿 비즈니스 로직 처리 (1) [내부링크]

1. 서블릿의 비즈니스 로직 처리 방법 웹 프로그램은 클라이언트의 요청에 대해서 비즈니스 로직 처리 기능을 이용해 데이터 저장소에서 데이터를 조회한 후 서블릿의 응답 기능을 이용해 클라이언트에게 결과를 전송합니다. 예를 들어 도서 쇼핑몰 사이트에서 책 제목을 검색창에 입력하고 검색 버튼을 누르면 책 제목이 서블릿으로 전송됩니다. 그럼 서블릿은 책 제목을 전송 받아 책 제목에 대한 정보를 데이터 베이스 연동 기능을 이용해 조회합니다. 그리고 조회한 결과를 서블릿 응답 기능을 이용해 클라이언트 브라우저에 전송하여 결과를 보여줍니다. 서블릿 비즈니스 로직 처리 작업이란 서블릿이 클라이언트로부터 요청을 받으면, 그 요청에 대한 작업을 수행하는 것을 의미합니다. 서블릿의 비즈니스 작업의 대표적인 예는 아래와 같은 것들이 있습니다. 웹 사이트 회원 등록 요청 처리 작업 웹 사이트 로그인 요청 처리 작업 쇼핑몰 상품 주문 처리 작업 아래 그림은 서블릿의 비즈니스 처리 과정을 나타낸 것입니다. 서

06 서블릿 기초 (2) [내부링크]

5. 웹 브라우저에서 서블릿으로 데이터 전송하기 웹 브라우저에서 서블릿으로 데이터를 전송하는 방식을 알아보겠습니다. 1) GET/POST 전송 방식 웹 브라우저에서 서블릿으로 전송하는 방법은 크기 GET 방식과 POST 방식이 있습니다. 환율 계산기 결과 화면 이전에 실습한 환율 계산기 화면의 주소창을 보면 물음표(?) 뒤에 입력된 값이 URL 주소 뒤에 붙어 있습니다. 이렇게 URL 주소에 데이터를 붙여서 전송하는 방식을 GET 방식이라고 합니다. GET 방식으로 데이터를 전송할 경우에는 전송한 데이터가 노출되므로 보안에 취약합니다. 반면에 POST 방식은 전송한 데이터를 숨겨서 전송하기 때문에 보안성이 좋습니다. 즉 GET 방식은 보안과 관련 없는 간단한 데이터를 쉽게 전송할 수 있고, POST 방식은 보안과 관련된 데이터를 전송하는데 많이 사용됩니다. 아래 표는 GET 방식과 POST 방식을 비교하여 정리한 내용입니다. 요청 방법 설명 GET 방식 서블릿에 데이터를 전송할 때,

01 프런트 엔드 개발이란? [내부링크]

과거의 웹 사이트가 단순히 정보만 제공했다면, 현재는 사용자들이 적접 컨텐츠를 생산하고 소비하는 공유의 장이 되었습니다. 나아가 AI 와 결합해 개인 맞춤 서비스까지 제공하는 수준으로 발전했습니다. 이러한 웹의 발전으로 클라이언트 영역의 복잡도가 높아졌고, 이에 대한 전문성과 중요성이 부각되기 시작했습니다. 그 결과 클라이언트 영역 개발(프런트엔드)과 서버 개발(백엔드)이 완전히 분리되었습니다. 1. 정의 프런트 엔드 개발은 클라이언트 영역(PC와 스마트폰 같이 사용자가 서비스를 접하는 영역)에서 서비스 사용자와 대화하는 인터페이스(UI) 를 개발하는 것이며, 다음과 같은 작업들을 포함합니다. 사용자가 입력한 데이터를 비지니스 로직에 따라 처리합니다. 서버와 통신해 가져온 데이터를 출력합니다. 디자인을 적용하여 스타일링합니다. 프런트 엔드 개발의 궁극적인 목표는 서비스를 이용하는 사용자의 접근성과 편의성 증진입니다. 프런트엔드 개발자라면 어떻게 하면 사용자에게 더 편리하고 빠른 환경

02 HTML과 CSS [내부링크]

HTML 과 CSS 는 웹 페이지를 만들 때, 가장 대중적으로 사용되는 핵심 언어입니다. 프런트 엔드 개발을 집 짓는 것에 비유한다면 HTML 은 기둥을 만들고 CSS 는 꾸미는 역할을 하며, 자바스크립트는 여러 시설을 동작하게 한다고 할 수 있습니다. 1. HTML HTML 은 Hyper Text Markup Language 의 약어로 마크업 구성에 가장 많이 사용되는 언어입니다. 1) HTML 요소 구성 살펴보기 HTML 은 구성에 맞지 않게 요소를 작성하더라도 에러 없이 요소가 렌더링 되고 에러 또한 노출되지 않는 느슨한 문법을 가지고 있습니다. 그래서 표준을 준수하지 않고 코드를 작성하면, 예상하지 못한 문제가 발생해 유지 보수 비용이 커질 수 있으니 항상 주의하며 코드를 작성해야 합니다. HTML 은 크게 Content(내용), Start Tag(시작 태그), End Tag(종료 태그) 3가지로 나뉘며 이 3가지를 합쳐 Element(요소) 라고 부릅니다. <start ta

06 서블릿 기초 (1) [내부링크]

1. 서블릿의 세 가지 기본 기능 톰캣과 같은 WAS(Web Application Server)가 처음 나왔을 때, 웹 브라우저 요청을 스레드 방식으로 처리하는 기술이 서블리이었습니다. 모든 웹 프로그램은 서블릿 기능을 뼈대로 하여 동작합니다. 따라서 서블릿을 잘 이해하고 나면 전체 웹 프로그램이 어떤 식으로 동작하는지 쉽게 이해할 수 있습니다. 1) 서블릿 기본 기능 수행 과정 서블릿이 수행하는 세가지 주요 기능은 아래와 같습니다. 클라이언트로부터 요청을 받습니다. 데이터베이스 연동과 같은 비지니스 로직을 처리합니다. 처리된 결과를 클라이언트에 돌려줍니다. 요약하면 클라이언트로부터 요청을 받아 비지니스 로직을 처리하고, 그 결과를 다시 클라이언트에 돌려주는 것입니다. 초기 웹 프로그램 개발에서는 서블릿이 클라이언트로부터 요청을 받아 데이터베이스 연동 같은 비지니스 작업을 처리한 후, 그 결과를 클라이언트의 브라우저로 전송하는 방식으로 작업했습니다. 2) 서블릿 응답과 요청 수행 A

01 프로그램의 발전 과정 [내부링크]

일반적인 웹 페이지는 대부분 미리 서버에 등록해 두었다가 웹 브라우저가 서버에 특정 데이터를 요청하면 이를 웹 브라우저로 전송해서 보여줍니다. 이를 가능하게 하는 기술 중 하나가 JSP(Java Server Page)입니다. JSP 프로그래밍을 학습하기에 앞서 JSP 같은 웹 기반 프로그래밍 언어가 사용되는 이유을 프로그램의 발전 과정과 함께 알아보도록 하겠습니다. **웹 프로그램은 클라이언트 PC 기반 프로그램 → 클라이언트-서버 기반 프로그램 → 웹 기반 프로그램 순으로 진화해 왔습니다. 1. 클라이언트 PC 기반 프로그램 클라이언트 PC 기반 프로그램은 PC 에 사용자가 직접 설치하는 프로그램입니다. 인터넷이 세상에 나오기 전 PC 기반 프로그램은 기능이나 화면의 형태가 바뀌면 사용자는 PC에 프로그램을 다시 설치하거나 업데이트 해야 했습니다. 클라이언트 PC 기반 프로그램은 기능이 변경될 때마다 일일이 다시 설치해야 하기 때문에 상당히 불편합니다. 게다가 클라이언트 프로그램에

02 웹 프로그래밍과 JSP [내부링크]

JSP 가 나오기 이전의 웹 프로그램 구성 요소들을 알아본 후, 이어서 JSP 의 등장 배경을 설명하도록 하겠습니다. 1. 웹 프로그래밍의 기본 JSP 가 나오기 전에도 웹 브라우저를 통해 웹 페이지를 보여주는 기능은 있었습니다. 아파치(Apcahe) 같은 웹 서버를 이용해서 웹 페이지들을 브라우저에 표시하는 방식이었습니다. 이러한 방식을 정적 웹 프로그래밍이라고 합니다. 정적 웹 프로그래밍은 웹 서버에 미리 보여줄 HTML, CSS, 이미지, 자바스크립트 파일을 저장해 놓고 브라우저에서 요청할 경우 그대로 전달하는 방식입니다. 따라서 사용자는 페이지가 변경되지 않는 한 고정된 웹 페이지를 보게 됩니다. 다음은 정적 웹 프로그래밍에서 핵심적인 구성 요소들입니다. 구성 요소 설명 웹 서버 각 클라이언트에게 서비스를 제공하는 컴퓨터 클라이언트 네트워크로 서버에 접속한 후 서버로 부터 서비스를 제공받는 컴퓨터 HTTP 프로토콜 Hyper Text Transfer Protocol 의 약자

03 개발 환경 설정하기 [내부링크]

서버에서 JSP 가 실행될 수 있도록 실행 환경을 구축해 보겠습니다. 1. JDK 설치하기 오라클 JDK 다운로드 페이지에 접속하여, 운영체제에 맞는 JDK 를 선택하여 다운로드 받아 설치합니다. 설치 완료 후, 윈도우 탐색기에서 JDK 설치 폴더를 열면 JDK가 설치된 것을 확인할 수 있습니다. JDK 설치 폴더 **톰캣 설치를 위해 jre 도 설치해야 합니다. 2. JDK 환경 변수 설치하기 설치된 JDK 를 명령 프롬프트(cmd)에서 사용하려면 환경 변수를 설정해야 합니다. 이클립스는 실행 시 자동으로 JDK 가 설치된 위치를 인식해서 실행하지만, 메이븐(Maven)같은 자바 관련 개발 도구들은 JDK 의 위치를 환경 변수로 인식합니다. 따라서 JSP 개발 시 환경 변수를 꼭 설정해야 합니다. ① 윈도우 검색창에 환경 변수 입력 후, 시스템 환경 변수 편집을 클릭합니다. ② 환경 변수 클릭 후, 시스템 변수에서 새로 만들기를 클릭합니다. ③ 변수 이름에 JAVA_HOME 입력

04 웹 애플리케이션 이해하기 [내부링크]

쇼핑몰이나 구인·구직 사이트 등은 모두 웹 브라우저를 기반으로 하는 웹 애플리케이션입니다. 이런 웹 애플리케이션들은 보통 정해진 형식이 있기 때문에 서비스를 제공할 때, 이 형식에 맞게 제작해서 제공해야 합니다. 일반적으로 사용하는 웹 애플리케이션의 구조와 이를 이루는 요소들, 그리고 웹 브라우저 요청이 왔을 때 동작하는 과정에 대해 살펴보겠습니다. 1. 웹 애플리케이션 웹 애플리케이션이란 말 그대로 기존의 정적 웹 애플리케이션의 기능을 그대로 사용하면서 서블릿, JSP, 자바 클래스들을 추가하여 사용자에게 동적인 서비스를 제공하는 서버 프로그램을 말합니다. 그래서 정적 웹 애플리케이션의 기능인 HTML, 자바스크립트, CSS 등을 웹 애플리케이션에서 그대로 사용할 수 있습니다. JSP 나 서블릿이 이런 정적 요소들과 어떻게 연동하는지 알아보도록 하겠습니다. 2. 웹 애플리케이션의 기본 구조 1) 웹 애플리케이션의 기본 구조 톰캣과 같은 웹 컨테이너에서 실행하는 웹 애플리케이션의 기

05 서블릿 이해하기 [내부링크]

정적 웹 페이지의 문제점을 보안하여 나온 것이 동적 웹 페이지를 구현하는 JSP 입니다. 사실 동적 웹 페이지를 처음으로 구현한 방법은 JSP 가 아니라 서블릿(Servlet)을 이용해서 구현했습니다. 그리고 이 서블릿의 문제점을 보완하여 나온 것이 JSP 입니다. 1. 서블릿이란? 서블릿은 서버 쪽에서 실행되면서 클라이언트의 요청에 따라 동적으로 서비스를 제공하는 자바 클래스입니다. 서블릿은 자바로 작성되어 있습니다. 하지만 서블릿은 일반 자바 프로그램과 다르게 독자적으로 실행되지 못하고 톰캣과 같은 JSP/Servlet 컨테이너에서 실행됩니다. 서블릿은 서버에서 실행되다가 웹 브라우저에서 요청을 하면 기능을 수행한 후 웹 브라우저에 결과를 전송합니다. 서블릿 동작 과정 (출처 : https://velog.io/@duck-ach/JSP) 위 그림은 서블릿의 동작 과정입니다. 클라이언트가 웹 서버에 요청을 하면, 웹 서버는 그 요청을 톰캣과 같은 웹 애플리케이션 서버(WAS)에 위임

[React] 엘리먼트 렌더링 [내부링크]

1. 엘리먼트에 대해 알아보기 1) 엘리먼트의 정의 어떤 물체를 구성하는 성분을 영어로 Element 라고 합니다. 마찬가지로 리액트의 엘리먼트는 리액트 앱을 구성하는 요소를 의미합니다. 리액트 공식 홈페이지에서는 엘리먼트를 "Elements are the smallest building blocks of React apps." 라고 정의합니다. 즉, 엘리먼트는 리액트 앱을 구성하는 가장 작은 블록들입니다. 엘리먼트는 원래 웹 사이트에 대한 모든 정보를 담고 있는 객체은 DOM 에서 사용하는 용어입니다. 그래서 기존에는 엘리먼트라고 하면 DOM 엘리먼트(HTML 요소)를 의미했습니다. 그렇다면 리액트 엘리먼트와 DOM 엘리먼트의 차이는 무엇일까요? 아래 그림은 리액트 엘리먼트와 DOM 엘리먼트를 나타낸 것입니다. 출처 : https://velog.io/@acwell94/4.-Elements 실제 브라우저의 DOM 에 존재하는 엘리먼트는 DOM 엘리먼트가 되는 것이고, 리액트의 Vir

[React] 컴포넌트와 Props [내부링크]

1. 컴포넌트에 대해 알아보기 리액트는 컴포넌트 기반의 구조라는 중요한 특징을 가지고 있습니다. 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있습니다. https://www.airbnb.co.kr/ 위 그림은 에어비앤비 웹사이트 화면을 캡쳐한 뒤에 컴포넌트를 표시한 것입니다. 여기에서 A로 표시된 부분과 B로 표시된 부분이 리액트 컴포넌트라고 볼 수 있습니다. 그리고 이러한 컴포넌트를 여러 번 반복적으로 사용해서 하나의 페이지를 구성하고 있습니다. 이처럼 리액트를 컴포넌트 기반이라고 부르는 것은 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 또 이러한 컴포넌트들이 모여서 전체 페이지를 구성하기 때문입니다. 이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 개발 시간과 유지 보수 비용도 줄일 수 있습니다. 출처 : https://velog.io/@kyusung/리액트-교과서-Rea

[React] State와 생명주기 [내부링크]

1. State 1) State 란? 영단어 state 는 상태라는 뜻을 가지고 있습니다. 리액트에서 state 는 리액트 컴포넌트의 상태를 의미합니다. 여기서 상태라는 단어가 정상인지 비정상인지를 나타내는 것이라기 보다는 리액트 컴포넌트의 데이터라는 의미에 더 가깝습니다. 쉽게 말하면, 리액트 컴포넌트의 변경 가능한 데이터를 state 라고 부릅니다. state 를 정의할 때 중요한 점은 렌더링이나 데이터 흐름에 사용되는 값만 state 에 포함시켜야한다는 것입니다. 왜냐하면 state 가 변경될 경우, 컴포넌트가 리렌더링되기 때문에 렌더링과 데이터 흐름에 관련없는 값을 포함하면 컴포넌트가 다시 렌더링되어 성능을 저하시킵니다. 그래서 렌더링과 데이터 흐름에 관련 있는 값만 state 에 포함하고, 그렇지 않은 값은 컴포넌트 인스턴스의 필드로 정의합니다. 2) State 의 특징 리액트의 state 는 그냥 하나의 자바스크립트 객체입니다. 아래 코드는 LikeButton 이라는 리액

[React] 리액트 시작하기 [내부링크]

1. HTML 만으로 간단한 웹사이트 만들기 HTML 만을 사용해서 아주 간단한 웹사이트를 하나 만들어보겠습니다. 1) index.html <html> <head> <title>Cherry의 블로그</title> </head> <body> <h1>Cherry의 블로그에 오신 여러분을 환영합니다!</h1> </body> </html> 2) 결과창 2. CSS 를 사용하여 웹사이트 스타일링하기 위에서 만들어둔 뼈대 위에 살을 붙이겠습니다. 1) style.css h1 { color: green; font-style: italic; } 2) index.html <html> <head> <title>Cherry의 블로그</title> <link rel="stylesheet" href="./style.css" /> </head> <body> <h1>Cherry의 블로그에 오신 여러분을 환영합니다!</h1> </body> </html> 3) 결과창 3. 웹사이트에 React.js 추가하기 위에

[React] JSX 소개 [내부링크]

1. JSX 란? JSX 는 JavaScript 와 XML/HTML 을 합친 것으로, 자바스크립트의 문법을 확장시킨 것입니다. const element = <h1>Hello, world!</h1>; 위의 코드는 자바스크립트 코드와 HTML 코드가 결합되어 있는 JSX 코드입니다. <h1> 태그로 둘러싸인 문자열을 element 라는 변수에 저장하는 것을 의미합니다. 앞으로 계속해서 리액트를 개발하게 된다면 필수적으로 JSX 코드와 친해져야합니다. 2. JSX 의 역할 JSX 는 내부적으로 XML/HTML 코드를 자바스크립트로 변환하는 과정을 거치게 됩니다. 그렇기 때문에 실제로 JSX 로 코드를 작성하면 최종적으로는 자바스크립트 코드가 나오게 됩니다. 리액트에서 JSX 코드를 자바스크립트 코드로 변환하는 역할을 하는 함수는 createElement() 입니다. React.createElement( type, [props], [...children] ) type 엘리먼트의 유형 div

[React] 리액트 소개 [내부링크]

1. 리액트는 무엇인가? 1) 리액트의 정의 리액트는 UI 를 만들기 위한 자바스크립트 라이브러리입니다. UI 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입출력을 제어해주는 것 라이브러리 특정 프로그래밍 언어에서 자주 사용되는 기능들을 잘 모아서 정리해 놓은 모음집 2) 리액트 개념 리액트는 사용자와 웹 사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 기능 모음집입니다. 웹 사이트를 개발하기 위해서는 HTML, CSS, 자바스크립트를 모두 잘 다루어야 하는데, 사이트 규모가 커질수록 수많은 페이지를 잘 만들어서 관리한다는 것은 쉬운일이 아닙니다. 따라서 이러한 복잡한 사이트를 쉽고 빠르게 만들고 관리하기 위해 만들어진 것이 바로 리액트입니다. 즉, 리액트는 SPA 를 쉽고 빠르게 만들 수 있도록 해주는 도구입니다. 2. 리액트의 장점 1) 빠른 업데이트와 렌더링 속도 가장 먼저 리액트의 장점으로 빠른 업데이트와 렌더링 속도를 들 수 있습니

[Node.js] 프로젝트의 시작 [내부링크]

1. 프로젝트 설정하기 Node.js 를 시작하기 위해서는 초기화 작업이 필요합니다. 터미널 창에 아래 명령어를 입력하여 프로젝트 초기화를 합니다. $ npm init 위의 명령어를 실행하면 package.json 이라는 파일이 생성됩니다. package.json 은 프로젝트 내에서 npm 을 통해 생성되는 node 패키지(모듈)을 관리하는 파일입니다. npm init 실행시 출력되는 문구들 2. NPM(Node Package Manager) 명령어 npm 명령어를 통해 Node.js를 초기화할 수 도 있고, 다른 사람이 만든 패키지를 설치해서 사용할 수도 있습니다. 아래는 많이 사용하는 npm 명령어들입니다. // node.js 초기화 $ npm init // 패키지 설치 $ npm install package@버전 $ npm install github주소 // 중복 패키지 정리 $ npm dedupe // 설치된 npm 패키지 확인 $ npm ls $ npm ls 패키지명 //

[Node.js] http 모듈로 서버 만들기 [내부링크]

Node.js 의 기본 모듈인 http 혹은 확장 모듈인 express 를 사용하면 통신의 요청(request)과 응답(response)를 구현할 수 있습니다. 1. 간단한 서버를 만들어보자 // app.js const http = require("http"); http .createServer((req, res) => { res.writeHeader(200, { "Content-Type": "text/html;charset=utf-8" }); res.write("<h1>Node.js로 서버 만들기</h1>"); res.end("<p>http 모듈 공부중입니다.</p>"); }) .listen(8080, () => { console.log("8080포트에서 서버 연결중..."); }); localhost:8080 결과 위에 작성된 코드는 http 모듈을 사용해 서버입니다. 위 코드를 $ node app.js 명령어로 실행하고, localhost:8080 이라는 주소로 웹사이트에 접속

[Node.js] express 모듈을 사용해 서버 만들기 [내부링크]

1. express 란? express 는 자바의 Spring, 파이썬의 Django 와 같은 웹 프레임워크로, Node.js 의 http 와 connect 컴포넌트(미들웨어)를 기반으로 동작합니다. 설치는 npm 을 통해서 간단하게 할 수 있습니다. 2. express 설치 터미널을 열어 아래의 명령어로 express 를 설치합니다. $ npm install express 설치를 완료하면, node_modules 폴더가 생성됩니다. 이 폴더는 express 에 필요한 여러 모듈이 포함되어 있습니다. 이 폴더의 용량은 매우 크기때문에, 만약 깃을 사용하고 있다면 .gitignore 파일에 node_modules 폴더를 추가해 커밋하지 않게 해줍니다. 서버 파일을 실행한 상태에서, 코드를 수정하면 수정된 내용이 서버에 반영되지 않습니다. 그래서 서버를 종료하고 재실행해야만 수정된 내용이 반영됩니다. 이러한 번거로움은 nodemon 모듈로 해결할 수 있습니다. nodemon 을 사용하면

[Node.js] express와 미들웨어 [내부링크]

1. 미들웨어란? 미들웨어는 요청과 응답 사이의 중간단계 역할을 하는 존재로, 인증 수행, 예외 처리, 세션처리, 라우터 등 많은 종류가 있습니다. express 는 자체 미들 웨어를 사용해도 되고 다른 사람이 만들어 놓은 미들웨어를 npm 을 통해 설치하여 사용해도 됩니다. 아래 코드는 미들 웨어를 함수로 만들어서 사용한 코드입니다. 서버를 실행하면 localhost:8080/ 에 접속하는 요청이 올때마다 콘솔에 "LOGGED"가 출력됩니다. // app.js const express = require("express"); const app = express(); const myLogger = function (req, res, next) { console.log("LOGGED"); next(); }; app.use(myLogger); app.get("/", function (req, res, next) { res.send("Hello World!"); next(); }); app

[Node.js] API [내부링크]

1. API(Application Programming Interface) 란? API 는 응용 프로그램 사이의 인터페이스입니다. 인터페이스는 서로 다른 두 가지 사이에 소통을 할 수 있게 해주는 접점을 의미합니다. 쉽게 말해서, API 는 클라이언트와 서버가 서로 정보(data)를 주고 받을 수 있도록 하는 것입니다. 우리가 만든 서버와 클라이언트가 통신하기 위해서는 http 와 express 모듈을 사용했습니다. 하지만 다른 서버와 통신하기 위해서는 request, axios 등의 http 통신 라이브러리가 필요합니다. 2. Open API 활용 - request request 를 통해 네이버 Open API 를 사용해 보도록 하겠습니다. 1) 네이버 검색 API 신청하기 ① 네이버 개발자 센터 사이트 접속 후, 로그인하기 ② 상단 메뉴바의 Application 탭 > 애플리케이션 등록 클릭 후, 아래와 같이 설정하여 등록하기 ③ 상단 메뉴바의 Application 탭 > 내 애

[Node.js] 캐싱 구현하기 [내부링크]

다른 API 를 사용하거나 웹 파싱을 통해 얻어온 정보를 내 사이트에 표시하고 싶을 때 [Node.js] 05 API 의 코드 처럼 구현하면 안됩니다. 왜냐하면 많은 요청이 서버에 들어온다면 API 호출 횟수를 초과할 수도 있고, 데이터를 파싱하는 부분에도 시간을 많이 쓰기 때문입니다. 그래서 쾌적한 서버를 구축하기 위해서는 캐싱 시스템을 구축해야 하는데, Redis 를 이용하면 캐싱 시스템을 구축할 수 있습니다. Redis(Remote Directionary Sever)란? Redis 는 NoSQL 중 하나로, 데이터를 키-값의 형태로 저장하는 데이터 관리 시스템입니다. Redis 는 리스트, 배열 같은 데이터를 처리하는 데 유용하며, 쿠키과 세션은 보통 Redis 에 저장합니다. 1) 설치하기 Redis 깃헙 사이트에 접속해서 .msi 설치 파일을 다운받아 설치합니다. 저는 3.2 버전을 다운로드 받아 설치했습니다. 설치할 때, "Add the Redis installation

[Node.js] API 서버를 직접 만드는 방법 [내부링크]

1. REST API REST API 란 클라이언트에서 서버에게 요청을 보낼 때 API 를 REST 형식으로 만드는 것을 의미합니다, REST(REpresentatinal Status Transfer) 는 요청된 주소만 보고도 어떤 내용에 관한 요청인지를 예상할 수 있게 하는 형식입니다. 즉, REST API 는 /movies" 라는 요청의 주소만으로 "영화의 리스트를 보내달라는 요청이구나!" 를 알 수 있게 라우팅을 짜는 것을 의미합니다. 그리고 RESTful API 는 URI 와 http 요청 메서드(GET, POST, DELETE, PUT, PATCH 등)를 보고 어떤 요청인지를 예상할 수 있게 만든 API 입니다. 아래 표는 REST API 의 예시입니다. http 메서드 URI 요청 내용 GET /category/2/books 카테고리 번호가 2인 책의 정보를 조회합니다. POST /category/2/books 새로 들어온 책의 정보를 등록합니다. PUT /category

[Node.js] SQL 과 NoSQL [내부링크]

1. SQL (Structured Query Language) SQL 은 말 그대로 구조화된 쿼리 언어입니다. 즉, 구조화해서 물어보는 프로그래밍 언어입니다. 여기서 구조화 해서 물어본다는 것은 데이터를 수정, 삭제, 갱신, 조회를 할 때 정해진 규칙으로 물어본다는 뜻입니다. SQL 은 데이터를 구조화하고, 각 데이터 간의 관계를 규정합니다. (= 정해진 스키마를 따라 데이터 정형화) SQL 의 종류에는 MySQL, 오라클, PostgreSQL 등이 있습니다. 2. NoSQL NoSQL 은 SQL 이 아닌 데이터 베이스로, 관계형 데이터베이스가 아닌 모든 것을 말합니다. NoSQL 은 스키마가 없기 때문에 따로 정해진 규칙 없이 데이터를 추가, 수정, 삭제할 수 있습니다. 데이터는 key-value, column, document, graph 등의 형태로 저장합니다. key-value 로 저장하는 종류에는 Redis, Cash, Dynamodb 등이 있고 document 로 저장하는

[Node.js] SQL : MySQL [내부링크]

1. 개발환경 설정 1) MySQL 과 워크벤치 설치 MySQL 다운로드 사이트에 접속하여 최소한의 용량만을 사용하는 Installer 를 다운받아 설치합니다. Setup 타입은 Custom 으로 선택하고, MySQL Server 와 Workbench 만 선택하여 설치합니다. 그리고 username 과 root 암호만 설정해서 설치하면 설치가 완료됩니다. (cmd 창에서 MySQL 을 실행하고 싶다면, 환경변수에 등록합니다.) 터미널창에서 아래 명령어로 MySQL 에 접속합니다. $ mysql -u root -p mysql mysql 실행하기 -u root root 유저로 접속하기 -p 비밀번호 입력해서 접속하기 2) 데이터 베이스 생성하기 ① MySQL Workbench 실행하기 ② MySQL Connection 옆에 + 버튼 클릭하여 새로운 커넥션 생성하기 ③ 커넥션 이름을 설정한 후 생성하기 (포트번호 : 3306) ④ 생성한 커넥션 클릭 후, 설정한 비밀번호를 입력하여 접속하

[Node.js] NoSQL : MongoDB [내부링크]

1. MongoDB 사용자, 게시글 데이터처럼 들어올 데이터의 형식이나 양이 어느 정보 예상되면 스키마를 지정해 안정적이고 촘촘한 데이터베이스를 구축해서 서비스할 수 있습니다. 반면에 무작위로 크롤링한 데이터라던가, 세션, 로그 데이터 등의 비정형 데이터라던가, 빅데이터와 같은 경우에는 양이나 형태가 예상되지 않으므로 그에 맞는 스키마를 작성할 수 없을 것입니다. 이럴 때 사용하는 데이터베이스가 NoSQL 중 하나인 MongoDB 입니다. 아래 표는 관계형 데이터베이스와 MongoDB 의 비교를 나타냅니다. 관계형 데이터베이스 MongoDB 데이터베이스(Database) 데이터베이스 (Database) 테이블(Table) 컬렉션(Collection) 행(Row), 레코드(Record) 도큐먼트 (Document) 열(Column), 속성(Attribute) 필드 (Field) 인덱스(Index) 인덱스 (Index) CRUD의 결과로 레코드(Record) 반환 CRUD 의 결과로 커

[Node.js] 라우팅 처리 [내부링크]

1. 라우팅(Routing) 라우팅은 특정 엔드 포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말합니다. 특정 엔드 포인트란 URL 과 HTTP 요청 메소드로 구분된 클라이언트에서 서버로 요청을 보낼 수 있는 문이라고 생각하면 됩니다. express 에서 라우트는 아래와 같은 구조를 가집니다. app.Method(Path, Handler) app express 의 인스턴스 Method http 요청 메서드 (get, post 등) Path 라우트 경로 Handler 라우트가 일치할 때 실행되는 함수 아래 코드는 express 에서의 가장 기본적인 라우트 처리 예시입니다. const express = require("express"); const app = express(); app.get("/", (req, res) => { res.send("Hello Nodejs!") }); 2. app.route app.route 를 이용하면, path 가 같고 m

[Node.js] Express 에서 에러 처리하기 [내부링크]

라우트에서 아래와 같이 코드와 같이 에러를 발생시키면, express 가 알아서 이를 처리하고 에러 코드 및 에러정보를 클라이언트로 응답해줍니다. const express = require("express"); const app = express(); app.get("/error", (req, res) => { throw new Error("에러 발생!"); }); app.listen(8080, () => { console.log("8080번 포트번호로 서버 실행중..."); }); 500 에러 발생 express 에는 앱에서 발생할 수 있는 모든 에러를 처리하는 에러 핸들러가 내장되어 있습니다. 에러 핸들러를 사용하면 앱에서 에러가 발생했을 때, 한 곳에서 에러를 처리할 수 있어 효율적입니다. express 에서 사용자 정의 에러를 사용하고 싶다면, 아래코드와 같이 일반적인 미들웨어 함수를 정의하는 것처럼 에러 처리를 위한 미들웨어 함수를 정의하면 됩니다. 에러 처리 미들웨어 함수

[Node.js] 파일 관련 미들웨어 [내부링크]

1. compression compression 은 압축을 위한 미들웨어로, 서버에서 클라이언트로 응답하는 응답 본문을 압축합니다. 일반적으로 파일처럼 응답하는 데이터의 크기가 큰 경우에 사용합니다. 아래 명령어로 compression을 설치할 수 있습니다. $ npm install compression 아래 코드는 compression을 사용하여 응답하는 모든 데이터를 압축하는 코드입니다. const compression = require("compression"); const express = require("express"); const app = express(); app.use(compression()); app.get("/", (req, res) => { res.send("데이터 압축!'); }); app.listen(8080, () => { console.log("8080번 포트번호에서 서버 실행중..."); }); 응답하는 모든 데이터가 압축되어 데이터 크기가 줄어든다

[Node.js] 시스템 운영 관련 미들웨어 [내부링크]

1. response-time response-time 은 클라이언트 요청에 대한 응답 시간을 관리하는 미들웨어 입니다. 아래 명령어를 통해 response-time 모듈을 설치할 수 있습니다. $ npm install response-time 아래 코드는 클라이언트로부터 요청이 들어올 때마다 응답하는데 걸린 시간을 콘솔에 출력하는 코드입니다. const responseTime = require("response-time"); const express = require("express"); const app = express(); app.use( responseTime((req, res, time) => { console.log(`[${req.method}] [${req.url}] ${time}`); }) ); app.get("/", (req, res) => { res.send("Hello Nodejs!"); }); app.listen(8080, () => { console.log(

[JavaScript] 네이밍 컨벤션 [내부링크]

1. 파일명 알파벳, 소문자, 하이픈(-), 밑줄(_) 로만 작성합니다. ex) login.js, login-module.js 2. 변수명 카멜 표기법을 사용합니다. 명사를 사용합니다. ex) dogName, pageCount 3. 상수명 밑줄로 구분된 대문자를 사용합니다. 명사를 사용합니다. ex) HOURS, FIRST_NAME 4. 함수명 카멜 표기법을 사용합니다. 동사를 사용합니다. ex) run, getElement 5. 클래스명 파스칼 표기법을 사용합니다. 명사를 사용합니다. ex) User, SoftwareDeveloper 6. 모듈명 파스칼 표기법을 사용합니다. 명사를 사용합니다. ex) Runner, UserInfo

[Github] 커밋 컨벤션 [내부링크]

git commit -m "[TAG]: [TITLE]" 1. TAG 태그의 첫 문자는 대문자로 작성 태그명 설명 Feat 새로운 기능을 추가한 경우 Fix 버그를 고친 경우 Design CSS 등 사용자 UI 디자인 변경 Style 코드 포맷 변경, 세미콜론 누락, 코드 수정이 없는 경우 Refactor 코드 리팩토링한 경우 Comment 필요한 주석 추가 및 변경 Docs 문서를 수정한 경우 Test 테스트 추가, 테스트 리팩토링 Chore 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우 Rename 파일 혹은 폴더명을 수정하거나 옮기는 작업 Remove 파일을 삭제하는 작업 2. TITLE 명사나 명사형으로 간략하게 적기 특수 문자 삽입 금지 (마침표, 느낌표, 물음표 등) 추가", "고침", "변경" 등의 명령어로 시작하기 3. Example $ git commit -m "Feat: 추가 로그인 화면" $ git commit -m "Feat: 변경 get data api

[Github] 라벨 활용하기 [내부링크]

1. Github Label 이란? [그림 1] Git hub 라벨 github label 은 issue 와 pull request 에서 카테고리를 분류하기 위한 이름표로 사용됩니다. 위 그림 1에 있는 Labels 버튼을 누르면 아래 그림 2와 같이 github 에서 기본적으로 제공하는 9개의 라벨들이 나옵니다. [그림 2] Github 에서 제공하는 기본 라벨들 위 그림 2에서 New lable 을 눌러 새로운 라벨을 생성할 수 있습니다. 2. Github Label 생성 저는 아래 그림 3과 같이 12개의 라벨을 생성하였습니다. [그림 3] 새롭게 만든 12개의 라벨들 Label name Description Color c Accessibility 웹접근성 관련 #facfcf API 서버 API 통신 #D4C5F9 BugFix 버그 해결 #d73a4a CrossBrowsing 브라우저 호환성 #C5DEF5 Deploy 배포 관련 #C2E0C6 Design 마크업 & 스

[Github] 깃 브랜치 전략 [내부링크]

1. 사전 지식 - PR 과정 ① 저장소를 clone ② 브랜치 생성 및 이동 ③ 소스 코드 작성 및 변경 ④ 변경한 내용을 git add 로 스테이징 영역에 저장 ⑤ git commit 으로 변경 사항을 저장 ⑥ git push 로 원격 저장소에 소스 코드 올리기 ⑦ pull request 를 전송 규모가 있는 개발을 할 경우 Fork 와 Pull Request 를 활용하여 구현합니다. 2. 5가지 브랜치 항상 유지되는 메인 브랜치 master, develop 일정 기간 동안만 유지되는 보조 브랜치 feature, release, hotfix 브랜치 설명 master 기준이 되는 브랜치로, 제품을 배포하는 브랜치 develop 다음 출시 버전을 개발하는 브랜치 개발자들은 이 브랜치를 기준으로 각자 작업한 기능들을 merge feature 단위 기능을 개발하는 브랜치 기능 개발이 완료되면 develop 브랜치에 merge relase 이번 출시 버전을 준비하는 브랜치 master 브

[Git] 깃 설치 및 초기화 작업 [내부링크]

1. Git 이란? Git 은 컴퓨터 파일의 변경사항을 추적하고, 여러 사용자들 간에 해당 파일 작업을 조율하기 위한 대표적인 버전 관리 시스템(VCS) 입니다. 2. Git 설치 깃 사이트에서 깃을 다운로드 받아 설치합니다. 설치를 완료하면, 명령 프롬포트창(cmd)에 아래 명령어를 통해 깃 설치를 확인합니다. $ git --version 3. Git 사용자 정보 등록 $ git config --global user.name '깃허브에 등록된 나의 이름' $ git config --global user.email '깃허브에 등록된 나의 이메일' $ git config --global core.autocrlf true $ git config --global --list

[Git] 깃 명령어 [내부링크]

1. 버전 생성 $ git init $ git status $ git add . $ git status $ git commit -m '커밋 메시지' $ git log $ git push 2. 브랜치 조작 # 브랜치 리스트 보기 $ git branch # 브랜치 생성 및 이동 $ git branch 브랜치명 $ git checkout 브랜치명 or $ git checkout -b 브랜치명 # 브랜치 삭제 $ git branch -d 브랜치명 # 브랜치 병합 $ git merge 브랜치명 3. 버전 되돌리기 # 바로 이전 버전으로 되돌리기 $ git reset --hard HEAD~ # 숫자 단계 버전으로 되돌리기 $ git reset --hard HEAD~숫자 # 커밋 아이디 버전으로 되돌리기 $ git log $ git reset --hard 커밋아이디 # 최신 버전으로 되돌리기 $ git reset --hard ORIG_HEAD 4. 원격 저장소 업로드 # master 브랜치 업로

[Github] 깃허브로 협업하기 - Forking WorkFlow [내부링크]

1. Forking WorkFlow 란? 모든 프로젝트 참여자가 개인 로컬 저장소와 자신의 원격 저장소(중앙 원격 저장소를 fork 한 것)를 가지고 협업을 진행하는 방식입니다. 모든 코드 기여자가 중앙 원격 저장소에 push 하는 것이 아니라, 각자 자신의 원격 저장소에 push 하고 이 내용을 중앙 원격 저장소에 pull request 합니다. 그리고 프로젝트 관리자는 다른 개발자의 PR 을 중앙 원격 저장소에 mrege 할지 안할지 결정합니다. 주로 오픈 소스 프로젝트에서 많이 사용하는 방식입니다. 2. Foking WorkFlow 방식 ① 중앙 원격 저장소를 fork 해서 자신의 원격 저장소를 만듭니다. ② 자신의 원격 저장소를 로컬 저장소에 복제합니다. $ git clone [자신의 원격 저장소 url] ③ 로컬 저장소와 중앙 원격 저장소, 로컬 저장소와 자신의 원격 저장소를 연결합니다. $ git remote add origin [자신의 원격 저장소 url] $ git r

[SQL] 데이터베이스와 SQL [내부링크]

1. 데이터와 데이터베이스, DBMS 1) 데이터 데이터는 말 그대로 정보입니다. 기록해 놓고 필요할 때 찾아 보는 정보(자료)입니다. 2) 데이터베이스 데이터 베이스는 점점 많아지는 데이터를 관리하기 위해 생겨나게 되었습니다. 데이터베이스란 여러 사람이 사용할 수 있도록 통합해 관리하는 데이터 집합을 말하며, 쉽게 생각하면 데이터를 모아 놓은 덩어리입니다. 3) DBMS(DataBase Management System) DBMS 는 데이터를 모아 놓은 덩어리인 데이터 베이스를 관리하는 시스템(프로그램)입니다. DBMS 의 종류로는 관계형, 객체지향형, NoSQL 등이 있습니다. 2. 관계형 DBMS 1) RDBMS 의 특징 중복 데이터 저장을 최소화 합니다. RDMBS 는 데이터를 테이블이라는 곳에 저장합니다. 그리고 이 테이블을 활용해 중복 데이터를 최소화해 저장하고 관리할 수 있습니다. SQL 로 데이터를 손쉽게 처리할 수 있습니다. SQL 은 RDBMS 에서만 사용할 수 있습

[SQL] 실습 환경 만들기 [내부링크]

1. MySQL 내려받기 MySQL 홈페이지에서 다운로드 받아 설치할 수 있습니다. 무료 버전인 Community 버전을 다운로드 받아 설치합니다. 2. MySQL 설치하기 MySQL을 설치할 때 Choosing a Setup Type 은 Custom 으로 선택하고, Select Products 는 MySQL Sever, MySQL Workbench, Samples and Examples 를 선택하여 설치합니다. 그리고 나머지는 그대로 둔 상태로 설치합니다. 3. MySQL 사용하기 1) MySQL 실행 중인지 확인하기 제어판 → 시스템 및 보안 → 관리 도구 → 서비스 창에서 MySQL 80 을 찾습니다. MySQL 80 상태가 실행중이라면 실행되고 있는 것입니다. 만약 실행하거나 중지하고 싶다면, 더블 클릭하여 속성창에서 변경합니다. 2) MySQL 접속하기 cmd 창에서 MySQL 을 사용하고 싶다면, 환경변수에서 시스템 변수의 Path 에 설치된 mysql 경로를 추가합니다.

[SQL] 테이블 살펴보기 [내부링크]

1. 데이터를 담는 그릇, 테이블 1) 테이블이란 테이블은 RDBMS 에서 데이터를 저장하는 2차원 형태의 데이터베이스 객체입니다. 테이블 (출처 : https://velog.io/@deonii/Database) 2) 테이블 구조의 기본, 로우와 컬럼 테이블은 로우(Row)와 컬럼(Column), 즉 행과 열로 구성됩니다. 컬럼은 테이블에서 세로 항목에 해당하며, 데이터의 속성을 나타냅니다. 로우는 테이블에서 가로 항목에 해당하며, 여러 개의 컬럼들이 모여 하나의 로우(데이터)를 구성합니다. 2. 칼럼의 데이터 타입 데이터 타입은 컬럼에 저장될 데이터 유형을 말합니다. 데이터 타입은 크게 문자형, 숫자형, 날짜형이 있습니다. 1) 문자형 문자형에는 CHAR, VARCHAR, TEXT 등이 있으며, 주로 사용하는 문자형은 VARCHAR 와 ENUM 입니다. VARCHAR(n) 는 가변 길이 문자형으로, 실제 입력되는 문자의 길이만큼 저장됩니다. n 은 저장할 수 있는 최대 문자 값의

[SQL] 데이터베이스와 테이블 생성하기 [내부링크]

1. 데이터베이스 다루기 1) 데이터베이스 생성하기 CREATE DATABASE 데이터베이스명; CREATE SCHEMA 데이터베이스명; create database if not exists mywork; 데이터베이스 생성 결과 2) 데이터베이스 삭제하기 DROP DATABASE 데이터베이스명; DROP SCHEMA 데이터베이스명; drop schema if exists mywork; 3) 데이터베이스 진입하기 USE 데이터베이스명; use mywork; 데이터베이스 진입 결과 2. 테이블 다루기 1) 테이블 설계하기 테이블은 무작정 생성하면 안됩니다. 어떤 용도의 테이블을 어떤 구조로 만들 것인지 먼저 정해야 합니다. 이러한 작업을 테이블 설계라고 합니다. 예제로 고등학교의 학생 정보를 담을 highschool_students 라는 테이블을 만들어보겠습니다. 먼저 고등학생의 정보를 담는데 필요한 항목이 무엇이 있을지 생각하고, 아래와 같이 테이블 설계를 합니다. 항목 데이터 형태

[SQL] 테이블 컬럼의 제약 조건 [내부링크]

1. NOT NULL NOT NULL 제약조건을 설정하면, 해당 컬럼은 NULL 값을 저장할 수 없습니다. 즉, 이 제약 조건이 설정된 컬럼은 무조건 데이터를 가지고 있어야 합니다. CREATE TABLE 테이블명 (컬럼1 데이터타입 NOT NULL, ...); create table if not exists highschool_students ( student_no varchar(20) not null, student_name varchar(100) not null, grade tinyint, class varchar(20), age smallint, enter_date date ); desc highschool_students; 생성된 테이블 2. UNIQUE UNIQUE 제약 조건을 설정하면, 해당 컬럼은 서로 다른 값을 가져야합니다. 즉, 이 제약 조건이 설정된 컬럼은 중복된 값은 저장할 수 없습니다. CREATE TABLE 테이블명 (컬럼1 데이터타입 UNIQUE, ...)

[SQL] 데이터 다루기 [내부링크]

아래를 실습하기 위해서 우선 아래 명령어로 테이블을 생성합니다. create table if not exists highschool_students ( student_no varchar(20) primary key, student_name varchar(100) not null, grade tinyint, class varchar(20), age smallint, enter_date date default (current_date) ); 1. 데이터 입력하기 INSERT INTO 테이블명 VALUES (데이터1, 데이터2, 데이터3, ...); INSERT INTO 테이블명(컬럼명1, 컬럼명2) VALUES (데이터1, 데이터2); insert into highschool_students values ('A0001', '아이유', 1, '보컬반', 17, '2022-03-01'); insert into highschool_students(student_no, student_name)

[SQL] 데이터 조회하고 정렬하기 [내부링크]

1. 데이터 조회하기 SELECT 컬럼1, 컬럼2, ... FROM 테이블명; SELECT * FROM 테이블명; use mywork; desc departments; select * from employees; select emp_no, gender, hire_date from employees; 3행 실행 결과 4행 실행 결과 2. WHERE 절로 조회 조건 지정하기 SELECT * FROM 테이블 WHERE 조회 조건; select * from box_office where countries = '한국'; 쿼리문 실행 결과 조회 조건에는 비교 연산자(=, !=, >, <, >=, <=), 논리 연산자(AND, OR, NOT) 등 다양한 연산자를 사용합니다. 다양한 연산자들 중에서 특별한 연산자에 대해서만 소개하도록 하겠습니다. 1) LIKE 연산자 LIKE 연산자는 문자형 데이터를 비교할 때 사용하는 연산자로, 특정 문자가 포함된 데이터를 검색할 때 유용합니다. select y

[SQL] SQL 함수 사용하기 [내부링크]

1. SQL 함수란 SQL 함수는 SQL 문장에서 사용되며, 특정 연산을 수행하고 그 결과를 반환합니다. MySQL 은 많은 함수를 제공하는데 아래 표와 같은 함수 종류가 있습니다. 구분 설명 해당 함수 숫자형 함수 연산 대상과 반환값이 숫자형인 함수 ABS(), ROUND() 등 문자형 함수 연산 대상과 반환값이 문자형인 함수 CONCAT(), SUBSTRING() 등 날짜형 함수 연산 대상과 반환값이 날짜형인 함수 SYSDATE(), YEARE() 등 형 변환 함수 연산 대상의 데이터 타입을 변환하는 함수 CAST(), CONVERT() 등 기타 함수 흐름을 제어하는 함수 IF(), IFNULL() 등 집계 함수 집계 쿼리에서 사용하는 함수 SUM(), MAX(), AVG() 등 윈도우 함수 좀 더 세밀한 데이터 분석을 위한 분석 함수 RANK(), LAG() 등 2. 기본 SQL 함수 살펴보기 기본 SQL 함수는 숫자형, 문자형, 날짜형 함수를 가리킵니다. 1) 숫자형 함수 숫

[Node.js] 웹 소켓 [내부링크]

1. HTTP 와 AJAX 1) HTTP (HyperText Transfer Protocol) HTTP 는 오늘날 통신에서 가장 널리 사용되고 있는 통신 규약입니다. URL 과 Header 같은 부가 정보를 포함하여 사용자가 원하는 데이터를 정확히 주고 받을 수 있도록 해줍니다. HTTP 통신은 클라이언트 요청 한 번에 서버 응답 한 번을 보내면 통신이 끝나게 됩니다. 그래서 페이지의 일부분만 갱신하고 싶어도 2) AJAX (Asynchronous JavaScript XML) AJAX 는 XMLHttpRequest 라는 자바스크립트 객체를 이용햇 서버와 비동기 방식으로 통신하여 DOM 을 조작해 문서의 일부분만 갱신합니다. (axio 도 AJAX임.) 즉, AJAX 는 비동기 방식으로 통신하기 때문에 클라이언트의 대기시간이 줄어들고, DOM 을 조작하기 때문에 페이지의 일부분만 갱신할 수 있습니다. AJAX 는 페이지를 일부분만 동적으로 생성하기 때문에 페이지 전체를 갱신하는 HTT

[Node.js] WS 모듈로 웹 소켓 구현하기 [내부링크]

웹 소켓을 구현하기 전에 아래 명령어로 ws 모듈을 설치합니다. $ npm install ws 1. ws 모듈을 이용한 WebScoket 코드 : socket.js const WebSocket = require("ws"); module.exports = (server) => { const wss = new WebSocket.Server({ server }); // 연결 (Connection) wss.on("connection", (ws, req) => { console.log("새로운 클라이언트가 연결되었습니다."); // 클라이언트로 부터 받은 메시지 ws.on("message", (msg) => { console.log(msg.toString()); }); // 오류 처리 ws.on("error", (err) => { console.error(`[Error] ${err}`); }); // 연결 종료 ws.on("close", () => { console.log("클라이언트와의 연

[Node.js] socket.io 모듈로 웹 소켓 구현하기 [내부링크]

websocket 을 사용할 수 있는 방법에는 ws 모듈과 socket.io 모듈이 있습니다. socket.io 는 ws 모듈의 메시지를 주고 받는 기능을 확장한 패키지입니다. 사용자를 그룹화해서 메시지를 보낼 수 도 있고, 특정 사용자에게만 메시지를 보내는 기능을 쉽게 만들 수도 있어 주로 채팅 기능을 구현할 때 많이 사용합니다. 아래 명령어로 socket.io 모듈을 설치합니다. $ npm install socket.io 1. socket.io 모듈을 이용한 WebSocket 코드 : socket.js const SocketIO = require("socket.io"); module.exports = (server) => { const io = SocketIO(server, { path: "/socket.io" }); // index.html 의 path // 연결(connection) io.on("connection", (socket) => { const req = socket

[React] HTML 과 CSS [내부링크]

1. HTML 살펴보기 1) HTML 이란 무엇인가? HTML 은 HyperText Markup Language 의 약자로 마크업 언어의 한 종류로, 웹 사이트의 뼈대를 구성하기 위해서 사용되는 마크업 언어입니다. 그리고 HTML은 태그(tag)를 사용하여 웹사이트의 구조를 만들고, 웹 사이트에 들어갈 내용을 채워넣습니다. 2) 웹사이트의 뼈대를 구성하는 태그들 HTML 에는 웹사이트의 뼈대를 구성하기 위해 가장 기본적이고 필수적인 태그들이 존재하는데, 아래와 같습니다. <html> <head> </head> <body> </body> </html> <html> HTML 의 시작과 끝을 알리는 태그 <head> 웹 사이트가 어떤 웹 사이트인지 알 수 있는 여러 가지 속성(제목, 설명)을 담고 있는 태그 <body> 실제로 웹 사이트에서 보이는 컨텐츠를 담고 있는 태그 3) SPA (Single Page Application) SPA 는 말 그대로 하나의 페이지만 존재하는 웹사이트(웹

[React] 자바스크립트 [내부링크]

자바스크립트는 웹 사이트에서 사용자가 버튼을 누르거나 정보를 입력하는 등의 동적 작업을 처리합니다. 1. 자바스크립트란 무엇인가? 자바스크립트는 프로그래밍 언어의 한 종류로, 자바스크립트의 정식 명칙은 ECMAScript 입니다. 앞에서 설명한 HTML 가 웹 사이트의 뼈대를 구성하는 역할을 한다면, 자바스크립트는 웹 사이트가 살아 움직이도록 생명을 불어 넣는 역할을 합니다. ** 자바스크립트는 스크립트 언어이기 때문에, 런타임에 코드가 해석되고 실행됩니다. 2. 자바스크립트 문법 자바스크립트 문법을 간단하게 알아보도록 하겠습니다. 자바스크립트 ES6의 문법을 기준으로 설명하겠습니다. 1) 자바스크립트의 자료형 // Number type let n1 = 1234; let n2 = 5.678; // String type let s1 = "hello"; let s2 = "world"; // Boolea type let b1 = true; let b2 = false; // Null typ

[React] 개발 환경 설정 [내부링크]

1. Node.js 와 npm 설치하기 Node.js 는 자바스크립트로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경입니다. 그리고 npm 은 node package manager 의 약자로 Node.js 를 위한 패키지 매니저입니다. 참고로 npm 은 Node.js 를 설치하면 자동으로 설치됩니다. Node.js 공식 홈페이지에서 LST 버전을 다운로드 받아 설치합니다. 그리고 터미널 창을 열어 아래 명령어를 입력하여 설치되었는지 확인합니다. $ node --version $ npm --version 2. VS Code 설치하기 메모장 같은 텍스트 편집 프로그램을 사용해도 코딩을 할 수 있지만, 매우 불편합니다. 그래서 코딩을 수월하게 할 수 있도록 제공하는 IDE(통합 개발 환경)를 사용하는게 좋습니다. 가장 인기 있는 IDE 는 VSCode 이며, 마이크로 소프트에서 개발한 무료 IDE 입니다. VSCode 공식 홈페이지에서 다운로드 받아 설치합니다.

[Node.js] 템플릿 엔진 [내부링크]

1. 정적 파일과 동적 파일 정적 파일과 동적 파일의 가장 큰 차이점은 프로그래밍적으로 웹 페이지가 만들어졌느냐의 여부입니다. 1) 정적 파일 정적 파일은 html, css, js 파일과 같이 한번 만들어진 자원이 언제나 똑같이 보입니다. 아래와 같이 언제 어디서든, 어떤 이벤트에서든 보내든 title 은 항상 "타이틀" 이라고 출력됩니다. <head> <title>타이틀</title> </head> 2) 동적 파일 동적 파일은 사용자와 서버가 상호작용하며 페이지 내용의 일부 혹은 전부가 그때 그때 생성됩니다. 아래와 같이 동적으로 코드를 작성하면 이벤트에 따라 title 을 바꿔서 출력할 수 있습니다. <head> <title>${title}</title> </head> 정적 파일과 동적 파일은 각자 장단점을 가지고 있는데, 템플릿 엔진이라는 것을 사용하면 정적 파일의 장점과 동적 파일의 장점을 모두 얻을 수 있습니다. 2. 템플릿 엔진 템플릿 엔진 동작 방식 (출처 : https

[JavaScript] 자바스크립트 기본 문법 [내부링크]

1. 자바스크립트 작성 위치 HTML 에서 자바스크립트를 작성할 수 있는 위치는 2가지 입니다.  <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>Document</title> <script> document.write("[head] 자바스크립트 코드<br>"); </script> <script src="index_head.js"></script> </head> <body> <script> document.write("[body] 자바스크립트 코드<br>"); </script> <script src="index_body.js"></script> </body> </html> // index_head.js document.write("[head] 자바스크립트 파일<br>"); // index_body.js document.write("[body] 자바스크립트 파일<br>")

[JavaScript] 변수와 상수 [내부링크]

변수는 데이터를 담는 그릇이고, 상수는 변화하지 않는 데이터를 담는 그릇입니다. 자바스크립트에서 변수는 var, let 키워드를, 상수는 const 키워드를 사용합니다. 1. 변수 선언 형식 선언자 변수명 = 할당된 값; var x = "Hello World!"; 2. 네이밍 컨벤션 네이밍 컨벤션은 변수명을 짓는 규칙으로, 대표적으로 3가지가 있습니다. 카멜 표기법 (camelCase) 변수명이 두 단어 이상이면, 두 번째 단어 이후부터는 단어의 첫번째 문자를 대문자로 하고 나머지는 모두 소문자로 작성합니다. 스네이크 표기법 (snake_case) 변수명을 모두 소문자로 사용하며, 단어와 단어사이에 언더스코어(_)를 사용해서 연결합니다. 파스칼 표기법 (PascalCase) 카멜 표기법과 유사하지만, 첫 번째 단어의 첫 문자도 대문자로 사용합니다. 자바스크립트에서 변수명과 함수명은 카멜 표기법으로, 클래스명과 생성자명은 파스칼 표기법으로 사용하는 것을 권장합니다. 3. var 선언자

[JavaScript] 데이터 타입 [내부링크]

1. 기본 자료형 1) String String 타입은 쌍따옴표(") 혹은 홑따옴표(')를 사용해 변수에 할당합니다. let str1 = "Hello"; let str2 = 'Bye'; 2) Number Number(숫자) 타입은 따옴표 없이 사용합니다. 그리고 자바스크립트는 다른 프로그래밍 언어와 달리 integer, short, long 등의 숫자 타입 대한 구분이 없습니다. let num1 = 1234; // 소수점이 없는 정수 let num2 = 12.34; // 소수점이 있는 소수 3) Boolean Boolean 타입은 true 혹은 거짓 fals 를 나타내는 데이터 타입입니다. let isVisted = true; let isOk = false; 5 == 5; // true 5 == 6; // false 4) Undefined Undefined 는 데이터 타입이자 데이터 값으로, 단어 그대로 아무것도 존재하지 않는다는 것을 의미합니다. 변수를 선언하고 값을 할당하지 않으

[JavaScript] 연산자 [내부링크]

1. 할당 연산자 할당 연산자는 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당하는 것을 말합니다. 기본적으로 등호(=)를 이용해서 할당합니다. let x = 1; let y = x; 이름 복합 할당 연산자 뜻 할당 x = y x = y 덧셈 할당 x += y x = x + y 뺄셈 할당 x -= y x = x - y 곱셈 할당 x *= y x = x * y 나눗셈 할당 x /= y x = x / y 나머지 할당 x %= y x = x % y 지수 할당 x **= y x = x ** y 2. 비교 연산자 비교 연산자(==, !=, ===, !===, >, >=, <, <=)는 피연산자들을 비교하고 논리값을 반환합니다. 피연산자는 숫자뿐만 아니라 문자, 논리형, 객체를 사용할 수 있습니다. let num1 = 3; let num2 = 4; num1 == num2; // false num1 != num2; // true let num = 3; let str = "3"; num == str;

[Node.js] MVC 패턴 [내부링크]

1. MCV 패턴이란? MVC 패턴이란 애플리케이션을 만들때 모델(Model), 뷰(View), 컨트롤러(Controller) 세 가지 역할로 구분하는 소프트웨어 디자인 패턴입니다. MVC 패턴 (출처 : https://velog.io/@khy226/MVC-%ED%8C%A8%ED%84%B4%EC%9D%B4%EB%9E%80) 위 그림은 MVC 패턴의 흐름입니다. 클라이언트가 Controller 에 데이터를 요청하면, Controller 는 Model 에 데이터를 요청하고, Model 은 Controller 가 요청한 데이터를 전송합니다. 그리고 Controller 는 Model 에게 받은 데이터를 View 에게 전달하고, View 는 Controller 에게 받은 데이터를 클라이언트에게 전송합니다. 1) Controller 모델과 뷰 사이를 연결해주는 다리 역할 흐름 제어 사용자로 부터 입력을 받고 응답을 조종 2) Model 데이터의 조작 및 연산 처리를 담당 내부 비지니스로 로직

[JavaScript] 조건문 [내부링크]

조건문은 특정 조건에 대한 만족 여부에 따라 프로그램 코드를 실행시킬 수 있도록 해줍니다. 1. if 문 let age = 17; let isAdult = null; if (age >= 20) { isAdult = true; } else { isAdult = false; } let hour = 22; if (hour < 10) { console.log("Good morning"); } else if (hour < 18) { console.log("Good afternoon"); } else if (hour < 21) { console.log("Good evening"); } else { console.log("Good night"); } if 문 조건식이 true 인 경우 해당 코드 블록 실행 else if 문 먼저 정의된 if문 과 else if문 조건식이 false이고, 현재 else if 문의 조건식이 true 인 경우 해당 코드 블록 실행 else 문 모든 조건식이 false

[JavaScript] 반복문 [내부링크]

1. for-loop for (코드 블록이 실행되기 전에 한 번 실행; 코드 블록을 실행시킬 조건; 코드 블록을 실행한 후 실행) { ... } let brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"]; for (let i = 0; i < brands.length; i++) { console.log(brands[i]); } 실행 결과 2. for-in for (const key in object) { ... } let person = { name: "Cherry", age: 100, sex: "female" }; for (const key in person) { console.log(`${key} : ${person[key]}`); } 실행 결과 3. for-of for (const element of iterable) { ... } let brands = ["애플", "구글", "페이스북", "아마존", "삼성전자"]; for (const brand

[JavaScript] 함수 [내부링크]

1. 함수 정의 및 사용 프로그래밍 언어에서 특정 작업을 여러 번 반복해야 하는 경우 해당 작업을 재사용 가능한 구조로 만들게 되는데, 이 때 사용하는 것이 함수입니다. 함수로 구현한 코드는 그 함수를 호출함으로써 반복된 기능을 쉽게 처리할 수 있게 해줍니다. function 함수명 (파라미터값1, 파라미터값2, ...) { 실행 코드... return 반환값 } function sum(p1, p2) { let sum = p1 + p2; return sum; } let result = sum(2, 5); // 7 2. 함수에 대한 주석 처리 함수에 대한 주석 처리는 작성된 함수 바로 윗줄에 /** */ 를 입력하면 됩니다. 함수의 파라미터 개수와 return 포함 여부에 따라 함수에 대한 주석 처리가 자동완성됩니다. /** * * @param {number} n1 * @param {number} n2 * @returns n1 * n2 (곱셈 결과) */ function multipl

[SQL] 페이징 처리하기 [내부링크]

1. 페이징 처리란? 페이징 처리란 한 화면에서 보여주는 데이터의 범위를 지정하여 처리하는 방법을 말합니다. 일반적으로 게시판을 만들때 페이징 처리를 많이 사용합니다. 웹 사이트의 게시판을 보면 모든 게시물을 한 화면에 보여주지 않고, 페이지 번호에 따라 일정 개수만큼의 게시물을 보여줍니다. 2. LIMIT 구문을 사용한 페이징 처리 1) 쿼리문 MySQL 에서 페이징 처리를 할때 쿼리문에서 LIMIT 를 사용하여 페이징을 처리합니다. SELECT * FROM 테이블명 LIMIT A, B; 위 쿼리문은 특정 테이블에서 A + 1 행부터 B 개의 행을 출력합니다. 2) 예시 예를 들어 아래의 데이터를 한 페이지에 게시물을 5개씩 보여준다고 합시다. board 테이블 ① 1페이지에서 게시물 5개 보여주기 select * from board limit 0, 5; 쿼리문 실행 결과 ② 2페이지에서 게시물 5개 보여주기 select * from board limit 5, 5; 쿼리문 실행 결

[SQL] 트랜잭션 처리하기 [내부링크]

1. 트랜잭션 처리란? 트랜잭션(transaction)은 우리말로 '거래'를 뜻합니다. 은행 거래를 예를 들어, A은행 계좌에서 10만원을 B은행 계좌로 이체하려고 합니다. 간단히 A은행에서 10만원을 빼고, B은행에 10만원을 넣으면 됩니다. 그런데 이체 과정 중 오류가 발생해 A은행에서 10만원이 빠져나갔는데, B은행에 10만원이 입금되지 않았습니다. 오류로 인해 이러한 문제가 발생하지 않게 하기위해서는 B은행 계좌에 10만원이 들어온 것이 확인 되면 거래를 성사시키고, 그렇지 않으면 거래 자체를 없었던 것으로 취소하면 됩니다. 이것이 바로 트랜잭션 처리입니다. 즉 RDBMS 에서 잘못된 데이터 입력, 수정, 삭제 작업을 했다면 해당 작업을 취소하여 트랜잭션 처리를 합니다. 2. 트랜잭션 처리 방법 MySQL 에서는 이러한 트랜잭선 처리를 위해 COMMIT 문과 ROLLBACK 문을 사용합니다. COMMIT 문은 데이터 입력, 수정, 삭제 이후 이 작업을 영구적으로 테이블에 반영

[Node.js] createConnection vs createPool [내부링크]

Nodejs 는 mysql 모듈을 사용하여 데이터베이스에 접근할 수 있습니다. mysql 모듈로 데이터 베이스에 접근하는 방법에는 createConnection(), createPool() 2가지 방법이 있습니다. 1. createConnection() createConnection() 함수는 데이터 베이스와 단일 연결을 하는 방법으로, 아래와 같은 순서로 동작합니다. createConnection 데이터 베이스 연결 아래 코드는 createConnection() 함수를 사용한 데이터 베이스 연결 로직입니다. const express = require("express"); const router = express.Router(); const mysql = require("mysql"); router.get("/", (req, res) => { // 연결 객체 생성 const connection = mysql.createConnection({ host: "localhost", port

[Node.js] SQL 트랜잭션 사용하기 [내부링크]

Nodejs 프로젝트에서 mysql 모듈 혹은 mysql2 모듈을 사용해서 데이터 베이스와 연동할 수 있습니다. 데이터 베이스와 연동하여 쿼리문이 정상적으로 처리가 완료 되었을때 데이터 베이스에 접근하는 트랜잭션 처리에 대해서 알아보도록 하겠습니다. 1. mysql 모듈 mysql 모듈에서 트랜잭션을 처리하는 함수는 beginTransaction(), commit() rollback() 입니다. 이 함수들은 각각 MySQL 에서 START TRANSACTION, COMMIT, ROLLBACK 명령문을 실행하는 함수입니다. 위 3개의 함수를 이용하여 트랜잭션을 처리해보도록 하겠습니다. 아래 코드는 2개의 쿼리문이 모두 정상적으로 실행되었을때만 데이터베이스에 접근하는 즉, 트랜잭션을 처리하는 코드입니다. const mysql = require("mysql"); const express = require("express"); const router = express.Router(); //

[Node.js] 페이징 처리 [내부링크]

선수 지식 : 페이징 처리 개념 1. 페이징 처리 방법 서울특별시 게시판 1) 주어지는 값 rows 데이터베이스에서 받은 전체 게시물 currPage 클라이언트에게 받은 현재 페이지 displayRowCnt 화면에 보여지는 게시물 개수 displayPageCnt 화면에 보여지는 페이지 개수 2) 계산해야 하는 값 totalPage 전체 페이지 개수 Math.ceil(rows.length / displayRowCnt) startPage 화면에 보여지는 시작 페이지 Math.floor((currPage - 1) / displayPageCnt) * displayPageCnt + 1 endPage 화면에 보여지는 마지막 페이지 startPage + (displayPageCnt - 1) no 화면에 보여지는 첫번째 게시물 인덱스 displayRowCnt * (currPage - 1) result 화면에 보여지는 게시물 rows.splice(no, displayRowCnt) 2. 페이징 처리

[HTML] 들어가기에 앞서 [내부링크]

1. HTML 이란? HTML 은 Hyper Text Markup Language 의 줄임말로, 웹 페이지의 화면 골격을 만드는데 사용합니다. 2. 웹과 HTML 의 이해 웹이란 World Wide Web 의 줄임말로, 인터넷에 연결된 사용자들이 정보를 주고 받을 수 있는 연결된 공간을 의미합니다. 웹에서는 HTML 을 사용하여 만든 웹 문서를 통해 정보를 주고 받습니다. 이렇게 HTML 로 작성된 문서를 웹 페이지라고 부르며, 여러 개의 웹 페이지들을 그룹 지어 묶어 놓은 것을 웹 사이트라고 부릅니다. 3. 웹 디자인 & 웹 개발 커리큘럼 1) 웹 디자인 커리큘럼 HTML5 CSS3 JavScript 포토샵, 일러스트 등의 그래픽 프로그램 2) 웹 프론트 엔드 개발 커리큘럼 HTML5 CSS3 JavaScript 프레임 워크 (React, Vue, Angular 등) 3) 웹 백엔드 개발 커리큘럼 HTML5 CSS3 JavaScript 컴퓨터 공학 전공 분야 (운영체제, 컴퓨터 구

[HTML] 입문 - 1 [내부링크]

1. 선행 학습 1) 태그 구조 <태그이름 속성이름="속성값"></태그이름> <태그이름 속성이름="속성값" /> 2) 주석  3) 절대 주소와 상대 주소 절대 주소 고정적으로 변하지 않는 주소를 전부 적는 방식 상대 주소 현재 문서를 기준으로 주소를 찾는 방식 2. 문서 구조 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css" /> <script></script> <script src="main.js"></script> <meta charset="UTF-8" /> <meta name="author" content="저자" /> <meta name="description" content="페이지의 설명" /> <style> body { background-color: red; } </style> </head> <body> <h1>Hello, HTML5!</h1> </body> </html> 1

[HTML] 입문 - 2 [내부링크]

1. 제목 (Heading) 웹 페이지의 섹션이나 문단의 제목을 나타내는 블록 태그 <h1> ~ <h6> <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> 실행 결과 2. 리스트 (List) 목록을 생성하는 블록 태그 <ul> 순서가 없는 목록 <ol> 순서가 있는 목록 <li> 목록의 항목 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <h2>오늘의 할일</h2> <ul> <li>청소하기</li> <li>빨래하기</li> <li>세탁하기</li> </ul> <h2>라면 끓이는 방법</h2> <ol> <

[HTML] 입문 - 3 [내부링크]

1. 의미 없는 태그 - div, span 블록 태그인 <div> 와 인라인 태그인 <span> 은 태그들의 모양과 배치가 변경되지 않는 태그입니다. 이 태그들은 여러 개의 다른 태그들을 하나로 그룹 짓거나, 공통적인 스타일을 저장하기 위해 사용됩니다. <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div style="background-color: oldlace"> <h2>자기소개</h2> <p>안녕하세요 저는 <span style="color: lightcoral">Cherry</span>입니다.</p> </div> </body> </html> 실행 결과 2. 의미를 부여하는 속성 - class, id class 속성과 id 속성을 html 태그를 특정하기 위해 사용되는 속성으로, 태그에 정의된 class 와 id 는 css, javascript 등에서 선택자로 사용됩니다. class 속성의 값은 중

[Node.js] ES2015+ [내부링크]

1. const, let 자바스크립트에서 var 를 사용하여 변수를 선언했지만, 이제는 const 와 let 이 대체합니다. var 는 함수 스코프를 가지고, const 와 let 은 블록 스코프를 가집니다. if (true) { var x = 3; } console.log(x); // 3 if (true) { const y = 3; } console.log(y); // ReferenceError: y is not defined const 는 한 번 값을 할당하면 다른 값을 할당할 수 없고, 초기화할 때 값을 할당하지 않으면 에러가 발생합니다. let a = 0; a = 1; const b = 0; b = 1; // TypeError: Assignment to constant variable. const c; // SyntaxError: Missing initializer in const declaration 2. 템플릿 문자열 템플릿 문자열은 문자열 안에 변수를 넣을 수 있고, 백

[Node.js] 프런트엔드 자바스크립트 [내부링크]

1. AJAX (Asynchronous Javascript And Xml) AJAX 는 비동기적 웹 서비스를 개발할 때 사용하는 기법입니다. 이름에 xml 이 들어있지만, 꼭 xml 을 사용하는 것은 아닙니다. 요즘은 json 을 많이 사용합니다. 쉽게 말해 AJAX 는 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술입니다. 보통 AJAX 요청은 jQuery 나 axios 라이브러리를 이용해서 보냅니다. 1) jQuery <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script> $.ajax({ url: "http://localhost:8080/test", type: "get", success: function

[HTML] 기본 지식 [내부링크]

1. 블록 태그와 인라인 태그 블록 태그는 항상 전체 너비를 차지하고, 줄바꿈이 생깁니다. 인라인 태그는 자신의 크기만큼 차지하고, 줄바꿈이 생기지 않습니다. 분류 태그 종류 블록 태그 <div> <form> <table> <p> <pre> <form> <h1>~<h6> <ul> <ol> <li> <header> <nav> <aside> <main> <section> <article> <footer> 인라인 태그 <span> <textarea> <a> <button> <select> <label> <input> <img> <audio> <video> <iframe> <code> 2. 엔티티 엔티티는 html 에서 문자들을 표현하기 위해 제공되는 문자 집합입니다. 표시 문자 엔티티 이름 공백   < < > &gt? & & " “ ” ' ‘ ’ ··· &hellip 3. 시멘틱 태그 시멘틱 태그는 웹 페이지를 제작할 때 공

[HTML] 웹 접근성 [내부링크]

웹 접근성은 모든 신체적 한계, 환경적 한계를 고려해 개발하는 것을 의미합니다. 웹 접근성을 따르는 개발은 장애가 있거나 노령으로 인한 신체 변화, 여러 기기 환경을 사용하는 모든 사람이 웹 사이트를 사용할 수 있도록 개발하는 것을 의미합합니다. 프런트 엔드 개발자는 웹 접근성 지침을 준수하면서 개발해야 합니다. 1. 속어, 약어 사용을 지양하라 불필요한 전문 용어나 속어, 약어를 사용하면 사용자들이 정보를 이해할 가능성이 낮아져 사이트를 이해하기 매우 힘들어 집니다. 약어는 풀어서 모두가 이해할 수 있도록 작성하고, 속어나 비속어는 사용하지 않는 것을 권장합니다. 2. 컨텐츠의 제목과 단락을 명확하게 구분하자 시각적으로 정보를 획득하기 어려운 사람들을 위해 화면에 나타나는 정보를 스크린 리더라고 하는 기계가 음성으로 읽어줍니다. 스크린 리더는 컨텐츠의 제목과 단락을 기준으로 정보를 파악합니다. 정확한 정보를 전달하기 위해 html을 작성할 때, 제목 요소와 단락을 내용의 의미에 맞

[HTML] 검색 엔진 최적화(SEO) [내부링크]

1. 웹 크롤러 html로 만들어진 웹 페이지 속에는 수 많은 정보가 들어있습니다. 이런 정보를 수집하는 기계를 웹 크롤러 라고 합니다. 웹 크롤러는 정보를 수집하기 위해 웹 페이지의 html 구조를 확인하고 분석합니다. 예를 들어 <section> 태그 안에 <h2> 태그가 작성되어 있으면, 제목이 있는 컨텐츠임을 크롤러가 인지하고 컨텐츠를 분류하여 그 내용을 저장합니다. 그리고 웹 크롤러는 그 내용을 저장하고 있다가 요청된(검색된) 내용에 맞게 사용자에게 제공합니다. **웹 페이지의 정보를 시맨틱 태그로 작성하면 웹 크롤러는 정보의 의미를 명확하게 인식할 수 있습니다. 2. SEO(Search Engine Optimization) 우리의 사이트를 찾기 쉽도록 개선하는 것을 검색 엔진 최적화(SEO) 라고 합니다. 검색 사이트의 상단에 노출시키는 것은 서비스의 인기, 마케팅, 광고의 영역이라고 생각할 수 있습니다. 일부는 맞지만, 일부는 아닙니다. 개발자의 몇 가지 노력으로 서비스

[디자인] 그리드 시스템이란? [내부링크]

1. 그리드 시스템(Grid System) Grid 시스템 (출처 :https://imweb.me/faq?mode=view&category=28&category2=31&idx=189 ) 그리드 시스템은 페이지 컨텐츠를 논리적이고 일관성 있는 질서와 구조로 디자인할 수 있도록 돕는 그래픽 시스템입니다. 웹 디자인에서 그리드 시스템은 페이지의 디자인 영역을 나누고, 각 영역에 디자인 요소를 배치하는데 사용됩니다. 그리드 시스템은 아름다운 페이지를 디자인 하는데 도움을 주며, 사이트의 정보를 최적의 형태로 전달하는데 도움을 줍니다. (안정된 구조, 가독성, 심미성) 2. 그리드의 기본 요소 그리드의 기본 요소에는 container, column, gutter, margin 4가지가 있습니다. container, column, gutter, margin container 컨텐츠 폭 1920, 1600, 1440, 1280, 1200, 1080, 1024, 960, 768 column 단의

[디자인] 디자인에 유용한 사이트 [내부링크]

1. 디자인 참고 비핸스 드리블 핀터레스트 2. 색상 색상 조합1 색상 조합2 색상 조합3 시맨틱 색상(성공, 정보, 경고, 위험) 웹 접근성 색상 테스트 3. 폰트 구글 폰트 눈누 4. 아이콘 구글 아이콘 폰트어썸

[CSS] 배경(background) [내부링크]

1. background-color 배경의 색상을 지정합니다. 색상 이름 rgba hex div { width: 100px; height: 100px; margin: 10px; } div:nth-of-type(1) { background-color: coral; } div:nth-of-type(2) { background-color: rgba(255, 127, 81); } div:nth-of-type(3) { background-color: #FF7F51; } <body> <div></div> <div></div> <div></div> </body> 2. background-image 배경의 이미지를 지정합니다. url("이미지 경로") div { width: 300px; height: 300px; background-image: url("snow.jpg"); } <body> <div></div> </body> 3. background-repeat 배경 이미지의 반복과 반복 방향을

[CSS] 비율 설정 [내부링크]

aspect-ratio 속성을 사용하면 박스의 비율을 설정할 수 있습니다. body { display: flex; } .container { width: 100px; height: 200px; margin: 10px; border: 1px solid #000; display: flex; align-items: center; } .container > div { width: 100%; background-color: coral; } .item1 { aspect-ratio: 1.91/1; } .item2 { aspect-ratio: 16/9; } .item3 { aspect-ratio: 1/1; } .item4 { aspect-ratio: 4/5; } .item5 { aspect-ratio: 2/3; } .item6 { aspect-ratio: 9/16; } <body> <div class="container"> <div class="item1">1.91:1</div> </div> <d

[CSS] 말줄임 [내부링크]

글자가 특정 너비 혹은 줄을 넘어가는 경우 말줄임(...)을 사용할 수 있습니다. 1. 한 줄 말줄임 한 줄 말줄임에 필요한 속성은 3가지 입니다. overflow text-overflow white-space p { width: 100px; border: 1px solid #000; /* 말줄임 효과 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } <body> <div> <p>ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz</p> </div> </body> 2. 여러 줄 말줄임 여러 줄 말줄임에 필요한 속성은 7가지 입니다. overflow text-overflow display -webkit-line-clamp -webkit-box-orient word-break p { width: 100px; border: 1px solid #000; /* 말줄임 효과 */

[CSS] 이미지 스프라이트 기법 (IS) [내부링크]

1. 이미지 스프라이트란? 아이콘, 버튼 같은 자주 쓰이는 이미지 파일들을 하나의 파일로 제작한 후, background-position 속성을 이용하여 이미지를 배치하는 방법입니다. velog.io/@untiring_dev/HTMLCSS-Day31.-이미지-스프라이트-기법 쉽게 말해서 각각의 이미지 파일을 개별적으로 사용하는 것이 아니라, 하나의 파일에서 각각의 이미지를 가져오는 방식을 말합니다. 이미지 스프라이트는 img 태그가 아니라, css의 background-image 속성을 사용하여 처리합니다. **이미지 스프라이트를 사용하면 img 태그가 아닌 background-image 로 처리되기 때문에, alt 속성을 지정할 수 없습니다. 따라서 아이콘, 로고와 같이 의미상 크게 중요하지 않고 디자인을 목적으로 하는 경우에 사용합니다. 만약 이미지에 의미를 부여해야 한다면, IR 기법을 추가로 사용합니다. 2. 장점과 단점 1) 장점 페이지의 로딩 시간이 줄어듭니다. 서버의 요

[CSS] IR 기법 [내부링크]

1. 이미지를 표현하는 방법 1) img 태그 이미지 의미가 있을 때 사용하며, alt 속성으로 대체 문자를 제공합니다. <img src="coffee.png" alt="따뜻한 아메리카노" /> 2) css 의 background 속성 이미지 의미가 없을 때 사용하며, 대체 문자를 제공하지 않습니다. .coffee { background-image: url("coffee.png"); } 2. IR(Image Replacement) 기법 웹 접근성을 준수하기 위해 이미지 사용시 대체 텍스트를 제공해야 합니다. css 의 background 속성을 사용하여 이미지를 표현시, IR 기법을 사용하여 대체 텍스트를 제공할 수 있습니다. 즉, IR 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것입니다. 3. IR 기법의 종류 1) Phark Method 의미 있는 이미지의 대체 텍스트를 제공하는 경우 사용합니다. 이미지를 로드하지 않으면 텍스트가 보이지 않습니다. 스크

[CSS] Flex [내부링크]

Flex 는 레이아웃 배치를 위한 전용 기능입니다. 1. 컨테이너 속성 (부모 요소) 1) flex-direction 아이템이 배치되는 축의 방향을 지정하는 속성입니다. .container { display: flex; flex-direction: row | row-reverse | columnn | column-reverse; } 2) flex-wrap 아이템의 크기가 컨테이너의 전체 크기보다 커질 때 아이템의 줄바꿈을 지정하는 속성입니다. .container { display: flex; flex-wrap: nowrap | wrap | wrap-reverse; } 3) jutify-content 메인 축 방향의 아이템 정렬을 지정하는 속성입니다. .container { display: flex; justify-content: flex-start | center | flex-end | space-between | space-around | space-evenly; } 4) alig

[CSS] Grid [내부링크]

Grid 는 flex와 같이 CSS에서 레이아웃을 다루기 위해 사용되는 기능입니다. flex 가 단일 방향(가로 또는 세로) 레이아웃을 배치한다면, 그리드는 표와 같이 두 방향(가로와 세로)의 레이아웃을 배치한다는 차이점이 있습니다. 1. 컨테이너 속성 (부모 요소) 1) grid-template-columns, grid-template-rows 그리드의 행(row)과 열(column)의 크기를 지정하는 속성입니다. <body> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div> </body> .container { display: grid; grid-template-columns: 1fr 3fr; gri

[JavaScript] String 객체 [내부링크]

String 객체는 자바스크립트에서 문자열을 다루기위한 객체입니다. 1. length 문자열 길이를 반환하는 함수입니다. let txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let len = txt.length; console.log(len); // 26 실무 사용 사례 회원 가입시, 비밀번호 길이 확인 주민번호 앞 6자리인 생년월일 입력 길이 확인 2. indexOf() 문자열 안에 찾고자 하는 문자열이 시작되는 index를 반환하는 함수입니다. 찾고자 하는 문자열이 존재하지 않는다면 -1를 반환합니다. let str = "Please locate where 'locate' occurs!"; let pos = str.indexOf("locate"); console.log(pos); // 7 실무 사용 사례 입력된 전화번호 데이터에 하이픈(-)이 있는지 확인 3. slice() 파라미터로 시작 위치와 종료 위치를 주면, 문자열에서 해당 부분을 잘라내서 반환하는 함

[JavaScript] Number 객체 [내부링크]

Number 객체는 숫자를 다룰때 유용한 프로퍼티와 함수를 제공하는 객체입니다. 1. toString() 숫자형 데이터를 문자형 데이터로 반환해주는 함수입니다. let num = 123; let str = num.toString(); console.log(typeof num); // number console.log(typeof str); // string 실무 사용 사례 Date 객체의 내장 함수인 getMonth() 함수를 호출하면 월에 해당하는 값을 숫자로 반환합니다. 10월보다 작은 경우에만 앞에 '0'을 붙이는 padStart() 함수를 사용하기 위해서 문자열로 변환해야 합니다. 2. toFixed() 소수점 몇 번째 자리까지 보여줄지 결정하는 함수로, 지정된 소수점 자릿수에 대해 반올림한 값을 반환합니다. let x = 10.656; console.log(x.toFixed(0)); // 11 console.log(x.toFixed(2)); // 10.66 console.l

[JavaScript] Array 객체 [내부링크]

Array 객체는 자바스크립트에서 배열을 다루기 위한 객체입니다. 1. toString() 배열안의 모든 문자를 쉼표(,)를 이용해 모두 결합해서 하나의 문자열로 반환하는 함수입니다. let fruits = ["Apple", "Banana", "Cherry", "Durian"]; console.log(fruits.toString()); // Apple,Banana,Cherry,Durian 2. join() 배열 안의 모든 문자를 파라미터로 지정한 문자를 이용해서 모두 결합해서 하나의 문자열로 반환하는 함수입니다. let fruits = ["Apple", "Banana", "Cherry", "Durian"]; console.log(fruits.join(" * ")); // Apple * Banana * Cherry * Durian 실무 사용 사례 문자열을 합쳐야 하는 경우 더하기(+)를 이용해서 문자열을 합칠 수도 있지만, 합쳐야할 문자열이 많은 경우는 더하기를 이용하는 것보다, 배열

[JavaScript] Date 객체 [내부링크]

Date 객체는 자바스크립트에서 날짜와 시간을 다루는 객체입니다. 사용자 브라우저의 타임존을 기준으로 날짜와 시간을 보여줍니다. 1. Date 생성자 Date 객체는 아래와 같이 생성할 수 있습니다. let now = new Date(); console.log(now); // Sat Oct 01 2022 09:16:53 GMT+0900 let date = new Date(2022, 5 - 1, 24, 10, 33, 30); // 월은 0부터 시작 console.log(date); // Tue May 24 2022 10:33:30 GMT+0900 console.log(new Date(0)); // Thu Jan 01 1970 09:00:00 GMT+0900 console.log(new Date(0 + 100000000000)); // Sat Mar 03 1973 18:46:40 GMT+0900 2. Set / Get 함수 Date 객체에 내장되어 있는 Set / Get 함수는 다음과

[JavaScript] Set 객체 [내부링크]

Set객체는 배열처럼 값들의 집합입니다. 배열과 가장 큰 차이점은 Set은 중복값을 허용하지 않습니다. 1. Set 생성자 Set 은 new Set() 생성자를 사용해서 생성합니다. let mySet = new Set(); 2. add() 새로운 데이터를 추가하는 함수입니다. 이때 추가하려는 데이터가 이미 저장되어 있는지 확인하고, 이미 동일한 데이터가 저장되어 있다면 데이터는 추가되지 않습니다. let mySet = new Set(); mySet.add(1); mySet.add(2); mySet.add(3); mySet.add(1); console.log(mySet); // {1, 2, 3} 3. has() 특정 데이터가 저장되어 있는지 확인하는 함수입니다. let mySet = new Set(); mySet.add(1); console.log(mySet.has(1)); // true console.log(mySet.has(0)); // false 4. delete() 저장되어 있

[JavaScript] Map 객체 [내부링크]

Map 객체는 키(key)와 값(value)을 맵핑시켜 값을 저장하며, 저장된 순서대로 각 요소에 접근할 수 있는 객체입니다. 1. Map 생성자 Map 객체 생성은 new Map() 생성자를 사용합니다. let myMap = new Map(); 2. set() 키(key)와 값(value)을 이용하여 데이터를 저장하는 함수입니다. let myMap = new Map(); myMap.set("name","홍길동"); myMap.set("email","[email protected]"); myMap.set("phone","000-0000-0000"); console.log(myMap); // {'name' => '홍길동', 'email' => '[email protected]', 'phone' => '000-0000-0000'} 3. get() 키(key)를 이용하여 저장된 데이터의 값(value)을 읽는 함수입니다. let myMap = new Map(); myMap.set("name","홍길동"

[JavaScript] Math 객체 [내부링크]

Math 객체는 수학적인 상수와 내장 함수를 가진 객체로, 숫자 자료형만 지원합니다. 1. Math.round(), Math.ceil(), Math.floor() 숫자에 대한 반올림, 올림, 내림 처리를 하는 함수입니다. console.log(Math.round(4.8)); // 5 console.log(Math.round(4.2)); // 4 console.log(Math.round(-4.8)); // -5 console.log(Math.round(-4.2)); // -4 console.log(Math.ceil(4.8)); // 5 console.log(Math.ceil(4.2)); // 5 console.log(Math.ceil(-4.8)); // -4 console.log(Math.ceil(-4.2)); // -4 console.log(Math.floor(4.8)); // 4 console.log(Math.floor(4.2)); // 4 console.log(Math.floor

[JavaScript] JSON 객체 [내부링크]

1. JSON 객체란? JSON(JavaScript Object Notation)은 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식으로, 키(key)와 값(value)를 가집니다. 키(key)는 반드시 쌍따옴표("")를 이용해서 표기해야 합니다. let data = { "employees": [ { "firstName": "John", "lastName": "Doe" }, { "firstName": "Anna", "lastName": "Smith" }, { "firstName": "Peter", "lastName": "Jones" }, ] }; 2. JSON 객체의 내장 함수 1) JSON.stringify() 데이터를 서버로 전송하기 위해서는 데이터 형태를 문자열 형태로 변환해야 합니다. JSON.stringify() 는 Object 데이터를 문자열로 변환해줍니다. 2) JSON.parse() 서버로부터 응답받은 데이터는 문자열 형태입니다. JSON.pars

[JavaScript] Window 객체 [내부링크]

window 객체는 전역 객체입니다. 1. alert() 윈도우 화면에 경고 메시지를 출력하는 함수입니다. alert("경고 메시지를 출력합니다."); 2. confirm() 윈도우 화면에 진행(확인)할지, 종료(취소)할지에 대한 진행 여부 메시지를 출력하는 함수입니다. if (confirm("정말 삭제하시겠습니까?")) { console.log("삭제 실행"); } 3. prompt() 윈도우 화면에 문자열을 입력받는 메시지를 출력하는 함수입니다. let pwd = prompt("비밀번호를 입력하세요."); if (pwd == null) { console.log("취소 버튼 클릭"); } else if (pwd.trim() == "") { console.log("빈값 입력 후, 확인 버튼 클릭"); } else if (pwd.trim() != "") { console.log("값 입력 후, 확인 버튼 클릭"); } 4. window.open() 윈도우 새 창/새 탭으로 지정한 ur

[JavaScript] 고급 문법 [내부링크]

1. Default Function Parameter 함수를 호출할 때 함수의 파라미터를 전달하지 않으면, 함수 내에서 파라미터값은 undefined 가 됩니다. 만약 파라미터가 함수 내에서 특정 기능을 구현하기 위해 반드시 값이 필요한 상태라면, 파라미터 기본값을 설정할 수 있습니다. function say1(message) { if (message != undefined) { console.log(message); } else { console.log("파라미터 값이 존재하지 않습니다."); } } function say2(message = "파라미터 값이 존재하지 않습니다.") { console.log(message); } say1(); // 파라미터 값이 존재하지 않습니다. say2(); // 파라미터 값이 존재하지 않습니다. 2. Rest Parameter 함수의 파라미터로 몇 개의 파라미터가 전달될지 모를 경우, 함수의 파라미터를 선언할 때 "...파라미터명" 형식을 사용

[JavaScript] Promise & Async/Await [내부링크]

1. Promise Promise 는 자바스크립트에서 비동기 처리에 사용되는 객체입니다. 비동기 처리란 특정 코드의 실행이 완료도리 때까지 기다리지 않고 다음 코드를 실행할 수 있게 해주는 방식을 의미합니다. Promise 는 자바스크립트에서 브라우저에서 제공하는 비동기 함수인 Web API(DOM, Ajax, setTimeout) 를 실행할 때 실행한 코드가 완료될 때까지 대기하지 않고 바로 다음 코드를 실행할 수 있도록 해줍니다. 비동기 함수인 Web API 실행이 완료되면 then() 함수를 통해서 그 결과에 대한 코드를 실행할 수 있게 해줍니다. Promise 는 new 생성자 함수를 사용해서 생성하고, 요청에 대한 응답이 성공적으로 오면 resolve() 함수에 결과를 전달합니다. 요청에 대한 응답에 실패하면 reject() 함수에 에러를 전달합니다. const promise = new Promise((resolve, reject) => { if(/* 처리 성공*/) { r

[JavaScript] Modules [내부링크]

모듈은 특정한 목적을 가진 여러 개의 함수로 구성된 라이브러리입니다. 자바스크립트에서 모듈은 export, import 키워드를 사용해서 불러오고 내보낼 수 있습니다. export 모듈을 내보냅니다. import 모듈을 가져옵니다. 다음은 HTML의 script 태그 안에서 log.js 파일에 선언된 함수를 사용하는 예제입니다. log.js export function log(message) { console.log(message); } export function error(message) { console.error(message); } index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>모듈</title> <script type="module"> import { log } from "./log.js"; log("log로 메시지 출력"); </script> </head> <body> </

[JavaScript] Class [내부링크]

클래스는 객체를 생성하기 위한 템플릿입니다. 클래스는 데이터와 이를 조작하는 코드를 하나로 추상화합니다. 1. Class 정의 클래스는 클래스명 앞에 class 라는 키워드를 사용해서 정의합니다. 그리고 반드시 constructor 함수를 가집니다. constructor 함수는 class 로 생성된 객체를 생성하고 초기화하기 위한 특수 함수입니다. class 클래스명 { constructor(매개변수) { // 초기화 코드 } } class Car { constructor(model, price) { this.model = model; this.price = price; } } 2. Class 사용 정의된 클래스는 new 키워드를 사용해서 클래스를 생성합니다. class Car { constructor(model, price) { this.model = model; this.price = price; } } let ionic = new Car("아이오닉", 4000); let gen

[JavaScript] Error [내부링크]

1. try...catch 문 자바스크립트에서 오류는 try...catch 문을 통해 관리할 수 있습니다. try 블록에는 오류가 발생할 수 있는 코드를 작성하고,catch 블록에는 예외(exception)가 발생(throw)할 경우에 예외에 대한 처리를 작성합니다. try { console.log("START") nonExistentFunction(); // 존재하지 않는 함수 호출 } catch(error) { console.log(error); console.log(`[${error.name}] ${error.message}`); } finally { console.log("END"); } /* START ReferenceError: nonExistentFunction is not defined at <anonymous>:3:5 [ReferenceError] nonExistentFunction is not defined END */ try 블록에 작성된 코드를 실행하는 중에 예

[JavaScript] Postman Mock서버 [내부링크]

Mock 서버는 실제 서버처럼 클라이언트로부터 요청을 받고 응답을 주는 가짜서버입니다. Mock 서버를 사용함으로써 실제처럼 api 를 호출해 데이터를 받아와서 사용할 수 있습니다. 1. Postman 설치 Postman 은 API 개발을 위한 협업 플랫폼입니다. Postman을 사용하면 개발된 API 를 테스트, 모니터링, 공유하여 API 개발의 생산성을 높일 수 있습니다. Posman 은 공식 홈페이지에서 다운로드 받아 설치할 수 있습니다. **Mock서버를 사용하기 위해서는 반드시 회원가입을 해야합니다. 2. Mock 서버 생성 ① 좌측 상단의 New 버튼을 클릭 후, Mock 서버를 선택합니다. ② Request URL 에 임시 url 을 하나 설정한 후, Next 버튼을 클릭합니다. ③ Mock 서버의 이름을 입력한 후, Create 버튼을 클릭합니다. ④ Postman 의 좌측 탭 중 Collection 탭에 생성한 Mock 서버의 이름과 동일한 Collection이 만들

[JavaScript] XMLHttpRequest [내부링크]

XMLHttpRequest(XHR) 객체는 서버와 상호작용하기 위해 사용됩니다. 전체 페이지를 새로 고침하지 않아도 URL을 통해 데이터를 전송하거나 받아올 수 있습니다. XMHHttpRequest 객체는 브라우저에서 제공하는 Web API이기 때문에 브라우저 환경에서만 정상적으로 동작됩니다. (node.js 환경에서는 제공되지 않습니다.) 1. 객체 생성 XMLHttpRequest() 생성자 함수를 호출해서 생성합니다. const xhr = new XMLHttpRequest(); 2. 요청 전송 XMLHttpRequest 의 내장 함수인 open() 와 setRequestHeader() 를 사용하여 요청에 필요한 정의를 끝낸 후, send() 함수를 통해 서버에 요청을 보냅니다. open(HTTP Method, URL) HTTP Method(GET, POST, PUT, PATCH, DELETE) 와 요청 URL 정의 setRequestHeader("content-type", con

[JavaScript] Fetch [내부링크]

Fetch 는 XMLHttpRequest 처럼 서버와 상호작용 하기 위해 사용되는 네트워크 통신 메서드입니다. Fetch 와 XMLHttpRequest 의 가장 큰 차이점은 Fetch 는 Promise 방식으로 구현되어 있다는 점입니다. 1. 요청 전송 & 응답 처리 fetch() 함수를 통해서 데이터를 요청하고, 응답이 이루어지면 응답받은 결과는 then() 함수의 인수로 전달받게 됩니다. fetch("/posts", { method: "POST", // HTTP 요청 방법 body: JSON.stringify({ // 전송할 데이터 id: 2, title: "XMLHttpRequest", author: "Cherry", }), headers: { // 헤더 값 정의 "content-type": "application/json; charset=utf-8", }, }) .then((res) => res.json()) .then((json) => console.log(json)); 2

[JavaScript] Local / Session Storage [내부링크]

LocalStorage 와 SessionStorage 는 브라우저 환경에서만 동작하는 웹 브라우저 저장소 Web API 입니다. 1. LocalStorage 로컬스토리지는 저장된 데이터를 삭제하기 전까지 영구히 보존되며, 도메인별로 최대 5M 까지 저장할 수 있습니다. 데이터는 key-value 의 쌍으로 저장되고, 저장되는 모든 값은 문자열로만 저장할 수 있습니다. Number, Boolean, Object, Array 같은 형태의 데이터를 저장할 때는 JSON.stringify 를 이용하여 문자열로 변환해 저장하면 됩니다. 반대로 데이터를 읽을 때는 JSON.parse 를 이용하여 원래의 데이터 형태로 변환해서 사용합니다. 로컬 스토리지는 보안에 위배되지 않고, 영구히 저장해도 상관없는 데이터를 저장할 때 적합합니다. localStorage.setItem() 로컬 스토리지 데이터 저장 localStorage.getItem() 로컬 스토리지 데이터 조회 localStorage.re

[CSS] 레이아웃 그리기 1 [내부링크]

index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Layout01</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="wrap"> <header></header> <nav></nav> <main> <aside></aside> <article></article> </main> <footer></footer> </div> </body> </html> 1. Flex 로 레이아웃 그리기 style.css /* 전체 초기화 */ * { margin: 0; padding: 0; } body { background-color: #FFF3E0; } /* 전체 레이아웃*/ #wrap { width: 1200px; margin: 0 auto; } header { width: 100%; height: 100px; backgrou

[CSS] 레이아웃 그리기 2 [내부링크]

index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Layout02</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="wrap"> <header></header> <nav></nav> <main> <aside></aside> <section></section> <article></article> </main> <footer></footer> </div> </body> </html> 1. Flex 로 레이아웃 그리기 style.css /* 전체 초기화 */ * { margin: 0; padding: 0; } body { background-color: #E8F5E9; } /* 전체 레이아웃*/ #wrap { width: 1200px; margin: 0 auto; } header { width: 100%; hei

[CSS] 레이아웃 그리기 3 [내부링크]

index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Layout03</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="wrap"> <header></header> <nav></nav> <main> <aside></aside> <section> <article id="article1"></article> <article id="article2"></article> <article id="article3"></article> </section> </main> <footer></footer> </div> </body> </html> 1. Flex 로 레이아웃 그리기 style.css /* 전체 초기화 */ * { margin: 0; padding: 0; } body { background-color: #E1F5FE

[CSS] 레이아웃 그리기 4 [내부링크]

index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Layout04</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="wrap"> <header> <div class="container"></div> </header> <nav> <div class="container"></div> </nav> <section> <div class="container"></div> </section> <footer> <div class="container"></div> </footer> </div> </body> </html> 1. Flex 로 레이아웃 그리기 style.css /* 전체 초기화 */ * { margin: 0; padding: 0; } /* 전체 레이아웃*/ #wrap { width: 100%; } header

[CSS] 레이아웃 그리기 5 [내부링크]

index.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Layout05</title> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="wrap"> <header> <div class="container"></div> </header> <nav> <div class="container"></div> </nav> <main> <div class="container"> <aside></aside> <section> <article id="article1"></article> <article id="article2"></article> <article id="article3"></article> </section> </div> </main> <footer> <div class="container"></div> </footer> </

프로토타이핑(ProtoTyping) 이란? [내부링크]

1. 프로토타이핑(ProtoTyping) 이란? 프로토타이핑은 소프트웨어 개발 전, 미리 UX(인터페이스)/UI(...

01 디바이스 [내부링크]

프로토파이에서는 다양한 기기의 프레임이 제공됩니다. IOS, IPadOS, Android, 데스크탑 등 원하는...

02 레이어의 Origin과 좌표체계 [내부링크]

1. 레이어의 Origin 1) Origin - 레이어를 변화시킬 때, 중심이 되는 축 - 기본값은 좌측상단 2) 예제 1 ...

03 스크롤과 페이징 인터랙션 이해하기 [내부링크]

1. 스크롤 1) 스크롤 - 세로 혹은 가로로 긴 레이어를 스크롤 2) 속성 3) 예제 - direction 은 , overscr...

04 원타임 트리거 [내부링크]

OneTime Trigger 1. Tap 1) 정의 - 레이어를 한번 탭했을 때, 리스폰스를 실행 2) Trigger 속성 2. D...

05 컨티뉴어스 트리거 [내부링크]

Continuous Trigger 1. Drag 1) 정의 - 레이어를 드래그하여 움직이거나, 손가락의 이동 거리에 비례하...

06 센서 트리거 [내부링크]

Sensor Trigger ※센서 트리거의 Response 속성 - Move 1. Tilt 1) 정의 - 디바이스를 기울이는 각도...

07 컨티셔널 트리거 [내부링크]

Conditional Triiger 1. Chain 1) 정의 - 움직이는 레이어가 있을 때, 이 레이어의 변화에 따라 다른 레...

08 리스폰스 [내부링크]

1. Scroll 1) 정의 - 레이어를 특정 위치로 스크롤 2) 속성 2. Reorder 1) 정의 - 레이어의 순서를 변경 ...

04 인공 신경망의 신호 전달 원리 [내부링크]

인공 신경망은 우리 뇌의 뉴런이 서로 신호를 주고받는 모습과 유사하게 만들어졌습니다. 그래서 인공 신경망은 두 가지 상황으로 나누어 설명할 수 있는데, 첫 번째 상황은 신호를 전달하는 과정이고, 두 번째 상황은 신호를 전달받는 과정입니다.1. 신호를 전달할 때 사용하는 가중치와 편향인공 신경망은 뉴런에서 다음 뉴런으로 신호들을 전달하고, 최종적으로 결과를 출력합니다. 이때, 뉴런에서 다음 뉴런으로 신호를 전달할 때, 단순하게 신호를 전달하는 것이 아니라 신호 세기를 변경해서 전달합니다. 현재 뉴런의 신호세기에 가중치(weight)라는 값을 곱하고 편향(bias)이라는 값을 더하여 신호 세기를 변경한 뒤, 변경한 신호 세.......

05 인공 신경망의 학습 원리 [내부링크]

인공지능 모델에서 최종적으로 나온 출력값이 항상 맞으면 좋지만, 그렇지 않다면 인공지능을 다시 학습시킬 필요가 있습니다. 즉, 정확하게 예측하지 못한다면 정확하게 예측하도록 해 줄 필요가 있습니다. 인공지능이 정확하게 예측하도록 하기 위해서는 출력값과 실제 정답을 비교하여 오차를 구하고 그 오차를 최소화 하는 방향으로 학습하면 됩니다.'01 딥러닝 원리 이해하기' 에서 말한 인공지능 모델 3가지를 기억하시나요? 첫 번째 모델은 남자인지 여자인지를 구분하는 인공지능 모델입니다. 두 번째 모델은 그 사람의 나이대를 맞히는 모델, 마지막 세 번째 모델은 그 사람의 정확한 나이를 알아 맞히는 인공지능 모델입니다.......

06 다양한 딥러닝 기술 살펴보기 [내부링크]

인공 신경망(ANN)은 다양한 딥러닝 기술의 기초입니다. 인공 신경망의 층을 여러개로 해서 깊게 만든 것이 심층 신경망(DNN)이며, 이 심층 신경망을 학습시키는 과정을 바로 딥러닝이라고 하기 때문입니다. 딥러닝 기술은 인공 신경망이 어떤 식으로 구성되어 있는지에 따라 구별되므로 인공 신경망을 이해하는 것이 가장 우선이 되어야 합니다.인공 신경망을 사용하여 이미지를 인식하는 인공지능의 개발과정을 잠시 살펴보도록 하겠습니다. 숫자를 인식하는 인공지능 개발을 예로 들어보겠습니다.위 그림은 기본적인 인공 신경망으로 숫자 '0'의 이미지를 학습하는 과정입니다. (그림에 나타난 왼쪽 이미지는 픽셀로 이루어진 &#x2.......

01 인공지능 개념 이해하기 [내부링크]

1. 인공지능이란 무엇일까요?인공지능이란 말 그대로 '인공적으로 만든 지능'을 의미합니다.여기서 지능이란 무엇인가를 보고 그것이 무엇인지 알 수 있는 능력, 무엇인가를 듣고 어떤 의미인지 이해하고 생각할 수 있는 능력을 뜻합니다. 즉, 지능이란 지적작업에 필요한 능력을 의미합니다. 예를 들어, 우리가 길을 가다가 바닥에 떨어진 돈을 발견했다고 합시다. 그러면 우리는 바닥에 떨어진 돈을 보고 그 돈이 진짜인지 가짜인지 구분을 합니다. 여기서 돈을 보고 그것이 진짜돈인지 아닌지 판단하는 것을 지능이라고 합니다. 이와 같은 지능을 사람이 아닌 기계가 가질 수 있도록 하는 것이 바로 인공지능입니다.인공지능의 대표.......

02 머신러닝의 학습 방법 살펴보기 [내부링크]

"01 인공지능 개념 이해하기" 에서 딥러닝은 다양한 머신러닝 기법 중 하나라고 설명했습니다. 이 말은 곧 머신러닝에는 여러 기법이 있다는 말을 뜻합니다.머신러닝의 기법은 학습 방법에 따라 지도 학습, 비지도 학습, 강화 학습 이렇게 세 가지로 구분할 수 있습니다.1. 지도학습1) 지도 학습이란?머신러닝은 데이터를 사용해서 스스로 학습을 하는데, 이때 사용하는 데이터가 정답 데이터라면 이를 지도 학습 이라고 부릅니다. 즉, 지도학습은 정답(레이블)이 있는 데이터를 사용해서 스스로 학습하는 것입니다. 그렇다면 여기서 정답 데이터란 무엇을 의미할까요? 정답 데이터란 말 그대로 정답(레이블)이 달려있는 데이터를.......

03 딥러닝 원리 이해하기 [내부링크]

1. 딥러닝과 인공 신경망딥러닝은 인공지능을 만들기 위한 방법 중 하나로, 사람의 뇌에서 이루어지는 원리를 이용하여 인공지능을 만듭니다. 사람의 뇌는 뉴런이라는 세포가 무수히 많이 얽혀있는데, 이를 신경망이라고 하며, 이러한 신경망을 인공적으로 만든 것을 인공 신경망(ANN, Artificial Neural Network)이라고 합니다.인공 신경망의 모습은 아래 그림과 같습니다.인공 신경망은 신경망의 뉴런과 뉴런이 연결된 모습을 층(layer)이라는 개념을 사용하여 연결합니다.위 그림은 입력층, 은닉층, 출력층으로 구성된 인공 신경망입니다.입력층은 데이터를 입력받는 층입니다. 예를 들어, 남자와 여자를 구분하는 인공지능이 있다고 합시다. .......