코드스테이츠44기 프론트엔드

블로그를 참 오랜만에 쓰는 것 같다 !! 항상 1일 1블로그를 해오자 해오자 생각은 했지만 프리프로젝트와 메인프로젝트를 진행하면서 너무 정신이 없어서 블로그 쓸 생각을 못했던 것 같다 ... ! 그래서 오늘은 한번 미뤘던 회고를 써보고자 한다 . 프리프로젝트는 한마디로 아쉬움 100% 였다. 아쉬움이 가득했던 프리프로젝트 회고를 지금부터 시작해보겠다 프리프로젝트 회고 시작 ! 프리프로젝트는 스택오버플로우 사이트를 클론코딩하는 것이었다. 프론트 3명 ,백엔드 3명 6명에서 프리프로젝트를 진행하였다. 코드스테이츠를 통해 진행하는 팀 프로젝트는 처음이라 긴장도 되고 기대도 되었다. 프론트엔드 스택으로는 typescript, react, recoil , tailwind , styled-component , ax..

JavaScript Hoisting과 Temporal Dead Zone이 어떻게 연관되어 있는지 설명하세요. React Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요? Class Component와 Function Component의 차이점이 무엇인가요? React Hook의 사용 규칙에 대해 설명하세요. 자료구조 Stack과 Queue의 차이점은 무엇인가요? Tree와 Graph의 차이점은 무엇인가요? 이진 탐색 방법에 대해 설명할 수 있나요? 타입스크립트 TypeScript는 정확히 무엇이며 JavaScript와 어떻게 다른가요? TypeScript를 사용할 때 어떤 장단점이 존재하나요? TypeScript의 인터페이스를 설명해 주세요. 위의 질문 목록중 카테고리 별 ..

지난 5일간 솔로 프로젝트로 'Coz shopping'을 제작하였다. 사실 나는 리액트를 사용해서 처음 프로젝트 셋팅부터 개발까지 프로젝트를 만들어 본 경험이 없었다. 따라서 이번 솔로프로젝트는 나에겐 새로운 도전이었다. 프로젝트 계획 개발에 들어가기에 앞서 프로젝트의 요구사항을 분석하고 플래닝하는 단계를 가졌다. 애자일 방법론에 대해 학습하고 그 중 스크럼 방식을 채택하여 프로젝트 계획을 짰다. 도구로는 깃허브에서 제공하는 기능을 사용하였다. 사실 계획을 짜는데 있어서 카드를 생성할 때 어느정도로 기능을 나누어 작성해야하는지 , 어떤 기준으로 카드를 나누어야 하는지 감이 잡히지 않았다. 그래서 일단 페이지 별로 카드를 먼저 나누고 그 안에서 중복적으로 페이지에 들어갈 기능들은 따로 빼서 카드로 작성했다..

redux가 아직 감이 잘 안잡혀 반딧불반에 오게 되었다 ..ㅎㅎ 오늘은 Redux 실습인 cmarket_redux를 다시 풀어보고 의사코드를 작성해 볼 것이다. 문제 Bare minimum requirements Action, Reducer를 직접 작성하고 테스트 케이스를 통과합니다. 테스트 케이스 순서대로 과제를 진행해 주세요. Getting Started 다음 Cmarket Shopping App은 Create React App으로 만든 React 애플리케이션에 Redux를 붙인 구조입니다. 아이템 리스트 페이지(ItemListContainer)와 장바구니 페이지(ShoppingCart) 총 두 페이지로 간단하게 구성됩니다. Store의 initial state에는 전체 아이템 목록(items), ..

이번과제는 머리를 많이 썼던 것 같다 .. 실시간 세션 전에 하나의 문제가 발생해 시간내에 해결하지 못했지만 다시 복습을 통해 완벽하게 이해할 수 있었다. 페어분께도 도움을 많이 받아 여러 궁금증도 해결하고 정말 의미있던 과제였다 ! 구현해야할 과제는 아래와 같다 Bare minimum requirements react-router-dom을 이용해 Client Side Routing하는 방법을 학습합니다. useState를 이용해 상태를 사용하는 방법을 학습합니다. 쇼핑몰 애플리케이션의 주요 기능을 구현하세요. [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현하세요. 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현하세요. 장바구니 내에서 각 아이템 개수를 변경할..

정말 힘들었던 섹션2가 끝났다 .. 섹션1 때는 그래도 기존에 알고있던 지식들도 있어서 크게 공부를 따라가는데 어려움이 없었다. 섹션 2에 들어와서 리액트라던지 , 서버를 만든다던지 , 서버와 통신한다던지 어려운 개념들을 다뤘던 것 같다. 앞으로 더 어려워 질테지만 !! 그래도 얼렁뚱땅 섹션2까지 마무리를 했다 ... ! (나 자신 칭찬해!!!!!!!!!!!!!!!!!!) 물론 완벽하게 섹션2를 통달했다고 말할 순 없지만 그래도 백엔드와 소통하면서 프로젝트를 잘 진행할 수 있을 것 같다 ! 예전 졸업프로젝트로 백엔드와 나누어 프로젝트를 진행했었는데 그 때는 URL , URI , fetch 등등.. 뭔지도 제대로 모르는 상태에서 무작정 구글링을 통해 0부터 100까지 한번에 뛰어 넘으려고 했던 것 같다. ..

두괄식으로 설명하기 , 적절한 예시 들기 ,추측성 단어 사용 금지 이 글은 짧은시간안에 작성한 글이므로 완벽한 면접 대답을 쓴 것은 아니고 개념에 대한 포괄적인 정리를 한 글입니다 !! JavaScript Promise의 기능과 필요한 이유에 대해서 설명해 주세요. 프로미스는 비동기 작업을 처리하고 결과를 다루기 위한 객체입니다. 여기서 비동기 작업에는 주로 서버에서 데이터를 가져오거나 파일을 읽거나 타이머 함수를 사용하는 등의 작업을 의미합니다. ( 예를들어 fetch API 를 활용하여 json파일을 불러오는 과정이 비동기 작업이라고 할 수 있습니다. ) 처음에는 이러한 비동기 작업을 처리하기 위해선 콜백함수를 중첩하여 사용하였습니다. 예를들어 서버에서 데이터를 가져와서 처리한 후 화면에 출력하는 코..

화,수 휴가를 제출하고 여행을 다녀왔더니 정말 많은 공부가 밀려있었다 ... 오늘 화, 수 안한만큼 해야지 !! 했는데 너무 피곤했는지 늦게 일어나서 9시 12분에 출석을 해버렸다 ... ㅜ 부랴부랴 웹 서버 기초에 대해 유어클래스를 공부해보았는데 아무래도 3일치를 하루만에 하려고 하니 뇌에 과부하가 온 거 같다. 오늘은 과제 제출도 하지 못해 반딧불반에 오게 되었고 당연한 결과인 만큼 열심히 나머지 공부를 해 볼것이당 ! ! 웹 서버에 대해서는 거의 노베이스라고 해도 될 정도로 무지해 공부하는데 어려움이 많았던 거같다. node.js 를 사용해본적이 없어 더 헤맸었던 거같다 .. 오늘 포스트는 오늘 공부한 web server 기초와 mini node server 과제를 의사코드로 작성해 볼 것이다. 또..

너어어어무 ! 헷갈렸던 클라이언트 ajax 부분이다... 이해가 갈듯말듯 했던 거 같다 .. !오늘은 클라이언트 ajax 요청에 대해 실습해보기 전 React 데이터 흐름과 state 끌어올리기 Effect Hook에 대해 공부하고 작성해보자 ! React 데이터 흐름 React 개발 방식 페이지 단위가 아닌 컴포넌트 단위로 시작 즉 상향식으로 앱을 개발함 장점 : 테스트가 쉽고 확장성 용이 데이터의 흐름 단방향 데이터 흐름 (데이터는 위에서 아래로 흐름 : 부모 -> 자식 ) 즉 컴포넌트 바깥에서 props를 이용해 데이터를 전달인자 혹은 속성처럼 전달 가능 state(상태) : 이벤트에 따라 얼마든지 변할 수 있는 것 부모로부터 props를 통해 전달되거나 , 시간이 지나도 변치 않거나 , 컴포넌트 ..