드디어 위코드의 마지막 프로젝트,STAWEFOLIO를 통해 동기들과의 마지막을 마무리 지었다 !Notion & Trello & Gitbook이번에는 두번째라 그런지 Notion에 Plan을 계획하는데 익숙해졌고 티켓도 마크업, 스타일링, 기능구현으로 나누어 성취감도 얻

(1) 지원하고 싶은 참가기업 코로나19를 거치면서 전시 서비스 업이 많이 힘들었는데, 엔데믹 분위기와 함께 뜨겁게 회복되고 있는걸 느꼈어요. 팬데믹으로 세상이 변했는데, 전시 업계도 변해야 할 거라고 생각했고 마이페어가 참신하게 시도하고 있는걸 알았죠 (2) 프리

대장정의 1차 프로젝트가 끝이났따✌️ 다사다난하고 우당탕탕이었지만 좋은 팀원들과 함께 기획부터 회고까지 무사히 끝마칠 수 있었다 :) 1. Scrum Process 애자일방법론에 따라 Weekly Sprint로 총 2번의 Sprint를 진행하였다. Notion,

1. 운영 서버란? 개발이나 테스트 목적이 아닌 실제 사용자들을 대상으로 서비스하는 서버 1-1. 단일 서버 가장 단순하면서 기본적이고, 구축하기 간단한 서버구조 전체 서비스의 장애 발생 가능성 높음 서버 자원을 효율적으로 사용하기 어려움 보안성이 떨어짐 scale-o

코드의 가독성과 유지보수성을 향상시켜 코드 퀄리티를 올리기 위해 컴포넌트 분리를 적용view와 로직을 분리state에 따라서 분리

동일한 클라이언트가 브라우저를 통해 웹 서버에 접속한 시점으로부터 브라우저를 종료하여 연결을 끝내는 시점 동안에 들어오는 일련의 Request를 하나로 보고, 그 상태를 일정하게 유지하여 클라이언트와 웸 서버가 논리적으로 연결된 상태서버는 session에 대한 정보를

FACT RESTful API 설계방법(uniform interface) 인스타그램 리액트 클론코딩 fetch함수를 통한 서버와의 통신 FEELING fetch를 통해 백엔드와의 통신을 처음 시도했다. json형태로 주고받았고 처음으로 RESTful API를 접해보

인스타그램 리액트 클론코딩 \- 피드 컴포넌트 분리 \- 피드 별 댓글 등록/삭제 기능 구현피드 별로 댓글이 다르게 달려야하는데 한개의 피드에 댓글을 등록하면 해당 피드에만 등록되어야하는데 모든 피드에 등록이 되어서 당황했다. 원인은 피드를 컴포넌트로 분리시켰더

인스타그램 리액트 클론코딩 \- 상수 데이터로 footer section 수정 \- mock data로 피드 구현footer부분을 상수 데이터로 footer의 리스트들을 정리해서 map으로 구현하는 쪽으로 수정했다. 확실히 map으로 돌리니까 수월하긴 했는데 그럼

React에서 side effect를 편리하고 안전하게 발생시킬 수 있게 도와주는 hookuseEffect(콜백 함수, 의존성 배열)콜백함수 : 특정한 side effect를 수행의존성 배열 : 렌더링 시 useEffect를 실행할 조건의존성 배열이 전달되지 않았으므로

인스타그램 리액트 클론코딩 \- 댓글 컴포넌트화코드 카타 \- strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어 strs = \['start', 'stair', 'step']return은 'st'인스타그램 클론코딩 댓글창

컴포넌트 내부에서 컴포넌트의 상태값 -> 해당 컴포넌트가 UI에 보여줄 정보를 결정할 때 사용할 수 있는 상태값useState()를 사용해서 state를 관리한다.첫번째 요소 : 동적으로 관리하고자 하는 상태값두번째 요소 : 상태값을 업데이트하는 함수useState()

1. props란? 컴포넌트의 속성값 -> 부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 가능

인스타그램 리액트 클론코딩 \- 댓글 추가기능 구현코드 카타 \- 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환댓글을 구현하기 위해서 map을 활용하라는게 사실 크게 와닿지 못했다. 왜 배열을 써야하는건가.... 그런데 기존 댓글을

인스타그램 리액트 클론코딩 \- 로그인 버튼 클릭 시 유효성검사 후 메인페이지 이동리액트 클론코딩 팀프로젝트 \- 팀 레포지토리 생성 후 각 팀원별 브랜치 생성 후 레이아웃 생성코드 카타 \- String 형인 str 인자에서 중복되지 않은 알파벳으로 이루어진 제

FACT 인스타그램 리액트 클론코딩 FEELING FINDING FUTURE ACTION

1. hook(훅)이란? 2. hook - useNavigate

React 학습 \- 컴포넌트, JSX, CRA, Route, css전처리기인스타그램 클론코딩 \- 바닐라자바스크립트에서 리액트로 마이그레이션리액트를 학습하고 클라이언트 사이드 렌더링에 대한 개념이 확고해졌다. <div id ="root"> 에 모든 컴포넌트들

1. Link 컴포넌트란? 라우팅 기능을 구현할 수 있는 컴포넌트 > - to : 이동할 컴포넌트 경로 💡 `와 ` 태그의 차이는? > - `` : 실제 서버에 요청을 보내지않고 url만 변경 `` : 페이지 이동 시 서버로부터 매본 새로운 페이지를 요청해서 받

다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것을 의미한다.리액트는 프레임워크가 아닌 라이브러리이므로 라우팅을 하기 위해서는 npm react-router-dom 명령어로 필요한 라이브러리를 다운받아야 한다./src/index.js에서 렌더링을 할때