JavaScript4 상태 관리 (1). state와 props 오늘 가져온 주제는 상태 관리로, 앞으로 상태 관리 시리즈로 React의 state, context api, Redux와 같은 상태, 전역 상태에 관련된 글을 올릴 계획입니다. state(상태)란 무엇인가?React 하면 가장 먼저 떠오르는 것이 “상태 관리”라고 생각합니다.그만큼 React를 다루면 많이 사용하고, 사용할수록 더 고민이 많아지는 개념입니다.state는 컴포넌트 내에서 관리하는 데이터(일반 자바스크립트 객체)입니다.state의 가장 큰 특징은 다음과 같습니다.값이 변할 때마다 관련된 컴포넌트들이 다시 렌더링된다.값을 임의로 변경할 수 없다. (오직, setState를 통해서만 변경이 가능하다.)부모에서 자식으로, 자식에서 부모로 전달될 수 있고, 이 과정에서 Props Drilling이 .. 2025. 2. 9. 브라우저 렌더링 과정 오늘은 브라우저 렌더링 과정을 알아보고, 그에 대한 최적화하는 방법을 알아보겠습니다. 지난 포스트를 작성하면서, script 옵션이나 위치에 따라 렌더링 순서나 최적화에 영향을 미치는 것을 알아보았습니다. 이 과정에서 브라우저에 화면이 어떤 순서를 통해 렌더링이 되는 지 알아보고 어느 부분을 신경써서 개선할 수 있는지 알아보기 위해 이번 포스트를 작성하였습니다. MDN 문서를 주로 참고하여 작성하였고 틀린 부분이나 잘못된 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 네트워크로부터 데이터를 받아온 이후, 브라우저 렌더링 과정은 다음과 같이 이루어집니다.구문 분석(parsing)렌더(render)상호작용(interactivity) 1. 구문 분석 (parsing)브라우저가 네트워크를 통해 받은 데이터를 .. 2024. 8. 9. Script 로딩 방식 비교: defer vs $(document).ready() JQuery로 개발하던 중, script를 로딩할 때 defer와 $(document).ready()의 차이가 뭔지 궁금해졌습니다.이 포스트에서는 두 가지 방식인 HTML 파싱과 병렬로 스크립트 다운로드HTML 파싱 완료 후 스크립트 실행$(document).ready()$(document).ready(function() { // 코드 실행});스크립트 즉시 다운로드 및 실행DOM 완전 로드 후 내부 코드 실행2. 스크립트 위치별 비교스크립트 선언 위치에 따른 특징은 다음과 같습니다. 끝defer: HTML 파싱 중단 없이 다운로드, 파싱 후 실행$(document).ready():다운로드 즉시 실행, 내부 코드는 DOM 로드 후 실행스크립트 태그를 만나면 다운로드 되는 동안 HTML 파싱 중단차이.. 2024. 7. 31. [프로그래머스/자바스크립트/lv2] JadenCase 문자열 만들기 문제 설명 JadenCase란 모든 단어의 첫 문자가 대문자이고, 그 외의 알파벳은 소문자인 문자열입니다. 단, 첫 문자가 알파벳이 아닐 때에는 이어지는 알파벳은 소문자로 쓰면 됩니다. (첫 번째 입출력 예 참고)문자열 s가 주어졌을 때, s를 JadenCase로 바꾼 문자열을 리턴하는 함수, solution을 완성해주세요. 제한사항s는 길이 1 이상 200 이하인 문자열입니다.s는 알파벳과 숫자, 공백문자(" ")로 이루어져 있습니다.숫자는 단어의 첫 문자로만 나옵니다.숫자로만 이루어진 단어는 없습니다.공백문자가 연속해서 나올 수 있습니다.Solutionfunction solution(s) { return s.split(" ").map(e => e.charAt(0).toUpperCase() + .. 2024. 7. 11. 이전 1 다음 반응형
