[JS 문법] this 바인딩에 대해서
·
Frontend/JavaScript & Jquery
This Binding 언제할까?? 어떤 값이 this에 바인딩 되는거지??  this 바인딩은 실행 컨텍스트가 생성되는 순간에 된다.실행 컨텍스트는 함수가 실행되는 순간에 생성이 된다. 그래서 함수를 어떤식 (how)으로 호출했냐에 따라 this의 값이 바뀔 수 있다.(호출하는 방식에 따라 this에 바인딩 되는 값이 달라진다!!) 1. 전역 공간> window : 브라우저에서 > global : Node.js 환경에서 2. 함수 호출시> window : 브라우저에서> global : Node.js 환경에서 3. 메서드 호출시- 누가 호출했느냐 => 메소드 명의 '점' 바로 앞에 있는 것이 this가 된다.** 참고🙋‍♀️ c 함수의 this가 전역객체가 아니라 obj를 바라보게 하려면 어떻게 해야하..
[JS 문법] JS 호이스팅에 대해서
·
Frontend/JavaScript & Jquery
JS엔진은 식별자들을 '최상단'으로 끌어올려 놓은 다음 코드를 실행한다. Hoisting 호이스팅:  '끌어올리다' 변수 정보를 수집하는 과정을 뜻한다.함수 선언문, 함수 표현식 등 함수 작성 방식에 따라 호이스팅이 되는 규칙이 바뀐다.  함수 선언문은 함수 선언문 전체를 끌어올린다.선언된 식별자만 끌어올려진다.위에 끌어올려진 내용 전체를 environmentRecord 라고 부른다. 그래서 결과를 보면, a는 정상출력되지만, b에서 아래와 같은 에러가 난다. 실행컨텍스트에 대해서 알아보자!-----------------------------------------------------------| inner || ..
[JS문법] null과 undefined
·
Frontend/JavaScript & Jquery
💡 null과 undefined 개념 잡기 "둘다 없음"을 나타내는 값이지만 정확히 따져보면 없음의 기준이 다르다! 🔎 undefind: 비어있는 상태 (무시해도됨) -> 없다고 생각사용자가 undefined을 일부러 부여하는 행위는 생각보다 많지 않은것 같다. > 직접 undefined을 할당하지 말자!!자바스크립트 엔진이 부여하는 케이스는 존재한다.👉 값을 대입하지 않은 변수에 접근하고자 할 때 JS 엔진이 반환해주는 값 👈1. 값을 대입하지 않은 변수let a;console.log(a); // undefined 2. 객체 내부 존재하지 않은 프로퍼티 접근하려고 할 때let person = { name : "jane",}person.age // undefined 3. return 문이 없..
[console Tip] console 유용하게 사용하기
·
Frontend/JavaScript & Jquery
console 100% 활용하기!! 1. console.log 에 색상 입히기const err = "hihi";console.log(`%c error : ${err}`, "background: #ff0;color: red;font-weight: bold")const err = "hihi";console.log(`%c error : ${err}` + `%c error : ${err}`, "background: #ff0;color: red;font-weight: bold", "background: aqua;color: green;font-weight: bold")console.log(`%c error : ${err} %c error : ${err}`, "background: #ff0;color: red;fo..
운영체제 기초
·
정보처리기사
운영체제 기초1. 기억장치: 데이터, 프로그램, 연산의 중간 결과 등을 일시, 영구적 저장하는 장치 기억장치의 종류 2. 시스템 소프트웨어: 응용 소프트웨어를 실행하기 윈한 플랫폼 제공 시스템 소프트웨어 종류 유틸리티 : 하드웨어, 운영체제, 응용 소프트웨어 관리를 지원장치 드라이버 : 특정 하드웨어나 장치를 제어운영체제 (OS) : 하드웨어 관리와 통신 등 다양한 기능을 제공                       시스템 소프트웨어의 구성1) 제어 프로그램 > 감, 작, 데- 감시 프로그램 : 프로그램 실행, 시스템 상태 감시/감독- 작업관리 프로그램 : 스케줄 관리, 시스템 자원할당 담당- 데이터 관리 프로그램 : 데이터 전송 및 파일 조작 관리 2) 처리 프로그램- 서비스 프로그램 / 문제 프로그램..
tailwind custom color가 적용이 안될때
·
Frontend/React
tailwind theme에 색상을 지정해줬는데 적용이 안될 때 해결하는 방법  text-어떤색상 이렇게 적용하고 싶었는데 화면에 적용이 안된다. tailwind.config.js에 추가 설정을 해주어야한다.safelist: [ { pattern: /^text-|^bg-|^border-/, // You can display all the colors that you need }, ],
[eslint] react/prop-types, missing in props validation
·
Frontend/React
Vite로 리액트 프로젝트를 진행하다가 빨간 줄이 거슬려서 해결 방법을 찾아 봤다.  eslint에서 나는 에러이다..eslintrc.json 또는 .eslintrc.cjs 페이지 중 한곳rules에 "react/prop-types": "off" 이 조건을 추가해주면 된다. rules : { "react/prop-types": "off"}
1과목 소프트웨어 구축
·
정보처리기사
01 소프트웨어 공학 개념 위기를 극복하고 품질 높은 소프트웨어를 효율적으로 개발하기 위한 학문 소프트웨어 공학의 3R 1. 역공학 : 이미 개발된 시스템 분석해 문서를 추출 2. 재공학 : 기존 소프트웨어를 기능 개선하고나 재활용하는 공법 분석 -> 재구성 -> 역공학 -> 이관 3. 재사용 : 이미 개발된 SW 일부 또는 전체 다시 사용 - 합성 중심 : 모듈을 만들어 조합해 SW 완성 - 생성 중심 : 추상화 형태 구체화해 프로그램 만들기 소프트웨어 개발단계 계획 -> 요구사항 분석 -> 설계 -> 구현 -> 테스트 -> 유지보수 - 요구사항 분석 : 요구사항 분석서 - 설계 : 모델링, DFD, DD, Mini-spec, ERD, STD(상태전이도) - 구현 : IDE, 형상, 배포, 협업 - 테..
React에 네이버 SmartEditor2 적용하기
·
Frontend/React
네이버 스마트 에디터가 생각보다 좋아서 리액트에 적용하고 싶은데...네이버 스마트 에디터는 npm으로 설치가 불가한 것 같다. 그래서 생각해 낸 방법이 public 폴더에 에디터 html 을 만들고 그 html 파일을 컴포넌트 iframe에 넣어서 가져오는 방식이다!!해봤더니 잘돼서 공유한다. https://github.com/naver/smarteditor2/releases Releases · naver/smarteditor2Javascript WYSIWYG HTML editor. Contribute to naver/smarteditor2 development by creating an account on GitHub.github.comsmarteditor2를 받아준다.  나는 표시한 파일을 받아줬다...