korean IT student

목차 MainAxixAlignment와 CrossAxisAlignment을 사용하여 Row , Column에서 정렬하는 방법 행(Row) 위젯 사용시, 주축(mainAxis)은 수평(가로)이며, 횡축(crossAxis)는 세로이다. 열(Column)위젯 사용시, 주축(mainAxis)는 수직이며, 횡축(crossAxis)는 가로이다. MainAxixAlignment - 주축 정렬 Row Widget(행, 가로) MainAxisAlignment.start - 시작 MainAxisAlignment.end - 끝 MainAxisAlignment.center - 가운데 MainAxisAlignment.spaceBetween - 위젯과 위젯의 사이가 동일하게 배치된다 MainAxisAlignment.spaceAr..

Widget이란 먼저 flutter 공식홈페이지에 보면 flutter 위젯은 React에서 영감을 얻은 최신 프레임워크를 사용하고 있다고 말한다. UI를 구성하는 모든 기본 단위요소 이러한 위젯들을 쌓고 쌓아 만들어진 화면 자체도 위젯이라고 할 수 있다. Widget 종류 Stateless widget - 상태가 없는 위젯, 화면상에 존재하지만 실시간 데이터를 저장하지 않음 Stateful Widget - 상태를 가지는 위젯 Widget Tree 란 Widget들의 부모, 자식 관계를 나타내는걸 Widget Tree라고 부른다 부모 위젯을 위젯 컨테이너라고도 애기한다 프로그램적으로 직접 사용할 일은 없지만 알고 있으면 플러터 개념을 익히는데 유용하다. MyApp 최상위에는 프로젝트 이름이 존재 Mater..

아래와 같이 M1 맥북에러 시 해결법 pc에 Intel 전용 Cocoapods이 설치되어 있어 기존 설치했던 Cocoapods를 삭제해주고 다시 설치하면된다. 아래 커맨드를 하나씩 실행해서 cocoapods를 재설치 (에러가 나도 상관 없습니다. 순서대로 하나씩 실행해주세요) sudo gem uninstall cocoapods sudo gem uninstall ffi brew uninstall cocoapods brew install cocoapods

1. State 컴포넌트 내부에서 바뀔 수 있는 값을 의미 하나는 클래스형 컴포넌트가 지니고 있는 state이고, 다른 하나는 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state 2. 클래스형 컴포넌트의 State 컴포넌트에 state를 설정할 때는 다음과 같이 constructor 메서드를 작성, 이는 컴포넌트의 생성자 메서드. 클랙스형 컴포넌트에서 constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 한다. 이 함수가 호출되현 상속받고 있는 리액트 Component 클래스가 지닌 생성자 함수를 호출 class Counter extends React.Component { constructor(props) { super(props); this.state = ..

1. Component 리액트로 만들어진 앱을 이루는 최소한의 단위 화면을 구성하게 되면, 사용자가 볼 수 있는 여러 가지 컴포넌트로 구성되어 있습니다. 사용자에게 보여지는 UI 요소를 컴포넌트 단위로 구분하여 구현할 수 있습니다. 컴포넌트 이름은 항상 대문자로 시작 (소문자로 시작하는 컴포넌트를 DOM 태그로 취급한다. ) "props"라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 2. 함수 컴포넌트와 클래스 컴포넌트 함수형 컴포넌트 : function 으로 정의하고 return 문에 jsx 코드를 반환합니다. 화살표 함수로 정의 가능합니다. function Welcome(props) { return Hello, {props.name}; } const..

1. React Element 실제로 화면에 표시할 내용을 기술 type(문자열, 컴포넌트 함수/ 클래스) 필드와 props(객체) 필드를 가지는 React의 객체 쉽게 말해 컴포넌트를 JSON으로 표현한 것 React 라이브러리에 있는 React.createElement()를 이용하여 만들 수 있으며 type으로 HTML 태그 이름을 가지고 그 이외의 특징을 props로 관리하는 객체 형태로 정의 // createElement를 이용해서 React Element 만들기 React.createElement( 'div', { className: 'name'}, 'React' ) // createElement를 이용해서 만들어진 React Element 객체 { type: 'div', props: { cla..

로그인 시 토큰 값에 groups를 추가해보자. 1. Clients 생성 2. Groups Mapper 추가 3. 유저 그룹 생성 4. 유저 생성 5. 토큰 확인 1. Clients 생성 - Clients를 생성한다. 2. Groups Mapper 추가 - 로그인 시 access token값에 내려 주기 위하여 Groups Mapper를 추가합니다. - 위와 같이 Groups Mapper가 추가됨을 알 수 있습니다. 3. 유저그룹 생성 - 새로운 유저 그룹을 생성한다. - ADMIN이라는 그룹을 생성하여 테스트를 진행하였습니다. 4. 유저 생성 - user를 하나 생성하였습니다. - user 생성 후 상세화면 groups에서 admin을 선택 후 join 버튼을 누릅니다. - Group Membershi..

앞에서 스프링 시큐리티 연동 방법을 알아보았습니다. 이번 시간에는 스프링 부트에 admin-console을 연동하여 회원가입 및 로그인을 구현해보겠습니다. 앞에서 이어서 작성하겠습니다! 목차 1. spring boot 회원가입, 로그인 구현 및 확인 1. spring boot 회원가입, 로그인 구현 및 확인 // Keycloak 유저 생성, 조회 implementation 'org.keycloak:keycloak-admin-client:17.0.1' admin-console을 조작하기 위하여 추가합니다. @Configuration public class KeycloakConfiguration { @Value("${keycloak.auth-server-url}") private String authServ..

앞서 keycloak설치 및 DB 연동을 마쳐서 keycloak 테스트 및 Spring boot 연동을 알아보자. 목차 1. keycloak realm, Clients, Users 생성 및 PostMan을 통한 Access Token With keycloakAPI 테스트 2. keycloak Spring Security 연동 1. keycloak realm, Clients, Users 생성 및 PostMan을 통한 Access Token With keycloakAPI 테스트 먼저 admin console을 통하여 realm, client, user를 생성해보자 - Add realm을 이용하여 생성할 수 있다. - Add Cient를 통해 client 생성 - client 생성 후 Settings 탭에 있..

spring 프로젝트를 실행할때 banner 변경법에 대해 알아 보자. 먼저 원하는 배너모양을 만들어 보자. 위의 url을 통하여 입력한 텍스트를 원하는 폰트에 맞게 변경 후 select & copy를 통해 복사를 하여 프로젝트 txt 파일에 붙여넣습니다. 프로젝트 실행에 맞게 banner 파일명에 프로파일을 세팅하였습니다. 저는 프로젝트 실행 시 기본 local로 설정하여 프로젝트 실행 시 적용한(hello local) 배너를 확인 해보겠습니다. 위와 같이 배너가 적용되어서 나타남을 확인하였습니다.