[포스코x코딩온] 웹개발자 풀스택 과정 1주차 회고록 - OT

1️⃣오리엔테이션 부트캠프에 합격하고 처음쓰는 블로그다. 원래는 면접후기도 쓰려고 했는데 미루고 미루다가('부캠 시작하기 전까지 놀자'라는 마인드..) 결국 OT 후기를 쓰게 되었다.😅 오티에는 내가 제일 싫어하는 자기소개(MBTI->i)가 있었고 떨리는 목소리로 나를 소개했다. (나이, 이름, 전공, 지원한 이유, MBTI 등을 소개했다.) 내 소개가 끝나고 다른 크루의 소개를 듣고 나니 어떤 분들이 지원을 했고 왜 지원했는지를 알게 되었다. 생각보다 여러 분야에서 왔다는 것을 알게 되었고, 비전공자분들도 꽤 있었다. 2️⃣vsCode Extension 설치 여러 강의를 들으면서 왠만한 VSCode 확장 프로그램은 깔려있다 생각했다. (Prettier, Auto rename Tag, Live Serve..

• format_list_bulleted 포스코x코딩온
• · 2023. 7. 3.
• textsms

졸업작품 회고록

1️⃣꾸준히 달려온 1년.. 3학년 2학기 때부터 달려온 졸업작품이라 거의 1년이 다되어 간다.. 처음에는 막막했지만 팀원들과 소통도 하고 교수님께 피드벡을 받으면서 부족한 점을 채워나갔다. 기획을 하고 제안서를 쓰는데 거의 처음 한 학기를 다 썼을 때는 "이거 쓰는데 한 학기가 다 지나갔는데 제작을 완성 시킬 수 있을까?" 했던 초반의 불안감이 있었다. 아무래도 팀 구성도 학과의 에이스들로 이루어진 것도 아니고 항상 중위권에 있던 친구들끼리 이루어진 것이라 어영부영 되는게 아닌지 걱정도 되었다. 그렇기 때문에 더 열심히 하려고 했던게 있었는지도 모른다. 우리팀은 작년 겨울방학을 하기전 교수님을 찾아가 "졸업작품을 임하는 자세"에 대해 알려달라고 했다. 교수님께서는 "내년 1학기 동안 졸업작품을 다 만들..

• format_list_bulleted 졸업작품
• · 2023. 6. 19.
• textsms

[작품] - FormData로 서버에 데이터와 이미지 같이 보내기

1. 개요 음식점을 먹고 난 후 그 식당에 대한 리뷰를 쓰는 기능이 필요했다. 리뷰 기능에는 별점, 음식 사진, 후기 등의 데이터가 있었고 이 모든것을 한번에 서버에 보내 달라는 백엔드의 요청이 있었다. 지금까지는 문자나 숫자 형식의 데이터만 보냈기 때문에 파일 형식을 어떻게 보낼 지에 대해 많은 생각을 했다. 2. 해결 방법 구글링을 통해 fetch의 헤더를 "multipart/form-data" 형식으로 바꾸는 방식이 있었는데 막상 시도를 하니 클라이언트에서는 잘 보내졌지만 서버에서 못받는 오류가 생겼다. ✅그래서 새로운 방법인 FormData를 이용해 from 생성 후 fetch를 하기로 했다. 1️⃣HTML 수정하기 리뷰 등록 작성자: × 별점을 선택해주세요 ★ ★ ★ ★ ★ 사진을 올려주세요 보..

• format_list_bulleted 졸업작품
• · 2023. 5. 31.
• textsms

React - React Router 사용하기

1. 개요 지금까지 나는 Vanilla JS를 사용해서 프로젝트를 했기에 페이지 전환시 약간의 로딩이 걸리는 것은 당연하다고 생각했다. 하지만 리액트는 달랐다. Router를 사용해서 여러개의 페이지를 마치 한개의 페이지 처럼 로딩없이 빠르게 이동이 가능하다는 것을 알았다. 이것이 바로 SPA(Single Page Application)의 가장 큰 장점이다. 2. 사용 방법 2-1 이동할 페이지를 만든다. 나는 한개의 폴더를 만들고 그 안에 사이트에 필요한 페이지들을 모두 넣어 놨다. const New = () => { return ( New 이곳은 일기를 작성하는 곳입니다. ); }; export default New; 각각의 페이지에는 페이지가 이동됐을 시 나오는 컴포넌트를 생성해준다. 2-2 Lin..

• format_list_bulleted React
• · 2023. 5. 19.
• textsms

React - React.memo

1. 개요 이전 글에서 useMemo에 대해 배워봤다. useMemo는 hook이기 때문에 오직 함수형 컴포넌트 안에서만 사용이 가능하다. 하지만 React.memo는 HOC(Higher-order Components)이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용이 가능하다. 2. 사용 방법 const MyComponent = React.memo((props) => { return (/*컴포넌트 렌더링 코드*/)} ); 1. 기존의 함수를 React.memo로 감싸준다. 만약 컴포넌트가 같은 props를 받을 때 같은 결과를 렌더링한다면 React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지할 수 있다. 즉, 컴포넌트에 같은 props가 들어온다면 리액트는 컴포넌트 렌더링 과정을 스킵..

• format_list_bulleted React
• · 2023. 5. 18.
• textsms

React - useMemo

1. 개요 컴포넌트를 사용하다보면 불필요하게 계속 리렌더링 되는 순간들이 있다. 이러한 것들을 해결해 주는 것이 useMemo다. useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다. 2. 사용 방법 import { us..

• format_list_bulleted React
• · 2023. 5. 18.
• textsms