개인코딩개발공장

# JSX란?function App() { let post = "강남우동맛집"; const [state, setstate] = useState("무찌안녕"); console.log("바보무찌"); return ( hello world {post} );}이렇게 js가 있는데 안에 html이 들어있음.컴포넌트 쏴주는식인데 정확히는 함수안에서는 JS문법으로 되니까 HTML을 그대로 쓰면 제대로 인식 못 할 수 있음.그래서 이 안에서 문법을 JSX로 만들었다고 함.예를들어 예약어인 class대신에 className으로 한다는것..-기호를 쓰면 마이너스로 인식하니 안되고 카멜케이스 써야하는것 등등 있다.    # JSX에서 html 태그 자동완성이거땜에 코드짤때 짜증이 났는데.. ..

npx create-react-app 앱이름위 명령어로 프로젝트를 만들어주자.참고로 node js환경이 설치되어 있어야 한다.   Getting Started | Create React AppCreate React App is an officially supported way to create single-page Reactcreate-react-app.dev  리눅스 커널 상에서 해당 프로젝트 디렉토리로 이동한 후, npm start로 로컬서버에서 구동시켜주자. 3000번 포트에서 리액트 프로젝트 사이트가 떴다. # 대충 구조 파악하기난 이미 vue를 다뤄봤기에 spa프레임워크에 좀 적응이 되었는데 일단 딱보이는 다른점은 이 점이다.현재 리액트 프로젝트의 디렉토리 구조인데vue같은경우는 .vue라는 컴..

css에 v-bind가 갑자기 안됐다. 그 이유는 시발.. css에 v-bind로 바인딩 해놓은 부분을 '한 부분만이라도' 주석처리하면 전체 css v-bind가 막혀버린다 처음알았다 ㅡㅡ

# 먼저 vue에서 key이벤트는 아래 블로그를 참조하면 된다. https://ux.stories.pe.kr/119 Vue.js의 이벤트 사용 방법 정리 Vue.js에서 이벤트를 다루는 방법에 대해서 간단히 정리하려고 합니다. HTML에는 나 처럼 당연히 알고 있는 기본 이벤트가 있습니다. 그리고 이미 javascript를 통해서 기본 이벤트와 어우러지게 사용 ux.stories.pe.kr # 문제는 키 이벤트가 input 태그에서만 실행된다는 점! 키이벤트 정리는 저 위에 블로그를 보면 되고.. 암튼 left키를 누르거나 .right 키를 누르면 연결된 이벤트가 실행된다는 점인데 조건이 인풋태그가 활성화 될때만 이라는점.. # 해결방법? 자스에서 dom으로 만지면 된다. mounted() { docum..

const Dog = function () { this.name = "도리"; }; const dog1 = new Dog(); const dog2 = new Dog(); dog1.__proto__.sayHello = function () { console.log("헬로우 도리"); }; // 이건 dog1 dog2둘다 사용가능 dog1.__proto__ = { sayHello() { console.log("헬로우 무찌"); }, }; //이건 dog1꺼만 바꿈. // dog1.sayHello(); dog2.sayHello(); const Dog = function () { this.name = "도리"; }; const dog1 = new Dog(); Dog.prototype = { sayHello() ..

# 왜 이런걸 포스팅할까? 난 이책을 읽기전에 예전에 인수가 파라미터고 파라미터가 인수인줄 알았다. 뭐사실 중요한건가 싶기도했는데 자스를 깊게 파보기로 했으니 용어정리는 매우 중요하다고 생각한다. 함수에서 인수와 파라미터의 차이에 대해 명확히 구분하기 위해서 포스팅한다. # 매개변수란?(parameter) const fuc = function (parameter1, parameter2) { console.log(parameter1, parameter2); }; 이렇게 간단한 함수를 만들어봤다. 여기서 parameter1과 parameter2가 매개변수다. 함수를 정의할때 만들어주는것이 매개변수라고 보면된다. # 인수란?(argument) fuc("무찌", "도리"); // 무찌 도리 출력 위에서 만든 함..

# 일급객체란? 일단 일급객체 용어부터 정리하면 1. 무명의 리터럴로 생성할 수 있음. 런타임 생성 가능 const fuc = function(){ return } 뭐 이런뜻인듯? 중첩함수에서 만들어지는게 런타임중 만들어지는 함수인가..? 암튼 2. 변수나 자료구조에 저장할 수 있다. 3. 함수의 매개변수에 전달할 수 있다. 4. 함수의 반환값으로 사용될 수 있다. 2,3,4번은 그냥 함수리터럴이 메모리에 함수객체로 저장되는 표현식이니까 당연한거.. 3번은 자주쓰이는 콜백함수다. 뭐 이렇단다.. 아직 중요한지는 모르겠음. # 함수객체의 프로퍼티 함수객체를 console.dir로 찍어보자 const fuc = function () { return; }; console.dir(fuc); 저렇게 argumen..

const checkJokbo = (para, count) => { if (typeof para !== "object") { console.log("객체만 써"); return; } else { if (!count || 0) { console.log(`조상님 찾기 시작!`); count = 1; } else { count = count; } if (para.__proto__ == Object.prototype) { console.log(`${count}촌 : Object`); console.log("조상님 찾기 끝!"); return; } else { console.log(`${count}촌 : ${para.__proto__.constructor.name}`); count++; checkJokbo(par..

# 왜 포스팅하니? getter setter 프로퍼티를 접하고 신기해서 써봄.. 이 문법에대해서 사실 몰랐다. 근데 생각보다 꽤나 유용할것 같아서 포스팅하려고 함. # 내가 문제로 삼았던것. const obj = { dog1: "무찌", dog2: "도리", teamName: obj.dog1 + obj.dog2+'듀오', }; 위 코드는 에러가 뜬다 요렇게 참조에러가 뜬다. teamName프로퍼티가 dog1과 dog2를 참조하는건데 teamName프로퍼티가 자기자신 obj를 참조하는 시점이 실행컨텍스트의 코드평가할때 참조하려고해서 참조에러가 뜨는거다. 호이스팅이 발생하는거지. 그래서 이걸 억지로 만들어보려면..? - 즉시실행함수 const obj = { dog1: "무찌", dog2: "도리", }; (..

객체지향을 모르고 걍 코더로써 코딩을 할때 이 세가지의 차이를 잘 몰랐었다. 근데 사실 계속 코드짜면서 굳이? 왜 클래스로 객체를 만들까? 이런 의문은 있었다. 뭐 이걸 공부하기 전까진 동작이되게 코드를 짜는정도 수준이었던것같다. 그래서 이번에 공부하다가 이 세가지의 차이점에 대해서 명확하게 구분하기위해 포스팅을 해보겠다. 일단 세가지 예시코드를 보자~ # 객체를 리턴하는 함수 const makeDog = (name, age) => { return { name, age }; }; 저 함수를 호출하면 객체가 튀어나온다. console.log(makeDog("무찌", 2)); //{ name: '무찌', age: 2 } 이렇게 함수에다가 적절한 파라미터를 넣고 함수를 호출하면 객체를 만들 수 있다. # 생성..