https://velog.io/@mageboy 로 이사합니다!

✍ 오늘 공부에 대해 미니 노드 스프린트 서버 기초 실시.. 아 근데 오늘 서버를 다루는 부분이 감당이 안되서 크루님께 상담 요청함.. 너무 힘든데 힘들다하면 더 힘드니까 힘들다 하지 말아야 하는데... 계속 계속 복습하고 힘을 내야 되는데.. 너무 서버 부분이 추상적이고 문법적이라 직관적으로 와닿지 않는다... 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 음.. 결국 여튼간 서버 기초를 해낸것. 💦 부족했던 것(Lacked) : 복습을 안하고 자버렸다. 🕯 바라는 것(Longed for) : 주말동안 확실히 복습 📄오늘의 띵언 성공하지 못한 사람들의 한 가지 공통점은 꾸물거린다는 사실입니다. 누가 불러도 벌떡 일어나서 달려나오는 일이 없습니다. 망설이고 꾸물거리다 끝나는거예요

CORS의 등장 이전의 브라우저 정책으로는 오리진이 다르면 요청을 주고 받을 수 없었음. 허나 요즘시대에는 클라이언트에 유튜브 API, 카카오 API 등 여러 외부 API들을 찾아 와야함. Cross Origin Resource Sharing 교차 출처 리소스 공유 cross origin에서 리소스(서버자원)을 사용한다! 근데... 당연히 서버에서 내려준 클라이언트가 아닌데 남의 것을 누구마음대로 열어줌? 그래서 브라우저에서는 보안상의 문제를 이유로 크로스 도메인 요청은 기본적으로 제한 되어있었다. 그러나 불편하잖아? 웹 애플리케이션 고도화를 위해 개선 요청! 그래서 서버가 Allow 한 범위내에서 cross origin을 허용! HTTP OPTION 크로스 오리진 요청을 보내는 작업은 서버로 한번만 요..

Read Me 소요시간 : 3 min 이번 유닛에서는 node.js를 이용하여 백엔드를 구축합니다. 지난 스프린트에서 사용된 StatesAirline의 API Server를 직접 구현하면서 Express, 라우팅, 그리고 Server-side를 디버깅하는 방법을 학습합니다. 같은 JavaScript를 사용하지만 node.js 환경에서 사용되는 코드에는, CommonJS나 모듈 등 브라우저에서 찾아볼 수 없는 다소 생소한 개념이 포함되어 있습니다. node.js에서 사용되는 이 개념들은 백엔드뿐만 아니라, 프론트엔드에서도 적극 사용합니다. 이번 유닛에서 구축하는 API 서버는 프론트엔드 개발자라도 구현할 수 있어야 합니다. 새로운 서비스를 만들려고 해도, 필요한 데이터를 저장하거나 불러오는 기본적인 API..

- 주어진 상황 😢 리액트로 페이지를 만드는 과정 중 일부 코드이다.추후 이코드가 아닌 다른코드에서 문제가 되면 지속적으로 업로드하여 기록하고 남긴다. import { useState } from 'react'; import Thumbnail from '../component/Thumbnail'; import images from '../data/images'; // 제공되는 이미지를 이용하세요 function Gallery() { // npm start를 통해 앱을 열어, 개발자 콘솔을 통해 이미지 목록을 확인할 수 있습니다 /* [ { id: 1, src: 'selfie.jpeg', alt: '김코딩', category: '사람' }, { id: 2, src: 'cat.jpeg', alt: '고양이'..

✍ 오늘 공부에 대해 - 페어분과 면접?연습을 처음으로 시도함 꽤 괜찮았고 연습을 시도해봄으로 인해 내가 개념을 조금 더 정확하고 간결하게 알아야 한다는것을 깨달음 그래서 오늘부터 성취 목표 밑에 면접 대비 질문들을 모아서 기술할거임 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 어제 이해가 안되었던것이 오늘은 이해되는 느낌이 좋다 💦 부족했던 것(Lacked) : 개념을 정확하게 근데 한번에 정확할수있지만 반복해서 정확하게 알자! 🕯 바라는 것(Longed for) : 제발 제발 좀 이해가 잘되라되라! 📄오늘의 띵언 과거를 기억 못하는 이들은 과거를 반복하기 마련이다.

✍ 오늘 공부에 대해 - use effect에 대해 배움 얘는 함수임. use effect는 쓰는 방법이 2가지 있는데 하나는 두번쨰 인자를 안주는 것 다른 하나는 두번쨰 인자를 배열로 주는것 - Side effect 순수함수가 아닌것! 🧡 오늘 감정에 대해 😍 좋았던 것(Liked) : 페어분이 너무 친절하심. 그리고 잘 가르치심. 💦 부족했던 것(Lacked) : 너무 이해가 안되는데 억지로 하는 느낌... 🕯 바라는 것(Longed for) : 제발 제발 좀 이해가 잘되라되라! 📄오늘의 띵언 그 어떤 희망이든 자신이 품고 있는 희망을 믿고 인내하는 것이 바로 인간의 용기이다. 그러나 겁쟁이는 금새 절망에 빠져 쉽게 좌절해 버린다.

Data Fetching: 필터링 예제 다시 보기 목록 내 필터링을 구현하기 위해서는 다음과 같은 두 가지 접근이 있을 수 있음. 1. 컴포넌트 내에서 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법 2. 컴포넌트 외부에서 필터링: 컴포넌트 외부로 API 요청을 할 때, 필터링 한 결과를 받아오는 방법 ( 보통, 서버에 매번 검색어와 함께 요청하는 경우) 1. 컴포넌트 내에서 필터링 처음 단 한 번, 외부 API로부터 명언 목록을 받아오고, filter 함수를 이용함. 예제 import { useEffect, useState } from "react"; import "./styles.css"; import { getProverbs } from "./storageUtil"; ..

조건부 effect 발생 (dependency array) useEffect의 두 번째 인자는 배열임. 이 배열은 조건을 담고 있음. 여기서 조건은 boolean 형태의 표현식이 아닌, 어떤 값의 변경이 일어날 때를 의미하므로 해당 배열엔 어떤 값의 목록이 들어감. 이 배열을 특별히 종속성 배열이라고 부름. 이 예제를 열어보고, 개발자 콘솔의 값을 확인해보자. Ex1) 이 예제 import { useEffect, useState } from "react"; import "./styles.css"; import { getProverbs } from "./storageUtil"; export default function App() { const [proverbs, setProverbs] = useState..

Effect Hook - 이 링크를 열어서 먼저 실험을 해보자. - useEffect는 컴포넌트 내에서 Side effect를 실행할 수 있게 하는 Hook 임. 이 컴포넌트에서 실행하는 Side effect는 브라우저 API를 이용하여, 타이틀을 변경하는 것! 확인2 API useEffect(함수) useEffect의 첫 번째 인자는 함수임. 해당 함수 내에서 side effect를 실행하면됨 ! 이 함수는 다음과 같은 조건에서 실행됨 언제 실행되나요? 컴포넌트 생성 후 처음 화면에 렌더링(표시) 컴포넌트에 새로운 props가 전달되며 렌더링 컴포넌트에 상태(state)가 바뀌며 렌더링 이와 같이 매번 새롭게 컴포넌트가 렌더링 될 때 Effect Hook이 실행됨. Hook을 쓸 때 주의할 점 최상위에..

Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기 함. Ex1) 전역 변수 foo를 bar라는 함수가 수정하는 예제 let foo = 'hello'; function bar() { foo = 'world'; } bar(); // bar는 Side Effect를 발생시킵니다! Pure Function (순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수 순수 함수는 입력으로 전달된 값을 수정하지 않음 Ex2) 순수 함수의 예제 function upper(str) { return str.toUpperCase(); // toUpperCase 메소드는 원본을 수정하지 않습니다 (Immutable) } up..