[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프
-
[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 Java - 조건문, 반복문, 메서드 / 예제 실습문제[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2023. 10. 20. 21:09
조건문 if문 switch문 반복문 for문 while문 메소드 메소드 선언 메소드 오버로딩 메소드 오버로딩은 한 클래스 내에서 동일한 이름의 메소드를 여러 개 정의하는 것. 이때 각 메소드는 매개변수의 타입, 개수, 순서가 달라야 함 예제 실습문제 기본실습 1) "이름을 입력하세요."라는 문구를 출력하고 사용자로부터 이름을 입력받기 "나이를 입력하세요."라는 문구를 출력하고 사용자로부터 나이를 입력받기 이름과 나이의 입력이 끝나면 "안녕하세요! OOO님(OO세)"라는 문구 출력하기 print의 종류와 형식 지정자가 헷갈려서 중간에 주석 처리로 정리해 두었다. 조건문 실습 1) "나이를 입력하세요."라는 문구를 출력하고 사용자로부터 숫자를 입력받기 입력된 숫자가 1부터 7까지면 "유아", 8부터 13까지..
-
[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 Java - 기본문법(데이터 타입, 입력과 출력, 연산자, )[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2023. 10. 20. 19:46
식별자 클래스, 변수, 상수, 메서드 등에 붙이는 이름 식별자의 원칙 @,#,! 와 같은 특수문자 사용 불가 예외로 _, $는 사용가능 공백 불가 한글 사용은 가능하지만 보통 영어로 사용 미리 정의된 예약어 불가 숫자 사용 가능(단, 첫 글자로는 사용 불가) 사용 가능한 예 잘못된 예 자바의 예약어 데이터 타입 - Java는 강한 타입 언어로, Javascript에서와 달리 Java에서는 데이터 타입이 중요함 자바의 데이터 타입은 크게 두가지로 나뉨 기본 타입(Primitive) 레퍼런스 타입(참조형, Reference) 기본형 데이터 타입 주의) 실수형 타입 float 또는 double과 같은 기본 부동소수점 자료형은 근삿값을 사용하므로 금융 계산과 같은 정밀도가 중요한 연산에는 적합하지 않음 BigD..
-
[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - LifeCycle[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2023. 9. 28. 01:12
LifeCycle이란? - 수명주기 - 모든 React Component에 존재하는 것 용어정리 1) Mount - DOM이 생성되고 웹 브라우저 상에 나타남 2) Update - props or state 바뀌었을 때 업데이트함 3) Ummount - 컴포넌트가 화면에서 사라질(제거될) 때 useEffect - sideEffect(컴포넌트가 화면에 랜더링된 이후 비동기로 처리되어야 하는 부수적인 효과)를 수행한다. - 클래스형 컴포넌트인 componentDidMount와 componentDidUpdate 가 합쳐진 형태 - 함수형 컴포넌트에서는 useEffect()를 사용해 Mount, Update, Ummount시 특정 작업을 처리 정리하자면,, useEffect() 예시
-
[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - Hook 소개 및 useState[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2023. 9. 27. 22:48
Hook이란? - React의 새로운 기능 - 클래스 컴포넌트에서만 가능했던 state(상태관리)와 liftcycle(생명주기)이 가능하도록 돕는 기능 Hook의 사용 규칙 - 최상위 단계에서만 호출 가능(최상위 컴포넌트 x / 반복문, 조건문, 중첩된 함수 내부에서 호출하면 안 되는 것) - 커스텀 훅 이름은 'use'로 시작 Hook의 종류 - useState() : 상태 관리를 위한 가장 기본적인 훅 - useEffect() : 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅 - useContext() : 리액트에서 전역적으로 접근 가능한 데이터나 함수를 관리하고, 필요한 컴포넌트에서 그 값을 바로 가져와 사용할 수 있게 도와주는 훅 - useReducer() : 복잡한 컴포..
-
[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - Event Handling , State[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2023. 9. 27. 14:54
React에서의 event handling시 주의점 - camelCase 사용 - JSX를 사용해 이벤트 핸들러 전달 - 기본 DOM요소에서만 이벤트 설정 가능 React 합성 이벤트 - Synthetic Event ( 합성 이벤트 ) - 객체를 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper(래퍼) 객체 함수에 인자 보내기 State - React에서 앱의 유동적인 데이터를 다루기 위한 개체 - 계속해서 변하는 특정 상태 - 상태에 따라 다른 동작을 함 >> 사용이유?? - state가 변경될 시 자도으로 재랜더링 되기 때문 - 이 점이 변수와 다른 점 - setState 메서드를 사용하여 상태를 변경할 수 있음
-
[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - props[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2023. 9. 26. 21:08
Component 블로깅에서 데이터를 전송할 때 props를 사용한다고 했었는데 이번 블로깅에서 자세히 알아보자 props란? - properties를 줄인 표현으로 Component 속성을 설정할 때 사용하는 요소 - props는 Component끼리 값을 전달하는 수단 - 상위 Component에서 하위 Component로 전달(단방향 데이터 흐름!) 함수형 Component - 부모 Component에서 전달한 props는 함수형 Component에서 함수의 parameter로 전달받으며, JSX 내부에서 {} 기호로 감싸서 사용 - 예시 defalutProps props.children - 부모 component에서 자식 component를 호출할 때 태그 사이에 작성된 문자열 propTypes ..
-
[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - Component[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2023. 9. 26. 20:00
Component 란?? - React의 핵심이라고 할 수 있다. - MVC view를 독립적으로 구성해 재사용할 수 있고, 새로운 Component도 만들 수 있다. - 데이터(props)를 입력받아 view 상태(state)에 따라 DOM Node를 호출 - UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩이 가능. 클래스형 Componenet - state와 라이프 사이클 기능 이용 가능 - Render 함수 필수 함수형 Component - 짧고 직관적 - Vanilla JS와 같은 기본적인 function 구조를 이용해 더 직관적이며 추상적 - 메모리 자원을 덜 사용한다. - 요즘은 클래스형은 거의 안쓰고 대부분 함수형 Component를 사용한다. Comp..
-
[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - map, filter, 단축평가[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 2023. 9. 26. 19:44
map() 함수 - map()의 인자로 넘겨지는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용 - map() 함수를 필요에 따라 반복문처럼 사용할 수도 있음. arr.map(callbackFunction, [thisArg]) - callbackFunction : 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인수를 가질 수 있다. - [this.Arg]는 생략 가능한 것으로 callbackFuntion에서 사용할 this 객체 - txt : list를 순서대로 돌면서 나오는 값 - id : 방금 나온 값(txt)의 인덱스 - arr : 현재 반복을 돌고 있는 배열 - items : "return txt + id;"로 만들어진 배열..