TIL

내일배움캠프 REACT 과정에서 배운 부분을 정리하려고 한다.

팀 소개 페이지 프로젝트처음으로 팀 편성한 날SA 작성GIT 협업 특강느낀 점

본 프로젝트는 팀원 소개이기 때문에 많은 DB가 필요없다.\-> DB의 id 기준이 아닌, 이름 기준으로 수정을 수행한다.팀원 추가 modal 창에서 '이름'은 같게하고 달라진 부분만 DB에 적용하도록 만든다. \-> GET 메서드를 사용해서 입력한 것을 받은 후 "/

다양한 FONT를 가져와서 사용할 수 있는 사이트를 공유받아 알게 되었다.https://fontawesome.com/CSSafter는 요소에 장식용 콘텐츠를 만들 때 사용하는 것이다.기존 요소에 덮어서 추가 요소를 만들 때 사용하는 것 같다.update 기능을

JS 개인공부커맨드 중에 같은 이름인 것을 바꿀 수 있다.ctrl + DNumber정수 Integer소수 FloatStringbooleantrue, falseundefined = 박스만 만들어 놓은 상태(정의x, 메모리에 있긴함)null = 박스만들고 아무것도 안넣고

프로젝트 명: 팀 소개 프로젝트필수 작업: S.A 작성, CRUD 구현하기 추가 작업: README 작성, enter로 버튼과 같은 기능, like 기능세령 부르면 답해주셔서 좋았고 제가 아는대로 알려주면서 생각을 정리할 수 있어서 좋았습니다. 다음에는 많은 기능에 도

오늘은 미니 프로젝트의 발표를 진행하였는데, 다른 팀의 발표를 통해 다양한 디자인이 있다는 것을 참고할 수 있었고, 나중에 구현해보아야 겠다 싶은것들이 많았다.오늘 남는 시간에는 JS강의를 따로 듣는데 초반은 가장 기초적인 부분이라서 빠르게 흝어보고 있다.오늘도 알고리

미니 프로젝트의 조장을 담당하여, 프로젝트의 계획 방향성과 문서를 작성하였다. 다른 팀원들이 구현하지 못한 것은 다같이 구현해보았는데 삭제 문제는 내가 해결할 수 있었다. 발표도 사다리타기를 했는데 내가 걸려서 대본이랑 팀원이 만들어준 ppt와 함께 발표를 진행하였다.

Javascript문법 강의length js에서 길이를 알고 싶으면 변수.length 로 실행해야 한다. 좋은 개발자가 되기 위한 비밀 특강실무를 진행해보아야 실력이 는다.아는 척 하지 말자, 모르는 건 모른다고 하기에러 메시지를 복붙하지 말고 메시지를 읽고 고민

아무생각 없이 f5 엔터를 해서 node.js가 실행되어야 하는데 크롬이 실행되게 되었다.어떻게 수정해야 하나 고민하다가launch.json 파일의 configurations가 chrome, 추가적으로 시도한 것들이 나열되어 있어서 지워주고 저장하니까 디버깅을 어떻게

변수 선언과 데이터 할당식별자가 담기는 공간과 값이 담기는 공간이 있고 식별자 공간에 값이 담긴 데이터가 할당된다.참조형 데이터의 경우, 식별자를 위한 별도 공간이 따로 필요하다.배열이 안에 담기면 배열을 위한 공간이 따로 필요하다.참조형 데이터는 가변하다 사용하지 않

함수를 인자로 넘겨주는 함수 ex) map, forEach(), setTimeout() 등제어권콜백함수의 제어권은 받는 함수가 가지고 있다!우리가 제어할 수 없다.this콜백함수도 함수이기에 기본적으로 전역객체를 가리킨다.but, 제어권을 넘겨받을 코드에서 콜백 함수에

코드리팩토링시도1 통신이기 때문에, url이 들어올 때 까지 기다릴 수 있도록 loadJson에 async await 처리를 해주었다.입력하는 함수 부분에도 입력을 기다리게 만들 수 있도록 처리를 해주는데 .then catch문으로 제어를 하고 있어서 try catch

js 스터디의 팀장을 맡아서 규칙을 다같이 회의하고 정하게 되었다. 하루에 3번 모여서 어디까지 공부했고, 어떻게 이해했는지 설명하고 발표하는 시간을 가졌다. js예제를 푸신분이 계셨는데 내가 생각한 코드와는 다르게 하셔서 새로운 방식을 참고할 수 있었다. 또한, j

회원가입 및 key발급설정에서 api 코드를 사용해볼 수 있다. 이미지를 불러올 때에는 https://image.tmdb.org/t/p/<이미지 크기>/<이미지 파일명>으로 해주어야한다.이미지 크기는 임의로 해줘도 되고 이미지 파일명은 poster_

autofocus를 추가하면 된다.js부분에서 focus()를 사용해보려고 했지만, 스크립트 실행 순서 때문인지 작동이 안되었다.getAttribute("속성")예제: https://developer.mozilla.org/ko/docs/Web/API/HTMLE

Key + Value로 이루어진 데이터 구조 파이썬에서는 딕셔너리공간사용이 크지만 시간이 빠르다.시간 복잡도O(1)Worst : O(n)임의의 길이를 갖는 것을 고정된 길이의 해시값으로 출력하는 함수 -> 보안분야에서 많이 사용하고 같은 입력에 대해서는 항상 같은 출력

console.log()를 사용하는 것 외에도 console.dir() 를 사용하면 해당 요소에 어떤 값이 들어있는지, 어떤 값이 T/F인지와 js에서는 다양한 속성을 변경할 수 있다는 점을 알 수 있었다. grid 사용하기 .prettierrc : 어떤 기준으로 fo

상세 페이지 HTML 만들기 -> 클릭했던 데이터 기반으로 사진, 정보 나타나게 만들기 -> 리뷰 등록 -> 리뷰 수정, 삭제데이터는 id를 기반으로 영화 객체를 넘겨주고 데이터 다듬기 페이지 이동할 때 처음에 주소를 http://127.0.0.1:5500/d

다른 실습을 같이 했더니 포트 주소가 변경되어서 페이지 이동이 제대로 이루어지지 않았다.변경하지 않아도 값을 찾아서 해당 페이지의 주소에 맞게 자동으로 변경할 수 있는 방법을 찾아봐야겠다.코드를 실행까지 했었는데Uncaught TypeError: Cannot set p

저장되어 있던 데이터를 가져와서 기존 배열/새 배열에 데이터를 변경해주는 함수를 짜주셨다. 해당 코드에서 새로고침을 하지 않으면 변경이 되지 않았기 때문에 리뷰 버튼이 클릭되면 posting 함수도 실행하고 새로고침도 실행하도록 코드를 고쳤다.

수정, 버튼에 이벤트를 생성하는 과정에서 로그가 생각한 대로 작동하지 않고 queryselector가 제대로 작동하지 않았다.=> displayComments(등록되어 있는 리뷰를 가져와서 보여주는 함수)가 먼저 실행되지 않아서 선택자를 찾아오지 못했던 것이였다.현재의

수정 버튼 -> 비밀번호 입력창 -> 취소 버튼 클릭 -> 다시 수정 버튼 클릭 -> 비밀번호 확인 -> 수정한 것 저장위에 과정을 수행하면 수정되었습니다가 두번 출력되는 것을 보니, 수정하는 함수가 멈추지 않고 실행되고 있는 것 같아서 수정이 취소하고 다시 수정을 시

알고리즘 스터디: 지속적인 문제 풀이를 위해 규칙을 바꾸고 시간조정을 하게 되었다.내일배움캠프: Vanila JS로 프로젝트를 해보게 되었다. 내가 만들었던 코드를 기준으로 팀 프로젝트로 발전시키게 되었고 코드 병합과 리뷰수정부분을 담당하여 구현하였다.프로젝트를 해보면

리액트 CRA 명령어 실행 명령어절대경로를 사용하기 위해jsconfig.json 파일 생성 및 아래 코드 작성 js사용하기 React문법에서 js를 사용하려면 {}로 감싸주면 사용할 수 있다.기본적으로 상위 -> 하위 방식으로 Props(데이터)를 전달 가능하다.하

Statevalue와 onChange는 항상 묶어서 사용한다. (관리 용이)React는 state의 변경이나 새로운 props가 오면 rendering한다.같은 주소를 가리키는 것은 서로 다른 주소를 가리키게 만들면 rendering된다.Vanila JS로 조작하는 D

해당 태그에서 onChange를 넣지 않고 value까지만 지정해두면 입력이 안되는 현상이 나타난다. onChange에 이벤트만 넘겨봤을 때에는 변경이 되지 않았지만, setTitle를 해주었을 때 입력이 잘 되었다.\-> value 속성만 지정하면 value 속성으로

내 생각then과 await 사용은 데이터 요청을 비동기적으로 처리하는데 코드를 실행하기 전에 JSON 데이터를 사용할 수 있는지 확인해야 하기 때문이다. TODO 페이지를 새로고침 해도 변하지 않게 localstorage 사용하기 useEffect를 사용해서 페이지가

Cards.jsx에서 필요한 동작과 태그들을 정의하고 입력부분을 UpdateContent.jsx에 분리하니 좀 더 생각하기 편했다.App.jsx에서 수정부분이 hidden으로 감춰져 있고 값은 담겨있기 때문에 completeUpdateButton함수에서 선택자로 값을

data폴더에서 fetch로 데이터를 받을 경우이러한 것을 data변수로 받았을 때으로 처리해주어야 내부의 데이터를 사용할 수 있다. 평소에는 보이지 않고 가장 하단으로 내려갔을 때 버튼이 보이고 누르면 가장 상단으로 올라갈 수 있게 만든다.한문제 푸는데 데이터 처리에

React를 처음으로 배워본 주였다. useState(), react에서는 어떻게 렌더링을 하는지 등등 기초적인 문법에 대해 배웠고 선발대 과정에서 localstorage로 새로고침해도 보여지는 데이터가 지워지지 않도록 만들어보고 그 과정에서 수정하는 부분도 제작해보았

Styled ComponentsuseStateuseEffectuseRefuseContext최적화(React.memo, useCallback, useMemo)

React 심화과정

상태 관리 라이브러리 yarn add redux react-redux 로 설치Store는 Reducer + State -> UI(컴포넌트) -> Dispatch(action을 가지고) -> Store에 보낸다.state초기 상태값Reducer함수1) useSelecto

오늘 해야할 작업내용redux를 이용해서 todo의 state 관리Router를 사용하여 페이지 이동 두가지 작업을 위해 필요한 폴더와 파일을 먼저 정리해주었다.redux - config, modules 폴더는 상태 관리를 위한 Reducer와 중앙관리 파일이 위치하는

Modal.jsxApp.js 에서 반환모달 상태를 관리해주는 것을 2개 선언하고 상태가 true일 때에만 보여주게 설정해주었다.배경과 모달을 같은 구간에 두었기 때문에 이벤트 버블링이 일어나지 않아 바깥을 클릭하면 닫히게 된다. 물론 모달창을 클릭하면 닫히지 않는다.

Styled Componentsjs로 동작할 수 있는 컴포넌트로 만들 수 있다.명명을 할 때 보기 Sy를 붙이기도 한다.useState렌더링이 잦기 때문에 성능 이슈가 발생할 수 있다.이것을 해결하기 위해 최적화(React.memo, useCallback, useMem

인원 : 4참여자: 이세령, 안치훈, 임호진, 김우리 다양한 반려동물(강아지, 설치류 등)들의 정보를 뉴스피드를 통해 공유할 수 있도록 제작한 페이지입니다. 메인페이지최신글, 인기글, 카테고리(품종별)상세 페이지 카테고리를 누르면 품종별로 볼 수 있다. 검색 완료 페이

SA 작성 https://velog.io/@hediar/S.A%EB%89%B4%EC%8A%A4%ED%94%BC%EB%93%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EA%B3%84%ED%9A%8D%EC%84%9C필요한 작업들을 나

warningbundle.js:107426 styled-components: it looks like an unknown prop "theme" is being sent through to the DOM, which will likely trigger a React c

동작을 찾아보다가 useHistory Hook이 존재하는데 과거버전이라서 useNavigate를 사용하면 된다고 한다.useLocation Hook이전 페이지에서 특정 값을 담아 넘겨줄 수 있기 때문에 이를 활용하여 이전에 담겨있던 param값을 넘겨주면 될 것 같다.

SessionStorage내에 드어오는 것을 확인할 수 있다!firebase.js해당 함수로 로그인 되었는지 확인할 수 있다.useLocation을 사용하여 state에 값을 넣어주고 로그인 페이지에서 값을 가져와 사용한다.HeadernavLoginPageuseStat

어떤 것을 기준으로 데이터를 불러올지 어려운 것 같아서 정리하고 의견을 얘기해보며 데이터 형식을 설계해봤다.type="file"로 파일을 입력받을 수 있고 accept 속성으로 업로드할 수 있는 파일의 타입을 고를 수 있다.htmlFor에 input의 아이디나 네임을

Header와 Footer 사이에 있는 페이지가 너무 커서 너비를 조절하고 다른 페이지를 생성했을 때에도 적용할 수 있도록 Wrapper.jsx 파일에 옮겨주었다.posting을 수행하면 다른 게시글 까지 사진이 변경되는 문제가 있었다.shortid를 이용하여 게시글

AnimalsInform에서 동물들의 주의할 점을 등록해두고 실행하는 함수인데 렌더링을 한번만 하게 만들려고 이것저것 실행하다가 너무 많이 요청해서 오늘 db한도가 터져버렸다..DB도 너무 많이 요청하면 그만큼 비용이 발생하는 걸 깨달았고 게시글처럼 계속 추가되는 내용

뉴스피드를 만들어보는 프로젝트를 진행했다.CRUD를 만들고 그 과정에서 Firebase에서 DB를 활용해보고 회원가입, 로그인 등등 다양한 기능들을 만들어보았다. db요청은 최소한으로 해야 비용이 적게들고, 회원가입 로그인 동작이 어떻게 되는지 배울 수 있었다.redu

Readmehttps://github.com/Hediar/PetoPia프로젝트 정리 문서https://orchid-scent-cea.notion.site/5-Petopia-9b8c19d5652c4cb9b3e7fb7f1627d598

redux toolkit설치configureStore()createSlice() 모듈 내에서 사용한다.flux 패턴파일 정리 다음에 프로젝트 작업할 시 다음과 같이 폴더를 깔끔하게 구분하기!!

interceptor: 중간에 가로채기env 활용하기 .env axios.create() api.jsintercept 활용: content type, token인증, server응답 오류 처리, 통신 시작/종료 전역상태(스피너..) 관리 등비동기 통신 미들웨어미들

gitbook을 사용해서 api 명세서를 정리해보았다. https://seryeongs-organization.gitbook.io/api-docs/GET데이터를 서버에서 받아올 때 사용하는 메소드이다.POST데이터를 수정 및 생성할 때 사용하는 메소드이다.보통

카드 리스트를 불러오기 위해 Read 먼저 구현해주었다.api/studyTodo.jsCardList에서 Card로 넘겨주고, react-query로 오류 처리를 해줬다.카드의 완료 상태에 따라 색이 다르도록 설정해줬다.components/CardList.jsxcompo

카드 내에 존재하는 삭제 버튼이 눌렸을 때 카드의 이동하는 동작을 막고 싶었다.stopPropagation() 으로 막는 방법카드와 같은 부모요소를 가지도록(?) 나란히 작성해주고 부모요소가 static 외의 position을 가지고 있을 때 position: abso

index 방법으로 GET /users?name=John코멘트 추가를 구현중에 질문하였더니 구조를 변경하는게 좋다고 하셔서바로 post할 수 있도록 다음과 같이 변경했다.이와 같이 구조를 했을 때, depth를 하나 더 깊게 들어갈 필요가 없고 실제 db에서는 inde

다른 axios post요청과 같이 동작한다!아아디나 비밀번호가 빌 경우에는 입력해달라는 문구를 alert로 출력해주었다.SignUpusers.js요청을 하면 아래와 같이 에러나 데이터를 확인할 수 있다.로그인 -> api와 통신하여 token을 받았을 경우 -> 토큰

처음에 isSuccess/isError로 구현했다가 처음에 동작이 제대로 안되는 것을 보고 on~로 회원가입과, 로그인 동작을 모두 수정해주었다.로그인 동작 구현 중, 동작을 실행할 때 마다 token인증을 하기 위해서 질문을 해보던 중, intercept로 중간에 작

repository 만들기 -> 팀원 초대 -> 프로젝트 환경 세팅 -> develop branch 생성 -> main(master) branch 보호하기(Lock branch: push하지 못하게), require a pull request before merging

https://www.notion.so/10-3a1234d3341e4fababe64e8d89cf0c32?pvs=4html%% 사이에 넣으면 된다.<script type="text/javascript" src="//dapi.kakao.com/v2/maps/

주소에 따라 위치를 표기하기 위해서 주소를 입력하여 위도, 경도를 얻어올 수 있다.위에서 set한 좌표에 따라 마커위치를 넣어주고 중앙값도 표기해준다.데이터를 찍어보면 위도와 경도가 y, x이기 때문에 반대로 값을 넣어주어야 정상 동작이 가능하다.좌표 값에 따라 렌더링

헤더 버튼 헤더에 원하는 지역을 한눈에 볼 수 있도록 SelectBox를 제어할 수 있는 버튼을 추가하였다. Main.jsx 버튼에 상태를 관리하는 hook을 내려주어 사용할 수 있게 만들었다. Header.jsx 마커 클릭 이벤트 현재 모달 창이 redux로 관리

팀원분이 무한 스크롤을 구현하셨는데, 사용법을 정리해보려고 한다.예제먼저, 예제를 살펴보면 IntersectionObserver 객체를 생성하고, callback함수와 options를 전달한다.observe로 가질 target element를 추가한다.target el

kakao map api를 이용한 함수들을 한 코드로 사용할 수 있도록 분리하는데 return문을 사용해서 callback함수를 내보내려고 했지만 문법 이해의 부족인지 아이디어가 떠오르지 않았다.setState로 지정하는 것을 시도해봤지만, 실패했다.Promise를 사

import { Outlet } from “react-router-dom”중첩 Router를 통해 기본틀을 만들 수 있다.사용 상황인증의 필요유무에 따라 인증 동작을 실행해야한다.Aut → 각 페이지 컴포넌트가 보여져야 하는 부분에 Outlet 컴포넌트를 넣어야 한다.

api를 하나 선택하여 자유주제로 진행하는 프로젝트kakao map api를 선택했고, 제주도 Hotplace를 지도로 볼 수 있는 웹사이트를 개발하는 것이 목적이였다.map을 불러오는 것을 담당했는데, 처음에 map이 불러와지지 않아서 당황했지만 문서를 보고 scri

진행프로젝트 명: Javergithub: https://github.com/Hediar/outsourcing-project초기 계획: 지도 api, 메인페이지, 상세페이지실제 작업: 지도 api, 다음 블로그 api, Youtube api, OpenWeathe

아웃소싱 프로젝트 발표

JS는 유연하기 때문에 예기치 않은 버그가 나타날 수 있고, 이에 따라 유지보수가 어려워질 수 있다.(JS는 실행시간에 타입을 지정해준다.)\-> TS를 사용하면 컴파일 시 변수를 지정해주기 때문에 변수 type이 명확해지고 객체지향 프로그래밍 시에 class가 좀 더

많이 사용하는 기술 살펴보기 state of js -> JS에서 사용하고 있는 것을 볼 수 있다.디렉토리 생성(영문) npm init -y package.json 생성빌드 및 실행을 위한 package.json에서 scripts 수정코드를 담을 src 디렉토리 생성빌드

정적 타입 언어에서는 특정 타입을 위해 만들어진 함수/클래스를 범용적으로 재사용하기 위해 제네릭이라는 기법을 사용한다.ex) Stack 자료구조이런식으로 타입을 지정할 수 있다.ts react로 프로젝트 생성기존 프로젝트에 패키지 설치tsconfig 추가tsconfig

id를 길이대신에 uuid로 변경해주고 Work를 type파일을 새로 만들어서 지정해주었다.그리고 Cards에 넘겨주는 함수들의 이름도 fnc1, fnc2 대신에 이름을 더 명확하게 변경해주고 수정을 위해 working의 State를 변수로 넘겨준다.props의 타입은

TypeScript를 사용하기 위해서는 tsconfig로 설정을 해야한다.객체 지향의 원칙 SOLIDTypeScript 기본 문법React Todo 리팩토링 -> 문서 읽어보면서 공부하는 방식 적응하기React에 TypeScript 적용해보는데 공식문서를 읽어보면서 적

액션 함수를 통해 액션 객체를 만들면 type이 string이 아니라 실제 값을 가리킨다.@types/react-dom @types/react-router-domyarn add @types/styled-components 로 설치!props가 많을 경우에는 interf

root Account권한 1순위 User와 Group을 만들어서 사용하기권한 조정 필요 Multifactor비밀번호 + a로 인증IAM 서비스 대시보드 → MFA addgoogle authenticator에 가입하여 설정해주어야 한다.Template Literal타

Root 유저가 세팅결제 알람 설정AWS Billing → Budgets → Create budget클라우드 서비스 종류 \- laaS(Infrastructure as a Service) 가상 하드웨어, 스토리지, 네트워크, 운영체제 등 제공 → AWS EC2

설문조사 구글 폼프로그래밍 적Sentry - 에러를 로깅 Amplitude - 유저의 데이터 수집 에러를 확인하여 어떤 os, 브라우저, 환경 등에서 error를 확인할 수 있다프로젝트에서 활용해보자 유저가 어디에서 사용하는지, 이탈하는지 등을 확인할 수 있다.데이터

Next,js

모든 컴포넌트가 Server Component 이라서 Client Component 사용하려면 따로 설정해야한다.보통 유저와 상호작용하는 곳을 제외하고 모두 Server Component를 사용한다.언제 어떤 컴포넌트가 필요한지는 Next.js 공식 문서에 적혀있으니

https://deeply-silence-9a4.notion.site/React-ccd853f975594eb3a38ce778f6dd41d8?pvs=4yarn add styled-components @types/styled-componentsHeader와 Foo

query는 하나의 컴포넌트만을 감싸고 있어야한다. 또한 ts를 같이 사용하고 있기 때문에 '@tanstack/react-query'로 import해주어야 한다.다른 분의 코드에서는 잘 되었는데 내 코드에서는 동작이 안됐다. env파일에서 환경변수 명이 달랐던 것을 통

arrap.flat() -> 이중배열을 단일 배열로 만들어준다. qeury 개발자 도구를 사용하기 위해 먼저 yarn add @tanstack/react-query-devtools를 하고 queryClient가 있는 곳에 컴포넌트를 적용해주면 된다.이렇게 하단에 데이터

문서 url: https://reactrouter.com/en/main/hooks/use-location문서에 따르면 위치가 변경될 때 주로 사용한다고 하지만, 현재 pathname을 사용하기 위해 활용하였다.카테고리에 따라 다른 게시물들이 출력되도록 수정해주

overflow: hidden;과 함께 사용white-space: nowrap; 속성(!)타입 단언을 하면 변수가 항상 정의된 값이라고 알려줄 수 있다.

https://github.com/Hediar/KoriniProjecthttps://velog.io/@skdbsqls/%EC%8B%AC%ED%99%94-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%9A%8C%EA%B3%A0

https://deeply-silence-9a4.notion.site/d4ab3a936dab40e79fe3e63a2dcf5439?pvs=4Next.js는 모든 페이지를 미리 렌더링하는데 생성된 HTML은 해당 페이지에 필요한 최소한의 JS 코드와 연결된다. 그

DB설계를 할때 하나의 id를 기반으로 설계를 한다면 개발자에게 당시에는 편하지만 추후 문제가 발생할 수 있기에 독립성을 유지하는 것이 중요하다.예를들어,1\. 멤버십을 추가로 구축할 때, 멤버십 정보를 저장하기 위해서는 기존에 있는 유저 정보가 필요할텐데, 해당 유저

Nextjs 사용 가능한 API Server Component secure data cookie header fetch Client Component useState useEffect onClick onChange useRouter useParams fetch

좋아요 불러오기 props로 영화 아이디를 받아, 해당 영화의 데이터 존재 여부를 확인하고 좋아요를 체크한 유저의 수를 계산하여 출력한다. 로그인 기능과 병합하여 현재 유저가 좋아요를 체크했는지와 좋아요를 추가하는 로직을 만들어야한다. lodash를 사용하여 한번에

paddingp-숫자marginm-숫자

DynamicServerError: Dynamic server usage: cookiesbuild 시 나타나는 에러, 최상단 컴포넌트에 export const dynamic = 'force-dynamic'를 넣으면 임시방편으로 해결된다.

좋아요는 사용자와 상호작용하는 부분이기 때문에 use client로 클라이언트 컴포넌트로 구성하였으며 연속 이벤트로 과부하가 발생할 가능성이 있기 때문에 lodash라이브러리를 사용하여 thorottling을 적용했다. table에 해당 영화가 존재하는지, 로그인된 유

Nextjs 영화리스트 layout을 활용해보려다가 url에 따라 다른 영화가 나오게 구현하였다. [genreId]/page.tsx 버튼들이 원래는 useState를 사용하여 상태에 따라 색상이 바뀌도록 하였는데 url에 따라 바뀌도록 수정했다. components

봤던 목록들과 추천 무시하기를 수행한 목록들을 제외하고 추천목록에서 보여주게 만들었다.ignoredList를 props로 내려서 특정 영화 id를 제외하고 필터링하게 만들어줬다! 무한 스크롤에서 매개변수로 ignoredList가 필요한데, js의 꼭 모든 매개변수를 넣

reviewtmdbdayjs를 사용하여 현재 날짜와 한달전 날짜를 입력받아 가져오도록 api를 구성했다. 최신리뷰리뷰는 계속 가져오기 때문에 query로 가져오도록 구성했다.최신 영화dayjs를 사용하여 현재 날짜부터 한달전까지 기간을 가져와서 매개변수로 넣어주면 된다

프로젝트 작업을 하다가 영화 리스트를 필터링, 검색 등 기능이 들어간 컴포넌트를 클라이언트, 서버 컴포넌트 중 어떤 것을 사용해야할지 고민이 필요한 시점이 생겼다.영화 리스트를 보여주는 부분을 클라이언트 컴포넌트로 구성하기로 하였다.왜냐하면, 서버 컴포넌트는 SEO를

처음에 저렇게 초기화 후, 다시 fetch하면 될줄 알았는데 한번에 처리해서 그런가 기존 데이터에 계속 붙어서 나왔다.page가 1일때만 데이터가 처음부터 나오도록 수정하였다.

기존에 다음과 같이 되어 있었다.검색값이 변동될 때 페이지를 초기화 해줌으로서 버그를 수정하였다.

최신 리뷰를 렌더링하여 출력해주는데 서버 컴포넌트로 구성할 시 이전 페이지와 결과 페이지가 다르기 때문에 hydrate오류가 발생하여 임시로 클라이언트 컴포넌트로 구성해두었다.원래는 api를 query로 불러와 각 데이터마다 유저의 이름을 불러오는 요청을 했었다. 기존

이런식으로 가운데가 보이게 만들려고 했는데옵션을 다음과 같이 넣으면 이전에 있는 데이터가 보이지 않았다.align을 start로 하면 위치랑 이전의 데이터가 숨겨지게 보이기 때문에 무한 회전을 위해 loop만 true로 수정해주었다.

bg-${특정 데이터} 이런식으로 넣을 경우 제대로 동작하지 않았는데,https://tailwindcss.com/docs/content-configuration공식문서에서 빌드할때 필요없는 style은 지우기 때문에 적용이 되지 않는다고 한다.이렇게 자체적으로

React를 이용하여 SPA를 구현할 때 메뉴를 클릭하면 페이지를 이동하지 않고 업데이트 되는데 이때 url이 변하지 않는다.렌더링되는 데이터의 양이 적기 때문에 구성요소간 라우팅 속도가 빠르다.SPA가 작동하는 실제 느낌을 준다. 별도의 페이지가 렌더링 되지않고, 형

tailwind의 경우 동적인 스타일의 경우 적용하기 어렵기 때문에 style로 직접 지정해주어서 데이터 값에 따라 다른 style이 적용되도록 코딩하였다.

작은 화면에서 보여줄 것을 기본으로 설정하고 sm:hidden 이런식으로 설정하고 큰 화면에서 보여줄 것을 hidden sm:block이렇게 지정하면 모바일과 큰 해상도에서 다른 디자인을 보여줄 수 있다.위의 변수 뒤에 ?를 붙일경우 props를 무조건 내리지 않아도

페이지로 이동할 때 suspense를 사용하여 skeleton UI를 적용하려고 했는데 특정 컴포넌트만 부분 로딩을 하려고했는데 적용이 안되었다.\-> page에서 Susenpse로 묶어주니 잘 동작한다

상위 부분에 group 을 선언해두고 보여지고 싶은 부분에 invisible group-hover:visible를 선언해주면 마우스를 hover할 시 버튼이 나타난다.

Project setting -> Functions에서 확인 가능하다.

import throttle from 'lodash/throttle';import debounce from 'lodash/debounce';이렇게 import를 하면 번들 크기를 줄일 수 있다.

오프라인 세션을 통해 동기부여를 하고 네트워킹을 하는 시간을 가짐나에게 부끄럽지 않을 정도로 최선을 다하는 것이 중요함손코딩은 import 같은건 약간 관대한 편TDD를 알면 좋다.test 코드를 할줄 알면 좋다 -> Jest, testing-libray, redux-

참고: https://sunnykim91.tistory.com/121get과 post의 차이get요청은 캐시가 가능하고 쿼리스트링을 통해 전송하며 post는 리소스 생성과 변경을 위해 설계되었기 때문에 전송해야할 데이터를 body에 담아서 전송합니다. 또한,

읽기 쉬운 코드중복이 없는 코드테스트가 용이한 코드일관성 있는 코드인간 중심적 프로그래밍 패러다임인데, 현실 세계에 빗대어서 프로그래밍을 하는 것현실의 사물들을 객체라고 보고 그 객체로부터 필요한 특징들을 가져와 프로그래밍 하는 것이 추상화이다.자주 사용되는 로직을 라

clone해온 코드가 연동 후 push 하려는데 해당 오류가 발생했다.remote 경로를 재설정하는 명령문을 작성해주면 된다.https://nextjs.org/docs/pages/building-your-application/optimizing/fonts

참고: 리눅스 기반의 TCP/IP 라우팅 프로토콜명령어의 의미, 옵션이 궁금할 때 man <명령어>root 계정으로 로그인su -커널 버전 확인uname ?r현재 폴더의 내용 열거ls이동cd .. 상위 디렉토리로cd / 최상위 디렉토리로복사cp x y x를 y로

env 환경을 사용하기 위해서는 node환경 세팅이나 webpack, babel 등 서버 환경에서 사용할 세팅이 필요하다는 것을 알게 되었다.참고: https://yujo11.github.io/javascript/Vanilla%20JS%20%ED%94%84%E

type 'string | Dispatch<SetStateAction<string>> | ((e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>) => void)' is not

theme.tsmain.tsx에 theme를 두었는데 안됐다가 GlobalStyle과 같은 구간에 두니 색상 적용이 잘된다.

HTML에서의 요소 = JS에서의 문서 객체예제<body>내에 <h1>hello world</h1>가 추가된다.<p>태그의 hello world 라는 내용을 10개 만든다.container 변수에 div 요소를 만든 후 클래스 이름이 two인 클래

Nextjs 13기준 Route Handlerpage와 같은 위치에 route.ts를 사용해도 되지만, 가끔 안되는 경우가 있기에 api폴더 내에 만들어준다.\-> 서버 에러가 발생한다. app/api/route.tsHTTP메서드를 사용하여 사용한다.로컬url/api에

https://react-kakao-maps-sdk.jaeseokim.dev/docs/intro

Secure Shell 클라이언트랑 서버랑 연결하는데 암호화 해줘서 안전하게 통신하게 해주는 방법이다.

style가장 상위에 overflow-x: scroll을 설정해주고 inline-block으로 글자들이 세로로 나열되지 않도록 방지해줬다.