프로젝트 캠프: Next.js 과정 2기
-
[Next.js] next Image 컴포넌트 사이즈 경고 해결프로젝트 캠프: Next.js 과정 2기 2024. 9. 30. 01:17
Next.js를 활용해 개발하다 보면 한번쯤은 마주쳤을 경고인 Image 컴포넌트 사이즈 경고!!Image with src "..." has either width or height modified, but not the other. if you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.도대체 왜 생기는 거야?일단 Next.js에서 제공하는 Image 컴포넌트는 자체적으로 이미지 최적화를 제공해준다. 따라서 Next를 사용해 개발을 한다면 별도의 Image 최적화를 해주지 않아도 우리는 편하게 이미지 최적화를 적용..
-
supabase: auth로 회원가입 시 자동으로 user 데이터 추가하기프로젝트 캠프: Next.js 과정 2기 2024. 8. 26. 00:04
supabase는 보안상의 이유로 api로는 Auth 스키마를 접근할 수 없다.따라서 우리는 유저의 데이터를 사용하기 위해서는 새로운 user 테이블을 생성해야 한다. 1. userinfo 테이블 만들기반드시 설정해야 하는 것Enable Row Level Security 활성화이걸 활성화하면 보안적인 문제가 생길 수 있기 때문에 활성화하지 않는 것이 좋다.대신 정책 설정을 하자.user_id 컬럼을 추가하고, 외래키로 설정해서 auth.users의 id와 연결한다.Action if referenced row is removed - Cascade로 설정2. function 작성하기1. SQL editorcreate function public.handle_new_user()returns triggerlan..
-
유데미, 스나이퍼팩토리, 프로젝트 캠프, 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: ..