이정환 강사님의 인프런 강의, '한 입 크기로 잘라먹는 리액트'의 강의 내용과 사진 자료를 바탕으로 정리한 내용입니다.구조 분해 할당구조 분해 할당은 배열의 요소 또는 객체의 속성을 분해하여 각 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. 1. 배열의 구조 분해 할당배열 arr의 요소를 각각 하나의 변수에 담고 싶을 때는 아래처럼 코드를 작성한다.let arr = [1, 2, 3];/* let one = arr[0]; let two = arr[1]; let three = arr[2];*/let [one, two, three] = arr; //훨씬 보기 좋음console.log(one, two, three);이렇게 코드를 작성하면 one에는 arr[0]의 값인 1이 two에는..

이정환 강사님의 인프런 강의, '한 입 크기로 잘라먹는 리액트'의 강의 내용과 자료를 바탕으로 정리한 내용입니다. JavaScript에서는 모든 값을 Truthy 혹은 Falsy로 평가한다. 따라서 참, 거짓을 의미하지 않는 값도 조건문 내에서는 참, 거짓으로 평가한다.이런 특징을 잘 이용하면 우리가 특정 상황에서 조건문을 간결하고 강력하게 만들 수 있다.이번 포스팅에서 어떤 값이 Truthy하고 어떤 값이 Falsy하게 평가되는지 살펴보고, 이를 활용하여 조건문을 간결하게 만드는 방법을 알아보자!1. Falsy한 값MDN 문서Falsy는 JavaScript에서 논리 연산 시 false로 평가되는 값들을 의미하며,자바스크립트에는 총 8가지의 Falsy한 값이 존재한다.falseundefinednull0-..

와 난 이게 진짜 명강의라고 생각한다. 리액트에 입문하면서 유명한 강의인 유데미의 React 완벽 가이드 2024부터 구매를 해서 보기 시작했다. 근데 처음부터 많은 개념들을 깊이 있게 다루다보니 사기가 팍팍 떨어졌다. 리액트 입문자의 입장에서 리액트는 하나의 거대한 산처럼 보였다... 배울게 너무 많았고, 시작도 전에 막막해지기 시작했다. 그러던 중 '만들면서 배우는 리액트: 기초' 강의를 접하게 되었다. 이 강의를 통해서 각 개념의 필요성과 사용 시점을 명확히 이해할 수 있게 되었고, 감을 잡게 되었다. 이 강의는 리액트의 핵심 개념을 초보자의 눈높이에 맞춰 설명하고 있고, 실제 프로젝트를 통해 실습을 할 수 있도록 구성돼 있다.  이 강의를 통해 학습할 수 있는 내용은 아래와 같다. 초보자가 꼭 알..

앞의 포스팅에서는 FastAPI 크롤링 서버를 도커 이미지로 만들었었죠, 이번 포스팅에서는 도커 이미지를 Docker Hub에 올리는 방법을 공부했습니다.Docker Hub 사용법1. 쉘에서 로그인하기우선 docker hub에 로그인합니다.docker login2. Repository 생성하기3. Repository에 업로드하기이미지 태그 버전을 만들어야 하는데요docker tag zeus:0.0.1 hani0903/zeus:0.0.1hani0903/zeus 이 부분에 본인 레포지토리 이름을 적어주시면 됩니다. docker images를 통해 확인해보면 hani0903/zeus:0.0.1이 생성된 것을 확인할 수 있습니다. 이제 이걸 hub에 push 해줘야 합니다.docker push hani0903/..

아래 사진과 같은 헤더를 만들어 보자.우선 Header를 크게 자르면 로고, 로고 텍스트, 사이드바 아이콘, 검색바 , 알림 드롭박스, 채팅 드롭박스, 사용자 프로필 드롭박스로 구성된다. 여기서 우리는 로고, 로고 텍스트, 햄버거 아이콘을 합쳐서 로고 컴포넌트로 만들 것이다!import React from "react";import './header.css';import Logo from "./Logo";import SearchBar from "./SearchBar";import Nav from "./Nav";function Header() { return ( {/*logo*/} {/*searchBar*..

내 프로젝트에 응용할 부분이 많을 것 같아서 아래 유튜브 영상을 보고 대시보드를 따라 만들어보기로 했다.아래 영상에서 setting up project 부분에 해당하는 부분을 따라한 뒤 정리하였다.1. 리액트 프로젝트 생성하기우선 프로젝트 파일을 생성한다.npx create-react-app stock-dashboard2. App.css 파일 수정하기@import@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');Google Fonts에서 Roboto 폰트를 가져온다.:root..

CSS 함수란?CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작합니다.CSS 함수의 함수명은 함수의 역할을 나타냅니다.CSS 함수 살펴보기01. calccalc는 계산식의 결과를 속성값으로 지정해 줄 수 있습니다.calc 함수는 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다.표현식은 단순 계산식입니다.높이와 너비를 지정할 수 있고, 불필요한 여백을 줄일 수 있습니다.width: calc(30px - 20px)

FastAPI를 이용하기 위해 웹 개발환경을 준비해야 합니다.이 개발환경을 준비하기 전에 먼저 파이썬 가상 환경에 대해 알아본 뒤 FastAPI를 파이썬 가상 환경에 설치해보겠습니다.0. 가상환경의 필요성파이썬 가상 환경은 파이썬 프로젝트 진행할 때 독립된 환경을 만들어줍니다. 여러 개의 프로젝트를 동시 진행할 때, 각각의 프로젝트가 다른 FastAPI 버전을 필요로 할 수 있습니다. 하나의 PC에 서로 다른 버전의 FastAPI를 설치하는 것은 환경 구축도 어렵고 사용하기도 어렵습니다.가상 환경을 이용하면 하나의 PC에 서로 다른 버전의 파이썬과 라이브러리를 쉽게 설치해 사용할 수 있습니다.1. 가상환경 설정하기가상환경 venv를 적용할 프로젝트 위치로 이동합니다.cd my-projectvenv 이름으..

리액트에서 이미지 파일을 저장하는 경로는 크게 두 개로 나뉩니다. 바로 public 폴더와 src/assets 폴더인데요! 각각 어떤 특징을 가지고 있는지 알아보겠습니다.public/폴더public 폴더에 저장된 이미지는 index.html 또는 index.css 파일 내에서 직접 참조할 수 있습니다.public/에 저장된 이미지 및 파일은 프로젝트 개발 서버 및 빌드 프로세스에 의해 공개적으로 제공됩니다.이 파일들은 index.html처럼 브라우저 내에서 직접 방문 및 요청이 가능합니다.public 폴더에 있는 파일은 localhost:5173/파일이름.확장자로 접근하면 볼 수 있습니다.src/assets/폴더src 또는 src/assets/와 같은 하위 폴더에 저장된 모든 파일은 공개적으로 제공되지 ..

* 아래 내용은 바킹독의 실전 알고리즘을 듣고 정리한 내용입니다 *  백트래킹 알고리즘은 현재 상태에서 가능한 모든 후보군을 따라 들어가며 탐색하는 알고리즘입니다.백트래킹은 상당한 구현력을 필요로 하며 사소한 부분에서 실수하기 쉽습니다. 또 재귀의 특성상 틀린 부분을 찾는 것도 어렵습니다. 따라서 많은 시간을 할애하여 개념을 익히고 연습하는게 중요합니다.그렇지만 응용 건덕지가 많지 않으므로, 예제를 꼼꼼하게 풀고 기본적인 코드 형태를 익혀두면 할 만 할 것입니다.바킹독님이 작성하신 BOJ 15649번 코드를 javascript 코드로 변경하였습니다.기본 코드let N, M;let arr = Array(10).fill(0);let isUsed = Array(10).fill(false);function ba..

우선 재귀 문제를 풀 때 가장 중요한 부분은 `예시 분석`이라고 생각한다. 재귀가 살짝 머리가 아픈 개념이기 때문에, 구현을 하기 위해서는 코드를 어떻게 구현할건지 그 아이디어가 머릿속에 정리가 돼있어야 한다.따라서, 먼저 테스트 케이스 1번을 분석하여 문제의 흐름을 파악한 뒤에 이를 토대로 구현해보자.예제 분석우선 나는 처음에 주어진 행열(3,1)을 찾기 위해 전체 배열을 4개의 사분면으로 나누는 방식으로 접근했다. 한 번 분할할 때마다 사분면의 크기는 배열 size /2가 된다.첫 번째 분할주어진 배열의 크기가 $$ 2^N x 2^{N} $$이므로, N = 2일 때 배열은 4 x 4이다. 이 배열을 4개의 사분면으로 나누면 각 사분면은 2 x 2 크기가 되고 각 사분면에는 아래의 숫자들이 포함된다.0..

[11729] 하노이 탑 이동 순서들어가기 전에오늘은 백준 골드 5 난이도의 하노이 탑 문제를 자바스크립트로 풀어봤다. 이 문제는 재귀문제로 재귀의 개념과 작동 원리를 이해하고 있어야 한다. 문제 설명입력값으로 하노이 탑의 높이인 N이 입력되면 1번 장대에 존재하던 N개의 탑을 모두 3번 장대로 이동시키는 이 문제의 목표이다. 단, 한 번에 하나의 원판만 옮길 수 있으며, 더 작은 원판 위에 더 큰 원판을 올릴 수 없다.선수 지식이 문제를 풀기 전에 알아야 할 개념은 아래와 같다.재귀 함수를 구현하는 방법사용한 함수/메서드문제 풀이에 있어 핵심 메서드는 아니지만, 결과 출력을 처리할 때 사용했다.Array.prototype.join()아이디어이해를 돕기 위한 설명우선 문제에서 주어진 예시 입력값을 가지고..