connecting dots

1. 개요패스트캠퍼스 데브캠프: 김민태의 프론트엔드 개발 1기비기너반 프로젝트로써 진행한 영상공유 SNS 플랫폼 개발 프로젝트 소개 및 회고를 해보겠습니다. 2. 깃허브 주소https://github.com/Dev-FE-1/Toy_Project_3_BeginAgain GitHub - Dev-FE-1/Toy_Project_3_BeginAgainContribute to Dev-FE-1/Toy_Project_3_BeginAgain development by creating an account on GitHub.github.com 3. 팀원소개 및 역할분담 처음에는 7명으로 시작했던 비기너반이 최종적으로는 4명이 되어 프로젝트를 진행하였습니다. 특히나 프로젝트가 시작되고 기획 및 디자인 단계에서 두 분이나 개인..

hot module replacement모듈 전체를 다시 로드하지 않고 애플리케이션이 실행되는 동안 교환, 추가 또는 제거함실행 중인 상태의 코드의 변경 된 부분을 바꿔치기하는 것 copilot said ...Hot Module Replacement(HMR)는 리액트 개발에서 코드가 변경될 때 페이지를 새로 고치지 않고도 변경된 내용을 바로 반영해주는 기능이에요. 이 기능 덕분에 개발자가 코드 수정 후 저장할 때마다 페이지를 새로고침하지 않아도 변경된 내용을 즉시 볼 수 있어요.Vite는 기본적으로 HMR을 지원해요. 추가 설정 없이도 바로 사용할 수 있어요.비유로 설명하기한번 상상해보자. 네가 그림을 그리는 중이라고 생각해보자. HMR이 없다면, 색깔을 조금 바꿀 때마다 종이를 새로 갈아야 하는 상황이..

--> 함수형 컴포넌트와 클래스 컴포넌트는 App.js에서 불러오는 것은 같지만 모양이 다름 !클래스는 복잡하지만 다양한 기능을 제공함. 대표적인 기능이 상태 ! (함수형 컴포넌트는 지원하지 않음) 클래스 컴포넌트함수형 컴포넌트상태지원미지원요즘 거의 안 씀리액트가 함수형 컴포넌트에서도상태를 사용할 수 있는 방법을 만들어줌  - 상태(state)많은 데이터 중에 값이 변하는 것, 앱이 실행하고 나서 상황, 시간의 흐름 등에 따라 값이 변하는 것  --> onIncrement 잘 호출되고 숫자도 올라가는데 화면의 숫자는 여전히 1 ?--> 함수를 호출하는게 없고 마크업 처럼 쓴 것도 호출이 아님. 리액트에게 넘겨주는 것임      버튼 클릭 시 정상적으로 숫자 증가    --> 최근에 들어서는 클래스 컴포넌..

React Hooks란 ?ReactConf에서 2018년 발표된, class 없이 state를 사용할 수 있는 새로운 기능 React Hooks가 필요한 이유 ?항상 기술은 그 전의 불편함이나 문제점을 해결하기 위해서 더욱 발전함react hooks도 주로 class component로 사용되어온 react에서 느껴왔던 불편함이나 문제점을 해결하기 위해 개발됨--> 원래 리액트는 주로 class component를 사용하고, react hooks는 functional component를 사용함React ComponentClass ComponentFunctional Component더 많은 기능 제공더 많은 코드 양더 복잡한 코드더딘 성능더 적은 기능 제공짧은 코드 양더 심플한 코드더 빠른 성능 함수형 컴..

참고 사이트https://playcode.io Javascript Playground (Sandbox, Repl)Javascript Playground (Sandbox, Repl)playcode.io  식1 + 1 (식)1 (값)= 2(값)==> 식 --> 결국 값이 된다 ! 값값의 종류1. 기본형 값 유형, 원시형123 // number_숫자 // Bigint(엄청 큰 숫자를 다룰 때)'123' // string_문자열"123" // string`123` // stringtrue, false // booleannull // null_아무것도 없다는 의미undefined // undefinedSymbol // Symbol 2. Object{object}  값만 있을 때 단점- 의미를 표현할 수 없음..

일급함수함수를 값으로 취급하는 것 --> 일급함수변수에 할당 가능, 인자로 전달 가능, return 가능const obj = { id: 1, title: 'my obj'};function myFunction () { return a;}obj.title = 'change';obj.fn = myFunction();const result = myFunction(myFunction)  함수코드 묶음을 값으로 취급할 수 있는 수단반드시 값(value)을 리턴한다 --> 리턴한 값을 호출한 곳에서 반환한다 !함수 호출 ==> const result = myFeat(); --> myFeat()으로 이동제어문 적인 성격 (코드의 흐름을 바꿈) 1. 이름없는 함수그 자체로는 의미 있지만 호출할 수 없기 때문에 변수..

1. 문자String.prototype.indexOf()indexOf() 메서드는 호출한 String 객체에서 주어진 값과 일치하는 첫 번째 인덱스를 반환합니다.일치하는 값이 없으면 -1을 반환합니다. 매개변수searchValue찾으려는 문자열.아무 값도 주어지지 않으면 문자열 "undefined"를 찾으려는 문자열로 사용합니다. 반환 값searchValue의 첫 번째 등장 인덱스. 찾을 수 없으면 -1. const result = 'hello world!'.indexOf('heropy')console.log(result)// -1 .lengthconst str = '0123'console.log(str.length) // 4console.log('0123'.length) // 4const str = '..

생성자 함수(prototype)const heropy = { firstName: 'Heropy', lastName: 'Park', getFullName: function () { return `${this.firstName} ${this.lastName}` }}console.log(heropy.getFullName()) //Heropy Park// this = this가 소속되어져 있는 부분에 함수가 실행되는// 그 객체 데이터(heropy)를 지칭함 (heropy.firstName이랑 같음)const amy = { firstName: 'Amy', lastName: 'Clark', getFullName: function () { return `${this.firstName} ${t..