본문 바로가기

전체 글

 (30)
FES7 15~19주차, 수료 멋쟁이 사자처럼 프론트엔드 스쿨 7기 15~19주 차, 수료 후기! 15주 차 firebase 수업을 끝으로 팀프로젝트가 진행되었다. 프로젝트를 어떻게 진행했는지 남겨보려고 한다! 프로젝트 초기 프로젝트 조편성이 된 날! 어색한 인사를 나누고 조장과 팀명을 정했다. 스터디와 책 집필을 하며 그래도 여러 사람과 이야기를 나눠봤다고 생각했는데 조원분들 모두 한 번도 이야기를 나눠보지 않은 분들이었다. 🫢 그리고 우리 조는 정규대학 과정을 마친 전공자는 없는 약간 애매한 전공자가 모인 조였다ㅋㅋㅋㅋㅋㅋ 신기했다 ㅎㅎ 이런저런 이야기를 나누다가 요즘 날씨가 좋다는 이야기가 나왔고, 놀러 가기 참 좋은 날씨라는 생각이 들었다. 그 생각으로부터 우리는 축제 및 체험을 모아서 볼 수 있는 서비스 'MOAMOA'를 개..
FES7 12~14주차 멋쟁이 사자처럼 프론트엔드 스쿨 7기 12~14주차 후기 새로 알게 된 것 React Hook Hook flow TDD Webpack API 통신 특이사항 책집필 시작 회고 프로젝트 팀 편성 모의고사가 있었는데 시간 안에 기능을 다 구현하지 못했다. 주관식 문제도 분명히 잘 풀었는데 오답으로 처리됐다. 나의 부족함을 다시 한번 깨닫게 되는 시험이었다. 미래의 팀원분들 미리 죄송합니다... 열심히 할게요...... 지난번 리액트 과제를 수업시간에 같이 풀어보는 시간이 있었는데 styled-components를 사용해서 css적용을 하지 않고, 기능도 완벽하게 구현하지 않아서 아쉬웠다.. 내가 구현한 게 맞는 방법인지를 확인하고 싶은데 확인할 수 없다는 것이 답답하다. 리액트 진도가 끝났고, 자바스크립트 라..
FES7 10주차, 11주차 멋쟁이 사자처럼 프론트엔드 스쿨 7기 10, 11주차 후기 새로 알게 된 것 리액트에서 CSS 적용하는 방법 styled-componetns 기본 사용법 Redux 기본 개념 합성 컴포넌트 React Router 개발자 도구창 기능 특이사항 책집필 스터디 참여 온보딩 챌린지 참여 리액트 과제 제출 참고 웹 개발자가 알아두면 좋은 SPA, MPA 당신이 웹 퍼블리셔, 프론트엔드 개발자가 아니더라도 웹 개발 분야에 있다면 SPA (Single Page Application) 혹은 MPA (Multi Page Application)에 대해서 들어본 적이 있을 거다. 처음 들어본다고? 괜찮다. SPA, M seunghyun90.tistory.com [React] 리액트 JSX에서 이미지가 엑박으로 나올 때 문제..
Redux toolkit 개념 및 주요기능 책 집필 관련 공부 기록 ✏️ 💡 Redux toolkit 의 등장 이유 리덕스(Redux)는 상태 관리를 위한 라이브러리지만, 저장소 설정이 복잡하고, 보일러플레이트 코드가 많이 필요하며, 기능 활용을 위해 번거로운 패키지 설치가 필요하다는 단점을 가지고 있었다. 리덕스 툴킷(Redux Toolkit)은 이 문제점들을 해결하기 위해 고안되었다. 리덕스 툴킷(Redux Toolkit)은 리덕스(Redux)를 더 쉽고 효율적으로 사용하기 위한 라이브러리와 도구 모음이다. 리덕스 툴킷을 사용하면 리덕스 애플리케이션을 개발할 때 코드의 양을 줄이고 보다 간단하게 관리할 수 있도록 도와준다. * 보일러플레이트 코드란? --> 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다...
React 상태관리 라이브러리 Redux 책 집필 관련 공부 기록 ✏️ Redux 주요 개념 및 사용 방법 1. Redux 란? Redux는 JavaScript 애플리케이션의 상태 관리를 위한 라이브러리이다. 모든 상태를 하나의 저장소(store)에서 관리한다. 하나의 store를 통해 모든 state를 저장, 유지할 수 있게 되며, 원하는 컴포넌트로 데이터를 전달할 수 있게 된다. 따라서 상태의 변경을 일관되게 추적하고 디버깅하기 쉽게 만들며, 컴포넌트 간의 상태 공유와 효율적인 데이터 전달이 이루어지게 한다. React와 함께 많이 사용되지만, 다른 JavaScript 프레임워크나 라이브러리와도 통합할 수 있다. 2. Redux 주요 개념 스토어 (Store) Redux 애플리케이션의 상태를 보관하는 중앙 저장소이다. 스토어는 애플리케이션의..
[React] Context API, useContext, Context 사용하기 책 집필 스터디를 진행하면서 Context API에 대한 공부를 하게 됐다. Context API의 개념, 사용방법, 문제점에 대해 알아보자! 왜 Context API를 사용하게 되었을까? 컴포넌트 기반 아키텍처를 사용하는 React는 UI를 작은 컴포넌트로 나누고 이 컴포넌트들을 조합하여 완전한 UI를 만든다. React에서 컴포넌트의 데이터 전달은 단방향으로 props를 사용해 이루어지는데, 상위 컴포넌트가 하위 컴포넌트에게 데이터를 전달할 때 사용된다. 최상위 레벨의 부모 컴포넌트에서 최하위 레벨의 자식 컴포넌트로 데이터를 전달할 때, 중간에 있는 컴포넌트들이 중복으로 props를 전달받고 넘겨주어야 하는 상황이 발생하는데 이를 Prop drilling이라고 한다. Prop drilling은 컴포넌..
FES7 8주차, 9주차 멋쟁이 사자처럼 프론트엔드 스쿨 7기 8, 9주차 후기 새로 알게 된 것 DOM접근, 이벤트 생성자, 프로토타입, 클래스 비동기 개념 리액트 기초 리액트 상태관리의 필요성 특이사항 책집필 참여 스터디 시작 node.js 강의 오류 해결 못함 Sass , jQuery 복습 못함 이력서, D3, Chartjs 특강 참고 Context API는 왜 쓰고, 그렇다면 Redux는 필요없을까? 안녕하세요 오늘은 제가 평소에 궁금했던 주제로 글을 써보려고 합니다. Context API의 기능과 왜 사용하는지, Context API의 리렌더링 이슈란 무엇인지 그리고 Redux를 대체할 수 있는지. 위 내용을 설 hong-jh.tistory.com Context API란? 소개 및 사용법 Context API란? Con..
Git으로 협업하는 방법, 협업 시 branch 사용법, branch를 사용해야 하는 이유 친구들과 토이프로젝트를 진행하고 있는데 브랜치를 만들어 사용하기로 했다. 우리는 지금 원본 레포에 각자 이름으로 브랜치를 만들어서 작업 중인데, 브랜치로 푸시하는 사람은 하나도 없었다. 그리고 포크한 레파지토리에서 작업물을 메인으로 푸시해 PR하는 방식으로 진행하고 있다. 오.. 그럼.. 브랜치를 사용하지 않는데 브랜치가 있네...? 뭔가 협업 방식이 이상하다는 생각이 들었다. 그래서 브랜치는 어떻게 사용하는지 자세히 알고 싶어졌다. 검색을 해보니 브랜치 사용 방법이 다양하길래 도대체 어떤 방법이 맞는 거지??? 라는 의문을 가지게 되었는데 정답은 없고 각각의 상황에 맞게 사용하는 것 같다. 협업은 다음과 같은 방법을 사용한다. 1. Centralized Workflow 중앙 저장소를 기반으로 한 간단한..

티스토리툴바