티스토리

Hyebin‘s blog

검색하기

블로그 홈

Hyebin‘s blog

hyebin-development-blog.tistory.com/m

배움을 즐기자

구독자: 1

방명록 방문하기

주요 글 목록

모노레포 환경에서 코딩 컨벤션 & 공통 로직 공유 지난 강의 내용에서는 모노레포 환경을 구축하기 였다면, 이번 강의에서는 monorepo 환경에서 코딩 컨벤션과 공통 로직을 공유하는 방법에 대한 주제로 진행되었다. 모노레포는 여러개의 프로젝트를 하나의 레포에서 관리하기 때문에 코딩 컨벤션을 통일해야 한다 tsconfig 설정 공유 base가 되는 tsconfig를 만들어 놓고 각 프로젝트에서 extend 받아 오버라이딩 할 수 있는 구조로 진행할 것이다. root 디렉토리에서 tsconfig.base.json 파일을 생성한다. { "compilerOptions": { "strict": true, "useUnknownInCatchVariables": true, "allowJs": true, "skipLibCheck": true, "forceConsiste.. 공감수 0 댓글수 0 2023. 5. 8.
모노레포 환경 구축하기 (with yarn berry) 원티드에서 5월 프리온보딩 챌린지를 진행하여 참가하였다. 이번달 주제는 바로 monorepo와 관련된 것! 평소에 너무 궁금하고 배워보고 싶었는데 이런 기회가 오다니 ! 바로 신청했다. 이번 챌린지는 모노레포인 만큼 실습이 많았는데 환경 세팅하는 과정에서 놓치는 부분이 많았다. 다시보기로 놓친 부분도 공부하겸 블로그에 정리해 놓기로 마음을 먹었다. 모노레포 관련 아티클 사전 미션으로 모노레포와 관련된 아티클을 읽어보라고 추천해주셨는데 너무 재미있고 흥미롭게 읽을 수 있었다. 그러면서 나의 프로젝트를 잠시 회고해 볼 수 있었다. 나는 주로 멀티 레포로만 서비스를 운영했었다. 각 프로젝트가 고유 저장소를 가지므로 독자적으로 빠르게 개발을 가능했고, 각각의 프로젝트를 관리하기엔 가벼웠다. 하지만 같은 도메인의.. 공감수 0 댓글수 0 2023. 5. 5.
[Flutter Error] Permission denied vector_math [ 문제 발생 ] Flutter 를 디버깅모드로 실행하는 도중에 flutter Permission denied Could not build the application for the simulator. Error launching application on iPhone 14 Pro. 라는 에러가 계속 발생했다.. 권한의 문제인 것 같아서 sudo flutter run을 해줬더니 실행됐음.! 근데 나는 vs code 에서 멋진 기능들을 사용하면서 ,, 시뮬레이터를 돌리면서 실행시키고 싶었기 항상 sudo로 할수 없었고,, 꼭 해결해야 했음!! [ 에러 내용 ] Permission denied flutter/packages/flutter/lib/src/material/bottom_navigation_bar... 공감수 0 댓글수 0 2023. 4. 9.
WebRTC ~ing WebRTC 란 ? WEB Real-Time Communication 으로 실시간 커뮤니케이션을 가능하게 해주는 기술로 peer-to-peer방식이다. peer-to-peer 방식 ? 소켓은 peer-to-peer방식이 아니다. 상대방과 내가 소켓io로 연결된 상황일 경우, 내가 상대방에게 hello라고 보내면 그 hello는 서버로 보내지고, 서버는 다시 상대방에게 hello를 전달한다. 즉 언제나 서버를 사용해야한다. 나는 상대방에게 메세지를 보내지만 사실 서버한테 메세지를 보내고 서버가 상대방한테 메세지를 보낸다. 이는 peer-to-peer가 아닌 서버에 연결되어 있을 뿐이다. 하지만 webRTC는 더이상 서버가 필요없다. webRTC는 서버가 보내고 받을 필요가 없이, 내 브라우저가 직접 상대방.. 공감수 0 댓글수 0 2023. 2. 25.
인터페이스 인터페이스 역할 인터페이스는 사전적인 의미로 두 장치를 연결하는 접속기를 말한다. 여기서 두 장치를 서로 다른 객체로 본다면, 인터페이스는 이 두 객체를 연결하는 역할을 한다. 두 객체는 메소드를 호출하여 상호작용을 한다. 그러면 메소드를 호출하면 간단할 텐데 왜 인터페이스를 중간에 거치도록 할까? 두 객체는 서로 어떤 객체인지 알 필요가 없고 각 객체는 인터페이스의 기능만 알면 된다. 인터페이스에게 전달만 해주면 인터페이스가 대신 메소드를 호출해주고 리턴값을 다시 넘겨준다. 객체가 변경 된 것에 관심이 없기 때문에 객체간의 교체가 쉽다. (부품 교체) 이 특징으로 인해 인터페이스는 다형성 구현에 주된 기술로 이용왼다. 상속을 이용해서 다형성을 구현할 수 있지만, 인터페이스를 이용해서 다형성을 구현하는 .. 공감수 0 댓글수 0 2023. 1. 24.
상속 상속 개념 상속은 부모가 자식에게 물려주는 행위를 말한다. 객체 지향 프로그램에서도 부모클래스의 필드와 메소드를 자식 클래스에게 물려줄 수 있다. 상속은 이미 잘 개발된 클래스를 재사용해서 새로운 클래스를 만들기 때문에 중복되는 코드를 줄여 개발 시간을 단축시킨다. public class A{ int field1; void method1(){ ... } } public class B extends A{ //A를 상속해서 B를 만들겠다. String field2; void method2(){...} } //A로부터 물려받은 필드와 메소드 B b = new B(); b.field1 = 10; b.method1(); //B가 추가한 필드와 메소드 b.field2 = "홍길동"; method2(); 클래스 상속.. 공감수 0 댓글수 0 2023. 1. 24.
클래스 객체 지향 프로그래밍 ? 현실 세계에서 어떤 제품을 만들 때 부품을 먼저 만들고, 이 부품들을 하나씩 조립해서 완성품을 만든다. 소프트웨어 개발할 때에도 부품에 해당하는 객체들을 먼저 만들고, 이 객체들을 하나씩 조립해서 완성된 프로그램을 만드는 기법을 객체지향프로그래밍 이라고 한다. 객체와 클래스 객체 객체란 물리적으로 존재하거나 개념적인 것 중 다른 것과 식별이 가능한 것을 말한다. 객체는 속성과 동작으로 구성된다. 예를들어 사람이라는 객체는 이름, 나이라는 속성이 있고, 웃다, 걷다 등과 같은 동작이 있다. 자바는 이러한 속성과 동작은 각각 필드, 메소드 라고 부른다. 객체 모델링 현실 세계의 객체를 소프트웨어 객체로 설계하는 것을 객체 모델링이라고 한다. 객체 모델링은 현실 세계 객체의 대표 속성.. 공감수 0 댓글수 0 2023. 1. 23.
열거(Enum) 타입 열거타입 데이터 중에는 몇가지고 한정되어 있는 값이 있다. 예를들어 월,화,수,목,금,토,일 이라는 7개의 값이나, 봄, 여름 ,가을, 겨울 이라는 4개의 값이 있다. 이러한 한정된 값을 갖는 타입을 열거 타입이라고 한다. public enum Week { MONDAY, TUSEDAY, WEDNESDAY, THURSDAY, FRIDAY, SATURDAY, SUNDAY } 열거 상수는 열거타입으로 사용할 수 있는 한정된 값을 말한다. 열거타입도 하나의 데이터 타입이므로 변수를 선언하고 사용해야한다. Week today; Week reservationDay; //열거타입은 참조타입이므로 null 대입 가능 Week birthday = null; //비교 코드 Week today = Week.SUNDAY; t.. 공감수 0 댓글수 0 2023. 1. 15.
배열 배열이란? 변수는 하나의 값만 저장할 수 있다. 따라서 저장해야 할 값의 수가 많아지면 그 만큼 많은 변수가 필요하다. 따라서 많은 양의 값을 다루는 좀 더 효율적인 방법이 필요하다. 이것이 배열이다. 배열의 특징 1. 배열은 같은 타입의 값만 관리한다. 2. 배열의 길이는 늘리거나 줄일 수 없다. 배열의 변수 선언 배열을 사용하기 위해 우선 변수를 선언해야한다. //타입[] 변수; int[] intArray; double[] doubleArray; String[] strArray; 타입[] 변수 = null; 타입은 벼열에 저장될 값의 타입을 말한다. 배열 변수는 참조변수이다. 따라서 배열도 객체이므로 힙영역에 생성되고, 배열 변수는 힙 영역의 배열 주소를 저장한다. 참조할 배열이 없다면 배열 변수도 .. 공감수 0 댓글수 0 2023. 1. 15.
참조 타입, 문자열 자바의 데이터 타입은 기본타입과 참조타입 두 종류로 나뉜다. 기본타입은 다시 정수타입(byte, char, short, int, logn) 실수타입(float, double) 논리타입(boolean) 으로 나뉜다. 참조타입에는 배열, 열거타입, 클래스, 인터페이스가 있다. 참조 타입 참조타입이란 객체의 번지(메모리의 위치)를 참조하는 타입으로 배열, 열거, 클래스, 인터페이스 타입이 있다. 객체란? 데이터와 메소드(실행 블록을 가지고 있으면서 호출에 의해서 실행이 되는 프로그래밍 요소)로 구성된 덩어리라고 생각하면 된다. 기본 타입과 참조 타입의 차이점 기본타입으로 선언된 변수와 참조 타입으로 선언된 변수의 차이점은 저장되는 값이다. 변수란 ? 하나의 값을 저장하는 메모리 번지를 참조하는 이름 변수의 직.. 공감수 0 댓글수 0 2023. 1. 15.
[GraphQL] GraphQL이 필요한 경우 1. 프론트엔드와 백엔드가 주고받을 데이터를 엄격하게 정의하고 싶을 경우 2. 데이터마다 서로다른 URL을 만들 경우에 지쳤을 경우 3. 필요한 데이터만 알뜰하게 주고 받고 싶을 경우 실습환경 https://bit.ly/graphql-example Fork를 누르면 코드를 수정할 수 있다. 상단에 open int New tab 눌르고 개발자 도구에 network를 보면 graphql이라는 주소로 서버와 통신한 내역을 볼 수 있다. 서버쪽으로 던져준 query를 볼 수 있는데 저것이 graphql의 문법이다. 서버는 던져준 코드를 인식해서 응답을 해주는데 응답한 데이터는 다음과 같다. 즉, 이러한 결과값으로 받은 데이터를 가지고 UI를 만들어 주고 있는 애플리케이션이다. 스키마.. 공감수 0 댓글수 0 2023. 1. 11.
[DOCKER] 기본 사용법 도커란? 우리는 웹개발을 할 때 웹서버나 데이터베이스를 설치해야한다. 하지만 이 과정은 매우 복잡하고 까다롭다. 누군가가 운영체제위에 웹 서버나 데이터베이스를 설치한 다음 그걸 우리에게 준다면 얼마나 좋을까? 이때 운영체제가 설치된 컴퓨터를 주인이라고 하고 이를 host 라고 한다. host에서 실행되는 격리된 각각의 실행환경을 container이라고 한다. 한대의 컴퓨터안에 격리된 환경에서 각각의 앱이 실행된다. 각각의 컨테이너에는 앱을 실행하는데 필요한 라이브러리와 실행파일들만 포함돼 있다. 리눅스 운영체제에는 이런 앱 실행방법이 내장되어 있다. 이를 컨테이너 기술이라고 한다. 컨테이너기술을 이용하여 앱 실행을 쉽게 해주는 소프트웨어가 여러개 있는데 그중에서 제일 잘 나가는것이 바로 도커이다. 도커와.. 공감수 0 댓글수 0 2023. 1. 9.
switch문 우리가 기본적으로 알 고 있는 switch문은 이러하다. java 12 이전 String time; switch (weekday) { case MONDAY: case FRIDAY: time = "10:00-18:00"; break; case TUESDAY: case THURSDAY: time = "10:00-14:00"; break; default: time = "휴일"; } java 12 이후부터는 switch문에서 Expresstion(표현식)을 사용할 수 있다. 위와 같은 switch문을 다음과 같이 변경할 수 있게 되었다. brack문을 없애고, 화살표와 중괄호를 사용하여 가독성이 좋아졌다. 중괄호 안에 실행문이 하나만 있을 경우에는 중괄호를 생략할 수 있다. java 12 이후 String ti.. 공감수 0 댓글수 0 2023. 1. 7.
비교 연산자 비교 연산자 피연산자의 타입이 다를 경우에는 비교 연산을 수행하기 전에 타입을 일치시킨다. 'A' == 65; // true ,1번 3 == 3.0; // true, 2번 0.1f == 0.1; // false, 3번 0.1f == (float)0.1; // true, 4번 1. 'A' (하나의 문자는 정수타입) 는 int 타입으로 변환되면서 65가 된 다음 65==65 이므로 true가 된다. 2. 3은 dobule 타입인 3.0으로 변환하여 3.0==3.0 이므로 true가 된다. 3. 0.1f, 부동소수점 방식을 사용하는 실수타입은 0.1을 정확하게 표현할 수 없을 뿐 아니라 float 타입과 double 타입의 정밀도 차이로 false가 나온다. 따라서 이를 해결하기 위해 4번과 같은 방법으로 강.. 공감수 0 댓글수 0 2023. 1. 5.
증감연산자, 오버플로우와 언더플로우 부호 증감 연산 (++, --) - 연산자는 변수값의 부호를 변경할 때 자주 사용된다. 하지만 주의할 점이 있다. 아래와 같은 결과 컴파일 에러가 발생한다. 이유는 정수타입( int , byte , short) 연산의 결과는 int 타입이다. byte b = 100; byte result = -b; //컴파일 에러 발생 연산자의 증감연산자의 위치에 따라 결과가 달라진다. 증감 연산자가 변수 앞에 있으면 우선 변수를 1증가또는 1 감소시킨 후에 다른 연산을 행한다. 증감 연산자가 변수 뒤에 있으면 모든 연산을 끝낸 뒤에 변수를 1증가또는 1 감소시킨다. int x = 1; int y = 1; int result1 = ++x + 10; //x를 1 증가, int result = 2 + 10 itn resul.. 공감수 0 댓글수 0 2022. 12. 18.
패키지, 클래스 ,메소드 선언 & 변수와 연산 패키지, 클래스 ,메소드 선언 java 소스 파일을 보면 공통으로 나오는 부분이 있다. 바로 패키지 선언부, 클래스 선언부, 메소드 선언부가 있다. package ch01.sec09; //패키지 선언 public class Hello { //클래스 선언, 소스 파일 명 public static void main(String[] args){ //메소드 명 , main메소드 선언 System.out.println("Hello World"); } } 변수 선언 프로그램을 실행하면서 잠시 생성되었다가 사라지는 데이터가 있다. 이러한 데이터들을 저장을 해야하는데 그럼 이 데이터 들은 어디에 저장될까? 정답은 컴퓨터의 메모리(RAM) 이다. 변수는 하나의 값을 저장할 수 있는 메모리 번지에 붙여진 이름이다. 변수를.. 공감수 0 댓글수 0 2022. 12. 18.
프로그래밍 언어와 자바 프로그래밍 언어란 ? 컴퓨터가 이해할 수 있는 기계어는 우리가 일상생활에서 사용하는 언어와는 너무 다른 0과 1로 이루어진 2진 코드를 사용한다. 그렇기 때문에 우리는 사람과 언어 사이의 다리 역할을 하는 프로그래밍 언어가 필요하다. 프로그래밍 언어는 고급언어와 저급 언어로 나뉜다. 고급 언어란 컴퓨터와 대화할 수 있도록 만든 사람이 쉽게 이해할 수 있는 언어이다. 따라서 고급언어로 만든 언어는 컴퓨터가 바로 이해할 수 있어, 컴파일 과정을 거쳐 기계어로 변환해야한다. 프로그램 언어 작성 -> 소스파일을 컴파일 -> 기계어 파일 -> 컴퓨터가 이해함 프로그래밍 언어에는 다양한 언어가 존재하는데, 각 언어마다 실행하는 방법이 다르다. c, c++, c#은 소스파일을 컴파일을 통해 기계어로 만들어 실행하지만.. 공감수 0 댓글수 0 2022. 12. 12.
CORB란? 개발을 하던 도중에 CORB라는 에러를 발견했다. CORS에러는 많이 들어봤지만 CORB에러는 처음 들어봐서 이참에 공부 해보기로 한다. CORB란 ? Cross-Origin Read Blocking(CORB)의 약자로, 악의적은 의도의 웹 사이트로부터 막기위해 도움이 되는 새로운 웹 플랫폼 보안 기능이다. 민감한 정보가 포함되어 있을 수 있고, 기존 웹 기능에 필요하지 않은 경우 브라우저가 웹 페이지에 특정 교차 출처 네트워크 응답을 제공하지 못하도록 설계되었다. 예를 들어 또는 태그에서 요청한 원본 간 text/html 응답을 차단하고 대신 빈 응답으로 바꾼다. 이는 사이트 격리에 포함된 보호 기능의 중요한 부분이다. CORB가 발생 했을 때 대처 대부분의 경우 차단된 응답은 웹 페이지의 동작에 영향.. 공감수 0 댓글수 0 2022. 12. 10.
[CS] HTTP란 무엇인가? 웹에서는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 있해 통신 하므로 웹 개발자라면 HTTP를 잘 알아야한다. 또한 CORS, CORB 에러를 해결하는데도 필요하다. HTTP에 대해서 알아보자 HTTP란 무엇인가? 🤔 - HTTP는 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다. HTTP에서 P는 프로토콜, HTT는 Hypertext Transfer이다. *프로토콜? 프로토콜이란 상호 간에 정의한 규칙을 의미하며 특정 기기 간에 데이터를 주고받기 위해 정의. 통신 프로토콜을 쉽게 풀어보면 “나는 이렇게 줄 테니 넌 이렇게 받고 난 너가 준거 그렇게 받을께” 여기서 Hypertext는 뭐지 ? 브라우저에 어떤 것을 클릭하면 링크가 열려 다른 화면으로 이동하는 이런.. 공감수 0 댓글수 0 2022. 12. 4.
withCredentials 옵션 프론트 서버와 백엔드 서버의 도메인이 다를 경우 백엔드에서 프론트엔드로 쿠키를 생성시켜 줄 수 없고, 프론트에서 백엔드로 쿠키를 보낼 수 도 없다. 이 문제를 해결 하기 위해 withCredentials : true 로 설정한다. axios.post(`${EndPoint.APIServer}/login/`, { profile: { username: username, password: password } }, { withCredentials: true // 쿠키 cors 통신 설정 }) .then(response => { console.log(response); console.log(response.data); }) 공감수 0 댓글수 0 2022. 7. 30.
[SWR] 데이터 가져오기를 위한 React Hooks swr로 전역적인 상태 관리하기 프론트에서 데이터를 전역으로 저장하고 싶으면 리덕스가 필요하다. 하지만 리덕스에도 단점이 있다. 리덕스는 코드양이 많고, 한번 가져왔던 정보여도 컴포넌트가 마운트 될 때마다 새로 가져와야하며, 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위한 동기화 작업이 필요하다. 따라서 리덕스를 사용하지 않고 그 대안으로 swr을 사용해 보고자 한다. SWR은 데이터 가져오기를 위한 React Hooks 라이브러리로 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 되며 그리고 UI는 항상 빠르고 반응적이다. im.. 공감수 0 댓글수 0 2022. 7. 30.
react-draggable 사용 중 findDOMNode 에러 발생 에러 : Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here 경고: findDOMNode는 StrictMode에서 더 이상 사용되지 않습니다. findDOMNode는 StrictMode 내부에 있는 DraggableCore의 인스턴스를 전달했습니다. 대신 참조하려는 요소에 직접 참조를 추가하세요. 여기에서 ref를 안전하게 사용하는 방.. 공감수 0 댓글수 0 2022. 4. 7.
useContext useContext는 context로 공유한 데이터를 쉽게 받아올 수 있게 도와준다. 하지만 컴포넌트 사용성의 재사용이 어려워질 수 있기 때문에 필요할 때만 사용하는것이 좋다. prop drilling을 피하기 위한 목적이라면 component composition컴퍼넌트 합성을 먼저 고려해보자. 그렇다면 리덕스랑 Context? 리덕스는 Context와 비교해서 훨신 더 풍부하고 많은 기능을 제공하기때문에 재사용성 측면 보다는 사용하고자 하는 목적에 대해 더 생각하고 무엇을 사용할지 결정하는게 더 맞는 표현 같아요 Context는 리덕스보다 가볍기 때문에 대부분에 경우 작은 프로젝트들에게 더 잘 어울린다고도 할 수 있겠지만 목적에따라 늘 그렇지 않을수도 있답니다! null이 아닐 때, context/ .. 공감수 0 댓글수 0 2022. 3. 14.
bootstrap grid 부트스트랩의 기본 개념 : 홈페이지 전체가 12개의 컬럼으로 구성되어있다. One of three columns One of three columns One of three columns container로 한번 감싸고, row 와 col이 들어간다. 위 코드는 col 이 4개씩 할당 받게 된다. 총 도합이 12개가 된다. 뒤에 숫자를 붙여서 작성할 수 있다. col-sm-8 col-sm-4 col-sm col-sm col-sm sm은 스몰이고 , md, lg, 를 가장 많이 쓴다. 컨테이너 안에는 여러개의 줄이 포함될 수 있다. md를 사용하는 것이 좋다. 사이트 크기를 점점 줄이다가 768px이하가 되면 변화가 일어난다. 네개의 컬럼을 차지한 블럭이 일렬로 밑으로 나오게 된다. 즉 모바일 화면에서 보.. 공감수 0 댓글수 0 2022. 3. 14.
useRef useRef 참고 유튜브 : https://www.youtube.com/watch?v=VxqZrL4FLz8 useRef 변수 관리 반환된 ref는 컴포넌트가 계속해서 렌 더링이 되어도 언마운트가 되기 전까지 값을 유지 가능 변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 편리 실제적으로 dom 요소에 접근 가능 ex)포커스 주기 , 손쉽게 input요소 접근 가능 import import React, { useRef, useState } from "react"; const countRef = useRef(0); //countRef.current에 저장이 된다. 예제 코드 import React, { useRef, useState } from "react"; function Ref() { const.. 공감수 0 댓글수 0 2022. 3. 14.
Custom hook Custom hook Custom hook이란? useState, useEffect 등등 hook을 사용하는 것만으로도 코드가 훨씬 보기 좋아졌지만, 반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다. custom hook의 이름은 무조건!!!! use로 시작해야한다! //UserList.js import React, { useEffect, useState } from "react" import { Link } from "react-router-dom" function UserList() { const [userList, setUserList] = useState([]) const url = "https://jsonplac.. 공감수 0 댓글수 0 2022. 3. 14.
styled-components styled-components 설치 npm i styled-components import import styled from "styled-components"; 고정 스타일링 import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 1rem; line-height: 1.5; border: 1px solid lightgray; color: gray; background: white; `; function Button({ children }) { return {child.. 공감수 0 댓글수 0 2022. 3. 14.
[React] useCallback const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); import { useEffect, useState, useCallback } from "react"; import "./App.css"; function App() { const [number, setNumber] = useState(0); const someFunction = () => { console.log(number); }; useEffect(() => { console.log("변경됨"); }, [someFunction]); return ( { setNumber(e.target.value); }} /> Call someFunc ); } export de.. 공감수 0 댓글수 0 2022. 3. 9.
[React] useMemo 원시타입/객체 타입 const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 자바스크립트에서는 원시타입과 객체타입이 있다. 원시타입? 어떤 변수에 원시타입의 값을 할당하면 그 값은 박스에 바로 들어간다. 같은 원시값을 가지고 있는 두가지 변수를 비교하면 true가 나온다. 객체타입? 하지만 객체는 어떤 변수에 객체타입의 값을 할당하면 객체는 크기가 크기 때문에 메모리상에 값이 할당되어 보관되고 변수안에는 그 객체에 담긴 메모리의 주소가 할당이 된다. 똑같은 객체를 넣어준 변수를 비교하면 false가 나온다. 변수라는 상자안에는 메모리 상의 주소가 들어가 있기 때문에 다른 주소에 저장되어 있기 때문이다. 오브젝트가 똑같아 보여도 다른 오브젝트이다. 렌.. 공감수 0 댓글수 0 2022. 3. 9.
Redux 란 ? Redux Setting Up - 1 Redux 상태 관리 라이브러리 props ? 부모 → 자식, 변하지 않음 state ? 컴포넌트 안에서 전달, 변경 가능, 변하면 리 랜더링 리덕스의 좋은점은? 컴포넌트로 데이터 전달시 props로 하나씩 타고 올라가면서 주던가 타고 내려가면서 줘야한다. 하지만 리덕스는 리덕스 스토어에 저장하면 직접 접근 가능 리액트 컴포넌트 → 디스패치 → 액션 → 리듀서 → 스토어 → 컴포넌트 (한방향) 액션? 액션은 객체, 무엇이 일어나는 타입인지 (type), 그밖에 설명, 상태 알려줌 리듀서? 리듀서는 이전state가 액션을 만나서 next state(변화가 생긴) 것을 반환 스토어? store는 state를 감싸주는 역할 store안에는 여러가지 메소드가 있는데 이를 이용하여 관리할 수 있다. Setting.. 공감수 0 댓글수 0 2022. 3. 7.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.