JudithHopps JudithHopps

컴포넌트 리액트로 만들어진 앱을 이루는 최소한의 단위 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다. 예시 ) App.js import TodoTemplate from "./TodoTemplate"; 클래스형 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 함수형 컴포넌트 const Welcome = ({props}) => { return Hello, {props.name}; }) 클래스형 컴포넌트와 함수형 컴포넌트 차이 클래스형 컴포넌트 함수형 컴포넌트 render 함수 필요하고 JSX 반환 return문으로 실행 후 사라..

Vs code 설정 1. ESlint : 문법확인 2. Prettier : 가독성 3. 자동저장 (설정 -> autosave) 4. ReactJS CodeSnippet : 코드 스니펫 rsc + enter (또는 tab) 5. VS-Code-Styled-Componenets : 색상 6. indent-rainbow : 블록 색상으로 표시 자동 저장 File -> Auto Save Fragment = return ( hello ) App.js import React from 'react'; const App = () => { const name = "Judith-hopps" return ( {name} ); }; export default App; 조건문 1. 삼항 연산식 { 조건식 ? () : () } ..

스택과 큐의 차이와 예시 스택은 스택은 시간 순서에 따라 자료가 쌓여서 가장 마지막에 삽입된 자료가 가장 먼저 삭제된다는 구조적 특징을 가지게 된다. 이러한 스택의 구조를 후입선출(LIFO, Last-In-First-Out) 구조이라고 한다. 그리고 비어있는 스택에서 원소를 추출하려고 할 때 stack underflow라고 하며, 스택이 넘치는 경우 stack overflow라고 한다. 예시는 웹 방문기록을 들 수 있다. 큐는 선입선출(FIFO, First in first out) 방식의 자료구조를 말한다. 가장 먼저 삽입된 원소가 가장 빠르게 나간다. 캐시구현을 예시로 들 수 있다. 힙 - 최대값 혹은 최소값을 빠르게 찾기 위한 이진트리입니다. - 최소힙의 경우 부모는 자식보다 작고 최대 힙의 경우는 ..

💡 box model의 전체 크기 : 콘텐츠 크기 + padding 값 + border 값 + margin 값 React, Vue, Angular의 차이는 무엇인가요? - 일단 3개의 공통점은 SPA기반 프론트엔드 프레임워크/라이브러리인것이다. 리액트는 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달되고, vue나 angular는 양방향 바인딩이 구현 가능하다는 차이가 있습니다. 러닝커브는 뷰가 가장 낮고, 리액트는 jsx 문법을 사용하며, 개발 생태계가 가장 잘 활성화 되어있다. 큰 규모의 어플리케이션 개발에 유리하다. 뷰와 앵귤러는 프레임워크이다. 앵귤러는 타입스크립트를 사용함으로써 코드의 가독성과 안정성이 좋지만 러닝커브가 크다. 리액트와 뷰의 차이 1 react는 UI 라이브..

리액트 리액트란? 리액트는 2011년 페이스북의 개발자들에 의해 탄생한 자바스크립트 라이브러리로서, 웹/모바일 애플리케이션의 뷰를 개발할 때 사용된다. 리액트는 컴포넌트에 기반한 접근 방식을 사용하므로, 재사용 가능성이 높은 컴포넌트를 개발할 수 있다. 리액트의 주요 특징 리액트의 주요 특징 리액트는 단방향식 데이터 흐름 모델을 사용한다. (참고: "데이터는 아래로 흐릅니다") 리액트는 가상 DOM을 사용한다. 단방향 바인딩하는 이유 코드 흐름 파악하기 쉽고 유지보수시 장점이 있기 때문입니다. React의 상태관리 방법에 대해서 설명하시오 - 리액트의 상태관리에는 context API를 통한 방법 및 MobX, Redux 등의 라이브러리를 사용한 방법이 있다. 그 중 가장 많이 사용하는 Redux는 전역..

REST API, REST ful - REST API는 REST를 기반으로 서비스 API를 구현한 것입니다. REST라는 것은 자원의 표현, 즉 이름으로부터 자원의 정보를 주고받는 것을 의미합니다. 그래서 자원을 URI로 표현하고 자원에 대한 행위는 HTTP Method로 표현하는 것이 REST API입니다. - REST ful이라는 것은 REST의 원리를 잘 따르는 시스템입니다. 자원을 URI로 표현하고 행위에 맞는 적절한 HTTP Method를 사용한 것이 REST ful한 메소드입니다. - REST ful하지 않은 예시로 CRUD 기능을 모두 POST만으로 처리한 것을 말할 수 있습니다. 정보들이 주고 받는데 쓰이는 개발자들에게 널리 알려진 형식으로 , Rest규칙을 따르는 API를 말합니다. 이때..

Javascript 자바스크립트는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 개발자가 별도의 컴파일 작업을 수행하지 않고 타입을 지정하지 않는 인터프리터 언어(Interpreter language)이다. 또한, 자바스크립트는 명령형(imperative), 함수형(functional), 프로토타입 기반(prototype-based) 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어다. 자바스크립트는 클래스 기반 객체지향 언어보다 효율적이면서 강력한 프로토타입 기반의 객체지향 언어이다. var a = '1' + 2 +3 var b = 2 + 3 + '1' var c = 2 +'2' +3 // '123' '51' '223' Null과..

문제 : https://www.acmicpc.net/problem/2589 2589번: 보물섬 첫째 줄에는 보물 지도의 세로의 크기와 가로의 크기가 빈칸을 사이에 두고 주어진다. 이어 L과 W로 표시된 보물 지도가 아래의 예와 같이 주어지며, 각 문자 사이에는 빈 칸이 없다. 보물 지도의 www.acmicpc.net 알고리즘 : 1. 이 문제는 전형적인 bfs 문제이지만 시작 지점을 모두 검사해보아야 한다. 2. 따라서 2중 for문을 돌면서 거리 탐색을 한다. 문제풀이 : 1. 입력값에서 row와 col, map,dist를 설정한다. const [row , col] = input[0].split(' ').map(Number) const map = input.slice(1).map(v=>v.split('..