본문 바로가기

분류 전체보기

 (200)
[week3] useState,,, 제대로 알고 계신가요?! 안녕하세요 웹파트 YB 김다현입니다. 이번 3주차에서는 useState에 대해 다뤄보려고 합니다. 리액트로 개발을 하다보면 useState를 수도 없이 쓰게 되는데요!생각해보니까 그냥 기계적으로 쓰기만 했지 뭔가 이게 뭐 어떻게 작동되는 건지,,, 그런 건 아예 모르는 상태더라구요.그리고 우선 저는 딱 읽자마자 '일반 변수로 충분하지 않은 경우' 라는 제목부터 이해가 잘 안 갔기 때문에 ㅎㅎ...지금이 리액트의 핵심 개념 중 하나인 상태 관리의 의미와 역할을 이해할 수 있는 기회라고 생각해 이 부분에 대해 작성하게 되었습니다.오늘도 공식문서를 쉽게! 최대한 누구나 이해할 수 있게! 아티클을 작성해볼게요 😅 다 이해하고 나면 되게 당연한 것 같기도 하고 후루룩 넘길 수 있는 챕터였던 것 같은데 저는 처음..
[week 3] state 알아보기 안녕하세요 YB 김가현입니다 ~! 😋이번 3주차는 상호작용성 더하기 파트에서 이벤트에 응답하기, State: 컴포넌트의 기억 저장소, 렌더링 그리고 커밋, 스냅샷으로서의 state 부분에 대해 읽어보았는데요 ! 읽으면서 매일 useState를 쓰면서도 잘 모르고 쓰고 있었구나 … 라는 생각을 하게 되었습니다 ……….🙀🙀🙀 그래서 state와 관련된 부분들을 공부해본 내용들을 정리해보았습니다State ?리액트에서 컴포넌트는 변화하는 데이터를 기억하고 관리할 수 있어야 한다 ! 예를 들어, 폼에 텍스트를 입력할 때 입력한 값이 즉시 화면에 반영되거나, 구매 버튼을 클릭하면 상품이 장바구니에 담긴다던가 … 등등 동적으로 변하는 데이터를 관리할 수 있어야 한다.이렇게 컴포넌트에서 동적인 값을 state ..
[3주차 React 상태관리 ✍🏻] Context API / Zustand 안녕하세요 웹 YB 최민입니다오늘은 3주차 React 상태관리에 대해 공부해봤습니다 !! React 상태관리 중에도 Context API 와 Zustand에 대해 알아봤는데요 😎🧐 저도 계속 티스토리에서 로그아웃이 되는 현상이 발생해서 ... (왜일까요?)노션에 적은 글을 첨부하도록 하겠습니다 !! 아티클 발표일 전까지 부족한 내용은 더욱 업그레이드 시켜오겠습니다! 더불어 실습 내용은 추후 추가할 예정입니당 !  https://learned-aardvark-272.notion.site/Context-API-Zustand-13940aeaa45b808187b0ed4038af2d8b?pvs=4 Context API와 Zustand | Notion✅상태관리란❓learned-aardvark-272.notion..
Next.js 톺아보기 ! 안녕하세요, 웹파트 OB 공준혁입니다. 저번 세미나 때는 API 통신과 타입스크립트에 대해 배웠는데, 다음 단계로 나아갈 수도 있는 Next.js를 배워보고자 아티클을 작성해봤습니다 !  따라서 오늘은 Next.js 의 전체적인 개념에 대해 톺아보는 시간을 갖도록 하겠습니다. (중요한 부분 위주로!) 참고로, Next.js는 크게 page router 방식과 app router 방식이 있는데, 최근 방식인 app router 기준으로 설명하겠습니다.  Next.js 는 프레임워크 입니다. React.js 는 라이브러리죠.React 라이브러리를 사용하여, 더욱 개발자에게 편리성을 부여해주면서 프레임워크인 Next.js 가 탄생했습니다.프레임워크는 라이브러리에 비해 자유도는 낮습니다. 즉, 정해준 규칙을 반..
[week 02] 실행 컨텍스트와 스코프, 호이스팅 🪄 실행 컨텍스트코드가 실행되기 위해 필요한 환경 정보들을 모아놓은 객체를 말합니다. 실행 컨택스트의 동작은, 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아놓은 뒤, 가장 위에 있는 컨텍스트와 관련 있는 코드들을 실행하는 것으로 코드의 환경과 순서를 보장합니다. 자바스크립트에서 하나의 실행 컨텍스트를 구성할 수 있는 방법에 대해 알아볼까요? 1️⃣ 전역 코드 : 전역 영역에 존재하는 코드 2️⃣ Eval 코드 : eval 함수로 실행되는 코드 3️⃣ 함수 코드 : 함수 내에 존재하는 코드 4️⃣ (ES6부터는) 블록문 가장 쉽게 자바스크립트에서 실행 컨텍스트를 구성하는 방법은 함수를 실행하는 것입니다! 어떤 실행 컨텍스트가 활성화될 때 자바스크립..
[Week02] 스코프, 호이스팅, 실행 컨텍스트 안녕하세요 웹 배영경입니다! 이번 자스핑에서의 주제는 실행 컨텍스트, 스코프, 호이스팅에 대해 학습하기 였습니다! 모던 자바스크립트 Deep Dive에서 해당 부분을 읽고 정리한 부분은 다음 링크를 참고해주세요~!https://harsh-lunge-188.notion.site/2-1362ba38c241808c88cae8b3e093e091?pvs=4 2주차 (스코프, 호이스팅, 실행 컨텍스트) | Notion13장, 15장, 23장harsh-lunge-188.notion.site  이번에는 실행 컨텍스트의 역할에 대해 알아보던 중,'함수 코드 평가' 단계에서함수 내부에서 지역 변수처럼 사용할 수 있는 arguments 객체가 생성되어 지역 스코프에 등록된다 는 부분이 있었습니다. 🤔 arguments 객..
[week 02] 실행 컨텍스트와 스코프, 호이스팅 실행 컨텍스트 : 자바스크립트의 동작 원리를 담고 있는 핵심 개념실행 컨텍스트 : 소스코드를 실행하는데 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역 실행 컨텍스트를 이해하면 알 수 있는 것js가 스코프를 기반으로 식별자와 식별자에 바인딩된 값(식별자 바인딩)을 관리하는 방식호이스팅이 발생하는 이유클로저의 동작 방식태스트 큐와 함께 동작하는 이벤트 핸들러비동기 처리의 동작 방식(나는 아직 모름;; 차차 알아가자)4가지 소스 코드 타입타입을 구분하는 이유는 소트코드의 타입에 따라 실행 컨텍스트를 생성하는 과정과 관리하는 내용이 다르기 떄문에 구분하는 것이다. 📌 전역 코드전역코드는 전역 스코프를 생성한다.var 키워드로 생성된 전역 변수, 함수 선언문으로 정의된 전역 함수를 전역 객체의..
[week 02] 실행컨텍스트, 스코프, 호이스팅 안녕하세요 YB 김고은입니다. 저번 시간에 this 와 bind에 대한 내용을 정리했었는데요!  이번에는 23장 실행컨텍스와, 13장 스코프, 호이스팅에 대해서 다뤄보기로해서 모던 자바스크립트 Deep Dive를 읽고 내용 정리 + 약간의 궁금증을 해결하는 식으로 아티클을 작성해보겠습니다. 실행컨텍스트 "실행 컨텍스트"는 소스코드를 실행하는 데 필요한 환경을 제공하고, 코드의 실행 결과를 실제로 관리하는 영역 다시말해, (1) 식별자를 등록하고 관리하는 스코프와  // (2) 실행 순서관리를 구현한 내부 매커니즘이다.모든 코드는 실행 컨텍스트를 통해 실행되고 관리된다. 식별자와 스코프 => 실행 컨텍스트의 렉시컬 환경으로 관리 코드 실행 순서 => 실행 컨텍스트 스택으로 관리  요 두개를 어떻게 관리하는..

티스토리툴바