분류 전체보기218 [함수형 코딩] 액션과 계산 데이터 액션과 계산 데이터 단순해보이는 액션도 또다른 액션이나 계산 , 데이터로 나눌 수 있다. 함수형 프로그래밍에서는 액션을 더 작은 액션과 계산, 데이터로 나누고 나누는 것을 언제 멈춰야 할지 아는 것이 중요하다. 액션을 쓰는 순간 전체로 퍼지게 된다. 액션은 호출 시점이 중요하기 때문에 액션을 특정 시점에 실행시키기 위해 만들어진 함수도 액션이다. 모든 함수가 액션화 되는것! > 액션을 가능한 한 사용하지 말아야 한다. 재사용하기 쉽게 만들기 전역변수에 의존하지 말아야한다. DOM을 사용할 수 있는 곳에서 실행된다고 가정하면 안된다. 함수가 결과값을 리턴해야한다. 입력과 출력 모든 함수에는 입력과 출력이 있음 “입력”은 함수가 계산을 하기 위한 외부 정보이다. “출력”은 함수 밖으로 나오는 정보나 어떤 동.. 2023. 1. 24. [함수형 코딩] Intro 함수형 프로그래머는 코드를 세가지로 분리한다. 액션 계산 데이터 호출하는 횟수나 호출하는 시점이 중요하다. (의존하고 있기 때문) 계산 (sum함수)는 실행이 가능하나 데이터는 그렇지않다. 하지만 횟수는 중요하지 않음 함수형 프로그래머는 코드를 액션과 계산, 데이터로 구분한다. 함수형 프로그래밍은 데이터 > 계산 > 액션 순으로 선호한다. 액션 실행 시점이나 횟수 또는 둘다에 의존함 외부 세계에 영향을 주거나 받는다. 계산 입력값으로 출력값을 만드는 것. 같은 입력값을 가지고 계산하면 항상 같은 결과값이 나온다. 외부 세계에 영향을 주거나 받지 않고 실행시점이나 횟수에 의존하지 않는다. 데이터 이벤트에 대해 기록한 사실 사실은 변하지않기 때문에 영구적으로 기록할 수 있다. 분산 시스템 함수형 프로그래밍은.. 2023. 1. 23. styled component No overload matches this call. 오류 컴포넌트에서 styled.ts에 props를 넘겨줄때, styled.ts에서 props type을 몰라 생긴 이슈 컴포넌트에서 생성해준 타입 (interface , type )을 넘겨줘서 타입 설정 해주면 된다. // Button.styled.ts import styled from "styled-components"; import { IButton } from "./index"; //Button컴포넌트에서 받은 인터페이스 넘겨주기 const Button = styled.button` // 타입 설정 .... `; export { Button }; 2023. 1. 12. Warning: Prop `className` did not match. Server: "sc-jrcTuL jZFII" Client: "sc-gswNZR bPbOgX" 오류 Next.js 에서 styled-components 사용할때 위와 같은 오류가 뜬다. SSR로 동작하기 때문에 서버에서 생성된 컴포넌트와 CSR로 클라이언트에서 생성된 컴포넌트의 클래스명이 서로 달라지게 된다. className 일관 되게 만들어주기 1. babel-plugin-styled-components 설치하기 2. .babelrc 파일 루트에 만들어서 아래 내용 추가하기 { "presets": ["next/babel"], "plugins": ["babel-plugin-styled-components"] } 2023. 1. 11. 이전 1 2 3 4 5 6 ··· 55 다음 반응형