전체 글

[React] 컴포넌트 스타일링

일반 CSS 컴포넌트를 스타일링하는 가장 기본적인 방식 CSS 클래스를 중복되지 않게 만드는 것이 중요 [이름 짓는 규칙] 이름-클래스 (예 : App-header) BEM 네이밍 일종의 규칙을 준수해 해당 클래스가 어떤 용도로 사용되는지 명확하게 작성 .card_title-primary css Selector : 특정 클래스 내부에 있는 경우 스타일 적용 .App .logo { text-align : center; } Sass 자주 사용되는 css 전처리기 중 하나 확장된 CSS 문법을 사용 복잡한 작업을 쉽게 해주고 재활용성을 높여주며 코드의 가독성을 높임 .sass 확장자, .scss 확장자 모두 지원 여러 파일에서 사용되는 Sass 변수 및 믹스인은 다른 파일로 따로 분리하여 작성한 뒤 필요한 곳..

[React] Hooks

useState 가장 기본적인 Hook 함수 컴포넌트에서 상태 관리를 할 때 사용 const [value, setValue] = useState(0); 첫번째 원소 (value) : 상태 값 두번째 원소 (setValue) : 상태를 설정하는 함수 이 함수에 파라미터를 넣어서 호출하면 전달받은 파라미터로 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됨 useEffect 리액트 컴포넌트가 렌더링(나타날 때)될 때마다 특정 작업을 수행하도록 설정 클래스형 컴포넌트의 componentDidMount + componentDidUpdate useEffect(() => { console.log("렌더링 완료"); console.log({ name, nickname }); }); 컴포넌트가 화면에 맨 처음 렌더링될 때만..

[React] 컴포넌트의 라이프사이클 메서드

모든 리액트 컴포넌트에는 라이프사이클이 존재 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드 + 에러가 나타났을 때 호출되는 메서드 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능 함수컴포넌트에서는 사용할 수 없음 그 대신 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있음 앞으로 사용할 일이 별로 없어 이 개념에 너무 많은 시간을 쏟지 말 것. 마운트(mount) DOM이 생성되고 웹 브라우저상에 나타나는 것 constructor : 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps : props에 있는 값을 state에 넣을 때 사용하는 메서드 render : 우리가 준비한 UI를 렌더링하는 메서드 co..

[React] 컴포넌트 반복

반복적인 내용을 효율적으로 보여주고 관리하는 방법 map() 함수 자바스크립트 배열 객체의 내장 함수 기존 배열로 새로운 배열을 만드는 역할 파라미터로 전달된 함수를 사용해 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열 생성 문법 arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수 currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg(선택 항목) : callback 함수 내부에서 사용할 this 레퍼런스 예제 const numbers = [1, 2, 3, 4, 5]; const processed = numbers..

[React] ref : DOM에 이름 달기

클래스형 컴포넌트에서 ref를 사용하는 방법 함수 컴포넌트에서 ref를 사용하려면 Hooks를 사용해야 함 리액트에서 잘 사용하는 문법은 아니라 간략히 정리 DOM을 꼭 사용해야하는 상황 특정 input에 포커스 주기 스크롤 박스 조작하기 Canvas 요소에 그림 그리기 ref 사용 1. 콜백 함수 사용 ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달 이 콜백 함수는 ref 값을 파라미터로 전달 받음 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정 {this.input = ref}} /> 2. createRef 사용 더 적은 코드로 쉽게 사용가능 리액트 v16.3부터 도입 import React, { Component } from "react"; class..

[React] 이벤트 핸들링

이벤트 핸들링 대표적으로 클릭, 키보드 입력 등 사용자의 어떤 행위를 처리하는 것 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법을 작성 (ex : onClick, onKeyUp) 이벤트에 실행할 자바스크립트를 전달하는 것이 아닌 함수 형태의 값 전달 DOM 요소에만 이벤트를 설정 (DOM 요소 : div, button, input, span 등) React에서 이벤트 핸들링하기 onChange 이벤트 설정 { console.log(e.target.value); } } /> state에 input 값 담기 class EventPractice extends Component { state = { message : "" } // 초기값 설정 render() { return ( { this.setSt..

[React] 컴포넌트

컴포넌트 선언 방식 클래스형 컴포넌트 함수 컴포넌트 클래스형 컴포넌트 ES6 이전 버전에는 클래스가 없었고 이를 구현하려면 prototype이라는 문법을 사용 ES6 문법부터는 class를 사용하여 다음과 같이 작성 class Dog { constructor(name) { this.name = name; } say() { console.log(this.name + ": 멍멍"); } } const dog = new Dog("흰둥이"); dog.say(); // 흰둥이: 멍멍 클래스형 컴포넌트에는 render 함수가 꼭 필요 -> 그 안에서 보여줄 JSX를 반환해야함 그렇다면 함수형, 클래스형 어떤걸 사용해야할까? 함수형 장점 함수형 단점 클래스형 컴포넌트보다 선언하기 편함 state 사용 불가 클래스형 ..

정보처리기사 필기 기출 오답 정리

1과목 : 소프트웨어 설계 목업(Mockup) 디자인, 사용방법설명, 평가등을 위해 실제 화면과 유사하게 만든 정적인 형태의 모형 시각적으로만 구성요소를 배치하는 것으로 일반적으로 실제로 구현되지는 않음. CASE(Computer-Aided software Engineering)의 원천 기술 구조적 기법 프로토타이핑기술 자동프로그래밍 기술 정보저장소 기술 분산처리 기술 일괄처리 기술(X) 파이프 필터 구조 서브시스템이 입력데이터를 받아 처리 -> 그 결과를 다른 시스템에 보내는 작업 반복 클라이언트 서버 구조 컴포넌트가 다른 컴포넌트에게 서비스를 요청 데이터가 여러 컴포넌트를 거치며 처리 계층 구조 모듈들로 응집된 계층 단위로 sw를 구성 MVC 구조 모델-뷰-컨트롤러, 기능을 분리한 아키텍처 Useca..

[js] toFixed() 메서드

toFixed() 메서드 숫자를 고정 소수점 표기법(fixed-point-notation)으로 표시 Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환 function financial(x) { return Number.parseFloat(x).toFixed(2); } console.log(financial(123.456)); // Expected output: "123.46" console.log(financial(0.004)); // Expected output: "0.00" console.log(financial('1.23e+5')); // Expected output: "123000.00" 구문 numObj.toFixed([소수 부분의 자릿수]) 매개변수..

[JS] 배열의 순서 (sort()메서드, reverse() 메서드)

sort() 메서드 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환 const months = ['March', 'Jan', 'Feb', 'Dec']; months.sort(); console.log(months); // ["Dec", "Feb", "Jan", "March"] const array1 = [1, 30, 4, 21, 100000]; array1.sort(); console.log(array1); // [1, 100000, 21, 30, 4] 구문 arr.sort([compareFunction]) 파라미터(compareFunction) 정렬 순서를 정의하는 함수 이 값이 생략되면, 배열의 element들은 문자열로 취급되어, 유니코드 값 순서대로 정렬 compareFunction(a, ..

[JS]BigInt

BigInt Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체 const alsoHuge = BigInt(9007199254740991); // ↪ 9007199254740991n const hugeString = BigInt("9007199254740991"); // ↪ 9007199254740991n const hugeHex = BigInt("0x1fffffffffffff"); // ↪ 9007199254740991n const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111"); // ↪ 9007199254740991n BigInt Number 내장 ..

[JS] == , === 차이점

Q. 알고리즘 문제를 푸는데 본인은 항상 "===" 을 사용했는데 한 문제에서 다른 사람들의 코드를 보니 "==" 을 사용된 것을 보고 두 문자의 차이가 궁금해짐 == 연산자 == 연산자는 두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환 후 값을 비교 타입을 비교하지 않으므로 ===연산자에 비해 느슨함 123 == 123 // true 123 == '123' // true, 문자열을 숫자로 변환 후 값을 비교 true == 1 // true, 두 피연산자에서 불리언 값이 존재하면, 불리언 값을 1로 변환 후 값을 비교 true == '1' // true, 불리언 값을 1로 변환 후 문자열 '1'을 숫자로 변환 후 값 비교 true == 'true' // false, 불리언 값을..