고니의 개발 일지📚

지난번에 진행했던 마켓컬리 클론코딩 프로젝트를 배포해보려고 한다. 더미데이터를 쓰고 있으니 github-pages를 활용하여 배포해도 충분하겠다는 생각이 들어 당장 실시! 배포 전에 잠깐! 웹브라우저는 리액트의 문법을 이해할 수 없다... 따라서 JSX 파일을 HTML, CSS, JS로 변환해주어야 하는데, 이는 빌드를 통해 이루어진다! Github-pages를 이용하면 빌드+배포까지 편리하게 할 수 있다는 장점이 있다!😄 Github Pages란, GitHub의 리포지토리에서 직접 HTML, CSS 및 JavaScript 파일을 가져오고 선택적으로 빌드 프로세스를 통해 파일을 실행하고 웹 사이트를 게시하는 정적 사이트 호스팅 서비스이다. About GitHub Pages - GitHub Docs Abo..

Server는 네트워크 오퍼레이션을 수행하는 프로그램이다. 지정된 포트(ex.8080 port)에 소켓을 열고 클라이언트가 연결할 때까지 무한 대기하며 기다린다. 클라이언트가 연결하면, 해당 클라이언트 소켓에서 요청을 받아와 수행하고 응답을 작성해 전달한다. - 정적 웹 서버(Static Web Server) HTTP 서버 중에서도 리소스 파일을 리턴하는 서버이다. 만약, 클라이언트가 http GET /file.html 요청을 보내면, 정적 웹 서버는 지정된 디렉터리 경로에서 file.html을 찾아 그 내용을 HTTP 응답 바디에 넣어 전송한다. 이때 서버는 html 파일에 아무 작업도 하지 않고 파일을 있는 그대로 리턴한다. ex) Apache, Nginx 등... - 동적 웹 서버(Dynamic W..

프로젝트 진행 중... 스크랩 기능을 만들어야 했다. 어제 성공한 스크랩 기능은 얼핏 봐서는 완벽해보이지만... 팝업 창을 껐다 켜면 상태 유지 안됨...ㅎㅎㅎㅎㅎㅎ 어쩌지? 하다가 생각해낸 방법. 부모 컴포넌트에서 자식 컴포넌트를 관리하자! 컴포넌트 구조는 다음과 같다. Mentoring.js (부모 컴포넌트) MentorApply.js (자식 컴포넌트) 부모 컴포넌트 1. 북마크 상태를 관리할 boolean 타입 변수를 하나 만든다. 2. 변수의 상태를 바꿔줄 set 함수를 같이 설정한다. => 자연스럽게 useState를 쓰게 되겠죠? 3. 클릭했을 때 bmk의 상태를 바꾸기 위해 클릭 이벤트 함수도 만들어주자. 이제 이 bmk 값과 클릭 이벤트 함수를 자식에게 props로 전달해주면 된다. tog..

7월에 웹 교육을 들었던 멘토님의 강의를 다시 보면서 Weather API - OpenWeatherMap을 통해 지역을 입력하면 날씨를 확인할 수 있는 페이지를 만들어보았다. Weather API - OpenWeatherMap Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, which are included in professional collections. op..

https://www.acmicpc.net/problem/3040 3040번: 백설 공주와 일곱 난쟁이 매일 매일 일곱 난쟁이는 광산으로 일을 하러 간다. 난쟁이가 일을 하는 동안 백설공주는 그들을 위해 저녁 식사를 준비한다. 백설공주는 의자 일곱개, 접시 일곱개, 나이프 일곱개를 준비한다. www.acmicpc.net 문제 매일 매일 일곱 난쟁이는 광산으로 일을 하러 간다. 난쟁이가 일을 하는 동안 백설공주는 그들을 위해 저녁 식사를 준비한다. 백설공주는 의자 일곱개, 접시 일곱개, 나이프 일곱개를 준비한다. 어느 날 광산에서 아홉 난쟁이가 돌아왔다. (왜 그리고 어떻게 아홉 난쟁이가 돌아왔는지는 아무도 모른다) 아홉 난쟁이는 각각 자신이 백설공주의 일곱 난쟁이라고 우기고 있다. 백설공주는 이런 일이 ..

https://www.acmicpc.net/problem/2739 2739번: 구구단 N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다. www.acmicpc.net 문제 N을 입력받은 뒤, 구구단 N단을 출력하는 프로그램을 작성하시오. 출력 형식에 맞춰서 출력하면 된다. 입력 첫째 줄에 N이 주어진다. N은 1보다 크거나 같고, 9보다 작거나 같다. 출력 출력형식과 같게 N*1부터 N*9까지 출력한다. 1. N을 입력받고 정수형으로 바꾸자. n = int(input()) 2. 구구단 N단을 출력하자. 출력 형식은 2 * 1 = 2 방식으로 하기! N과 1~9를 곱셈한 수를 반복 출력 for i in range(1, 10): print(f'{n} * {i..

https://www.acmicpc.net/problem/1000 두 정수 A와 B를 입력받은 다음, A+B를 출력하는 프로그램을 작성하시오. 입력 첫째 줄에 A와 B가 주어진다. (0 입력받은 값을 공백으로 분리 3. 분리한 값을 정수로 바꿔주자. map(int, input().split()) => 공백으로 분리한 split의 결과를 모두 정수로 변환해주기 위해 map을 사용 => 일일히 split의 결과를 정수로 바꿔주지 않아도 된다!! 4. 두 값의 합을 출력하자. print(a+b..

Q. 스프레드 연산자란? -> 3개의 점(...)으로 이루어진 연산자 Q. 이러한 스프레드 연산자는 왜 사용하는가? -> 스프레드 연산자를 사용하면 특정 배열의 원소를 한번에 불러올 수 있다. Q. 언제 사용하면 좋은가? 1) 배열의 내용을 조합할 때 예를 들어, 두 배열이 있을 때, 두 배열의 모든 원소가 들어간 세 번째 배열을 쉽게 만들 수 있다. const fruits = ["apple", "banana", "peach"]; const drink = ["coke", "soda", "milk"]; const snack = [...fruits, ...drink]; console.log(snack.join(', ')); 위 코드를 실행해보면 콘솔 창에 fruits와 drink의 원소들이 차례대로 snac..

소스코드 import {useState} from 'react'; import { useEffect } from 'react/cjs/react.development'; function App() { const [loading, setLoading] = useState(true); const [coins, setCoins] = useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((response) => response.json()) .then((json) => { setCoins(json); setLoading(false); }); }, []) return ( The Coins! {loading ? "" ..

소스코드 import {useState} from 'react'; function App() { const [toDo, setToDo] = useState(""); const [toDos, setToDos] = useState([]); const onChange = (event) => setToDo(event.target.value); const onSubmit = (event) => { event.preventDefault(); if (toDo === ""){ return; } setToDo(""); // state 직접 수정 하지 않음. 함수 사용 setToDos(currentArray => [toDo, ...currentArray]); }; return ( My To Dos {toDos.length..