yeeendy

JSON(JavaScript Object Notation) 데이터 교환을 위해 만들어진 객체 형태의 포맷 어떠한 객체 내용을 다른 프로그램에 전송한다면? const message = { sender: "나", reciever: "너", message: "저녁에 만나자", createdAt: "2023-06-12 10:10:10" } 전송할 수 있는 조건(transferable condition) 수신자(reciever)와 발신자(sender)가 같은 프로그램을 사용한다 또는, 문자열처럼 범용적으로 읽을 수 있어야 한다 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않는다 → JavaScript에서 .toString()이나 String()을 시도하면, [object Objec..

재귀 함수 자기 자신을 호출하는 함수 재귀로 문제 해결하기 1. 문제를 작게 쪼개기 - 배열의 합을 구할 때 [1, 2, 3, 4, 5]의 합을 구하는 것보다 [2, 3, 4, 5]의 합을 구하는 것이 더 작은 문제이고, 여기서 또 [2, 3, 4, 5]의 합을 구하는 것보다 [3, 4, 5]의 합을 구하는 것이 더 작은 문제일 것입니다. //예시 arrSum([1, 2, 3, 4, 5]) === 1 + arrSum([2, 3, 4, 5]) arrSum([2, 3, 4, 5]) === 2 + arrSum([3, 4, 5]) ... 2. 문제를 가장 작은 단위로 쪼개기 - 위에서 문제를 쪼갠 방식을 반복해서 문제를 계속해서 쪼개면 더 이상 쪼갤 수 없는 상태에 도달하게 됩니다. //예시 ... arrSum..

Section2는 나에게는 참 고비였다. 잘 붙잡고 있던 멘탈이 어려운 문제들을 많이 접하게 되면서 정신적으로 잠시 무너졌다. 수업 끝나고 하던 복습시간에 집중도 잘 안 되고 '왜 이해하지 못할까' 라는 생각이 계속 들어 무기력했던 것 같다. 처음이면 모르는 게 당연하지만 너무나 빨리 흘러가는 시간, 많은 공부량 때문에 중압감과 부담감이 더더욱 커졌다. 그래서 일주일 정도는 해이하게 지냈던 것 같은데, 이겨냈던 방법은 좋은 사람들 덕분이었다. 페어하면서 만났던 좋은 분의 연결고리로 많은 분들과 소통할 수 있었고 공통된 고민을 나눌 수 있어서 나에게는 그게 아주 큰 힘이 됐다. 지식을 아낌없이 공유해주셔서 너무 든든하고, 이젠 이해하지 못하고 모르더라도 전보다 덜 위축되고 큰 버팀목이 생긴기분이다. (난가..

질문리스트 JavaScript Promise의 기능과 필요한 이유에 대해서 설명해주세요. 순수함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요. React React의 state와 props에 대해서 설명해주세요. React 컴포넌트의 key 속성에 대해서 설명해주세요. useEffect의 dependency array에 대해서 설명해주세요. HTTP/네트워크 CSR과 SSR의 차이점에 대해서 설명해주세요. GET 메서드와 POST 메서드의 차이점에 대해 설명해주세요. 웹서버 기초 HTTP 메세지 구조에 대해 설명해주세요. Same-Origin Policy와 CORS에 대해서 설명해주세요. JavaScript Promise의 기능과 필요한 이유에 대해서 설명해주세요. promise는 비동..

오늘의 과제는 서버 베어미니멈 해결하는 것 섹션 1에서 바닐라 js로 만들었던 아고라 스테이츠를 리액트로 변환하기 css파일은 그대로 복붙하면 됐고 html파일도 jsx문법에 맞게 수정해서 App.js return 부분에 추가만 하면 기본적인 틀은 만들어졌는데 바닐라로 구현했던 js파일을 리액트로 변환하는 것이 쉽지 않았다. 어찌저찌 해결하다보니 잘 와닿지 않았던 useState, props 조금은 더 익숙해진 것 같았다. 그 와중에 이미지 태그가 적용이 안 되어서 애를 먹고 있었다. 파일 안에 이미지 파일을 적용했음에도 불구하고 경로를 지정해도 렌더링이 안 됐다. require를 사용해서 어쩌구...하라고 하기는 했는데 그것도 적용이 안 됐고(ㅠㅠ) 바닐라js처럼 경로를 설정해도 안 되고 링크를 사용하..

코드스테이츠 38일차! 리액트도 참 어려웠지만 서버는 진짜 너무 헷갈린다 익숙하지 않아서 그런 거겠지만 눈에 바로바로 보이지 않는 점이 좀 고단하다 포스트맨을 적극 활용하자! 포스트맨 사용법도 더 공부해보자...주눅들지 말자,,,, Statesairline Server과제에서 잘 모르겠던 점 구조분해할당 하는 방법(배열은 익숙한데, 객체부분이 익숙하지 않다) req, res의 의미(앞 글에서 어느정도 정리했다) req.params / req.query / req.body 차이 req.params → 라우터의 매개변수 ex) /:id/:name 경로가 있으면 ":id"속성과 ":name" 속성 -> req.params.id, req.params.name 으로 사용 가능 => www.example.com/p..

응답 객체 -response res.app: 똑같이 res 객체를 통해 app 객체에 접근한다. res.app.get('')같이 사용 가능 res.set(헤더, 값) / res.setHeader(헤더, 값): 응답의 헤더를 설정 res.status(코드) / res.sendStatus(코드): 응답 시의 HTTP 상태 코드를 지정 res.type(type): Contents-Type 헤더를 설정할 수 있는 간단한 메서드 res.cookie(키, 값, 옵션): 쿠키를 응답에 설정하는 메서드(cookie-parser 패키지가 필요) res.clearCookie(키, 값, 옵션): 쿠키를 응답에서 제거하는 메서드 res.end(): 데이터 없이 응답을 보냄 res.json(JSON): JSON 형식의 응답을 ..

SOP(Same-Origin Policy) 의미 : 동일 출처 정책 -> 같은 출처의 리소스만 공유가 가능하다 ->여기서 말하는 출처(Origin)는 다음과 같다 --> 프로토콜, 호스트, 포트의 조합으로 되어있음 --> 하나라도 다르면 동일한 출처가 아님 SOP는 왜 생겨났을까? 공격받을 수 있는 경로를 줄여준다 -> 동일 출처 정책은 잠재적으로 해로울 수 있는 문서를 분리하기 때문 해킹 등의 위협에서 더 안전해질 수 있다 -> 다른 사이트와의 리소스 공유를 제한하기 때문에 로그인 정보(예시)가 타 사이트의 코드에 의해서 새어나가는 것을 방지할 수 있다 하지만 다른 출처의 리소스를 사용하게 될 일은 많다 -> 로컬 환경에서 개발할 때도 클라이언트와 서버를 따로 개발하게 되다면 둘은 출처가 다르다 -->..

Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 얘기한다 ex / React에서 컴포넌트 내에 fetch를 사용해 API 정보를 가져오거나 이벤트를 활용해 DOM 직접 조작할 때 let foo = 'hello'; function bar(){ foo = 'world'; } bar(); //bar는 Side Effect를 발생시킴 Pure Function(순수 함수) 오직 함수의 입력만이 함수의 결과에 영향을 주는 함수 함수의 입력이 아닌 다른 값이 함수의 결과에 영향을 미치는 경우, 순수 함수라고 부를 수 없다. 또한 순수 함수는, 입력으로 전달된 값을 수정하지 않는다 function upper(str){ return ..

state 끌어올리기 (Lifting State Up) 리액트는 단방향 데이터 흐름이라는 원칙에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다 데이터가 state로부터 왔는 지, 하드코딩으로 입력한 내용인지는 알지 못한다. 그러므로 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 "역방향 데이터 흐름"처럼 보인다 해결 방안 상위 컴포넌트의 '상태를 변경하는 함수' 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다 -> 상태 끌어올리기 -> 콜백 함수 사용법과 비슷 예제 import React, { useState } from "react"; export default function ParentC..