프로그래밍

[크롬 확장프로그램]React Developer Tools 설치

리액트를 개발할 때 npm start를 하면 크롬 사이트에 띄워서 개발한 것을 보게된다. 이 때 리액트를 편하게 보기위해 크롬의 확장프로그램을 사용한다. 1. 크롬 웹스토어 접속하기 2. "React Developer Tools" 검색해서 추가하기 3. 크롬에서 확장프로그램 설정하기 4. 적용 완료 설정 - 도구 더보기 - 개발자 도구를 선택하여 위 사진의 오른쪽 부분처럼 개발자 도구를 연다. 그 후 >> 를 클릭해보면 Components가 있는데 클릭한다. 그러면 React 컴포넌트에 대한 정보가 나온다. 살펴보면 우측 상단에 내 페이지의 컴포넌트들이 보인다. 클릭하면 그 컴포넌트의 영역도 표시해주고, props와 hooks 로 무엇을 받거나 쓰는지도 표시해준다. 변경되는 부분이 있으면 실시간으로 어느..

[React]리액트에서 Redux 써보기

리액트는 많은 컴포넌트를 쓰게 됩니다. 프로젝트가 커지면 커질수록 어떤 값은 다양한 곳에서 쓰일 때가 있는데 그럴 때 Redux(리덕스)를 쓰게 됩니다. 만약 작은 프로젝트라면 단순하게 props로 내려주는게 더 편할지도 모릅니다. 따라서 큰 프로젝트라면 Redux(리덕스)와 같은 라이브러리를 사용하는 것을 추천하고, 작은 프로젝트라면 props로 바로바로 내려줘서 사용하는 것을 추천드립니다. Redux란? props 없이 state(상태)를 공유할 수 있게 도와주는 라이브러리입니다. Redux가 설치되어 있다면 js 파일 하나에 state들을 보관할 수 있습니다. 그걸 모든 컴포넌트에서 사용할 수 있습니다. (도서관에서는 다양한 사람들이 책을 빌려갈 수 있습니다!!!) 이 때문에 엄청 멀리있는 컴포넌트..

[JS] 자료형과 형변환

📝 자료형 값을 성질에 따라 분류한 것을 자료형이라고 한다. 25라는 숫자는 Number "25"라는 문자는 String 이런 식으로 나눠지는데 크게는 Primitive Data Type(원시타입) 과 Non-Primitive Data Type(비원시타입)으로 나뉜다. 더 자세하게는 5개의 원시타입과 3개의 비원시타입으로 나눠진다고 말한다. 📝 Primitive Type (원시타입) 한번에 하나의 값만 가질 수 있는 것을 primitive type 이라고 한다. 따라서 하나의 고정된 저장 공간만 이용한다. 앞 게시글인 "변수와 상수" 에서 사용한 값들이 전부 원시타입이다. 원시 타입을 내장형 타입 or 기본형 타입이라고 부르기도 한다. 📝 Non-Primitive Type (비원시타입) 한번에 여러 값을..

[JS] 변수와 상수

JavaScript에서 변수와 상수는 var, let, const 가 있다. 이것들을 실습하면서 살펴보자. https://codesandbox.io/ CodeSandbox: Online Code Editor and IDE for Rapid Web Development Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more. codesandbox.io 먼저 위 사이트에 들어가서 IDE없이 코드를 작성하여 연습해보자. 우측 상단에 Create Sandbox 버튼을 누른다. 버튼을 누르면 위 사진처럼 여러 언어를 사용할 수 있는데 여기서 Vanilla JS를 선택하자. (중간에 JS..

Java - 값이 null,공백 등 Blank인지 확인하기

Spring(스프링)또는 Java 언어로 값을 입력받았는데 이게 정상적인 값인지 확인을 하고 싶을 때가 있다. 그럴 땐 어떻게 해야할까? 이 때 직접 메서드를 만들어주면 된다. StringUtils 클래스 활용 예시는 아래와 같다. White Space란? white space는 공백, 스페이스, 탭, 줄바꿈, 백스페이스 등을 의미한다. CharSequence란? char값을 읽을 수 있는 시퀀스이다. 마크업 문자를 사용해서 변형과 가공이 가능한 문자열이다. Character.isWhitespace(char ch) 메서드란? 말 그대로 white space인지 확인하여 true 또는 false로 결과를 내준다. 매개변수 타입은 char 타입으로 넣어줘야한다. https://blog.jiniworld.me..

Kotlin(코틀린) - Inheritance(상속)

https://kotlinlang.org/docs/inheritance.html Inheritance | Kotlin kotlinlang.org Inheritance(상속) 모든 클래스들의 최상위 부모 클래스는 Any 모든 클래스는 기본적으로 final class로 처리되어 기본적으로 상속이 불가능 상속이 가능한 클래스로 정의하려면 open 키워드를 사용해야한다. open class Base // Class is open for inheritance 부모 클래스를 지정하기 위해서는 class header 뒤에 콜론을 적고 부모 클래스의 header를 적는다. (기본 생성자 포함) 만약 부모 클래스가 기본 생성자를 가진다면 자식의 기본 생성자에서 부모 클래스를 반드시 초기화해야 한다. open class ..

Kotlin(코틀린) - Classes(클래스), Constructor(생성자)

https://kotlinlang.org/docs/classes.html Classes | Kotlin kotlinlang.org Kotlin(코틀린) 공식문서를 참고하여 학습해보자. Classes(클래스) kotlin 클래스는 class 키워드로 사용된다. class Person { /*...*/ } 클래스 선언은 class name, class header(매개변수, 기본 생성자 및 기타 사항 지정) 및 중괄호로 묶인 class body(바디)으로 구성된다. header와 body는 선택사항이다. 클래스에 body가 없으면 중괄호를 생략해도 된다. class Empty Constructor(생성자) 코틀린은 하나의 필수 Primary Constructor(기본 생성자)와 하나 이상의 Secondary..

Map 인터페이스

🧐 Map Interface란? Map 인터페이스는 키(key)와 값(value)을 하나의 쌍으로 묶어서 저장하는 컬렉션 클래스를 구현하는데 사용된다. 키는 중복될 수 없지만 값은 중복을 허용한다. 만약 중복된 키와 값을 저장한다면 기존의 값은 없어지고, 저장된 값이 남는다. 📝 Map의 대표적인 메서드 Map을 사용해서 출력할 때 보통 entrySet() 또는 keySet()메서드를 활용하여 Map의 객체를 반환받아 출력한다. entrySet()은 key와 valeu 모두 필요할 경우 사용한다. keySet()은 key 값만 필요할 경우 사용하는데 key값을 받고 get(key)를 활용하여 value도 출력할 수 있다. 이럴 경우 key를 찾고 value를 찾는 과정에서 시간이 많이 소요되므로 많은 양..