SUE 개발 블로그

제로베이스 학습을 어느정도 마치고 개인프로젝트 기간이 찾아왔었습니다.주어진 카테고리 내에 저는 소셜 커뮤니티를 골랐고반려견을 키우는 애견인들을 위한 산책 커뮤니티 멍미팅을 기획했습니다.개인프로젝트이지만 마침 여유가 되는 지인분이 연습겸 서버를 만들어주겠다하여 값진 프로젝트가 되었다.기획 단계는 피그마를 이용해 와이어 프레임 및 프로젝트에 필요한 페이지 및 기능등을 적으며 기획했습니다. 개인프로젝트 전에 진행한 리액트 과제에서 사용한 Vite를 사용해 React.ts로 작업을 시작했으며React-router-dom v6, axios, zustand, TailwindCSS 라이브러리를 추가로 사용했습니다.실시간 날씨 데이터 ( Open Weather API ) Open Weather API를 이용하여 서울을..

꼭 알아야 할 배경지식으로 타입 시스템이 있다. 타입 시스템 모든 프로그래밍 언어는 타입 시스템을 갖고 있다. 타입 시스템은 크게 2가지로 나눌 수 있다. ( 정적 타입, 동적 타입 ) 자바스크립트가 사용하는 동적 타입 시스템은 변수의 타입들을 코드가 실행하는 도중에 결정한다. = 변수의 타입을 직접 정의 안함 = 변수의 타입을 일일히 지정하지 않아도 되는 유연함을 갖는다. let a = "hello" 또 변수의 타입이 하나로만 고정되지 않기에 아무 타입의 값이나 자유롭게 담을 수 있다. let a = "hello" // 문자열 a = 19923455 // 숫자 마지막 라인에 toUpperCase( ) 라는 메서드를 사용하면 어떻게 되는가 오류가 발생한다. toUpperCase 는 문자열에만 사용할 수 ..

useReducer는 현재 상태와 액션 개체를 매개변수로 받아와 새로운 상태를 반환해주는 함수이다. 리듀서로 상태를 관리하려면 구성 요소의 최상위에서 호출해야한다. ( 공식 문서 내용 ) import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... 매개변수 reducer: 상태가 업데이트되는 방식을 지정하는 감속기 함수입니다.순수해야 하고 상태와 작업을 인수로 가져와야 하며 다음 상태를 반환해야 합니다. 상태 및 작업은 모든 유형이 될 수 있습니다. initial..

리액트는 기본적으로 단방향으로만 데이터가 흐른다. ( 단방향 데이터 흐름 ) 상위 컴포넌트에서 가지고 있는 데이터를 하위 컴포넌트로 props 객체를 통해 전달하는 것을 props drilling. 함수를 통해 하위 컴포넌트 데이터를 상위 컴포넌트로 전달받아 사용할 수 있는데 이것을 상태 끌어올리기 state lifting 라고 한다. 리액트에서 만든 컴포넌트들은 위처럼 데이터는 위에서 아래로만 흐르는 단방향 흐름이고 추가, 수정, 삭제 같은 이벤트들을 핸들링 하는 setState 같은 함수를 props로 전달해 아래에서 위로 올리는 구조라고 볼 수 있다. 여러개의 컴포넌트에 엮인 데이터들을 그들의 공통 부모인 컴포넌트에 state 로 설정하여 문제를 해결. 일기를 작성하는 프로그램을 예제로 확인해보자...

바닐라 JS로 진행하는 5가지 미션을 마쳤습니다. 1. Side Navbar Toggle 버튼을 누를시 사이드 메뉴바가 나타나고 사라지며, 열려있거나 닫힌 상태를 저장하여 새로고침해도 그대로 유지하기. 2. Analog Clock New Date() 메서드를 활용하여 시침, 분침, 초침을 만들어 현재 시간을 가르키는 아날로그 시계 만들기. 3. Star Rating 최대 별점 갯수를 생성하여 빈칸에 마우크를 호버하여 클릭시 그 값까지 별점을 저장하기. 4. Date Picker input 태그의 date를 쓰지않고 자바스크립트로 달력 및 클릭 시 그 날짜값 저장하기. 5. News Page 뉴스 API 및 IntersectionObserver API를 이용하여 무한스크롤 구현하기. 과제를 진행하며 Loc..

수업과 학습을 통해서 state 는 값을 저장하는 구나~ Props는 전달받는 거구나~ 하며 정확히 이해하지 않고 당장 사용하는 것에 중점을 뒀던 것 같다. 항상 기초를 닦아야하는게 중요하다고. 블로깅할 겸 정리해보려한다. props(properties)와 state는 일반 자바스크립트 객체이다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 가지며 props는 컴포넌트에 전달되는 반면 state는 컴포넌트 안에서 관리한다. React에서 this.props와 this.state는 모두 렌더링된 값을 나타냄 = 현재 화면에 보이는 것을 뜻한다. React State (상태) import React, { useState } from "react"; // state는 위처럼 import 해줘야한다. ( ..

제로베이스 프론트엔드 부트캠프를 시작한지 벌써 2개월이 지났습니다. 그 시간동안 좋았던 것은 따로 이런 교육을 듣지 않고 프론트엔드라는 개발의 꿈을 꿀 때. HTML / CSS / JS 를 바로 배우며 다음엔 무엇을 배워야할지 고민의 연속에 치였을텐데, 제로베이스에서 컴퓨터 공학 CS 지식 및 알고리즘, 학습해야할 사항들의 순서와 계획표, 과제 등을 주기 때문에 큰 방황은 없었습니다. 또 세상에서 제일 외로운게 혼자 공부 및 준비하는 과정이 아닐까요? 나와 같은 길을 걸으려는 사람들은 어떤 방식으로 무엇을 하고, 어떤 생각을 가졌는지. 또 같은 것을 공부해도 어떤 생각과 의견을 가졌는지. 서로 모르는 것을 물어보거나 공유하는 등. 좋은 동기들을 만나 함께 으쌰 으쌰 공부할 수 있는게 가장 크게 만족하는 ..

1. 컴포넌트화 방식 페이지마다 공통적으로 사용되는 Header, Nav, Footer 같은 요소들을 별도의 파일이나 모듈로 제작한 후에 MyHeader 컴포넌트, MyNav 컴포넌트, MyFooter 컴포넌트라 불러 각각 필요한 페이지마다 컴포넌트 이름으로 불러다 쓰는 방식으로 코딩할 수 있기 때문이다. 페이지를 추가적으로 만들어야할 때 타이핑 해야 할 코드가 줄어든다. ( 컴포넌트를 불러오기 때문 ) 공통적으로 다른 페이지에도 사용될 요소들을 컴포넌트를 이용해 재사용하는 방식을 컴포넌트화 방식이라고 한다. 만약 같은 Header 을 사용하는 페이지가 2개 존재한다면 기존의 방식은 Header 라는 요소를 전부 찾아서 수정해야 하나 컴포넌트화 방식으로 만들어졌다면 Header 라는 컴포넌트 파일만 수정..

API ( Application Programming Interface ) 응용 프로그램 프로그래밍 인터페이스 응용 프로그램에서 사용할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 레스토랑을 떠올리며 알아보자. 방문하는 손님이 음식을 먹으려면 4가지의 단계를 거쳐야한다. 위 과정은 웹사이트를 통해서 어떤 데이터 ( 정보 ) 를 보는 방식과 매우 유사하다. 크롬과 같은 웹 브라우저가 서버에 데이터를 요청하고 질의를 해서 데이터베이스에서 값을 꺼내와 응답을 받아 사용하는 것과 같기 때문이다. 노란 부분이 우리가 우선 개발할 부분으로 데이터 요청과 요청 데이터 전달을 우선으로 제대..

직관적인 비 동기 처리 코드 작성하기. Promise 를 더 쉽고 가독성 좋게 작성할 수 있는 async & await 를 알아보자. async // async function hello() { return "hello"; } async function helloAsync() { return "hello Async"; } console.log(hello()); console.log(helloAsync()); helloAsync 결과를 보면 Promise {} 이라 나온다. 무슨 뜻이냐면 Promise 객체를 그냥 출력하게 되면 그냥 정말 Promise 객체가 출력이 된다. helloAsync 함수에서는 Promise 를 return 하고 있다는 걸 확인할 수 있으니까 이것의 결과 값은 Promise 가 ..