2-1. 자료형 💡 데이터를 저장하려면 메모리에 값을 저장할 공간을 생성하고 이름을 부여해야 함 변수 : 메모리 공간에 부여하는 이름 // 자료형 변수명 int a; // a는 int형 변수 String b; // b는 String형 변수 주의해야 할 점 자료형은 반드시 사용하기 전에 선언 해야 한다. 자료형은 반드시 한 번만 선언 해야 한다 💡 변수에 한 번 지정된 자료형을 바꿀 수 없는 이유? 변수의 자료형이 처음 선언되면 메모리에는 선언된 자료형의 데이터만 저장할 수 있는 공간이 만들어지는데, 메모리에서 한 번 만들어진 공간은 사라질 수는 있어도 데이터를 저장하는 기능은 변경할 수 없기 때문 변수 사용하기 변수의 선언과 동시에 값 대입 // 자료형 변수명 = 값; int a = 3; 변수 선언과 값..

CSS 속성(Properties) CSS 출력 및 박스 관련 속성 display, visibility, opacity, width, height, overflow, margin, padding, border 등 모든 속성의 값에 initial(초기값), inherit(부모 요소로 부터 상속) display : 화면 출력 모드를 지정하는 속성 태그마다 화면 출력 모드가 block, inline, inline-block 등으로 구성됨. inline 속성 요소 : span, a, strong, em, ins 등 inline 요소의 특징 : 한 줄 안에 자동 줄바꿈이 될 때까지 배치되며, 크기 지정을 할 수 없어 width, height, line-height, text-indent, text-align, pa..

스타일 기본 문법 문법 : 선택자 {속성1: 값1; 속성2: 값2;} 설명 : 선택자(Selector) : 서식을 지정하고 싶은 요소 속성(Properties) : 부여하고 싶은 스타일의 정해진 단어의 특성을 지정 값(Value) : 해당 속성으로 지정가능한 키워드 스타일 지정 방식 인라인 스타일 방식 해당 요소에 style 속성(attribute)로 직접 지정하므로 스타일 지정 즉시 해당 스타일이 그 요소에만 지정되므로, 재사용성이 떨어지고, 변경하기가 힘듦. 그러므로, 필요외로 가급적 사용하지 않도록 함 첫 단어 a {} .클래스명 { } #아이디명 { } 부모 > 자식 { } 형 ~ 제 { } 형 + 바로 밑의 동생 { } .ex1 nav > .lst1 > li { } .ex1 .item1 ~ li..

폼 관련 태그 사용자 편의를 위해 랜덤 클릭 시 아이디 요소로 가는 방법 “for” 속성에 “id” 입력 아이디 입력 및 이름 입력 칸에 설명 “placeholder” 속성 활용 아이디 칸에만 강조 및 커서 “autofocus” 속성 사용 127:0.0.1:5500/ex7.html?id=dddddd&name=홍길동&pw=1234 ?” 이후로 Query String GET 방식을 데이터를 받아옴 form 태그 데이터 전송 방식 : POST

인터넷 서비스는 보통 서버와 클라이언트가 관계를 맺는다. 보통 클라이언트와 서버의 관계는 다음과 같은 그림으로 설명한다. 클라이언트란? 클라이언트는 서버로 요청하는 프로그램을 모두 일컬어 말한다. 주소를 입력한뒤 Enter를 눌러 정보를 요청하는 행위를 '서버에 요청한다'라고 한다. 그러면 서버는 그 주소에 맞는 화면으로 응답한다. 서버란? 서버는 클라이언트의 요청을 받아 처리하는 주체 클라이언트가 데이터를 요청했다면 데이터를, 단지 서버 내에서 처리만 해달라는 요청을 했다면 해당 요청만 처리 할 수도 있다. 흔히 우리가 웹 브라우저에 주소를 입력하는건 '새로운 화면을 그리기 위한 데이터를 달라'는 데이터의 요청에 해당

빌드 시스템(Build System)에 있는 Gradle과 Maven은 소스코드를 이용해서 실행가능한 애플리케이션을 생성하는 과정을 자동화하는 프로그램 의존성 내려받기 코드 패키징 컴파일 테스트 실행 Gradle의 특징 Maven에 비해 가독성이 좋고 설정이 간단 자바, 코틀린, 그루비 등 다양한 언어를 지원하며, 원하는 대로 빌드 스크립트를 작성 가능하다 빌드와 테스트 속도가 Maven에 비해 더 빠름

더보기 모든 리액트에 대한 정보는 공식 문서와 "소플의 처음 만난 리액트"를 공부하고 작성한 내용입니다. 리액트 컴포넌트은 개념적으로 자바스크립트의 함수와 비슷하다. 함수가 입력을 받아서 출력을 내뱉는 것처럼, 리액트 컴포넌트도 입력을 받아서 정해진 출력을 내뱉는다. 리액트 컴포넌트 = 그냥 하나의 함수 컴포넌트 만들기 1. 함수형 컴포넌트 function Welcome(props) { return 안녕, {props.name}; } 하나의 props를 받아서 리액트 엘리먼트를 리턴 = 함수 컴포넌트 2. 클래스 컴포넌트 class Welcome extends React.Component { render() { return 안녕, {this.props.name}; } } 함수 컴포넌트와의 차이점 : 리액..

더보기 모든 리액트에 대한 정보는 공식 문서와 "소플의 처음 만난 리액트"를 공부하고 작성한 내용입니다. Elements are the smallest building blocks of React apps. 위 문장을 번역하면 엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들이라는 의미가 된다. 이처럼 엘리먼트는 웹사이트에 대한 모든 정보를 담고 있는 객체인 (DOM)에서 사용하는 용어이다. 엘리먼트 렌더링 하기 엘리먼트를 생성한 이후에 실제로 화면에 보여주기 위해서 렌더링 이라는 과정을 거친다. 태그안에 리액트 엘리먼트들이 렌더링 되며 이를 React DOM node라고 부른다. const element = 안녕, 리액트! React.DOM.render(element, document.getElementB..

더보기 모든 개발 언어 및 라이브러리의 기본은 "공식문서" React 공식 문서를 통해 공부하였습니다. 출처 : https://ko.reactjs.org/docs/introducing-jsx.html # Hello World const root = ReactDom.createRoot(document.getElementById('root)); root.render(Hello, world!); 위 코드는 페이지에 "Hello, world!"라는 제목을 구현한다. JSX 소개 const element = Hello, world!; JSX : JavaScript를 확장한 문법, JavaScript의 모든 기능이 포함되어 있음 JSX는 React "엘리먼트(element)"를 생성한다. JSX란? React에서는..