전체 글 108

파일 효과적으로 가져오기 | script defer, async

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com HTML 파일에서 자바스크립트 파일을 효과적으로 가져오는 방법기본적인 자바스크립트 파일 가져오기HTML 파일 생성 (index.html)자바스크립트 파일 생성 (script.js)HTML 파일에서 브라우저에서 라이브 서버 실행하여 확인버튼 클릭 시 경고창 띄우기HTML 파일에 버튼 추가:Click me     2. 자바스크립트 파일에서 버튼에 이벤트..

자바스크립트 2024.07.08

BOM 이란?

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com   브라우저 객체 모델(BOM)이란 무엇인가?브라우저 객체 모델(BOM) 개요브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저를 객체화한 것이다.BOM은 자바스크립트로 브라우저를 제어하기 위해 사용된다.브라우저에서 제공하는 여러 기능들을 자바스크립트로 제어할 수 있다.주요 브라우저 객체Window 객체브라우저 창 자체..

자바스크립트 2024.07.08

DOM 이란?

지나친 이론 공부를 다시 해보겠다... 해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com  돔(DOM)이란 무엇인가?자바스크립트의 탄생 배경자바스크립트는 웹문서를 제어하기 위해 개발된 언어이다.HTML 요소를 추가, 제거, 변경하는 등의 작업을 위해 사용된다.HTML 파일을 자바스크립트로 제어하는 방법브라우저에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다.ex) 크롬 : 블링크, 파이어폭스: 게..

자바스크립트 2024.07.08

재미있는 글을 쓰고 싶다

남들이 이미 다 알고있는 개념만 흝는 글이 아니라 차별화 된 나만의 글을 쓰고 싶다.내가 그나마 남들보다 잘 하는게 글쓰기인데 내 장점을 살리지 못하는 듯한 느낌이다.예전보다는 뭔가 개발 이슈가 생기면 헉 블로그 글로 써야지! 이 생각이 바로 들긴 하지만 글의 퀄리티나 재미는 갈수록 없어지는 것 같다.그냥 단순히 개념 - 예제 코드의 반복이어서 그런지 재미도 없고 무엇보다 블로그 가독성이 매우 좋지 않다.읽고 싶지 않은 글이다! 그래서 내린 결론은... 1. 블로그 이사 -> 벨로그가 훨씬 읽기 편하다. 티스토리 마크다운은 일단 죄악이다.2. 무지성 글쓰기보단 내 경험과 고민이 담긴 글 쓰기 -> react hook form을 쓸 때 뭘 고민했는지, 어디에서 특이점을 느꼈는지, 뭘 배웠는지, 뭘 찾아봤는..

일기 2024.07.01

[React/리액트] Controlled와 Uncontrolled 컴포넌트: 리액트에서 폼 입력 관리하기

리액트(React)에서 폼을 다루다 보면, "Controlled"와 "Uncontrolled" 컴포넌트라는 용어를 접할 수 있다.제어 컴포넌트 / 비제어 컴포넌트라고 다들 알고있을 것이다!이 두 가지 패턴은 입력 요소의 상태를 관리하는 방법에서 큰 차이를 보인다.React-Hook-Form 같은 걸 쓸 때 아무렇게나 쓰지 말고 잘 쓰기 위해서 Controlled와 Uncontrolled 컴포넌트의 차이점, 장단점, 그리고 사용 예시를 살펴보자. Controlled 컴포넌트Controlled 컴포넌트는 상태가 컴포넌트의 state에 의해 제어되는 입력 요소이다. 이러한 패턴에서는 입력 요소의 값(value)이 컴포넌트의 state에 저장되고, 입력 요소가 변경될 때마다 state가 업데이트된다.예시 코드i..

React 2024.06.29

VScode 설정 / 저장할 때 ESLint가 작동을 안할 때

결론부터세팅 설정 이것저것 다 만졌는데  그래도 안되면 vscode 업데이트를 해보자! 문제상황 며칠 전 까지 오류란 오류는 다 잡아줬던 까탈스럽지만 사랑스러운 나의 린트,,,가 갑자기 작동을 안한다!!!!!왜지뭐지내가뭐잘못만졌나ㅜㅜㅜ 인터넷에 있는 린트 설정이란 설정은 다 돌아봤다. 하지만.. ㅠ 그래도 안 됨 보통 시도하는 것들1. 설정의 Default Formatter를 prettier / eslint로 둔다 2. setting.json에서 추가 규칙들을 설정한다. 하라는 거 다 했는데도 안된다면?!!!! 3. ESLint 출력 창 확인VSCode의 View > Output을 선택하고 출력 창의 드롭다운 메뉴에서 ESLint를 선택하여 ESLint 확장 프로그램의 출력을 확인한다.여기서 오류가 발생..

공부 기록 2024.06.25
728x90