미래내일일경험
-
유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 2기: 프로젝트 3주차 후기프로젝트 캠프: Next.js 과정 2기 2024. 8. 25. 23:37
진행 내용3주차에는 퍼브리싱을 마무리하고 이벤트 핸들러를 생성하는 작업을 진행했습니다. 이벤트 핸들러마이페이지 파트를 맡았기 때문에 유저의 프로필을 수정할 수 있는 이벤트 핸들러를 제작해야 했다.1. 이름 수정2. 자기소개 수정3. 하이라이트 뱃지 선택4. 스터디 태그 추가/삭제 진행 과정이름, 자기소개, 하이라이트 뱃지, 스터디 태그를 저장할 수 있는 State를 생성하고 상태를 업데이트할 수 있는 코드를 제작했다.코드 작성이 완료된 후 PR을 통해 상태와 관련된 코드를 hook으로 분리하고 updateHandler를 하나의 메서드로 관리하는 방법에 대한 피드백을 받았다. 그렇게 제작한 코드는 다음과 같다.const [profileForm, setProfilForm] = useState( initia..
-
유데미, 스나이퍼팩토리, 프로젝트 캠프, Next.js 2기: 프로젝트 1~2주차 후기프로젝트 캠프: Next.js 과정 2기 2024. 8. 18. 23:47
진행 내용첫 주에는 프로젝트를 생성하고 각자의 환경에 프로젝트를 세팅하는 데 시간을 많이 보냈고 그 후엔 퍼블리싱에 집중했다. 진행 과정에서 어려웠던 점디자인된 화면을 퍼블리싱하는 과정 중 아이콘 이미지를 적용하는 단계에서 어려움을 겪었다.디자인 결과퍼블리싱 과정에서 마주친 뱃지 아이콘이다. 처음 봤을 때에는 일반적인 아이콘이라고 생각했다. 그래서 그냥 svg파일을 가져와서 Image 태그로 넣으면 되겠다~ 라고 가볍게 생각했다..그런데 막상 아이콘 파일을 받으려고 봤더니색이 완전히 다른 것을 발견했다....그럼 어떻게 보라색이 된거지? 라고 의문이 들었고 확인해 보니 보라색의 박스로 덮여 있었던 것이다... 이렇게 디자인된 아이콘은 처음 만나봐서 정말 당황스러웠다. 더욱 힘들었던 점은 이 부분을 물어보..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 후기프로젝트 캠프: Next.js 과정 2기 2024. 7. 28. 23:09
이번주 수업에서 좋았던 점이번 주에는 리액트의 전반적인 내용을 학습했다. 지난 주에 스스로 개초 개념 지식이 부족하다고 느껴져서 이번 주의 리액트 수업도 개념을 보충하기 좋았던 시간이었던 것 같다.특히나 개인적으로 굉장히 어려워했던 memoization에 대한 개념과 예제 공부를 진행한 점이 좋았다. 그동안 memoization을 제대로 이해하지 못해서 제대로 사용해 본 적이 없는데 이번 기회를 통해서 memoization 방법을 익히고 조금씩 적용해보면 좋을 것 같다.이번주에 배운 내용 블로그 링크리액트 시작하기리액트 데이터 전달 방법디자인 라이브러리 tailwind조건부 렌더링과 반복 렌더링리액트 hookMemoizationuseReducercontext API 배운 것에 관해서 부족했던 부분1. t..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - Memoization프로젝트 캠프: Next.js 과정 2기 2024. 7. 28. 22:07
학습 목표memoization을 이해하고 렌더링 최적화 방법을 익힙니다.memoization이란?💡 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장하여 사용함으로써 동일한 계산의 반복 수행을 제거하여 성능 향상을 도모하는 기술 useCallback함수형 컴포넌트에서 함수를 메모이제이션하는 데 사용한다.사용 방법useCallback(fn, dependencies)예시카운트를 증가시키는 함수를 생성하고 이를 집합에 넣어보자.const functionSet = new Set();const App = () => { const [count, setCount] = useState(0); const increament = setCount((prev) => prev + 1); ..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - Context프로젝트 캠프: Next.js 과정 2기 2024. 7. 26. 02:07
💡 props drilling을 해결하기 위해 나온 함수로 데이터를 관리하는 곳을 따로 만들고 사용하여 props로 데이터를 전달하지 않아도 자식 컴포넌트가 부모 컴포넌트의 상태를 참조/업데이트할 수 있게 도와준다.언제 사용 할까?context는 리액트 컴포넌트 트리 안에서 전역적으로 사용할 수 있는 데이터를 공유할 수 있도록 나온 기능이다. 따라서로그인한 유저테마선호하는 언어등과 같이 앱 안에서 전역적으로 사용되는 데이터에 사용하는 경우가 많다.기본 형태const StateContext = createContext(기본값);컴포넌트 외부에서 createContext를 호출해 커텍스트를 사용합니다.기본값: 컴포넌트가 컨텍스트를 읽을 때 상위에 일치하는 컨텍스트 제공자가 없는 경우 컨텍스트가 가져야 할 ..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - useReducer프로젝트 캠프: Next.js 과정 2기 2024. 7. 26. 02:03
useReducer💡 useState의 대체함수로 상태를 관리하는 별도의 함수를 만들어서 그 함수 안에서 상태를 관리하는 것을 도와주는 훅이다.useReducer를 언제 사용하면 좋을까?다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우다음 상태가 이전 상태에 의존적인 경우기본 형태const [state, dispatch] = useReducer(reducer, initialArg)state: useReducer에 의해 관리되는 상태. 상태를 나타내는 직관적인 변수명을 사용하는 것이 좋음dispatch: state를 업데이트하고 리렌더링을 일으킴reducer: (state, action) ⇒ {} 형태의 함수. dispatch를 확인해서 state 업데이트하고 state 반환.initalArg: ..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - 리액트 hook프로젝트 캠프: Next.js 과정 2기 2024. 7. 25. 16:10
학습 목표리액트 훅의 종류를 익히고 각각의 사용 방법을 학습니다.리액트 훅이란?함수형 컴포넌트에서 사용할 수 있는 이미 만들어진 임의의 기능을 의미한다.대표적으로 useState, useRef 등이 있다.useState상태 변수를 선언하고 관리하는 데 사용하는 훅지금까지 배운 내용으로 리액트에서 버튼을 눌러 숫자를 증가시키는 기능을 구현하고자 한다면 let으로 count 변수를 생성하고 버튼을 누를 때마다 count를 증가시키는 코드를 작성할 것이다. 그러나 이와 같이 코드를 작성하면 count의 값이 증가되더라도 그 결과가 화면에 표시되지 않게 된다.그 이유는 리액트의 변수 추적 관찰과 관련이 있다. 대부분의 프레임워크는 변수의 변화를 감지하는 추적관찰 기능이 있다. 그러나 리액트의 경우 화면이 렌더링..
-
[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 2기 - 사전직무교육 2주차 - React 조건부 렌더링과 반복 렌더링프로젝트 캠프: Next.js 과정 2기 2024. 7. 25. 13:00
조건부 렌더링조건부 렌더링을 사용하면 특정 조건에 따라 컴포넌트나 요소를 렌더링할 수 있다. 자바스크립트의 조건문을 사용하여, 특정 조건이 참일 때만 컴포넌트를 렌더링하거나, 조건에 따라 다른 컴포넌트를 렌더링할 수 있어 효율적인 UI관리가 가능하다.if문import { useState } from "react";const App = () => { const [isLogin, setIsLogin] = useState(true); if (isLogin) { return ( Hello, Login! ); } return ( Hello, Not Login! );};export default App;삼항 연산자const App = ()..