Lecture17 javascript bind() 메소드와 rest파라미터 bind() 메소드 : 이벤트리스너 혹은 콜백함수 등과 같이 간접적으로 함수를 호출할 경우 하나의 메소드를 사용하고 싶으나 파라미터를 다르게 던지고 싶을 경우가 있다. 이럴 경우 bind() 메소드로 간접 호출하려는 함수의 파라미터에 값을 넣어줄 수 있다. btn.addEventListener('click',testFunc.bind(this, false)); const testFunc = (boolean) => { if (boolean) { console.log('true'); } else { console.log('false'); } }; rest파라미터 : for문을 돌려 합을 구하는 함수가 있고 인자로 들어갈 값의 갯수는 정해져 있지 않을 때 인자 부분에 '...numbers' 와 같이 앞에 점 세.. 2023. 7. 17. javascript 함수[function] (직접적실행, 간접적실행, 익명함수, 화살표함수) 함수는 객체에 포함될 수 있다. ex) const a = { fName : function() fName { console.log('hello'); } 위와 같이 객체에 존재하는 함수를 메소드라고 부른다. 함수는 직접적으로 간접적으로 실행할 수 있다. 직접 : 선언된 함수의 이름 뒤 괄호를 사용하여 호출하는 방식으로 해당 함수를 바로 실행 간접 : 함수의 이름만 사용하여 호출하는 방식으로 이벤트리스너와 같이 특정 시점에 함수를 실행시킬 수 있음 익명함수: 변수에 함수를 할당하는 것 // 변수에 함수를 할당 const hello = function() { console.log('hello'); }; // 메소드의 인자로 쓰일 경우 익명함수로 직접 작성가능 btn.addEventListener('click'.. 2023. 7. 15. javascript 변수로 객체의 값 꺼내기 const obj = {a: 1, b: 2, c:3} 위와 같은 객체가 있고 let key; if (조건) { key = a } else { key = b } 위와 같이 조건에 따라 변하는 변수 값이 있을 경우 해당 조건에 따라 변하는 키에 맞는 객체의 value를 가져오고 싶다면 obj[key] 와 같은 형식으로 변수에 맞는 value를 가져올 수 있다. 2023. 7. 14. javascript <script>태그의 defer와 async html에 외부 script 파일을 불러올 때 head 태그 안에 스크립트 태그를 작성하고 아무 속성을 지정해주지 않으면 브라우저는 HTML파일을 먼저 다운 -> 구문을 분석하고 분석을 중간에 멈춘 후 script파일이 다운, 실행 이후 마저 HTML 구분을 분석한다 이때 스크립트 파일에서 요소를 조회하는 것과 같이 HTML에 의존하는 부분이 많다면 동작에 문제가 발생할 수 있다 이에 대한 해결책으로 script를 body 태그 마지막부분에 넣게되면 브라우저는 HTML파일을 먼저 다운 -> 구문을 분석하고 위 과정이 모두 완료된 후에 script파일을 다운, 실행하기 때문에 손해가 발생할 수 있다. 이럴 때 사용하는 옵션이 defer와 async이다. 와 같이 시작태그 마지막부분에 작성해주면 된다 def.. 2023. 6. 29. props와 ref를 통한 컴포넌트간 연동 리액트는 화면들을 각각 컴포넌트로 나눠 만들고 그것들을 import 하여 화면을 구성할 수 있다. 각각 화면별로 기능들이 존재하니 메소드나 데이터가 화면별로 존재할거고 하나의 화면에서 보여야하기 때문에 연동되는 것처럼 구현하는 것은 꼭 필요할 것으로 생각된다. 내가 이번에 개발한 방식은 할아버지 컴포넌트 -> 부모컴포넌트 import 부모컴포넌트 -> 자식컴포넌트 import 하여 화면을 구성했다. 그렇다 보니 서로서로 메소드나 데이터를 공유해야하는 상황이 반드시 필요해졌다. 이럴때 내가 확인한 방식이 바로 props와 ref다. 쉽게 설명하자면 props는 내가 할아버지에서 자식컴포넌트까지 원하는 메소드나 데이터를 넘겨주는 것이다. // 이것은 A 컴포넌트입니다. import B from './path.. 2023. 1. 11. setState 객체에 값 넣고 싶을때 개발을 하면서 state에 꼭 하나의 값이 아닌 객체로 잡아야하는 경우가 생긴다. 예를 들어 어떤 주문과 관련된 상태와 로딩창의 오픈 여부를 같은 컴포넌트에서 구현해야 하는 경우 state = { olderInfo: { 주문자: aa, 가격: bb, 등등 }, loadingImg: false } 위와 같이 표현할 수 있겠는데 나도 위와 같이 작성 후 setState로 주문자의 데이터만 바꾸려고 이전에 알고있는대로 시도를 해보니 어떻게 해도 원하는대로 동작을 하지 않았다. 우선 원인으로는 렌더링은 state 값이 변경될 때 되는데 loadingImg와 같은 단순 값은 다른 값이 들어왔을때 변화가 되었다는 것을 바로 알 수 있지만 객체의 경우 해당 주소값을 조회하기 때문에 안의 값이 바뀐다고 하더라도 주소가.. 2023. 1. 11. React 란 무엇인가. React는 자바스크립트 라이브러리중 하나로 ui를 만들기 위해 사용된다. React의 장점으로는 ui를 상태로 관리할 수 있다는 것인데 mvc 모델에서 데이터가 변경되면 컨트롤러에서 해당 데이터를 다시 가공 후 모델에 넣어 뷰에 넣어주는 것과 다르게 그냥 데이터만 변경되면 자동으로 화면에 갱신이 된다. React의 ui 개념은 주로 가상돔 패턴을 말한다. 이를 설명하기 위해 먼저 브라우저의 단계를 살펴보면 1. html코드 파싱, 돔트리 생성 2. css코드로 cssom트리 생성 3. 두 트리 합쳐서 렌더트리 생성 4. 레이아웃 계산 5. 픽셀로 화면에 그려줌 과 같은 단계를 거치는데 이런 과정을 많이 반복하게 되면 당연 부하가 생길 수 밖에 없다. 가상돔패턴은 먼저 가상돔을 만들어 돔과 비교하고 여기.. 2022. 11. 15. 리눅스 강의 2주차 2주차는 거의 계정과 권한 관련된 내용들이 대부분 useradd user1 : user1이라는 계정 생성 (윈도우에서 로그인 시 들어가는 계정 같은 것) 리눅스는 모든게 파일로 되어 있어 생성한 유저의 정보도 파일에 저장되는데 /etc/passwd의 6번째 필드에서 기본 디렉토리를 확인할 수 있다 useradd라는 명령어 또한 파일로 존재하는데 해당 /etc/default/useradd 파일에서 vim으로 설정 변경하여 유저 생성 시의 홈디렉토리를 바꿀 수 있다. 계정이 만들어지면 자동으로 그룹도 생성되고 여러 그룹들 중 wheel 이라는 그룹은 관리자 대우를 받는다. 계정 생성 시 관리자를 지정해주려면 useradd -G 그룹명 계정명 으로 옵션을 추가하면 되는데 이런걸 이제 help로 잘 찾아보고 응.. 2022. 11. 15. 리눅스 강의 1주차 리눅스 터미널에서 명령어 입력 시 왼쪽에 aaa@host ~ 와 같은 이상한 언어가 계속 쓰여있는 것을 볼 수 있는데 이것은 프롬프트로 계정@호스트네임 디렉토리 이다 여기서 ~ 표시는 내가 지금 홈디렉토리에 있다는 뜻 리눅스 명령어 입력 후 --help로 해당 명령어와 관련된 옵션들 및 설명을 확인할 수 있다. (사용법에서 대괄호 안의 옵션은 선택사항, 뒤에 점 세개가 붙는 것은 여러 개를 쓸 수 있다는 뜻) help로는 좀 이해하기 어려우면 man [명령어] 로 확인 2022. 11. 15. 이전 1 2 다음