[TIL]<react>path parameter / query parameter 로 엔드포인트 작성

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

7일 전
·
0개의 댓글
post-thumbnail

[TIL]<react>clean up useEffect

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

7일 전
·
0개의 댓글

wecode 1차 프로젝트 회고

부트 캠프에 지원하면서부터 기대하던 프로젝트가 드디어 끝이났다.프로젝트를 시작하기 전날까지만해도과연 내가 할 수 있을까?? 라는 생각을 했다.그렇게 걱정스러운 마음 반 기대하는 마음 반으로 시작했고아쉬움이 너무 너무 많이 남기도하고함께 해냈다는 뿌듯함 역시 느낄 수 있

2022년 1월 11일
·
0개의 댓글
post-thumbnail

wecode 6주간의 회고

wecode에서의 6주라는 시간을 보냈고 그 시간을 회고해보려고 한다. 그 시간을 되돌아보기에 나에게 한가지 질문이 떠올랐다. "웃어..?" 6주간의 회고 6주간의 시간을 되돌아 봤을때 웃을 수 있나? pre-course 뭔가를 처음 시작한다는 설렘과 걱정이 공존했던 기간이었다. webucks 클론 코딩을 하면서 내가 뭔가 대단한거를 한 것 같은...

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[TIL_32] Prisma

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

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[TIL_31] MySQL

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

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[TIL_30] express

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

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[TIL_29] UI / API

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

2021년 12월 26일
·
0개의 댓글
post-thumbnail

[TIL_28] <JS> 동기 / 비동기

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

2021년 12월 19일
·
0개의 댓글
post-thumbnail

[TIL_27] 인증 & 인가 (1)

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

2021년 12월 8일
·
0개의 댓글
post-thumbnail

[TIL_26] <react> webucks-react (3)

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

2021년 12월 6일
·
0개의 댓글
post-thumbnail

[TIL_25] <react> webucks-react (2)

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

2021년 12월 6일
·
0개의 댓글
post-thumbnail

[TIL_24] <react> webucks-react (1)

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

2021년 12월 6일
·
0개의 댓글
post-thumbnail

[TIL_23] <react> state & props

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

2021년 12월 6일
·
0개의 댓글
post-thumbnail

[TIL_22] <react> fetch() 함수 & Promise

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

2021년 12월 6일
·
0개의 댓글
post-thumbnail

[TIL_21] <react> Mock Data

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

2021년 12월 6일
·
0개의 댓글
post-thumbnail

[TIL_20] <react> Sass

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

2021년 12월 5일
·
0개의 댓글
post-thumbnail

[TIL_19] <react> Router

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

2021년 12월 5일
·
0개의 댓글
post-thumbnail

[TIL_18] <react> Intro

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

2021년 12월 4일
·
0개의 댓글
post-thumbnail

[TIL_17] <project> webucks clone - html (3)

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

2021년 11월 27일
·
1개의 댓글