전체 글

[React] 라우팅

라우팅 사용자가 요청한 URL에 따라 알맞은 페이지를 보여주는 것 여러 페이지로 구성된 웹 애플리케이션을 만들 때 페이지 별로 컴포넌트들을 분리해가면서 프로젝트를 관리하기 위해 필요한 것 리액트에서 라우트 시스템을 구축하는 방법 1. 리액트 라우터 가장 많이 사용되는 라이브러리 컴포넌트 기반으로 라우팅 시스템을 설정 2. Next.js 리액트 프로젝트의 프레임워크 파일 경로 기반으로 작동 리액트 라우터의 대안으로 많이 사용됨 멀티 페이지 애플리케이션 (MPA) 사용자가 다른 페이지로 이동할 때마다 새로운 html을 받아오고, 페이지를 로딩할 때 마다 서버에서 CSS, JS, 이미지 파일 등의 리소스를 전달받아 브라우저 화면에 보여줌 사용자 인터랙션이 별로 없는 정적인 페이지들은 기존의 방식이 적합 but..

[React] immer를 사용해 불변성 유지

리액트에서는 배열이나 객체를 업데이트할 때 직접 수정하는 것이 아닌 불변성을 지키며 업데이트 해주어야 한다. const object = { a: 1, b: 2 }; // 직접 수정 X object.b = 3; // ...연산자 이용해 새로운 객체 생성 const nextObject = { ...object, b : 3 }; 객체 뿐만 아니라 배열도 마찬가지로 push, splice 등의 함수를 사용하거나 n번째 항목을 직접 수정하는 것이 아닌 다음과 같이 concat, filter, map 등의 함수를 사용해야 함. const todos = [ { id: 1, text: '할 일 #1', done: true }, { id: 2 text: '할 일 #2', done: false } ]; const inse..

[BOJ] 2738 : 행렬 덧셈 (node.js)

백준 2738번을 풀다가 아래 사진까지는 유도를 했는데 이중배열일 경우 아래의 예제 출력처럼 출력하는 방법이 궁금했다. sol 1. 많은 사람들이 이 방법을 이용해서 풀이를 했다 하지만 console을 찍었을 때 마지막 줄에도 + "\n"가 되어 줄바꿈이 출력되는 것이 신경 쓰였다. sol 2. 두번째 방법으로 찾아본 방법은 forEach로 해보았다. 사실 forEach에 대한 문법은 잘 알지 못했는데 이번에 제대로 찾아보게 되었다. forEach 메서드 배열에서 루프를 돌 때 사용 array.forEach(function(currentValue, index, arr)); function(currentValue, index, arr) - 배열의 각 항목에 대해 실행할 함수 currentValue - 배열..

[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([소수 부분의 자릿수]) 매개변수..