차근차근 개발중

현재까지 무엇을 배웠고 무엇들을 했는가?- 에프랩에서 처음에 가이드를 해주는 멘토링 필독 도서인 '모던 웹을 위한 HTML5+CSS3 바이블' 과 코어 자바스크립트'를 읽고 혼자서 공부했다. 그러면서 멘토님의 주도하에 질문을 주시면 내가 대답을 하고 또 거기에 관한 꼬리 질문하는 방식으로 멘토링을 진행해나갔다. 정말 처음에는 책에 나와있는 개념들을 외우는 거에만 급급했다. 하지만 멘토님의 꼬리 질문을 통해 외우고, 이해는 과정을 알게 되었고 개별적이던 개념들이 어떻게 묶여가며 다른 방향으로 생각할 수 있는지에 대해 알 수 있었다. 그리고 개념의 중요도나 예전에는 중요했다면 요즘에는 잘 사용 안 하는지에 대한 것도 알려주셔서 좀 더 효율적으로 공부하는 기분이 들었다 혼자서 막막하기만 해서 재미없던 공부가 ..

F-Lab을 시작하게 된 이유 내가 f-lab을 알게 된 건 주변 개발자분이 F-Lab을 진행 후 좋았다고 추천해 주셔서 알게 되었다. 하고 난 다음에 성장에도 도움이 되었고, f-lab에서 꼬리 질문을 받는 거에 익숙해져서 면접이 더 편하게 느껴졌다고 말씀해 주셨다. 그 말을 들은 나는 더 혹했지만 아무래도 가격이 쉽게 등록할 수 있는 가격은 아니어서 오래 고민할 수밖에 없었다. 그래도 올해 안에는 꼭 이직을 해야겠다는 목표가 생겼고, 혼자서 어디서부터 어떻게 진행해야 할지, 그리고 지금 하고 있는 개발 생태계를 버리고새로운 곳으로 이직하고 싶은 생각이 컸기 때문에 혼자서 방향을 잡기가 어려워서 고민 끝에 f-lab에 등록하게 되었다.    한 달 동안 진행한 F-Lab 만족감 지금 한 달째 진행한 후..

렌더링 과정중에 성능최적화를 고민하기위해서는 리플로우와 리페인트단계를 빼놓을 수 없다 그렇기때문에 리플로우와 리페인트에 대해서 공부해보자   화면이 사용자에게 표출된 후에 노드가 추가되거나 요소의 스타일이 달라졌을때 발생하는게 리플로우(Reflow)와 리페인트(Repaint)입니다  📌 리플로우란(Reflow)?- 요소의 위치나 크기가 변경되어 페이지의 레이아웃을 다시 계산하는 과정입니다. 변경하려는 특정요소의 위치와 크기뿐만 아니라 연관된 요소들의 위치와 크기도 재계산하기 때문에 성능 저하가 일어납니다.  •  발생원인DOM요소 추가/ 제거요소의 크기, 위치 변경폰트변경, 텍스트 내용변경윈도우 크기조정 css 스타일 변경 ex) margin, padding등 •  특징계산 비용이 높다하나의 요소가 리..

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

항상 아무의식없이 사용했었는데, 갑자기 왜 이걸 선언해야하며, 선언하지 않았을때 어떤 영향이 있는지에 대해 생각해보았다.  📌란?Document Type Declaration의 약자로 '문서 타입 선언'의 시작 태그입니다.HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에게 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지는 않습니다.HTML 태그보다 먼저 선언된다 . 항상 HTML 문서의 첫 줄에 위치해야 합니다 ● 선언 목적DOCTYPE은 브라우저에게 어떤 HTML버전으로 문서를 해석해야 하는지 알려줍니다DOCTYPE없으면 브라우저가 쿼크모드로 전환되어 이전 버전의 브라우저와 호환되는 방식으로 페이지를 렌더링합니다.현대의 는 "표준 모드(Standards Mo..

📌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..