100일은 해야지

CSR(Client-side Rendering) CSR은 웹 애플리케이션의 렌더링 방식 중 하나입니다. CSR은 클라이언트 측에서 서버에 초기 HTML을 요청하면 서버는 빈 HTML을 주고, 그다음 브라우저에서 JavaScript와 같은 언어를 사용해서 웹 페이지를 동적으로 생성하고 렌더링 해줍니다. CSR의 장점 사용자 경험 향상 : CSR은 웹 페이지를 로드한 이후 클라이언트 측에서 동적으로 콘텐츠를 생성하고 업데이트하기 때문에 사용자와의 상호작용에 따라 필요한 부분만 서버에 요청하고 렌더링 하기 때문에 페이지 업데이트가 빠르고 반응성이 높습니다. 서버 부하 감소 : 브라우저에서 렌더링 작업을 처리하므로 서버 부하가 상대적으로 적습니다. 서버와 클라이언트 분리 쉬움 : 서버는 API역할을 수행하거나 ..

ZeroToTen(Save-Game) 팀 프로젝트 1차 마무리가 어제 끝났다. 1차 마무리라고 한 것은 우리 팀이 하고 싶은 기능들이 많았지만 할 수 있는 것부터 우선순위를 정해서 해왔기에 후순위로 밀린것들이 많았기 때문에 6주간의 팀 프로젝트 기간까지 마무리할 수 있는 기능을 정한 후 그것만 끝냈기 때문.. 그래서 후순위의 기능들이나 추가로 더 하고 싶은 것들을 의논한 후 프로젝트를 보완하기로 함 팀프로젝트를 하면서 멘토님들께서는 지금까지의 팀들을 보면 프로젝트 기간이 끝난 후에 못 할 가능성이 많다고... 그래서 일단 시간이 되는 사람들은 계속 만들고 취업하거나 시간이 안 되는 사람들은 어쩔 수 없다 생각하며 만들기로 했다. 이번 프로젝트를 하면서 좀 더 공부해야 할 부분들도 보고 팀원들과 소통하는..

React Query: 동적 데이터 관리를 위한 도구 (Feat. 열일) 리액트 쿼리를 다뤄보지 않았다. 이번에 팀프로젝트하면서 처음 다뤄봄... 결론은 좋은 녀석 깔끔한 녀석 일단 리액트 쿼리에 3가지 핵심 개념 Query, Mutation, Cache 이번에 사용한 것은 use Mutation이다. 뮤테이션은 서버에 데이터를 변경하는 요청, 뮤테이션을 통해 데이터를 갱신하고 그 후의 쿼리 결과를 업데이트해서 최신 데이터 유지가 가능하게 해 준다. 먼저 데이터 변경 로직을 구현한 후 interface editProps { postId: number; text: string; } export const editPosts = async ({ postId, text }: editProps) => { try ..

Input type=checkbox에서 갑자기 오류가 뜬다. 작동은 잘 되긴 하는데... provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`. onChange핸들러 없이 prop양식에 넣었다니... input은 그냥 창을 띄우기위한 버튼이라 없는 셈치고 label에 onClick을 해줬는데 setOpenForm(true)}> + 그걸 onChange로 바꿔줬는데 변화 없이 오류가 뜨고 i..

시작하기 | Axios Docs 시작하기 브라우저와 node.js에서 사용할 수 있는 Promise 기반 HTTP 클라이언트 라이브러리 Axios란? Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 입니다. 그것은 동형 입니다(동일한 코 axios-http.com axios 받아올 것이기 때문에 공식문서를 참조했다. yarn add axios로 axios먼저 깔고 나는 회원가입 쪽을 연결했는데 회원가입에서 이메일 중복확인이나 닉네임 중복확인을 하기 위해서 get 요청을 했는데 왜 그런지 모르다가 중복확인할 때 post로 하는 블로그가 있어서 post요청으로 해보자 해서 post요청으로 하니 Response 잘 받아와 짐. 근데 조회하는건데 get이 아니라 post를 쓰..

와이어프레임 개인프로젝트에도 와이어프레임이 필요한가... 에 대해서 잘 모르겠지만 보는 눈을 기르는 건가... 싶지만 협업할때의 중요성을 알기 위해서인가.... 도 싶지만 일단 다시 만들기는 했다. 그냥 만들었던 것 조금 다듬어서 만드니 시간이 별로 안 걸리기는 했다. 이제 개인프로젝트 고치러 가야지...

NEXT.JS의 Component next.js의 일반적으로 작성하는 것들은 server component이다. html안에 javascript를 넣을 수 없다. hook도 사용 불가능. onClick 이벤트 같은 것도 노노 자바스크립트가 없으니 페이지를 로드할 때 속도가 빠르다. 자바스크립트를 넣고 싶으면 컴포넌트 맨 위에 'use client' 코드를 넣으면 됨 이 코드 아래 모든 컴포넌트는 client component가 된다. 하지만 자바스크립트를 넣으므로써 용량이 커지고 페이지 로딩속도가 느려진다는 단점이 발생한다. client component를 로드하려면 hydration이라는 과정을 거쳐야 하는데 그것 때문에 속도가 더 느려진다. hydration?? => SSR(server-side Re..

Next.js!!!!  pages 폴더에 넣어주는 것만으로도 페이지가 만들어진다.그 파일이름이 페이지가 되는 거임 리액트 라우터를 사용 안 해도 됨일단 index가 기본이고  about폴더 주소는 아래처럼....  pages폴더에 폴더를 하나 더 만들고 파일을 만들어주면 페이지가 뙇next.js가 pages폴더의 파일들의 이름을 가져다가 url이름으로 만드는 거임  그리고 뼈대는 설치할 때 app router사용할 것인지 선택하는 부분에서 초큼 바뀌는 듯하다.app router를 사용하게 되면 pages폴더 대신 app폴더가 생기고 page.tsx가 기본 페이지layout.tsx는 페이지에서 공통으로 쓰는 header 같은 걸 작성하는 파일이다.(참고로 app router를 사용하지 않으면 pages폴더..