공부블로그

드림코딩을 보고 정리한 글입니당 Margin: 바깥쪽 여백( 공백 ) -------------------- border ---------------------- Padding : 안쪽 여백 Div - block레벨(box) Display를 inline-block으로 바꾸면 가로로 채워서 박스 Span - inline레벨 기본값 상태인 inline일 때는안에 내용이 있어야 나옴 Display를 block으로 바꾸면 div처럼 Inline: (content자체만 꾸밈)은 내용이 없으면 아예 나오지 X Block: 일반적, 한줄씩 차지, width, height사용 Inline-block: 가로로 쪼르륵 나오는 block 기본값 : static Relative: 원래 잇어야 할 자리에서 Absolute: 아이..

이 글은 유튭 코딩애플님의 React 기초 강의를 듣고 정리한 글입니당 https://youtu.be/LclObYwGj90 node.js 는 왜 설치할까? npm이라는 툴을 사용할 수 있다. npm으로 create react app이라는 라이브러리를 설치 각 폴더 설명 node_modules: 라이브러리 모은 폴더 public: static 파일 보관함 ( 이미지 등.. ) src: 소스코드 보관함 ( 실질적인 코딩을 하는 곳 ) - package.json 파일: 설치한 라이브러리명, 버전 목록 메인 페이지 동작원리! Index.js가 App.js을 Index.html에 넣어줌 = App.js(메인 페이지)의 html(return 부분)을 index.html(실질적인 메인페이지)의 id가 root인a d..

변수 기본적으로 자바스크립트의 변수는 '동적'이다. (dynamic variables) 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당)이 가능. 변수 생성과정은 1. 선언 2. 초기화 3. 할당 자바스크립트의 변수는 let, const, var var : 1. 선언 + 초기화 2. 할당 ( 할당 전 호출 시 undefined로 초기화되어 있음 ) let : 1. 선언 2. 초기화 3. 할당 ( 호이스팅되면서 선언이 이루어지지만 실제 코드에 도달해야 초기화 ) const : 1. 선언 + 초기화 + 할당 ( 불변 ) var는 함수 스코프 ( 함수 내부에서만 지역변수 ), let과 const는 블록 스코프 ( 블록 내부는 모두 지역변수 ) Temporal Dead Zone의 영향을..

내가 아는 방식은 아이템뷰에 클릭리스너를 달아주어서 바로 데이터를 가져오는 방식이었다. 아이템뷰는 뷰홀더안에 저장되어 있기 때문에 뷰홀더에서 클릭리스너 함수를 작성해주고, 뷰에서 바로 원하는 데이터를 가져와서 변수에 저장하는 방식이다. inner class Holder(val binding: ItemReportsRecyclerBinding): RecyclerView.ViewHolder(binding.root) { init { binding.cardView.setOnClickListener { val pos = adapterPosition val item = binding.idName.text } } 그런데 위처럼 작성하니까 클릭버튼 자체가 동작하지 않는 것 같아서 검색을 해봤더니 리사이클러뷰 외부에서 아..

RecyclerView란? 다양한 목록들을 화면에 표시 가장 위의 아이템을 가장 아래로 이동시켜 재사용(Recycle) View 객체를 새로 생성하지 않아 효율적 RecyclerView의 필수요소 Adapter : 표시될 데이터와 아이템 레이이아웃을 연결 ViewHolder : 현재 화면에 보이는 아이템 레이아웃 개수만큼 생성되고 새롭게 그려져야 할 아이템 레이아웃이 있다면(스크롤 동작) 가장 위의 ViewHolder를 재사용해서 데이터만 바꿉니다. ( 출처: https://bbaktaeho-95.tistory.com/73 [Bbaktaeho] ) ItemLayout : 각각의 아이템들이 어떻게 보여질지 결정 ( 레이아웃 파일을 만들 때 LinearLayout, GridLayout, StaggeredGr..

var s: String = "hello" println(s) val ss: String = "hello" println(ss) /* var: 일반 변수 val: 불변 변수 < 변수 선언 방법 > var/val 변수 이름: 타입 = 값 */ var a: Int = 1 a.plus(2) a.minus(2) //숫자를 객체처럼 사용 var b = a.toFloat() println(a) println(b) //type casting (형변환) var n: Int? = null //Nullable //Not-null: 연산자-!! println(n?:0) //Null 이면 0 var r: IntRange = 1..9 if( 2 in r){println("10미만의 자연수")} //범위를 표현하는 ..연산자 /..

▶ Routing : URL에 따라서 적당한 콘텐츠를 전송해주는 것 < 내가 정리한 Router DOM 사용법 > BrowserRouter는 최상위 컴포넌트를 감싸주어 BrowserRouter를 사용가능하도록 해준다. url에 따라 달라져야하는 컴포넌트에 Route로 감싸주고 path지정 Link : 페이지가 바뀌지 않고 링크로 이동 NavLink : 클릭 시 해당 a태그에 active class생성 => css의 .active로 스타일 변경가능 ◎ 기본 작업 create-react-app 을 통해 새로운 프로젝트를 생성하고 npx install react-router-dom 을 통해 라우팅 도구 설치 후, import { BrowserRouter, Route, Switch, Link, NavLink ,..

< JSX 기본 규칙 > 태그는 꼭 닫는다. 두 개 이상의 태그는 무조건 하나의 태그로 감싼다. ( 이 때 리액트의 Fragment를 이용하기도 한다. ) 자바스크립트 변수를 보여줘야 할 때에는 { } 중괄호로 감싸준다. 태그에 style과 CSS class를 설정할 때 인라인 스타일은 객체형태로 작성하고 ( class style = { ... } ), CSS class를 설정할 때에는 className= 으로 설정해준다. props를 통해 컴포넌트에게 값 전달하기 1. Hello 컴포넌트에 name과 color라는 props (속성)을 전달해주고 싶을 때 App. js 에서 props 전달 Hello. js 에서 받아서 작성 function Hello(props) { return 안녕하세요 {props..