Frontend 개발자 - hyo.loui

❤️‍🔥TIL : Today I Learned Redux / Recoil Redux 와 Recoil을 비교하여 설명합니다. Redux 상태 관리 개념 구조 flux패턴을 사용하여, action이 발생하면 dispatcher에 의해 store에 변경된 사항이 저장되고, 그 상태에 의해 view가 변경되는, 데이터가 한 방향으로 흐르는 구조를 갖는다. + ESLint Store: 애플리케이션의 상태를 보유하는 객체입니다. 모든 상태는 하나의 스토어에 저장됩니다. Action: 상태를 변경하기 위해 발생시키는 이벤트입니다. 액션은 객체 형태로 정의되며, 액션에는 타입과 데이터가 포함됩니다. Reducer: 액션을 처리하고 새로운 상태를 반환하는 순수 함수입니다. 액션의 타입에 따라 reducer가 처리되고, ..

❤️‍🔥TIL : Today I Learned React v18.0 원티드 프리온보딩 프론트엔드 챌린지 질문에 대한 답변입니다. 1. React Lifecycle에 대해 간단히 설명해주세요 React Lifecycle은 컴포넌트 생성, 업데이트, 소멸할 때 일어나는 과정입니다. ( Mount - Update - Unmount ) Mount componentDidMount : 컴포넌트가 마운트 된 후에 호출됩니다. DOM 노드에 접근하거나 외부 데이터를 가져오는 등의 초기화 작업에 사용됩니다 Upadate componentDidUpdate: 컴포넌트가 업데이트 된 후에 호출됩니다. 이전과 현재의 props나 state를 비교하여 필요한 업데이트를 수행합니다. Unmount componentWillUnmo..

❤️‍🔥TIL : Today I Learned 프레임워크와 라이브러리 프레임워크란 무엇이고 라이브러리란 무엇일까 둘의 차이가 뭘까 프레임워크란? 소프트웨어 특정 문제를 해결하기 위해 상호 협력하는 클래스와 인터페이스의 집합 - 프레임워크는 뼈대나 기반구조를 뜻하는데, application 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능들을 위해 어느정도 뼈대(구조)를 제공합니다. 그래서 뼈대 위에 우리가 코드를 작성해 application을 완성 시켜야 합니다. 라이브러리란? 단순 활용이 가능한 도구들의 집합 - 라이브러리는 특정 기능에 대한 도구나 함수들을 모은 집합입니다. 또 우리가 개발하는데 필요한 것들을 모아둔 것 입니다. 개발자라면 누구나 한번쯤은 써봤을 것이고, 자기도 모..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (자바스크립트 스터디 내용) Project : Develife = 프로젝트 완성 ( 배포 >> 발표 ) javascript 스터디 = 각자 발표 chapter 1주차 마무리(모던 자바스크립트 딥다이브 교재) Project review 이번 프로젝트가 마무리되어 유튜브에 시연영상을 업로드 했다. https://www.youtube.com/watch?v=rfuRtHsHwQ4&t=49s OBS 소리가 작다...😥 Study review 부족하다고 생각했던 자바스크립트를 900페이지가 넘는 모던 자바스크립트 - 딥다이브 교재를 활용해서 한챕터 한챕터 서로가 준비하고, 발표하면서..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목적, 정리로 세분화) Project : Develife = 프로젝트 시작 ( 기획 >> 와이어프레임 >> 레이아웃(UI) javascript 스터디 = 각자 발표 chapter 정하고 시작(모던 자바스크립트 딥다이브 교재) 📚 Study review 프로젝트 마무리가 되어가면서 이번주는 공부에 목적을 두지 못했다.. 이번 팀원을 잘 만나서 모던 자바스크립트 스터디를 결성하고 한달 이내에 모든 챕터를 하나씩 돌아가면서 정해둔 발표시간 (약 15분)에 발표를 하고, 나머지 챕터는 정독 하면서 스터디를 하기로 결성되었다! 자바스크립트가 내용이 이렇게 많은 줄도 몰랐고 이렇..

🎯목적 : Youtube API 활용 (비동기)서버통신 : React-Query 적용 response 로 UI구성 🤢 트러블 슈팅 : filter 메서드 문제 해결 1. react query Youtube API 활용에 있어 서버통신의 생산성을 위해 react-query 적용을 기획했다. api.js에서 데이터를 가져오는 함수를 관리하는 파일을 따로 분리했고 중복되는 url 과 api key는 따로 변수선언을 해주었다. 필요한 component에서 react-query를 연결해 위 함수를 사용하도록 import 했다. 별칭을 붙여 데이터의 목적을 정확하게 명시했다. 2. UI 생성 위에서 react-query로 가져온 AllPlayList 라는 배열형 데이터는 map 메서드로 하나씩 돌며, 이미지태그의 ..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 (목적, 정리로 세분화) Typescript 강의 및 실습 = Todo-List (리펙토링, cra-typescript) Project : Develife = 프로젝트 시작 ( 기획 >> 와이어프레임 >> 레이아웃(UI) 📚 Study review typescript를 배울 때는 쉽다고 생각했다.. 하지만 막상 적용하려고 하니.. state, props 등 작성해줘야 할 타입들이 생각보다 많아서 쉽지않았다.. 또한 web API(onclick, onsubmit, onchange 등) 사용 할 때에 파라미터로 전달하는 데이터에도 타입을 작성해야해서 당황했다. 하지만 여러 ..

📝 WIL: Weekly I Learned Work done this week 이번 주 끝낸 일! 티스토리 포스팅 = 매일 TIL 일지 ( 프로젝트 [목표, 오류] 세분화) Project : MZL (MZ-Languagae) = 프로젝트 완성 ( 배포 >> 발표 ) React query 강의 및 실습 = (외부 API 활용) Project review 이번 '왕초보 mz 완성' 이라는 컨셉의 프로젝트는 IOS 와 안드로이드 환경에서의 개발을 동시에 진행 할 수 있는 React-native를 활용한 하이브리드 앱을 만들었다. UI는 낯선 태그들로 다들 복잡하다고 느꼈기 때문에 아주 심플하게 구성하고 로직에 대해 더 집중적인 작업을 진행했다. 기존 프로젝트에서 CRUD 를 구현하면서 회원가입, 로그인 기능에..