JavaScript 7

Redux와 React 컨텍스트: 포괄적인 비교

Redux와 React 컨텍스트: 포괄적인 비교 React 애플리케이션의 상태 관리와 관련하여 널리 사용되는 두 가지 옵션은 Redux와 React 컨텍스트입니다. 둘 다 고유한 강점과 약점이 있으며 둘 사이의 선택은 개발 프로세스와 코드의 전반적인 품질에 큰 영향을 미칠 수 있습니다. 이 기사에서는 두 가지를 비교하여 각각의 주요 차이점, 사용 사례 및 모범 사례를 강조합니다. 리덕스: Redux는 React를 위해 특별히 만들어진 인기 있는 상태 관리 라이브러리입니다. 단일 전역 저장소를 사용하여 응용 프로그램의 모든 구성 요소에서 액세스하고 업데이트할 수 있는 응용 프로그램의 상태를 저장합니다. Redux는 리듀서라는 순수 함수를 사용하여 상태를 업데이트합니다. 이는 리듀서가 호출될 때만 상태가 업..

JavaScript를 사용한 브라우저 저장소 사용하기

자바스크립트는 상호작용적이고 동적인 웹 페이지를 만드는 데 사용할 수 있는 강력한 프로그래밍 언어이다. 자바스크립트의 많은 기능 중 하나는 브라우저 스토리지를 사용하여 브라우저에 데이터를 저장하는 기능이다. 브라우저 스토리지에는 로컬 스토리지와 세션 스토리지의 두 가지 주요 유형이 있습니다. 로컬 스토리지는 브라우저를 닫은 후에도 액세스할 수 있는 클라이언트 측의 데이터를 저장하는 방법입니다. 이 기능은 사용자 환경설정, 로그인 세부 정보 및 사용자가 오프라인 상태인 경우에도 사용할 수 있어야 하는 기타 데이터와 같은 정보를 저장하는 데 유용합니다. 로컬 저장소는 동일한 웹 사이트의 다른 페이지 간에 공유해야 하는 데이터를 저장하는 데도 유용합니다. 반면, 세션 저장은 사용자의 세션 기간 동안만 사용할 ..

React Hook을 사용하여 카운터 앱 만들기

리액트 훅스는 리액트 16.8에서 소개되었으며, 개발자들이 클래스 구성 요소를 사용하는 대신 기능 구성 요소에서 상태 및 수명 주기 방법을 사용할 수 있게 한다. 이 기사에서는 React Hooks를 사용하여 간단한 카운터 애플리케이션을 만들 것입니다. 시작하려면 반응 라이브러리에서 useState 및 useEffect 후크를 가져와야 합니다. useState 후크를 사용하면 기능 구성 요소의 상태를 관리할 수 있고 useEffect 후크를 사용하면 데이터 가져오기 또는 DOM 업데이트와 같은 부작용을 처리할 수 있습니다. 먼저 초기 값이 0인 useState 후크를 사용하여 "count"라는 새 상태 변수를 만들 것입니다. const [count, setCount] = useState(0); 다음으로,..

오늘의 공부를 끝내며.. (11/22)

어제에 이어서 프로필화면의 css를 구성해봤다. 그리고 프로필 파일 수정을 클릭하면, 자신의 컴퓨터 혹은 폴더에서 사진파일을 선택할 수 있고, 밑의 수정버튼 및 취소버튼이 따로 있다. 그리고 위의 홈버튼은 홈으로, 왼쪽의 검은 화살표 버튼은 뒤로가기이다. 지금은 이렇게 해야겠다라고 생각은 했지만, 사실 어떻게 구현하는 코드를 짤 수 있는지는 막 떠오르지는 않는다. 일단 이전에 했었던 작업이나 강의들 혹은 구글링을 해보면서 CURD중 update, read기능들을 구현할 수 있도록 해야겠다. 사실 위의 구성단계는 튜터님의 프로필 뼈대만 어제 빌리고, 거의 혼자 만들었다. 뭔가 시간은 많이 들인것 같은데 막상 별로 한게 없는것 같은 기분은... ㅎㅎ... 일단 내일은 또 발전된 나를 볼 수 있기에 기대가 된..

웹퍼블리싱 1주차 완료

웹퍼블리싱 정복 강의 1주차를 마쳤다. 이전에 웹개발강의 및 여러 강의를 들어서 그런지 내용은 쉽게 알아듣고 재밌게 배울수 있었다. 배운 내용은 html, css, js와 jquery, 애니메이션 및 미디어 속성에 대해서 배웠다. 다만 아예 아무것도 모르고 듣는 입문자에게는 어울리지는 않으며, 어느정도 html, css, js에 대해 아주 기초를 알고 들으면 적당히 재밌게 배울 수 있다고 생각한다. 1주차 숙제는 네이버 검색창의 속성을 그대로 개발자도구를 통해 소스코드를 가져와서 구현하는것이다. 검색창 입력 텍스트 속성 #header .search_area .input_text { width: 444px; height: 24px; padding: 13px 15px; margin: 1px; backgrou..

자바스크립트 문법기초 1주차완료

18강정도 되는 자바스크립트 문법 기초를 오늘 시작하여 모두 완료하였다. 사실 이전에 배운 개념들을 다시 쭉 훍어본다는 느낌이 강했고, 영어단어를 배울때 가장기초단어를 쓱 훍어보는 느낌이었다. visual studio code 설치부터 변수, 데이터타입, 연산자, 조건문, 반복문, 함수, 클래스와 객체, 배열까지 해서 1주차를 하루에 완료하였다. 그 중에서는 아주 간단한 기초문제도 있었다. 물론 클래스 및 객체와 배열의필요성에 대해서는 아직까지는 명시적으로 확실하게 와닿지않기에 더 익혀가며 개념을 정리해나가야될거 같다. 다음에 2주차부터가 본격적으로 어느정도 공부하는 느낌이 있지 않을까 싶다.

오늘의 공부를 끝내며.. (11/7)

금일부터 팀 재편성이 된다고 생각했으나 의외로, 아침 줌 안내에서 내일인 화요일부터 새팀이 편성되어 시작된다고 한다. 그리고 강의 2개가 더 들어왔는데, 한개는 자바스크립트의 기초이고, 다른한개가 자료구조의 알고리즘이다. 오늘은 자바스크립트의 기초는 모두 다 들었고, 나머지 자료구조도 대강 어떤건지 앞부분만 들어봤다. 자료구조는 논리적인 그림을 코드로 나열한것이라고 보면 되며, 기존의 자바스크립트나 C언어 등등에서 쓰였던 길고 복잡한 구조에서 보다 간결하고 쓰기 편하게 이루어져있다. 자료구조의 언어는 기본적으로 파이썬으로 되어있었다. 그러나 이 파이썬도 언어이기에, 간결하고 쓰기 편하다는 말만 들으면 쉬워보일수 있지만 그렇지는 않다. 우리가 외국어를 공부할때 안녕하세요의 단어가 수십 혹은 수백개의 다른 ..