일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- useMemo #React.memo #최적화 #re-rendering
- Common JS 모듈 시스템
- React #React 사용하는 이유
- Kotlin
- Node.js #
- useCallback #최적화 #함수형 업데이트
- useReducer
- 패키지
- React #Context #props drilling #useMemo
- React #API 호출 #async #await #fetch
- Today
- Total
목록전체 글 (18)
세현's 개발로그
◈ JSX 사용해 보기 JSX 문법을 이용하여 컴포넌트를 만들어보자. MyHeader.js라는 파일을 만들 것인데, 이때 jsx는 js 안에 포함되는 것이므로 확장자는 둘 중에 무엇으로 하든 상관 없다. const MyHeader = () => { return 헤더 }; export default MyHeader; 이렇게 MyHeader.js 파일의 내용을 작성해 준 후, import MyHeader from './MyHeader'; App.js에서 이런 식으로 import를 해준다. 이때 주의해야할 점은 MyHeader가 리턴하는 것이 반드시 있어야 한다는 것이다. 리턴하는 것이 없으면 에러가 발생한다. ◈ JSX 규칙 1. 반드시 모든 태그를 닫아줘야 한다. -열린 태그로만 작성하면 에러가 발생한다...
◈ Create React App 우선 우리는 React를 사용하기 위해 누군가가 만들어놓은 패키지를 설치해줄 것이다. 부수적인 패키지들을 설치하지 않고 한 번에 패키지들이 묶여있어 이미 세팅이 완료된 패키지를 Boiler Plate이라고 한다. 따라서 우리는 Create React App이라는 Boiler Plate을 사용해 리액트 어플리케이션을 만든다. Vscode의 터미널에서 npx를 설치해 줄 것이다. 이때 npx란 설치돼있지 않은 패키지를 딱 한번만 사용하고 싶을 때 사용한다. npm install -g npx npx가 설치되었다면 준비 끝! 이름이 reactexam1이라는 프로젝트를 만들어주기 위해 터미널에 명령어를 입력한다. npm create react-app reactexam1 3~5분 ..
◈ Why React.js? ⊙ 첫 번째 이유 다음과 같은 두 자기소개 페이지 index.html과 about.html이 있다. 이 두 페이지는 , , 의 내용이 동일하고 의 내용만 다르다. 이 두 페이지의 코드는 중복된 코드가 너무 많다는 문제점이 있다. 만약 Header 섹션의 코드를 수정하고 싶다면 모든 페이지의 코드를 수정해야하는 어려움이 생긴다. 특히 페이지가 아주 많은 경우에는 유지보수에 상당한 어려움이 생긴다. 이렇게 중복된 부분이 있는 페이지들을 하나하나 수정하는 것을 Shotgun Surgery(산탄총 수술)이라고 한다. 중복될 거라 예상되는 요소들을 별도의 파일이나 모듈로 각각 만들어 사용하는 방식 → 컴포넌트화 방식 컴포넌트화 방식을 이용하면 각각의 모듈을 담은 페이지를 하나 만들어줘..
◈ Node.js 알아보기 javascript는 브라우저 엔진에 내장된 자바스크립트 엔진을 사용해야 하기 때문에 javascript는 웹 브라우저에서만 실행할 수 있었다. 따라서 javascript는 버튼 클릭 등의 간단한 인터렉션밖에 수행하지 못했다. javascript를 브라우저에서만 사용하는 것이 아니라 아무 곳에서나 실행시키기 위해 만들어진 것이 Node.js! ->Node.js를 자바스크립트의 실행환경이라 할 수 있으며 이를 Javascript's Runtime이라고 한다. Node.js 덕분에 Javascript로 web server까지 개발이 가능해졌다. server는 클라이언트가 요청하는 것을 전달하는 역할을 하는데 요청하는 주체는 client, 요청을 받는 주체는 server라고 한다. ..
#1 버튼 기능을 질문 활동에 추가하기 ◎ 버튼을 눌렀을 때 보라색 테두리가 만들어지도록 하는 것이 목표 버튼을 눌렀을 때의 스타일을 만들어야 하므로 우선 새로운 파일부터 만든다. 어떤 옵션을 선택했는지 확인할 mSelectedOptionPosition 변수를 만들어 디폴트 값으로 선택한 옵션을 0으로 설정한다. -> 그러면 버튼을 눌렀을 때 재정의 가능 private var mSelectedOptionPosition: Int = 0 뷰를 누르면 나머지는 디폴트 값인 회색 테두리로 되도록 만들어 준다. for (option in options) { option.setTextColor(Color.parseColor("#7A8089")) option.typeface = Typeface.DEFAULT opti..
#1 선형 레이아웃을 이용해서 계산기 UI 만들기 파트 1 1. LinearLayout(세로 또는 가로의 단일 방향으로 모든 하위 요소를 정렬하는 뷰 그룹)을 사용한다. 2. 선형 레이아웃 안에 텍스트 뷰를 만들어준다. 그리고 텍스트 뷰의 너비는 상위 요소와 맞추고 높이는 250dp로 정한다. 글자 색을 옅은 회색으로 해주기 위해 colors.xml 창에서 새 색상 코드를 만들어주고 Hex 코드를 붙여 옅은 회색의 코드를 만들어준다. 3. padding 기능으로 글자와 텍스트 뷰 사이에 공간이 생기도록 코드를 입력해준다. 그 다음으로 textSize로 글자 크기를 48sp로 하고, text에 값을 할당해준다. 4. 글자를 텍스트 뷰 내부의 오른쪽 밑에 표시되도록 바꿔주었다. gravity 속성에 'rig..
#1 컬렉션 개요 ◎ 컬렉션은 단순히 같은 데이터 타입 또는다른 데이터 타입의 묶음이다. 코틀린에서 컬렉션은 두 가지 분류로 나뉜다. ⓛ특정 데이터 타입의 요소를 저장하는 클래스 ex) - IntArray-Integer - BooleanArray-Boolean - DoubleArray-Double - ByteArray-Byte - LongArray-Long - ShortArray-Short - FloatArray-Float ②서로 다른 타입의 요소도 저장 가능한 클래스 ex) - arrayOf - arrayOf - array(1,2,"John","Doe",0.5,Fruit()) ◎ Immutable Collections : 이뮤터블은 값을 읽을 수는 있지만 변경할 수 없다는 것이다. - List-list..
#1 'var' 과 'val'의 차이점 ◎ var : 'var' 변수는 중복 기재 가능(변수 값 변경 가능), mutable package com.example.kotlinbasics fun main() { var myName = "Frank" myName="Heidi" print("Hello "+ myName) } 출력 : Hello Heidi ◎ val : 'val' 변수는 중복 기재 불가능(변수 값 변경 불가능), immutable package com.example.kotlinbasics fun main() { val myName = "Frank" myName="Heidi" print("Hello "+ myName) } 출력 : Val cannot be reassigned #2 숫자 데이터 유형 ..