기존에 만들었던 중고마켓, 자유게시판 포트폴리오를 다시 만들겠다고 다짐한 후3일이 지났다.자유게시판 구조는 아래와 같이 만들 예정이었다.게시글 등록, 수정, 삭제게시글 조회, 목록댓글 작성, 수정, 삭제, 목록3일동안 위의 적은 구조들은 퍼블리싱과 기능 구현을 완료했다

예를들어 게시글의 좋아요를 누르는 상황이 있다고 가정하자.좋아요라는 기능도 해당 게시글의 정보에 포함되어있기때문에 백엔드에 API를 요청해야한다.그러면 백엔드는 DB에 요청을 하고 DB에서 요청을 받은 후 올라간 좋아요 수를 응답해 줄 것이다.따라서 컴퓨터 환경에 따라

Lazy-load란 페이지를 불러 올 때의 필요한 이미지를 전부 불러오는 것이 아닌 스크롤이 내려가면서 화면에 하나 하나씩 이미지를 로드하는 방식이다.이미지가 많은 페이지일수록 이미지가 전부 로드될 때까지 기다려야하기 때문에 느리기도하고 불편함이 있다.차라리 처음, 맨

먼저 Promise와 Promise.all()의 차이를 코드로 살펴보자.Promise는 보통 시간이 걸리는 작업을 진행할 때 사용된다.setTimeout(시간지연함수)로 3개의 함수에 각각 다른 시간을 부여해준 다음 실행하면 어떻게 될까.result1 ,result2,

함수를 리턴하는 함수 HOF에 대해 알아보자.위와 같은 코드가 있을 때 함수 안의 함수 function item을 콘솔에 출력하고 싶으면 어떻게 해야할까?생각보다 간단하다! com()() 으로 작성해주면 콘솔에 Mac과 item이 모두 출력할 수 있다.파라미터(매개변수

로그인 방식 여러가지를 살펴보자.브라우저에서 아이디와 비밀번호를 입력하여 백엔드로 API를 요청하고,백엔드에서 해당 계정의 존재를 데이터베이스에서 확인한 후에 세션에 저장한다.세션에 저장할 때 특정 id 값을 부여하여 식별을 가능케해준다.세션 id를 불러오는 과정을 '

먼저 디바운싱과 쓰로틀링의 정의부터 알아보자.코드를 올려서 설명한다기보다는 개념만 적어보겠다.디바운싱 : 연이어 발생한 이벤트 중 마지막, 또는 제일 처음 호출된 함수만 처리하는 방식쓰로틀링 : 연이어 발생한 이벤트에 일정 시간을 지정해주고, 그 전까지 다시 호출되지

HTML에서 태그를 선택할 때,우리는 보통 getElementid 혹은 queryselector를 사용하여 특정 DOM에 접근했었다.즉 , useRef는 DOM 요소에 접근할 때 사용하는 React의 Hooks이다.useRef의 다른 기능으로는 불필요한 렌더링을 막을

클래스형 컴포넌트는 요즘은 권장되지않는 방식이지만 함수형 컴포넌트와 hook이 등장하기 전까지 사용되었던 방식이기때문에 아직 사용하고 있는 기업들이 있으니 이해하고 넘어가야 좋을듯 하다.클래스형으로 카운트업 버튼을 만드는 코드이다.특이한 건 생명주기 메서드인 this로

먼저 코드로 설명해보겠다.위처럼 코드를 작성하면 coffee는 copy의 복사본이 된다.그 후에 복사본 coffee의 값을 재할당하면 원본 copy의 값은 변하지 않고,복사본인 copy의 값만 변하는 것을 확인할 수 있다.그렇다면 객체를 복사하면 어떻게 될까?perso

이 두가지에 대해 알아보자.우선 페이지네이션이란 우리가 게시글 목록에서 흔히 볼 수 있는 UI이다.위처럼 구글에서도 보이듯이 거의 모든 사이트에서 확인할 수 있다고 해도 과언이 아니다.이는 게시글 등의 목록을 띄울 때 몇 개를 띄울지 정하고 그 이상의 게시글(?)이 있

오늘은 라이브러리의 캐러셀을 불러오는 방법을 적어보겠다.캐러셀은 이미지나 텍스트의 슬라이드를 가로로 슬라이드시켜 여러 개를 표시하는 컴포넌트이다.위의 캐러셀을 다운 받는 법은 간단하다.👉🏻캐러셀 다운로드 링크👈🏻링크를 타고 들어가면 npm을 사용하면npm ins

React의 setState()는 컴포넌트 안에서만 관리되는데,변경된 데이터를 담아주는 역할을 한다.React에서 사용하는 props는 부모 컴포넌트에서 자식 컴포넌트에 전달해주지만 state는 컴포넌트 안에서만 선언된다.이러한 state는 약간 불편한(?) 특징이 있

이 귀여운 이름의 특성에 대해 알아보자.이벤트 버블링이란?특정 화면 요소에서 이벤트가 발생하면서 할당된 핸들러가 동작하고,그 위의 부모 요소의 핸들러까지 전달되어 동작하는 특성을 의미한다.간단한 이미지이지만 설명하기엔 충분하다..!위의 이미지처럼 크기순으로 안쪽에 자식

코딩을 공부하면서 나는 알고리즘 실력이 부족하다는 것을 느꼈다.사소한 알고리즘 문제도 구글링하고 구글링해서 찾아도 막상 적용하지 못하는 내가 많이 아쉬웠다.그러다 오늘!쉬운 문제였지만 혼자만의 힘으로 해결한 알고리즘 문제가 있어 작성해보려고 한다.다시한번 말하지만 정말

취업을 위해 공부하는 만큼 실무에서 쓰이는 기술은 절대적으로 필요하다.그동안에는 배열을 반복하여 원하는 값을 얻고자 할 때, 기본적인 for 반복문이나 while 반복문을 사용하였는데 실무에서는 map과 filter를 더 많이 사용한다고 한다.map()과 filter(

지난 글 '폴더구조:container/presentational패턴' 참고데이터 흐름이 단방향 구조인 리액트에서 props는 부모컴포넌트에서 자식컴포넌트에게만 줄 수 있다.이러한 특징을 가진 props는 emotion에도 적용이 가능하다.이러한 코드가 있다고 가정해보자

크게 3가지의 구조가 있는데container/presentational 패턴,Hooks 패턴,아토믹 패턴이 있다.요즘에는 최신 방식인 훅스패턴을 가장 많이 사용하지만 고전 방식이어도 유명한 container / presentational 패턴에 대해 먼저 알아보자!co

라우터 객체란 페이지 이동과 관련된 기능을 가진 객체이다.이 객체를 사용해서 A => B 페이지로 이동할 때,"B 페이지로 라우팅한다"라고 말한다.라우터는 정적라우팅과 동적라우팅으로 나눌 수 있는데로그인페이지처럼 누구나 같은 페이지로 이동하는 것을 "정적라우팅"이라 하

목요일. 오늘은 부트캠프 4일차다.이론적으로 동기 / 비동기 통신 방법에 대해 배웠다.일단 먼저 처리 과정에 대한 이해가 필요하다.우리가 데이터를 주고 받기위해 브라우저에서 데이터를 request하면 백엔드 컴퓨터가 요청을 받고, 데이터베이스에서 데이터를 처리한 후에