퇴사를 결심하고 코딩을 공부하면서 코딩부트캠프라는게 있다는 것을 처음 알았다.공부를 해보니까 적성에도 맞고 전문적이고 발전적인 일을 하고 싶었는데딱 들어 맞는 분야라고 생각이 들었다.독학도 많이 한다고 하는데 방향성을 잡기가 어려워서 이왕하는거 제대로 배워보자는 마음으
프로젝트를 진행하며 여러 페이지를 연결 시켜야되고 연결된 페이지간에 공유되어야 할 정보를 전달하는 방법이 필요함을 느꼈다.나의 예로는 리스트 페이지에서 어떤 아이템을 클릭했을때 해당 아이템의 제품id 값과 컬러id 값을 전달 받고 싶었다.그 id 값들을 통해서 백엔드로
프로젝트를 진행하면서 Topnav 컴포넌트의 레이아웃을 구현하고 나중에 문제점이 발생되었다.반응형으로 구현한 메뉴바가 실제홈페이지와 다르게 스크롤이 작동하는 문제점이었다.상단에서 스크롤이 작동되는것이 그대로 노출이 되었다.따라서 어차피 반응형 메뉴창은 브라우저 화면에
부트 캠프에 지원하면서부터 기대하던 프로젝트가 드디어 끝이났다.프로젝트를 시작하기 전날까지만해도과연 내가 할 수 있을까?? 라는 생각을 했다.그렇게 걱정스러운 마음 반 기대하는 마음 반으로 시작했고아쉬움이 너무 너무 많이 남기도하고함께 해냈다는 뿌듯함 역시 느낄 수 있
wecode에서의 6주라는 시간을 보냈고 그 시간을 회고해보려고 한다. 그 시간을 되돌아보기에 나에게 한가지 질문이 떠올랐다. "웃어..?" 6주간의 회고 6주간의 시간을 되돌아 봤을때 웃을 수 있나? pre-course 뭔가를 처음 시작한다는 설렘과 걱정이 공존했던 기간이었다. webucks 클론 코딩을 하면서 내가 뭔가 대단한거를 한 것 같은...
데이터베이스를 구성하기는 했는데 그걸 어떻게 연결시켜서 어떻게 활용해주나 싶었는데그것을 가능하게 해주는것이 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)으로는 유지보수가 힘들어서 다양한