나만을 위한 블로그

리액트 공부 중 State와 Prop이라는 걸 알게 됐는데 중요한 키워드 같아서 state 먼저 확인한 다음 포스팅한다. 먼저 공식문서에선 뭐라고 설명하는지 확인해봤다. https://ko.reactjs.org/docs/faq-state.html 컴포넌트 State – React A JavaScript library for building user interfaces ko.reactjs.org prop(properties의 줄임말)와 state는 일반 자바스크립트 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내 선언된 변수처럼) 컴포넌트 안에서 관리한다. Rea..

안드로이드에도 컴포넌트라는 개념이 있는데(액티비티, 브로드캐스트 리시버, 서비스, 컨텐츠 프로바이더) 리액트에도 컴포넌트라는 개념이 있었다. 리액트 공식문서에서 말하는 컴포넌트는 아래와 같다. https://ko.reactjs.org/docs/components-and-props.html Components와 Props – React A JavaScript library for building user interfaces ko.reactjs.org 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있다. 개념적으로 컴포넌트는 자바스크립트 함수와 유사하다. "props"라는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 리액트 엘리먼트를 반환한..

https://ko.reactjs.org/docs/introducing-jsx.html JSX 소개 – React A JavaScript library for building user interfaces ko.reactjs.org 리액트에선 본질적으로 렌더링 로직이 UI 로직(이벤트 처리 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들인다. 리액트는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신 둘 다 포함하는 "컴포넌트"라고 하는 느슨하게 연결된 유닛으로 관심사를 분리한다...(중략)...리액트는 JSX 사용이 필수가 아니지만 대부분의 사람은 자바스크립트 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 ..

안드로이드를 쓰다가 CSS를 연습해보니 헷갈려서 따로 정리해둔다. list-style 이 속성은 ol, ul, li 태그에 적용할 수 있고 리스트로 표시되는 요소들의 모양, 위치, 이미지를 정의하는 속성이다. MDN에선 아래 예시들을 보여준다. /* type */ list-style: square; /* image */ list-style: url('../img/shape.png'); /* position */ list-style: inside; /* type | position */ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/shape.png') outside; /* Keywo..

HTML 코드를 구경하다 보면 이렇게 써진 걸 볼 수 있다. 버튼 태그를 썼으니 버튼처럼 작동할텐데 굳이 type 속성까지 써가며 버튼이란 걸 다시 한 번 정의할 필요가 있을까? 싶어서 관련 내용을 찾아봤다. 결론은 저렇게 type을 지정하는 이유는 HTML에서 버튼의 기본 동작은 submit이기 때문이다. 버튼의 type은 3가지 있다. submit : 현재 양식 데이터를 제출한다 (기본값) reset : 현재 양식 데이터를 재설정한다 button : 그냥 버튼이다. 효과는 다른 것(=자바스크립트)으로 제어돼야 한다 버튼에 type을 지정하지 않으면 버튼의 기본 type은 submit이 된다. 그래서 버튼을 보고 다음 페이지로 이동하겠거니 싶어서 버튼을 눌렀는데 입력란에 썼던 데이터가 서버로 전송될 수..

이번 포스팅에선 웹 개발이란 단어를 생각하면 떠오르는 3대장 중 자바스크립트에 대해 포스팅하려고 한다. 소프트웨어 커뮤니티 중 하나인 MDN에선 자바스크립트를 아래와 같이 말하고 있다. https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript JavaScript가 뭔가요? - Web 개발 학습하기 | MDN MDN의 JavaScript 초급자 과정에 오신 걸 환영합니다! 이 글은 JavaScript를 넓게 보면서 "뭔가요?", "뭘 하나요?"와 같은 질문을 답변하고, 여러분이 JavaScript에 친숙해지도록 도와드립니다. developer.mozilla.org 자바스크립트는 복잡한 무언가(주기적으로 내용이 ..

코틀린에는 자바와 달리 특수한 클래스가 존재한다. Data Class와 Sealed Class라는 것인데 각각 어떤 것인지 정리한다. Data Class 코틀린 공식 홈페이지에서 설명하는 Data Class는 아래와 같다. https://kotlinlang.org/docs/data-classes.html Data classes | Kotlin kotlinlang.org 주요 목적이 데이터를 보유하는 클래스를 만드는 건 드문 일이 아니다. 이런 클래스에서 일부 표준 기능과 유틸리티 기능은 종종 데이터에서 기계적으로 파생된다. 코틀린에선 이를 데이터 클래스라고 하며 데이터로 표시된다 data class User(val name: String, val age: Int) 컴파일러는 기본 생성자에 선언된 모든 속..

자바와 코틀린을 비교했을 때 장점 하나를 꼽아보라면 빠지지 않고 나오는 것이 null 처리에 관한 내용이다. 자바에선 주로 if와 &&, || 등의 연산자들을 통해 null이 아닌 경우에 처리할 로직을 작성했다. 이 방식은 규모가 작다면 별 문제되지 않는 처리 방식이지만 depth가 깊은 로직일 경우 null 처리로만 몇 줄을 잡아먹는 경우도 있어서 가독성까지 해칠 수 있다. 코드에서 심미론을 찾지는 않지만 내가 보기 거슬릴 때도 간혹 있다. 이에 비해서 코틀린은 적은 코드로 자바보다 훨씬 간단하게 null을 처리할 수 있기 때문에 이 방법들에 대해 정리하는 포스팅을 쓰려고 한다. 먼저 코틀린 공식문서 중 Null safety 문서부터 읽고 가자. 모든 시작은 공식문서부터다. https://kotlinl..

바로 이전 글이 코틀린의 for 반복문에 대한 글이었는데, 이 for문과 같이 사용할 수 있는 범위(range)라는 요소가 있다. 코틀린 공식 홈페이지에서 말하는 범위는 아래와 같다. https://kotlinlang.org/docs/ranges.html#range Ranges and progressions | Kotlin kotlinlang.org range는 수학적 의미에서 닫힌 간격을 정의한다. range는 둘 다 범위에 포함된 두 끝점(endpoint) 값으로 정의된다. range는 비교 가능한 유형(type)에 대해 정의된다. 순서가 있으면 임의의 인스턴스가 지정된 두 인스턴스 사이의 range에 있는지 여부를 정의할 수 있다. range에 대한 주요 연산은 일반적으로 in 및 !in 연산자의 ..

먼저 for문에 사용할 컬렉션을 정의한다. fun main() { val names: List = listOf("감", "배", "사과", "포도", "바나나", "파인애플", "오렌지") } 이 names 라는 리스트 안의 값들을 출력하기 위해선 아래처럼 중괄호가 없어도 출력할 수 있다. for (item in names) println(item) // 감 // 배 // 사과 // 포도 // 바나나 // 파인애플 // 오렌지 중괄호를 사용한다면 아래처럼 쓸 수 있다. 결과는 위의 주석 앞에 "name : "이 붙은 형태일 뿐이다. for (name in names) { println("name : $name") } 그런데 for문을 사용하는 이유 중 하나가 배열 또는 컬렉션의 특정 인덱스를 갖는 아이템..