차근차근 개발중

📌React Hook이란?React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태(state)관리와 생명주기 기능을 사용할 수 있게 해주는 함수들입니다react가 제공하는 특별한 기능으로, 컴포넌트에 이 기능들을 '추가'할 수 있다. 마치 레고 블록처럼 필요한 기능을 가져다 붙이는거라고 생각하면 쉽게 이해할 수 있습니다.  ◦ HooK사용규칙컴포넌트의 최상위 레벨에서만 호출해야한다.React함수형 컴포넌트 내부에서만 사용가능하다 ◦ Hook의 장점코드가 더 간결하고 읽기쉽다로직 재사용이 쉽다관련 있는 코드들을 한곳에 모을 수 있다.  ◦ 주요 Hook들1) useState - 상태 관리의 기본 변수의 기본값 useState는 항상 두 가지를 반환합니다 현재 값과 그 값을 변경하는 함수초기값은 ..

📍github으로 팀프로젝트할때 필요한 명령어 1. github에서 소스코드 다운로드git clone [repository URL] - git에서 원격 저장소 주소를 복사해오면 됩니다.- 이건 처음에만 해주면 됩니다  2. 작업 시작 전에 최신코드받아오기 git pull origin main- master 또는 main 등 모두의 코드를 정리해둔 마스터 계정의 최신코드를 받아온다  2-1. 작업중이였다면! 먼저 아래작업을 한 후에 pull 해주기 git status # 변경된 파일 확인하기git add . # 변경된 파일 스테이징git commit -m "작업내용 설명" # 변경사항 커밋하기git push origin 브랜치이름  3. 새로운..

📍. git 환경설정하는 방법 - Mac OS 기준 기본 cmd를 사용하면됩니다. 저는 iTerm2를 사용했습니다. git환경 설정 상태 확인 git config --list  이렇게 git 설정값을 확인 할 수 있습니다. 유저 이름 설정git config --global user.name "name"유저 이메일 설정 (github 가입시 사용한 이메일을 작성)git config --global user.email "email address" 📍. Github에 프로젝트를 처음 올리기1. 초기화git init  2. 프로젝트안에 올릴 파일 추가git add ..(점)을 작성하는건 모든 파일을 올리겠다는 의미입니다. 파일을 선택해서 올리고싶으면 . 대신에 파일이름을 작성해주시면 됩니다. (ex - gi..

▪️ setTimeout이란?나중에 실행하기 기능이라고 생각하면 된다.1회성 실행 : 지정된 시간이 지난 후 코드를 단 한번만 실행합니다. 실행 패턴: 딜레이 → 실행 → 종료// setTimeout을 변수에 저장const timer = setTimeout(() => { console.log("setTimeout 실행");}, 3000);// 타이머 취소clearTimeout(timer); 주요 특징 :첫번째 인자: 실행할 함수 (뭘 할지)두번째 인자: 지연 시간 (milliseconds) (언제 할지)한 번만 실행됨⚠️  주의할 점 :시간은 밀리초(1000 = 1초) 단위입니다0을 넣어도 바로 실행되지 않고 최소한의 지연이 발생합니다clearTimeout()으로 예약된 작업을 취소할 수 있습니다c..

1) 함수(funcrtion)란?- 독립적으로 실행할 수 있는 코드 블록입니다- 전역 스코프나 다른 함수 내에서 선언할 수 있습니다//함수 선언식function add1(a, b){ return a + b;}//함수 표현식const add2 = function(a, b){ return a * b;}//화살표 함수const add3 = (a, b) => a + b;   2) 메서드(Method)란?- 객체에 속한 함수를 메서드라고 합니다.- 객체의 프로퍼티로써 존재하며, 해당 객체의 컨텍스트 내에서 실행됩니다. const cat = { name : '나비', // 이것이 메서드입니다. sound : function(){ console.log(this.name + " : 야옹 "); }}co..

1) React 생명주기란?- 컴포넌트가 생성되고 화면에 나타나고 사라지는 과정을 설명하는 메서드의 연속- 마운트(Mounting), 업데이트(Updating), 언마운트(Unmounting) 일반적으로 3단계로 구분되어 있고, 각 단계마다 특정한 메서드를 사용- class components에서 사용하고,  함수형 컴포넌트는 hooks를 이용해서 상태변화를 관리   2) 생명주기 3단계2-1. 마운트(Mounting)- 마운트는 컴포넌트가 DOM에 삽입되어 화면에 나타나는 것을 말합니다. 생명주기의 마운트는 컴포넌트가 생성되어 DOM에 삽입되는 과정을 다루고, 컴포넌트가 처음으로 화면에 나타나는 작업을 수행하는 단계입니다.  1. constructor 컴포넌트의 생성자 메서드로, 컴포넌트가 생성될 때 ..

📍. CRA란? Create React App(CRA)는 리액트 애플리케이션 개발 도구입니다. CAR를 사용하면 webpack이나 babel과 같은 도구를 설치하거나 구성할 필요 없이 간편하게 리액트 애플리케이션을 시작할 수 있습니다. 📍. CRA를 사용하는 이유 간편한 설정 React 앱을 만들때, Babel이나 webpack같은 build 도구를 사용한다. 이런 다양한 라이브러리를 일일이 다운받아야하지만 CRA을 통해 복잡한 설정 없이 간단히 리액트 애플리케이션을 시작 할 수있다. 프로덕션을 배포할 준비가 되었을 때, npm run build 를 실행하면 build 폴더 안에 제작한 앱의 최적화된 Build를 생성합니다. 성능 최적화 코드 번들링, 코드 분할, 자원 압축 등의 작업을 자동으로 수행하여..

📍. 웹폰트란? - 웹 폰트는 로컬의 폰트 설치 상황에 상관없이 웹에서 항상 원하는 폰트를 사용할 수 있게하는 기술이다. 📍. 웹폰트 기본 사용법 1. google fonts를 이용해서 웹폰트 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ratione laborum praesentium molestias tempore sit dignissimos repellendus! Reprehenderit, sed, impedit, rem corporis quae qui voluptatem eaque illum dolorum blanditiis iusto? 2. @font-face font-family: 사용할 웹 폰트의 이름을 지정한다. 이 이..

함수란? 정해진 입력으로 원하는 결과값을 반환해주는 독립적인 코드 블록 function이라는 키워드로 선언 가능 함수이름 매개변수 자바스크립트 실행문 function 함수명( 매개변수1, 매개변수2, .... ){ 자바스크립트 실행문 } 함수 입력값을 parameter 또는 argument라고 부름 일급 함수 성질을 지님 함수를 변수에 할당 할 수있으며, 다른 함수의 인자값 또는 리턴값으로도 사용할 수 있음 function multi(p1, p2){ return p1*p2 } let multi = function(p1, p2) { return p1 * p2 } let calFunc = (type) => { if(type === 'plus'){ return (p1, p2) => { return p1 + p..

1. 변수 · 변수(variable) - 데이터를 담을 수 있는 메모리 공간의 이름 · 변수선언(declaration) - 어떤 타입의 데이터를 담을 수 있는 메모리 공간을 할당하도록 명령하는 것 // var 변수 선언 var name; // let 변수 선언 let name; // const 변수 선언(상수) // 상수 선언시 반드시 초기 값 설정, 설정하지 않을 경우 에러 출력 const name; // Missing initializer in const declaration const pi = 3.14; let name = “이름” , age = 20 // 한 번에 여려 변수를 선언 할 수 있다. · 변수 유효 범위(scope) - 선언된 변수가 메모리에서 삭제되지 않고 영향을 미칠 수 있는 코드 ..