전체 글

커다란 자갈돌은 짱돌 빙글빙글 돌아가는 맷돌🪨 FE 개발자를 위한 여정을 엉망진창 기록하자
클래스형 컴포넌트, 함수형 컴포넌트클래스 : 리액트 초기버전함수형 : 리액트 16 이후 사용 권장 (이전에는 상태전달이 안되었었다.) 리액트에서 클래스형 사용할때 > `extends Component` 필수이다.import { Component } from "react";class ClassCom extends Component { render() { return 클래스형 컴포넌트; }}export default ClassCom;반드시 export 추출해야 한다. 클래스로 분리한 컴포넌트를 사용할 때 꼭 import 해주기 함수형import React from "react";const FuncCom = () => { return 함수형 컴포넌트;};export default FuncCom; ..
React 웹 프레임워크자바스크립트 라이브러리의 하나이다. 싱글 페이지 어플리케이션 SPA 및 모바일 어플리케이션 개발에 사용할 수 있다.컴포넌트 안에서 렌더링하는 방식을 사용한다. 동작원리상속구조로 만들어진 컴포넌트를 렌더링을 순차적으로 실행한다.초기 렌더링가상 DOM 변경 : 렌더링 > HTML 렌더링 > DOM 에 주입 > 브라우저재조정실제 DOM 업데이트DOM : Document Object Model : HTML의 구조가상 DOM tree : 컴포넌트가 업데이트가 되면, 최소한으로 연산해서 변화된 부분만 업데이트를 하는 방식이다.> 실제 DOM에 적용해서 업데이트를 한다 : 화면 깜빡임 발생 CRA - 타입스크립트Create React App : `npx create-react-app 폴더명` ..
객체 리터럴객체 안의 모든 프로퍼티들의 타입을 지정해 주는 방법enum 등 객체 선언에 사용할 수 있는 형식`gender?: "male" | "female";`특정 값을 나타내는 타입, 해당값이 정확히 일치해야 한다. 작성된 변수들 제외한(없는) 값 작성시 에러 발생한다. 문자열 리터럴 타입 : `let status : 'success' | 'error';` 숫자 리터럴 타입 : `let speed: 50 | 100 | 200;`불리언 리터럴 타입 : `let isTrue : true;`객체 리터럴 타입 : `let person : {name : 'dah', age : 30};`타입 별칭 : type CardinalDirection = 'North' | 'East' | 'South' | 'West';` ..
타입스크립트 = JS + 타입 체크JS 의 복잡하고 코드관리의 단점을 해결 > 버그를 줄이고, 쉬운 유지봇, 좋은 퀄리티의 코드 생산TS에서 JS 작성하면 동작하지만, JS에서 TS를 작성하면 동작하지 않는다.function pluss(a:number,b:number){ return a + b;}console.log(pluss(3,5));만일 3,5가 문자열로 감싸졌다면 > JS : 35 / TS : Error 데이터 타입을 표기하면 좋은 점? TS > JS로 컴파일 > 웹 환경설정cmd > `npm i -g typescript``tsc 파일명.ts` 타입스크립트 컴파일러 명령어 터미널에 치면, app.js 파일로 컴파일해서 생성한다.ㄴ 자동 동기화 `tsc -w 파일명.ts` tsconfig.js..
함수 포인터함수명 앞에 * 붙여서 함수 포인터! 주소값을 저장한다.`int (*func)(int a);` 일반변수 메모리 변수와 형식만 다르다! 형식만 함수, 저장하는건 함수의 주소값.#include int Plus(int a, int b) { return a+b;}int Minus(int a, int b) { return a-b;}int main(){ int a = 20; int b = 10; int (*fPtr)(int pa, int pb); fPtr = Minus; //Plus int result = fPtr(a,b); printf("결과값 : %d\n",result); return 0;}//console결과값 : 10 사..
연산자정적인 데이터들을 유기적으로 행동하게 하여 새로운 가치를 창출해 내는것산술 연산자 : 사칙 연산`+` `-` `*` `/` `%`대입 연산자 : 오른쪽에 있는 값을 왼쪽에 대입하는 역할.산술연산자와 혼용해서 사용할 수 있다.`=`  `+=`  `-=`  `*=`  `/=`  `%=`부호 연산자증감 연산자`++a`  `--a` : 값을 증감소 시킨 후 연산을 진행`a++`   `a--` : 연산 진행 후 값을 증감소#include int main(){ int a = 5; printf("%d",++a); // 6 printf("%d",a++); // 6 printf("%d",a); //7 return 0;}관계 연산자 : 두개의 피연산자의 관계에서, 같은지 다른지, 어느..
프로그래밍 기본 원리C 컴파일 기반 언어 JS 인터프리터 언어타입스크립트는 컴파일 과정을 통해 JS 로 변환하는 방식이기에 C 기초를 학습하고 넘어가기! 프로그래밍  : 개발자가 sw를 제작하는 과정3단계 : 구상 > 설계 > 구현프로그래밍 언어 : 사람의 언어 > C언어 > 기계어 010111즉 사람의 언어를 기계어로 변환하는 코드. 컴퓨터가 알아들을 수 있는 과정 : 컴파일 과정 프로그래밍 개념설계(문서화 작업) > 원시코드(소스코드) 작성 > 컴파일(이진코드로 변환) > 링크(참조파일들 링크)컴파일 + 링크 = 빌드 협업의 환경설정온라인에서 C 코드 돌릴 수 있는 사이트 GDB online Debugger | Compiler - Code, Compile, Run, Debug online C, C++..
1. 데이터 가공 로직2. 인터랙션 interaction > 비동기, rendering, event3. 유지보수 ☑️ 환경세팅IDE Integrate Development Environmentvscode, webstorm브라우저 : chrome터미널 : iTerm 브라우저, 개발자도구, 디버깅동일한 자바스크립트 > 브라우저마다 보여지는 형태가 다를 수 있다. HTML : 화면 구성 문서 > 파싱 + 로드 강의에서는 파일경로로 브라우저에 띄우는 방법을 알려줬는데Live Server 확장툴을 사용해서 자동저장됨에 따라 실시간으로 로드하는 방법! Live Server - Visual Studio MarketplaceExtension for Visual Studio Code - Launch a developme..
· 회고
☑️What I Learntry-catch 문코드 실행 중 발생할 수 있는 예외 상황을 처리할때 사용된다. 주로 오류가 발생할 가능성이 있는 코드 블록을 보호하고, 에외가 발생했을 때의 처리를 정의한다.try { let result = riskyFunction(); console.log(result);} catch (error) { console.log("예외가 발생했습니다:", error.message);}예외의 종류마다 처리하지 않고, 한번에 처리할 수 있다는점.에러 발생 시 프로그램이 종료되지 않고, 바로 예외처리 catch 문으로 이동하는 점.모든 분기를 try-catch로 처리하는 것은 비효율적이다if 문과의 차이점if 문은 조건에 따라 코드 실행 흐름을 분기하기 위한 것이고, try-ca..
닷다라다나닷
닿망징창 여정