본문 바로가기

분류 전체보기

 (200)
[week5] State 관리하기 - State를 사용해 Input 다루기, State 구조 선택하기, 컴포넌트 간 State 공유하기, State를 보존하고 초기화하기 안녕하세요 !웹파트 YB 한수정입니다.솝커톤 끝나고 모두들 잘 쉬셨나요?! 저는 미리 안 해서 지금 쓰고 있는데, 저는 한 3일 아무 것도 안 하고 싶어요...... 그치만 나리스 시작~! 오늘은 5주차 내용 중 가장 흥미롭게 읽었던, 컴포넌트 간 State 공유하기에 대해 정리해보려고 합니다!  state 끌어올리기를 통해 컴포넌트 간 state를 공유하는 방법state 끌어올리기두 개 이상의 컴포넌트가 동일한 데이터를 기반으로 동작해야 할 때, 공통 부모 컴포넌트로 상태를 옮기는 기법입니다. 이 방법을 통해 상태를 중앙에서 관리하고, 하위 컴포넌트가 props를 통해 동일한 데이터를 공유하도록 설계합니다. 왜 state를 끌어올려야 할까..?!여러 컴포넌트가 동일한 데이터를 공유해야 할 때, 각 컴포..
[week4] 비동기 처리 문성희입니다. 바로 아티클 시작합니다. 동기 처리와 비동기 처리함수의 실행과정을 먼저 알아보면 다음과 같다.함수를 호출 → 함수 코드 평가 → 함수 실행 컨텍스트가 생성 → 콜스택(실행 컨텍스트 스택)에 푸시 → 함수 코드 실행 → (함수코드 실행 종료시) 함수 실행 컨텍스트는 콜스택에서 팝되어 제거이러한 과정으로 함수가 실행되기에콜스택에 함수 실행 컨텍스트가 푸시되는 것 = 함수 실행의 시작을 의미한다.자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택(콜스택)을 갖는다.모두 많이 들어본 이야기일 텐데 이 말은 "한번에 하나의 함수만 실행 가능하다"는 것이다. 콜스택의 최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 컨텍스트는 실행 대기 중인 태스크이다.이처럼 자바스크립트 엔진은 한 번에 하나의 태..
MSW 에 대해서 아시나요? 안녕하세요 35기 YB 곽지욱입니다 👳‍♀️ 최근에 데이터를 실제로 fetching 하기 전 퍼블리싱 혹은 Mocking 단계에서는 컴포넌트를 어떻게 설계해야할까? 에 대한 고민을 하다가 아이들나라 서정명 님을 만나서 얘기해볼 수 있는 기회가 있었고, 그때 얻은 인사이트를 웨비분들과 공유하고자 합니다! 우선 가장 이상적인 프론트와 백엔드의 작업방식은 API 명세가 모두 나온 이후에 FE 개발자가 작업에 들어가는 것입니다. 하지만 현실적으로 그러기 어려운 상황에서는 MSW(Mock Service Worker)를 활용한 API모킹 전략을 이용할 수 있는데요 왜냐하면 API 모킹을 통해 실제 백엔드 서비스 없이도 프론트엔드 애플리케이션의 동작을 시뮬레이션 할 수 있기 때문입니다.MSW 소개MSW란 리액트 환..
[week 04] 비동기 처리 약속해줘 🤙🏻 (Event Loop, Promise, Async/Await) 안녕하세요! 물결웹팟 OB 박채연입니다 ! 😗 이번주차는 비동기 처리에 대해 딥다이브 해보는 시간이라 해당 부분 공부했습니다 -_- 노션으로 정리해서 노션 링크 첨부하고 갈게요! 🧞‍♀️    비동기 처리 (Event Loop, Promise, Callback, Async/Await) | Notion🧞‍♀️ 동기 처리 / 비동기 처리chaeneey.notion.site https://chaeneey.notion.site/Event-Loop-Promise-Callback-Async-Await-6d35d4c8fc9e463fb6e99e10b3878d41?pvs=4
Emotion CSS와 JSX Pragma 안녕하세요? YB 김채은입니다~! 제가 3주차 과제를 할 때는 스타일 컴포넌트 방식밖에 몰랐고, 심지어 파일 분리도 제대로 하지 못했던 상태라 코드가 상당히 가독성이 떨어졌었는데요ㅜㅜ 코드 리뷰를 하면서 한서OB님의 코드를 보고... 정말 감탄했습니다.. 🤩 수많은 이유가 있었지만 "html 구조가 명확하게 보여서 가독성이 좋았다는 점"에 꽂혀서 공부해 보니, emotion css 방식을 사용하셨더라구요! 이 방법을 사용하면 html 태그에 하나하나 이름을 지어줄 필요 없이, props로 스타일을 제어할 수 있다는 사실...ㅎㅎ (저는 3주차 때 변수 이름을 짓는 게 너무 힘들었어요.........) 그래서 4주차 때 바로. 사용해 보았는데요!! 도중에 발생했던 개인적인 트러블 슈팅을 간단하게 소개해 ..
[week 04] 비동기 처리 (Event Loop, Promise, Callback, Async/Await) 안녕하세요. 웹 배영경입니다.이번주 자스핑 주제는 비동기 처리였는데요,모던 자바스크립트를 읽고 Event Loop, Promise, Callback, Async/Await에 대해 다음과 같이 정리해 보았습니다! https://harsh-lunge-188.notion.site/4-Event-Loop-Promise-Callback-Async-Await-1442ba38c24180eabd14c9a6816a411a?pvs=4 4주차 비동기처리( Event Loop, Promise, Callback, Async/Await ) | Notion42장 (809 - 812) - 이벤트 루프 (비동기) 45장 (842 - 864) - Promise 45장 (842 - 848) - 콜백 46장 (880- 883) - Asyn..
[week 04] 비동기 처리 (Event Loop, Promise, Callback, Async/Await) 안녕하세요 YB 김고은입니다. 이번주 자스핑 주차인 비동기 처리에서 대해서 작성해보겠습니다! 공부한 책의 범위는 다음과 같습니다.  42장 (809 - 812)  - Event Loop  (비동기처리 챕터) 45장 (842 - 864) - Promise 45장 (842 -  848) - Callback46장 (880- 883) - Async/Await 비동기 처리자비스크립트엔진은 단 하나의 실행 컨텍스트 스택을 갖게 되는데,-> 동시에 2개 이상의 함수를 동시 실행할 수 없다는 것이다.  이러한 작동의 방식을 싱글 스레드라고 하는데, 싱글 스레드의 특징상, 한번에 하나의 테스크만을 실행하기 전처리가 길어지면 이제 뒤에 실행될 동작이 막혀버리는 블로킹 (작업 중단) 이 발생한다. .. 이러한 처리를 동기적..
🏄‍♀️ 리심스 4주차 - 컴포넌트 패턴 iuoo1. Compound Pattern합성 컴포넌트 패턴은 하나의 완결된 UI 컴포넌트를 위해서 작게 세분화된(캡슐화된) 하위 컴포넌트가 존재하고, 그 하위 컴포넌트들을 조합하여 사용하는 디자인 패턴이다. 하위 컴포넌트들과, 하위 컴포넌트들 활용하는 메인 컴포넌트에서는 상태와 로직을 공유한다.부모에서 props 로 자식에게 속성들을 전달하는 것이 일반적인데, 부모와 자식 사이의 간격이 너무 멀어질 경우, props를 계속해서 하위 컴포넌트로 넘겨줘야 하는 불편함이 발생한다.(props drilling) -> 이를 개선하기 위해 나온 패턴으로, 컨텍스트를 이용하여 props로 자식에게 넘기지 않고도 하위에서 필요한 데이터들을 전달한다. 부모 컴포넌트는 컨텍스트와 상태를 제공하는 반면 자식 컴포넌트는 이..

티스토리툴바