코드가 복잡해지는 이유 이번 강의에서는 우리의 코드가 복잡해지는 이유는 액션과 계산의 분리가 되지 않았음에 초점이 맞춰있다. 계산과 액션을 구분하라 식(Expression): 값을 생성하며 이를 반환함. 또한 다른 식의 일부가 될 수 있음. 문(Statement): 프로그램의 행동을 지시하며 값을 반환하지 않음. 의미론적으로는 코드의 흐름을 제어하거나 변수를 선언하는 등의 역할을 수행함. 1. 순수 함수 / 부수 효과 순수 효과란 입력에 대해 항상 동일한 값을 반환하며, 부수 효과가 없는 함수이다. const add = (a, b) => a + b 부수 효과란 함수의 핵심 목적에서 벗어나 외부 세계에 영향을 주는 행위가 포함된 함수이다. const asyncCall = async () => { retur..
분류 전체보기
10. 객체란? 객체는 변경이 가능한 값이며, 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다. 원시값은 변경이 불가능한 값이며, 원시 타입은 단 한개의 값만 나타낸다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)로 구성된다. Javascript에서 사용할 수 있는 모든 값은 프로퍼티의 값이 될 수 있다. 이 말은 자바스크립트의 함수도 값이 될 수 있다는 말이다. 함수가 프로퍼티 값으로 사용된다면 이는 메서드라 부른다. 자바스크립트의 함수는 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 일급 객체이므로 값으로 취급할 수 있다. 객체는 프로퍼티와 메서드로 구성된 집합체다. 프로퍼티 : 객체의 상태를..
문제 설명 https://school.programmers.co.kr/learn/courses/30/lessons/62048# 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 풀이 방법 이 문제에서 사용하지 못하는 사각형의 갯수를 구하는 것이 중점인 문제였다. 이 로직은 초등학교 경시대회에서도 나온 로직이다....(초등학생들 대단해....) 로직은 최대 공약수를 구하는 것이 핵심이였다. (전체 단위 블럭 갯수) - (가로 + 세로 - (가로 세로의 최대공약수)) 가 대각선이 지나는 단위 블럭의 갯수이다. 예외 처리는 2개로 처리했으며 각각 가로 세로가..
1. State란? 리액트에서 State는 컴포넌트 내부에서 지속적으로 변할 수 있는 값을 의미한다. 개발자의 의도대로 변할 수 있으며 사용자의 입력에 따라 새로운 값으로 변경할 수 있다. state가 변경되면 React가 자동으로 계산해 변경된 부분을 리렌더링 한다. props는 부모 컴포넌트로 부터 받아 자식 컴포넌트에서 변경이 불가능하고 읽기만 가능한 값이다. 2. 함수형 컴포넌트에서 useState을 사용해 state 관리하기 함수형 컴포넌트에서 state를 관리하기 위해 useState를 사용한다. import { useState } from "react"; const App = () => { const [value, setValue] = useState(""); ... } 위의 코드에서 use..
1. React 컴포넌트란? React 컴포넌트는 UI를 나타내는 독립적이고 재사용이 가능한 모듈이다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 타입이 있다. React 공식 메뉴얼에는 함수형 컴포넌트 사용을 권장하기 때문데 이 글에서는 함수형 컴포넌트를 다루겠다. 2. 함수형 컴포넌트 함수형 컴포넌트는 React에서 UI를 정의하기 위해 사용되는 함수이다. React 공식 문서에서 최신 버전의 React에서는 함수형 컴포넌트 사용을 권장한다. 함수형 컴포넌트의 장점 함수형 컴포넌트의 장점은 간결하게 작성이 가능하며 코드의 가독성이 뛰어나고, Hook을 이용해 state와 라이프 사이클을 제어할 수 있는 등 클래스 컴포넌트 처럼 동작할 수 있는 점이다. 또한 컴포넌트에서 다른 컴포넌트로 ..
1.1 JSX란? JSX는 Javascript를 확장한(syntax extension) 문법이며 Javascript 파일 안에 HTML과 같은 마크업을 작성할 수 있게 도와준다. 브라우저에서 실행되기 전에 바벨(Babel)을 사용해 일반 Javascript 형태의 코드로 변환된다. funtcion App() { return ( Hello react ); } 위의 코드가 babel을 거치면 아래의 코드로 변한다 function App() { return React.createElement("div", null, "Hello ", React.createElement("b", null, "react")); } JSX는 HTML과 비슷한 형태를 갖고있지만, 실제 HTML과 같이 언어가 있는게 아니다. 다순히 J..
