위코드13 [1차 프로젝트 회고] 🙋🏻♀️위코드에서 첫 1차 프로젝트를 진행하였다🙋🏻♀️ 선물가게 커머스 프로젝트 배민문방구 우리조는 국내 '배민문방구'를 모티브로 하는 프로젝트를 진행하였고, 깔끔하고 심플한 사이트 UI를 가졌으며, 프론트엔드 및 백엔드 공부를 위한 필수적인 기능들이 있고, 구현하기 크게 어렵지 않을 것 같은 사이트라 생각되었지만, 2주라는 짧게느껴진 기간동안 원하는 모든 기능을 넣지는 못했다. 프론트엔드와 백엔드가 같이 협업 한 생애 첫 번째 프로젝트이다 보니 다소 부족하기도 하다... 1. 프로젝트 개요 1-1. 기간 및 인원 기간 : 23년 2월 6일 ~ 2월 17일 (약 2주) 인원 - 프론트엔드 : 이동민, 이해인, 박준현 - 백엔드 : 이홍렬, 황수영, 박세희 1-2. 프로젝트에 사용된 기술 스택 Fron.. 2023. 2. 20. [React] Advanced Router (동적 라우팅-Path parameters) 1-1 내가 여태 동적 라우팅을 배우기 전에 사용했던 정적라우팅..! 정적라우팅이란? 이렇게 미리 사용할 수 있는 경로들과 해당 경로로 접속 했을 때 보여줄 컴포넌트를 모두 정의 해 두는 방식이다. 하지만 이런 간단한 페이지가 아니라 복잡하고 규모가 큰 어플리케이션에서는 이렇게 일일이 다 정의 해 두는데에 어려움이 있다. 여태까지 나는 이렇게 쓰고있었다... 그렇지만 이번에 동적 라우팅을 배우게 되어 이제 정적라우팅이라는 작별이다 ...! ⭐️ 예시로 블로그 어플리케이션이 있다고 가정해보자! 블로그에 포스팅 목록을 보여줄 수 있는 '리스트 페이지' 와 포스팅의 내용을 보여주는 '상세페이지' 가 있다고 가정할때, 일반적으로 '리스트페이지'를 기본경로 route ( / ) 로 설정하고, ' 상세페이지 '를 ( /p.. 2023. 2. 19. [React] 컴포넌트 재사용 1차 프로젝트를 하면서 비슷한레이아웃을 가진 컴포넌트를 어떻게 사용해야하는지 궁금했는데, 마침 배우게 되어서 정리를 해 보았다. 어려울 것 같았으나, 알고보니 되게 간단하게 구현 할 수 있었다. 이런것도 할 수 있다니... 아주 좋구만... 🌝 컴포넌트 분리는 대부분 관심사에 따라 분리를 하는데, 복잡한 코드를 비슷한 기능을 하는 코드끼리 별도로 관리하는것 을 의미한다. 복잡한 컴포넌트 일수록 재사용이 어려워 가독성과 유지보수성이 떨어지기 때문에 컴포넌트를 따로 분리하여 관리하면 앞서말한 문제들을 야기시키지 않아 아주 유용할 것이다. 컴포넌트를 분리하는 기준 -> UI일부가 여러번 사용되거나, UI 일부가 자체적으로 복잡한 경우 분리 한번 이제 예를 들면서 배웠던 것을 정리해 보겠다. 1. 컴포넌트 분리.. 2023. 2. 19. [1차 프로젝트] 멘토님께 받은 리뷰 정리( useState, 주석없애는 이유,조건부 렌더링 (&& 연산자), JSON.parse( )매서드) 위코드에서의 1차 프로젝트를 하며 멘토님께 받았던 리뷰를 간단하게 정리하고, 내가 뭐가 부족한지 알아보는 시간을 가져보았다. 🌝 코드...진짜 알면 알수록...어렵지만,, 또 재미있는...ㅠ ^ㅠ 1. useState setState 함수의 인자로는 1. 새로운 state가 될 값 2. 콜백함수 () => {} 두가지 유형의 인자를 전달할 수 있는데, 콜백함수를 인자로 전달한다면 콜백함수는 인자로 이전의 state값을 전달받고 함수에서 return 한 값이 새로운 state가 된다. 장점 - 이전 state 값을 명시적으로 기억할 필요가 없음 - 함수가 호출될 당시 최신의 state값이 인자로 전달되므로 비동기 상황에서 안정적 위와 같은 이유들로 인해 이전 state 값을 이용해서 새로운 state값을 .. 2023. 2. 18. React) useEffect 앞에 Side Effect글과 이어서 useEffect에 대해정리해보겠다. https://hayley-0616.tistory.com/17 이제 useEffect 차례다.. 학습목표는 이것이었다.. - React 에서 Side Effect의 올바른 발생 시점 알기 - useEffect의 사용법 알기 - 조건부로 Side Effect 발생시키기 - Rendering & Effect Cycle 알기 - Clean Up Effect 알기 과연 나는 다 알았을 것인가.. 🙈😑🙈 React 에서 Side Effect의 올바른 발생 시점은 - 렌더링을 Blocking 하지 않기 위해서 렌더링이 모두 다 완료되고 난 후 실행할 수 있어야 한다. - 매 렌더링마다 실행되는 것이 아니라 내가 원할 때만 조건부로 실행할 수.. 2023. 2. 2. React) Props 점점 많은것을 배우게 되면서.. 기초의 중요성을 아주 뼈저리게 느끼는중이라.. React에서 중요한 props에대해 한번 배운것 복습하면서 정리해보려고한다.. Props란 -컴포넌트의 속성값을 의미하며, 즉 부모컴포넌트로 전달받은 데이터를 지니고 있는 객체{ }를 의미한다. -Props를 이용하면, 부모 컴포넌트에서 자식컴포넌트로 전달하고자 하는 어떤값이든 (문자, 숫자, 변수, 함수 등) 모두 전달이 가능하다. 예시를 들어보겠다 //Parent.js import React from "react"; import Child from "./Child"; const Parent = () => { const animal = "호랑이"; //호랑이라는 문자열을 변수에 담아서 관리하고있으며, //해당 변수를 이용해.. 2023. 1. 30. 이전 1 2 3 다음 728x90
