SSR을 적용하고 나서, redux-persist가 서버사이드에서 동작할 때 발생한 이슈가 있었다.redux-persist github에 이미 이 이슈가 보고되었고, 서버사이드에서 정상 작동하도록 다음과 같은 코드를 redux 폴더 내 store.tsx 파일에 추가해줬

이전 프로젝트에서는 서버와 통신해서 데이터를 받아오는 과정에 대해 비동기라는 인식이 부족했다. 이번에 비동기에 대한 이해를 제대로 짚고 넘어가자는 생각이 있었다. 자바스크립트는 싱글스레드 기반의 언어즉, task들을 순차적으로 처리하는 시스템인데 소요시간이 긴 task

개발자분께 대략적인 코드리뷰를 받고나서 여러페이지에 존재하는 검색창(회원정보, 랭킹회원정보, 사전예약유저정보)의 검색값들을 페이지를 벗어나도 저장되도록 redux를 사용해 store에서 각각 관리하기로 했다.앞서 언급했던 것처럼 페이지별 검색값을 각각 따로 관리하기 위

Echart에 데이터를 입력하는 방식은 Echarts 태그의 option 속성값으로 주면 된다.그리고 이 option의 형식은 다음과 같다.x축과 y축 그리고 series가 있는데, series는 쉽게 말해서 그래프의 타입을 나타내며 실질적인 데이터를 넣는 부분이기도

관리자페이지는 유저 리스트를 검색하는 페이지가 많다(회원리스트, 사전예약신청유저리스트, 유저랭킹리스트 등). 그래서 검색창과 리스트 테이블을 반복적으로 사용하게 되는데, 처음 구현할 때는 공통 컴포넌트로 쓰지 않고 개별적으로 컴포넌트를 생성했었다. 그런데, 코드리뷰를

클릭 시 생성되는 이미지 초기화 하기솔팅기능은 표의 카테고리 탭이 클릭되면 클릭된 카테고리와 오름차순 혹은 내림차순의 정보를 담아 API에 GET 요청을 넣고, 반환하는 데이터를 받아서 보여주는 방식으로 구현했다.추가적으로, 솔팅이 이뤄진 메뉴에 오름차순 혹은 내림차순

styled-components를 배우던 중, 컴포넌트의 props를 콘솔로 찍어보니 chlidren 이라는 키 값이 있었다. 컴포넌트 안에 넣어둔 값을 props.children 으로 받을 수 있었다.input is a void element tag and must

2주차 초반, 스테이와 룸에 대한 정보들 객체에 담고 image 파일만 formData 형식에 담아 API에 보내는 것에 성공했다. 백엔드 로직에서도 데이터를 받아 데이터베이스 추가하는 것까지 완료했다. 이제, 이미지 이외의 다른 형식의 데이터들도 한꺼번에 formDa

input 태그들을 map함수를 통해 화면에 출력했는데, 체크박스 input이 선택이 안되는 오류가 있었다. 체크값을 주기 위해 checkbox input 태그에 checked라는 속성을 추가했고 값으로는 state값을 부여했다. 이 값은 여러 checkbox들 중에서

입점문의 페이지는 유저의 숙소 정보를 작성하는 페이지로 수많은 Input box가 존재한다.작성하는 input의 종류는 크게 textbox, select, file로 나눠진다.이 Input들을 반복문을 통해 UI에 구현하였는데, 이를 적절하게 분기처리 하는 과정이 필요

어느정도 기능구현이 완료되었을 쯤, 테스트용 새로운 브랜치를 만들어 각 기능 브랜치들을 통합하였다.이 테스트 브랜치로 백엔드와 실질적인 통신을 해보려고 했는데, 메인 페이지에 들어서자마자 콘솔에 에러가 찍히면서 화면에 아무것도 나오지 않았다. ⇒네비게이션 바의 카트

상품 리스트 페이지를 구성하면서 화면에 보여지는 거의 모든 데이터들은 백엔드에서 가져와야 하며, 어떻게 어떤식으로 가져와서 어떻게 보여줘야할 지에 대한 고민을 많이할 수 있었다.특히, 이전에 혼자 프로젝트를 진행할 때 막연하게 생각했던 것과 달리, 앞으로 데이터를 가져

매거진B 사이트에서 Search 버튼을 누르면 검색 Input창이 나타난다.여기서, 검색어를 입력하게 되면 url에 검색한 값이 쿼리파라미터로 추가되며 새로운 페이지가 로드 된다.위와 같이 로직을 구현하기 위해, 먼저 Search라는 버튼을 클릭하게 되면 검색창이 나타

우리 페이지는 네비게이션에 Cart라는 탭으로 장바구니 기능이 추가되어 있다.Cart를 누르거나 상품리스트페이지에서 AddCart를 누르거나 상세페이지 장바구니담기를 누르면 값이 업데이트 되면서 모달창이 오른쪽으로부터 나온다.우선, 모달창이 오른쪽에서 나타나는 기능을

현재 관리자페이지를 ANT라는 CSS Framework를 이용해 구현중에 있다. 유저 정보를 검색하는 검색창을 구현할 때 html의 input태그가 아닌 antd의 Table과 Input 태그를 활용했는데, 값을 초기화하는 방식에 문제를 겪었다. 결론적으로는 나와 같은

Oil Of Yats 어느덧 일도 많고 탈도 많았던 2차 프로젝트가 끝이났다. 여기서 말하는 2차 프로젝트란, 백엔드 개발자 3명 프론트엔드 개발자 4명이 팀을 이뤄 하나의 사이트를 선정해 2주동안 가능한 기능구현을 처음부터 끝까지 직접 해보는 프로젝트를 말한다.

개발자를 하고자 마음을 먹고나서 가장 처음 행동한 것은 교육기관(?)이었다. 개발자의 수요가 증가한만큼이나 개발자가 되려는 공급도 많았기 때문에, 누구나 그렇듯 나도 개발에 대한 진심어린 열정을 보여주기 위해 제대로된 곳에서 개발자의 첫걸음을 떼고 싶었다.(너도나도 개

1. 프로젝트 소개 📰 Magazine B 클론코딩 프로젝트 📍 프로젝트 목적 프론트엔드와 백엔드 개발자가 팀을 이루고 하나의 웹사이트를 선정해 2주라는 기간동안 웹사이트 클론 코딩을 구현한다. 실제 커머스 사이트를 구현함으로써 기획이나 디자인과 같은 시간과

Javascript를 이용한 인스타그램 클론 코딩 프로젝트입니다. 로그인 유효성 검사, 댓글, 댓글의 좋아요/삭제 기능 등 간단한 기능들만 구현했습니다.

CSS에서 display 속성에는 none, block, inline, inline-block이 있다.blcok 요소에는 <div>,<header>,<ol>,<ul> 등이 있으며, 웹에 표시되는 가로영역을 모두 차지하는 특징을 갖고 있다. 그래서