프로젝트를 진행하며 여러 페이지를 연결 시켜야되고 연결된 페이지간에 공유되어야 할 정보를 전달하는 방법이 필요함을 느꼈다.나의 예로는 리스트 페이지에서 어떤 아이템을 클릭했을때 해당 아이템의 제품id 값과 컬러id 값을 전달 받고 싶었다.그 id 값들을 통해서 백엔드로

프로젝트를 진행하면서 Topnav 컴포넌트의 레이아웃을 구현하고 나중에 문제점이 발생되었다.반응형으로 구현한 메뉴바가 실제홈페이지와 다르게 스크롤이 작동하는 문제점이었다.상단에서 스크롤이 작동되는것이 그대로 노출이 되었다.따라서 어차피 반응형 메뉴창은 브라우저 화면에

데이터베이스를 구성하기는 했는데 그걸 어떻게 연결시켜서 어떻게 활용해주나 싶었는데그것을 가능하게 해주는것이 Prisma 이다.node.js 환경에서 데이터베이스에 접근을 쉽게하도록 도와주는 소프트웨어이다.그럼 prisma 폴더가 생기고 안에 schema.prisma 파

데이터베이스에는 관계형과 비관계형이 있다.그중에 관계형 데이터 베이스를 알아보자.말그대로 데이터베이스 간에 관계가 있다는 것이다.데이터는 행(row)과 열(column)으로 이루어진 2차원 테이블로 표현할 수 있다.즉, 테이블간에 관계가 있다는 말이다.그 관계에는 3가

express는 공식 홈페이지에 Node.js를 위한 빠르고 개방적인 간결합 웹 프레임워크. 라고 나와있지만 와닿지 않는다..간단한 서버를 express없이 한번 만들어보고 express를 활용해서 만들어 봄으로써그 활용도를 느껴보자.express가 없다면 node.j

UIUser Interface의 약자로 유저가 소프트웨어와 만나는 경계면이다.즉, 소프트웨어에 명령을 전달할수 있는 부분이라고 이해하면된다.웹 서비스에서 UI는 웹 페이지라고 할 수 있다.APIApplication Programming Interface의 약자로 어플리

동기 / 비동기 동기 자바스크립트는 싱글 스레드 기반의 언어이고 이말은 동기식 언어라는 말이다. 동기식(Synchronous) 이라는 것은 한가지 일이 다 끝나고 난 다음에 다음 일은 진행한다고 표현하면 좋을 것같다. 다음과 같은 코드가 있을때 함수A가 실행되고 끝나

인증은 유저의 identification을 확인하는 절차이다.로그인 절차라고 생각하면 될것같다.id 및 password 생성 password를 암호화해서 DB에 저장 (회원가입)유저가 id 와 password 를 입력 (로그인 시도)유저가 입력한 password를 암호

리스트 페이지에 하트 버튼커피 상세페이지의 하트 버튼하트 버튼이 여러군데 사용되어서 Heart.js에 Heart 컴포넌트를 만들어서 재사용하였다.fontawesome 아이콘을 리액트에서 사용하는 법을 연습해볼 수 있었다.리뷰에 좋아요 버튼커피 상세페이지에 리뷰 달고 삭

로그인 창에서 id input 과 password input에 입력된 값을 저장 하는 기능 구현 (미션 2)미션 2에서 얻은 값을 통해서 아이디와 비밀번호의 조건 만족시 로그인 버튼 활성화 기능 (미션 3)(추가 구현) id 와 비밀번호 조건 만족시 해당 input박스

기존의 html,css로 만든 페이지를 react의 컴포넌트로 옮기기react를 처음 다뤄보는 단계에서 mission 0을 진행하면서 함수형 컴포넌트를 작성해보고 react의 구성을 전반적으로 경험해볼수 있는 미션이었다.리스트 페이지의 커피리스트를 mock data형

먼저 state 와 props를 한마디로 정의하면state : 변경가능한 UI 정보(상태값)props : 부모요소의 데이터값(state값)을 자식요소에 전달하기 위한 매개체간단하지만 개념이지만 코드로 익숙해지지 않으면 머리속으로 그려지지 않는다.원래는 state는 클

위의 함수의 의미는fetch 함수로 api 주소에 있는 데이터를 호출한다 (get의 경우)첫번째 .then 함수의 parameter에 api 데이터가 들어간다.첫번째 .then 함수의 return 값으로 api 데이터를 json()함수고 호출한다.그러면 그 리턴 값인

가짜 데이터, 샘플 데이터로 해석 될수 있다.백엔드 API가 완성되기전에 프론트엔드 개발을 진행하기위해 백엔드 response의 형태에 맞게임시로 만드는 데이터실제 백엔드 API의 응답값의 형태인 json파일로 만들어준다.public 폴더에 안에 폴더를 만들어서 저장실

설치상위 요소안 쪽에 하위 요소의 스타일을 정의해서 코드를 간단하게 할 수도 있다.pre-course 기간에 html 과 css 로 클론 코딩한 webucks 홈페이지를 react로 옮기는 과정에스타일들이 다 깨졌다. 처음에는 왜이러는지 몰라서 너무 답답했는데Sass를

SPA(Single Page Application)을 페이지가 한 개인 애플리케이션이라고한다.즉 한개의 .html 파일만 존재하고 그 안에서 여러개의 페이지를 볼 수 있는것이다.그 방법이 Routing 이다.라우팅이란 다른 url주소에 따라 다른 화면을 보여주는 것리액

React가 뭘까? 발전 배경 웹페이지에 보여지는 사용자 인터페이스(UI)가 많이지면서 웹페이지라는 단어 대신 웹 애플리케이션이라는 단어가 많이 사용된다고 한다. 이렇게 애플리케이션의 규모가 커지면서 기존의 방법(DOM,jQuery)으로는 유지보수가 힘들어서 다양한

WeBucks 페이지 클론 프로젝트 Mission 4,5 완료 상세 페이지 레이아웃 & 기능 구현 메뉴 상세페이지 ![](https://images.velog.io/images/goomg93/post/a1f27ec0-04e1-48ae-9cbe-4afc1b782873/

WeBucks 페이지 클론 프로젝트 Mission 3 완료 커피 리스트 페이지 레이아웃 구현 - 커피 리스트 페이지 flex로 리스트 레이아웃을 구성하려고 했는데 양 사이드에 여백을 없게하면서 동시에 마지막 줄에 리스트가 왼쪽 정렬되게 하는 방법을 못 찾았다.

1\. HyperTextHTML(HyperText Markup Language)의 HyperText와 그 의미가 동일2\. Transfer우리가 만든 웹사이트는 다른 사람들과 공유하기 위해서 다른 컴퓨터에게 전송해야 한다. 그리고 전송은 보내는 주체와 받는 주체가 있다