프로그래머스 풀스택 데브코스/데브코스 TIL (59) 썸네일형 리스트형 웹 풀사이클 데브코스 TIL 51일차 State 리액트에서는 변수 말고 state를 만들어서 데이터를 저장한다. 맨 윗줄에 import React, {FC, useState} from 'react'; 추가 원하는 곳에 useState('보관할 자료')를 사용하면 state에 자료를 잠깐 저장할 수 있다. let [post, setPost] = useState('미움받을용기'); 배열 비구조화를 통해 값을 변수에 저장할 수 있다. 이때 변수 post에는 데이터, setPost에는 변경함수가 들어간다. State 를 사용하는 이유 일반변수와 달리 State 변수의 데이터가 변경이 되면 자동으로 재 렌더링이 된다. 즉, 재렌더링 때문에 사용하는 것이다. 물론 개발모드에서는 일반 변수도 재 렌더링이 되지만.. 웹 풀사이클 데브코스 TIL 50일차 리액트 리액트는 싱글페이지 어플리케이션 기반이다. 따라서 화면 이동을 할때 더 부드럽게 동작한다. 리액트의 동작원리 리액트는 더블 버퍼링 기법을 사용한다. 더블 버퍼링은 실시간으로 화면에 렌더링을 하면 그래픽 부하가 심해지니 똑같은 데이터를 메모리에 복사해서 연산을 한후 카피하는 방식으로 동작한다. 초기 랜더링: 컴포넌트를 생성하고 가상 DOM을 생성 가상 DOM 변경 재조정 실제 DOM 업데이트 가상 DOM(메모리 영역)에 상태 변경된 부분을 이전 상태와 비교해서 확인하고 재 렌더링 한다. 리액트 프로젝트 생성 리액트 공식 홈페이지에서 리액트를 어떻게 사용하는지에 대해 알려주고 있다. 우리는 Create React App 이라는 방식으로 프로젝트를 만들어 볼 것이다. https://ko.legacy.r.. 웹 풀사이클 데브코스 TIL 49일차 객체 리터럴 특정 값만을 나타내는 타입 중 하나 interface Student{ stdId? : number; stdName? : string; age? : number; gender? : 'male' | 'female'; course? : string; completed? : boolean; //setName(name : string) : void; setName : (name : string) => void; //getName : () => string; } gneder는 male 또는 female 둘 중 하나만 허용하고 다른 string이 들어오면 오류가 난다. class MyStudent implements Student{ stdId = 1234; stdName = .. 웹 풀사이클 데브코스 TIL 48일차 타입스크립트 타입스크립트는 왜 필요한가? 자바스크립트 코드가 너무 지저분하다. 코드 스케일이 커지면서 코드 관리가 되지 않는다. 타입스크립트를 사용하면 좋은점 자바스크립트 기반보다 버그를 줄일 수 있다. 유지보수가 쉽다. 높은 퀄리티의 코드를 생산가능. 타입스크립트란? 타입스크립트 = 자바스크립트 + 타입체크 타입스크립트 환경에 자바스크립트를 코딩하면 동작한다. 반대로 자바스크립트 환경에서 타입스크립트는 동작하지 않는다. 데이터 타입체크를 통해 변수의 데이터 타입을 명확하게 지정하여 안정성을 높여준다. function plus(a : number, b: number) { return a + b; } console.log(plus(3,5)); console.log(plus('3','5.. 웹 풀사이클 데브코스 TIL 47일차 클래스 클래스는 사용자 정의 데이터타입이다. 데이터와 메소드를 사용자인 내가 새로 정의한 데이터 타입. 맴버 변수와 맴버 함수로 구성된다. 사물의 특성을 정리항 필드와 메소드로 표현하는 과정이 추상화이다. 접근 지정자 public : 누구나 접근 가능 private : 클래스 내부에서만 접근 가능하고, 외부에서는 접근할 수 없다. protected: 상속관계에 있을 떼 상속받은 자식 클래스에서 접근 가능하다. 객체 클래스를 통해 선언한 변수를 객체라고 한다. Dog a = new Dog(); c언어의 malloc과 new 연산자는 같은 역할을 한다. 객체는 Heap 메모리에 생성된다. a에는 객체의 주소가 들어가 있다. 다음은 객체의 사용 예시이다. using System; class Dog{ priva.. 웹 풀사이클 데브코스 TIL 46일차 함수 포인터 함수명 앞에 *를 붙여주면 함수 포인터가 선언된다. Int (*func)(int a); 예제코드이다. int Add(int a, int b) { return a+b; } int Sub(int a, int b) { return a-b; } int main() { int a = 20; int b = 10; int (*fPtr)(int pa, int pb); fPtr = Add; int result = fPtr(a, b); printf("결과값 : %d\n", result); return 0; } 코드를 전혀 바꾸지 않고 포인터만 바꿔줌으로써 결과가 달라진다. 함수 포인터는 이런식으로도 사용할 수 있다. int main() { int a = 20; int b = 10; int select; int.. 웹 풀사이클 데브코스 TIL 45일차 break문 반복문 내부에서 특정 조건이 될경우 break를 하게 하면 반복문을 빠져나간다. int main() { int a = 0; while(1) { if(a>100) break; printf("a의 값은 %d 입니다.\n", a); a++; } printf("a는 100보다 크다\n"); } //... //a의 값은 99 입니다. //a의 값은 100 입니다. //a는 100보다 크다 continue 문 반복문에서 특정 조건이 되면 continue 문을 만나는데, continue 문 이하의 수행은 무시하고 반복문의 시작점으로 간다. int main() { int a = 0; while(a80 && a 웹 풀사이클 데브코스 TIL 44일차 연산자 정적인 데이터들을 유기적으로 행동하게 하여 새로운 가치를 창출해 내는 것. 산술연산자, 대입연산자, 증감연산자, 관계연산자, 논리연산자, 비트연산자가 있다. 분기문 특정 조건에 의해서 나눈다. if 문이 대표적임. 수행조건에는 관계연산자가 사용된다. if문 int main() { int a; scanf("%d", &a); if(a>5) { printf("입력값은 5보다 큽니다\n"); } return 0; } //7 //입력값은 5보다 큽니다 if~else 문 else는 '그 밖의'라는 의미를 가진다. 수행조건이 참이면 if문에서, 거짓인 경우는 else 문에서 처리한다. int main() { int a; scanf("%d", &a); if(a>5) { printf("입력값은 5보.. 이전 1 2 3 4 5 ··· 8 다음
