백엔드

Express.js CR GET //file Data GET app.get("/posts", async (req, res) => { res.json(posts); //JSON형식으로 응답보내기 }); app.get("/posts/:postId", (req, res) => { const postId = req.params.postId; const post = posts.find((post) => post.id === Number(postId)); res.json(post); }); //axios로 GET app.get("/todos", async (req, res) => { const response = await axios.get( "https://jsonplaceholder.typicode.com/to..

Next.js React Query React Query를 통해, useEffect와 data-fetch를 한번에 할 수 있다. useQuery({ queryKey: ["til", { category: "trending" }] }); //category외에 page, sort같은것도 같이 넣는다고 한다. ❗️ react query는 서버와 동기화 하기 때문에, 가끔식 local쪽 data를 날리고 새로 받아오는 작업을 한다고 한다. (invalidate) 👉🏻 key를 구분해, 전체 바구니를 초기화하는 것이 아니라 til만 초기화 한다. ✓queryKey: 분석하고 정리한다. ✓queryFn: fetch와 같은 함수를 정의하고, fetch되면 queryKey에 따라 데이터로 정리되어 들어간다. ✨ Nex..

immer 배열이나, 객체같은 불변성 타입을 가진 state를 업데이트 하기위해선, 스프레드 연산자 (...)를 사용해야 했다. 하지만 depth가 큰 객체를 깊은 복사를 하기엔 스프레드 연산자로 개발자 입장에선 굉장히 힘든일이다. ✨immer를 사용하면, draft를 주는데 깊은 복사가 된 객체이다! [기존의 방식] else if (action.type === ADD_FRIEND) { const newFriend = action.payload; const newState = { ...state, friends: [...state.friends, newFriend] }; return newState; [immer] const newState = produce( (state, (draft) => { con..

NEXFLEX 과제 ✏️ 오늘 배운 context API를 활용해서 닉네임을 수정할수 있고, 헤더에 닉네임을 띄워야하며 좋아요버튼과 좋아요 취소 기능을 구현하는 것이였다. HomePage에서 좋아요, 좋아요 취소를 누르면 마이페이지에 이와 같이 좋아요한 영화 목록들이 담겨야한다. 물론 상세페이지에서도 좋아요가 된 영화라면 표시되어야한다. 🛠 강사님의 방법을 정리해 리팩토링 해보자 📌 좋아요 버튼을 토글로 구현하며, likedMovies의 전역상태를 업데이트 해야한다. {!likedMovies.some((likedMovie) => likedMovie.title === movie.title) ? : some()으로 좋아요한 영화들이 담긴 likedMovie와 현재 클릭된 movied가 일치여부(boolean..

배열 상태의 불변성 state 추가: 새 요소를 배열에 추가할 때는 스프레드 연산자(... )를 사용해 기존 배열을 복사하고 새 요소를 추가 const [items, setItems] = useState(['사과', '바나나']); const addItem = (item) => { setItems([...items, item]); }; 스프레드 연산자로 이전의 items를 새로운 배열에 넣고, 새로운 요소를 덮어쓰기 형식으로 새로운 배열을 생성해 state를 업데이트 해준다. ✨ 제거: 특정 요소를 제거할 때는 filter 메서드를 사용해 해당 요소를 제외한 새 배열을 생성해요. const [items, setItems] = useState(['사과', '바나나']); const removeItem = ..

SASS Sass(또는 Syntactically Awesome Stylesheets)는 CSS의 확장된 문법을 제공하는 스타일 시트 언어입니다. Sass는 더 간결하고 유지보수가 쉬운 CSS 코드를 작성할 수 있도록 도와주는 기능을 제공합니다. 주로 CSS의 기능을 확장하고 중복을 줄이며 가독성을 향상시키는 데 사용됩니다. ❗️SASS로 작성하면 CSS로 바꿔주는 작업을 라이브러리, CRA가 해준다고 한다. npm install -D sass #layout-header { background-color: yellowgreen; height: 80px; padding: 0 3rem; display: flex; align-items: center; .layout-header-logo { > a { font-..

✨현장수업 2일차 🙌🏻 Javascript(fetch) + React fetch const endpoint = "https://jsonplaceholder.typicode.com/todos/1"; fetch(endpoint).then(async (response) => { const data = await response.json(); console.log(data); }); const endpoint = "https://jsonplaceholder.typicode.com/todos/1"; fetch(endpoint) .then((response) => response.json()) .then((data) => console.log(data)); async function getToDo() { const..

✨현장수업 1일차 🙌🏻 Javascript SEO SEO는 "Search Engine Optimization"의 약자로, 검색 엔진 최적화를 의미하며, 이는 웹사이트가 검색 엔진에서 높은 순위를 얻을 수 있도록 최적화하는 프로세스를 말합니다. 검색 엔진은 사용자가 특정 키워드로 검색할 때 가장 관련성 높은 웹페이지를 보여주기 위해 다양한 기준을 활용합니다. 👉🏻 h1 태그는 한 페이지당 1개씩 사용한다. 👉🏻 img태그의 alt는 next.js에서 에러의 원인이 될수 있고, 접근성 SEO점수에서 높일수 있다고 한다. 👉🏻 시맨틱 태그 또한 SEO 최적화 방법 중 하나이다. 첫 현장강의 실습이였다! 짧은 시간내에 동일한 페이지를 구현하느라 좀 힘들었지만 다행히 제시간 내에 완성할 수 있었다. 첫 타임어택이..