본문 바로가기

분류 전체보기

 (135)
OrderPage 만들기 작업을 시작하기에 앞서 어제 발생한 map함수에대한 걱정이 실화가 되었다. 그저 웃음만 나온다..허허허 이번에 들어오는 데이터는 아래와 같다. { "data": [ { "id": "363", "sub_category_id": "600*1200*20", "surface_type_id": "HARD MATT", "name": "P_1_CTN_01", "weight": "30", "type": "천장용", "price": "10000.00", "sell_counts": "5", "image_url": "images/6.jpg" }, { "id": "2", "sub_category_id": 2, "surface_type_id": 2, "name": "SDH211", "weight": "60", "price": ..
제품상세 페이지 만들기 제일 해보고 싶었던 상품 상세페이지! 주말동안에 개구리 css문제도 다풀어봤다고?! 푸터를 끝내고 처음으로 내가 꾸미고 싶은대로(이솝을 참고해서이지만..) 할수있어 너무 설렜다. 일단 데이터는 이렇게 주고 받기로 하였다. 구현 과정 1. map 함수로 데이터 처리 이미 레이아웃을 만들때 상수데이터를 사용해서 만들어두어서 목데이터만 추가로 map을 돌려서 만들어보았다. 그렇게 자신감 넘치게 npm start를 쳤다. 그런데 앗 맵함수 잘못썼다 이렇게 작성한 이유는 타입명 옆에 값들이 map함수로 착착 들어갈거라 생각해서.. 하지만 현실은 타입(주르륵), 값(주르륵) 'map함수를 돌려서 바로바로 옆에 띄우는 방법은 없는걸까?' 고민해보았으나 답이 보이지않았다. 하나씩 해보자며 맵함수를 분리하니 아래 이미지..
display:flex 음..css 공부를 안하고 바로 프론트로 '공부하면서 프로젝트 해보지 뭐' 했다가 화면이 다 깨지는경험을 했다. margin, padding 쓰지말고 display나 grid를 쓰라고하는데 그게 뭐지 display: flex CSS의 속성 중 하나로, 해당 요소를 플렉스 컨테이너로 만드는 역할을 합니다. 이를 통해 자식 요소들을 플렉스 아이템으로 배치할 수 있다. 플렉스 컨테이너를 설정하면 해당 요소의 자식 요소들을 수평 또는 수직으로 배치하고 정렬할 수 있으며, 플렉스 박스 레이아웃은 요소들을 좀 더 효율적으로 배치하고 정렬할 수 있도록 도와준다. justify-content flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다. flex-end: 요소들을 컨테이너의 오른쪽으로 정..
컴포넌트 분리하기 리엑트 4일차인데 어제만든 컴포넌트중 하나를 분리하는 과제를 받았다. 🔨 과제 가이드 - src > pages > Product > components 폴더에 ColorButton 폴더를 생성해주세요 - 생성한 ColorButton 폴더에 ColorButton.js 파일과 ColorButton.scss 파일을 생성해주세요 - [Assignment 3-1]에서 구현했던 Color.js에서 colorButton을 분리해 ColorButton 컴포넌트로 구현해주세요 - Color.scss에서 적용된 스타일도 분리해서 ColorButton.scss에 입력해주세요 - 생성한 컴포넌트를 Color 컴포넌트에서 import 해주세요 - 총 3개의 ColorButton 컴포넌트를 사용하고 props로 각각 다른 데이터..
CRA 처음 리엑트를 설치하면 리엑트는 기본적인 UI기능만을 제공한다. 그래서 개발환경을 구축하기(패키지 설치, 유지보수 등)에 어려움이있는데 이런 문제를 돕기위해 리엑트는 프로젝트를 시작하는데 필요한 개발환경을 세팅해주는 툴체인(toolchain)을 제공한다. 그게 Create-React-App(CRA)고 안의 명령어만으로 리엑트의 개발환경을 구축할 수 있다. Create-React-App 프로젝트이름 명령어를 입력하면 진행할것인지 물어보는데 y를 눌러 설치한다. 이떄 프로젝트 명에는 대문자나 ~,!,(),*,^등의 특수문자를 포함하면 에러가 발생한다. 프로젝트 명은 소문자나 kebaa-case를 사용하여야한다. 설치가 완료되면 터미널 아래에 happy Hacking이라는 문구가 뜬다. 이때 바로 npm st..
DOM 으.. 프론트엔드 과제를하면서 html이나 css는 검색해보면서 하니 금방 할 수 있었다. 하지만 html파일과 js파일을 어떻게 관계시켜야할지 감이 오지 않았다. HTML과 Javascript를 어떻게 연결할까? 1. HTML에서 Javascript로 연결 태그를 이용 js파일을 연결해서 이용 2. Javascript에서 HTML로 연결 DOM을 사용하여 javascript로 HTML에 접근하여 조작하기 자바스크립트에서 html(웹페이지)에 접근하기위해서는 DOM을 사용해야한다. DOM을 사용하여 요소를 생성하거나 내용추가,클래스부여,스타일수정등 여러 작업을 할 수 있다. 근데 DOM이 뭔데...? DOM DOM은 문서(Document) 객체(Object) 모델(Model)의 약자로, HTML 이나 X..
브라우저의 동작원리 주소창으로 네이버를 접속하면 어떤 일이 일어나는지에대해 팀원분이 면접에서 질문을 받았다고 하셨다. 그래서 공부해 볼것을 추천하심 이 질문을 왜하나 했는데 브라우저의 동작원리를 물어보는 것이였다. Browser 처음 공부를 시작했을때는 브라우저가 인터넷이라고 생각했다. 브라우저는 우리가 인터넷에서 서칭할때 사용하는 프로그램으로 크롬,파이어폭스,사파리,엣지같은 소프트웨어를 말한다. 브라우저는 파일명 뒤에 .html이라는 확장자가 붙은 문서을 읽어 브라우저에 띄워준다. 주소창에 naver.com을 입력하면 브라우저 엔진이 입력된 텍스트가 검색어인지 url인지를 먼저 확인한다. 검색어라면 브라우저는 검색엔진의 url에 검색어를 포함한 주소로 페이지를 이동시킨다. url이라면 브라우저 엔진은 네트워크 스레드를 통..
컴퓨터 계속 CS공부를 해야한다고 생각하고있었는데 윈도우 PC를 맞추려고 부품을 찾다보니 '지금이 써야할때!'라는 생각이들었다. 나의 기억은 라이젠 1코어 4쓰레드를 감탄하던 시절에 멈춰있었다는걸 깨달음. 가보자~ 컴퓨터의 구조 컴퓨터는 크게 4가지 기능으로 구성된다. 중앙처리장치: Central Processing Unit로 CPU를 말한다. 주기억장치: Main Memory로 RAM을 말한다. 보조기억장치: Secondary Storage로 HDD,SSD,USB 등이 있다. 입출력장치: Input/Output로 모니터, 마우스같은 입출력장치들을 말한다. 나는 기계를 사러가면 가장먼저 cpu를 본다. 몇core에 몇thread인지 확인해보는데 이 지표들은 cpu의 성능을 나타낸다. 1. CPU(Central ..
Oatuh에서 본 오류들 아직도 난 허접이야.. 구글로그인 오류 딱 들어가자마 나온것이 승인 차단이었다. 흠..invalid_request, missing redirect_uri.. 공식문서에서 찾아봐도 저 에러메세지는 찾지못했다. 음...대체 왜 차단되는거지.. 비밀번호랑 ID랑 콜백주소까지 제대로 적어두었는데.. 일단 늦어서 기록만 해두자. 자고 일어나서 확인하니 너무 충격적이였다. 아래 코드에 원인이 있었다. import { PassportStrategy } from "@nestjs/passport"; import { Strategy } from "passport-google-oauth20"; export class JwtGoogleStrategy extends PassportStrategy(Strategy, "google..
JWT AccessToken 오류 서버를 켜니 아래와 같은 오류가 떴다. '분명 문자열로 리턴될텐데 왜 void 나 any를 하라고하지?' 생각하며 any로 바꿨다. 서버를 켜보니 오류는 사라졌는데 포스트맨으로 요청을 보내면 아무것도 반환되지않았다. 로그인 코드는 확실하게 작동하는것을 확인했으니 문제는 getAccessToken쪽인데 다시보니 return을 안썼었다.;;; 값이 리턴되는게 없으니 void를쓰라고 뜬거였고 string을 썼을때 에러가 났던것이였다. 아..이제 이런 실수는 하고싶지않은데 그래도 나중에 뭘 우선적으로 확인해야할지 더 빠르게 확인할수 있겠지? 이렇게 생각해본다. 이제 엑세스토큰 값 잘 받아온다.
Class와OOP 코테스터디때 팀원들이 설명하면서 class,class하는데 나는 아직도 class가 뭔지 모른다. 딥다이브를 읽다보면 알겠지했는데 딥다이브에서 만나기전에 nestjs에서 만났다. 정확히 class가 뭘까? 1. Class class 객체 지향 프로그래밍에서 객체를 정의하기 위한 상태와 함수로 구성된, 객체를 생성하기위해 변수와 함수를 정의하는 틀이다. tree 라고도하는데 객체를 만들기위한 설명서라고 생각하면된다. class를 사용하여 새로운 객체(인스턴스)를 만들 수 있다. 클래스를 사용하는 이유는 동일한 종류의 객체를 여러개 만들어야하는경우, 같은 기능들을 하나로 묶어서 호풀하면 편하게 사용할수 있기 때문이다. class name{설명}의 설명대로 만들면 new name()의 새로운 인스턴스(객체) ..
create()와 save() mongoDB를 사용하다가 비슷한 기능을 하는 두 메소드를 발견했다. 어떤때에 create를 쓰고 어떤때에 save를 쓰는건지 궁금해져서 알아보았다. 1. 공통점 두 메서드 모두 데이터베이스에 새로운 데이터를 만드는 model 메서드이다. 2. 차이점 1. create() create() 메소드는 save()와 달리, 새로운 document를 만들어 데이베이스에 바로 저장한다. 모델 생성과 저장을 한 번에 처리할 수 있어, 코드를 간결하게 유지할 수 있다. create()를 호출할때 생성할 객체르 전달 하면 된다. //create() 사용 const Join = async (req, res) => { await User.create({ name, email, password }); } 2. save() ..
유저 프로필 이미지 업로드 만들기 1 input 만들기 2. multer middleware 사용하기 설치: $ npm install --save multer 파일을 업로드 할수 있게 해준다. multer를 사용하기위해서는 조건이 딱 1개 있는데 form에 multipart/form-data을 formd에 입력해야한다. multer는 multiple 이 아닌 form을 처리하지 않는다고 쓰여있다. form(method="POST", enctype="multipart/form-data") 이것은 form이 다르게 encode 되게하는것이다. 여기서 enctype은 백엔드로 보내기위해 필요한 encoding tyoe이다.. 2-1 multer middleware 만들기 공식 문서 예 const express = require('express..
유저 프로필 Post edit findByIdAndUpdate()는 update되기전의데이터를 return 해주고 한가지 옵션이 있는데 NEW: true를 주면 findByIdAndupdate가 업데이트된 데이터를 return 해 준다. 즉 mongoose에게 가장 최근에 업데이트된 object를 달라고 하는 것이다. 이렇게 해도 화면상의 값은 바뀌지를 않는데 막상 db에 들어가보면 바뀐것을 확인 할 수 있다. edit-profile.pug에서 loggednUser의 값을 입력하는데, 이값이 어디서 생성되었을까? 이값은 localsMiddleware에서 생성되었다. 여기서 loggedUser를 req.session.user이라고 정의하고 있다. 이 req.sessin.user은 로그인할 때 생성되므로 로그인하는 코드를 확인해보자. 하..
Github Oauth 사용하기 3 보호되어 있는 글입니다.
Github oauth 사용하기 2 깃헙에서 받은 토큰을 access 토큰으로 바꿔줘야한다. client_secret는 오로지 백엔드에서만 존재해야하는데 client_id는 URL에 보여지기 때문에 secret은 이름그래도 보여져서는 안된다.  깃헙에서 준코드를 사용하여 access토큰으로 바꿀수 있다.export const finishGithubLogin = async (req, res) => { const baseUrl = "https://github.com/login/oauth/access_token"; const config = { client_id: process.env.GH_CLIENT, //필요할때 아무곳에서나 쓰려고 .env에 적었다. client_secret: process.env.GH_SECRET, ..
Github Oauth 사용하기 깃허브 로그인을 만들기 위해서는 3 단계를 거쳐야한다.그래서 글을 단계별로 나누었다.자세한 방법은 Github Docs 에서 확인할 수 있다.Github Oauth 사용방법1. 사용자의 GitHub ID 요청사용자를 github으로 보내 로그인하게하면 깃허브에서 비밀번호,보안, 이메일 인증 등을처리해준다.2. 사용자를 GitHub가 다시 본래의 사이트로 돌려보내기(redirect)로그인이 승인되면 유저는 다시 깃헙에서 토큰을 받아서 웹사이트로 돌아온다.그 토큰을 이용하여 유저의 정보에 접근할 수 있다.3.3. 액세스 토큰을 사용하여 API에 접근하기우선 github application이 있어야한다.깃허브에 로그인해서 오른쪽 상단의 본인의 계정의 이미지를 누르면 setting이 있을것이다.세팅을 누르면 ..
mongoose 1. mongoose mongoose는 mongodb를 쓰는데 있어 필수적인 package로 nodejs와 mongoDB를 이어주는 다리역할을 한다. nodejs에서 javascript로 코드를 적을텐데 mongoose가 이 자바스크팁트형식의 코드르 mongoDB에 전달해 주기 때문이다. 2. 장점 1. schema 몽구스의 장점은 schema이다. MongDB같은 NoSQL에는 스키마에대한 메타데이터가 없어 도큐먼트에 무엇을 넣어도 에러가 발생하지 않는다. 하지만 실제로 사용해보면 에러가나는데, 이런 문제를 막기위해 몽구스는 스키마를 도입했다. Mongoose Schema 공식페이지 2. 다양한 모델 메소드 몽구스를 사용해보니 메소드가 확실히 편하다는 느낌을 받았다. find, findOne, find..
백에 데이터 전송 에러 GET 요청 에러 드디어 mongodb파트에 왔는데 처음부터 에러가 떴다.. ReferenceError는 변수의 문제로 알고있다. 값이 없거나 선언되지않았다거나..(조만간 다시 공부하자..) 혼자서 해결해보려했으나 못 찾겠어서 내마음대로 바꿨던 부분을 강의를 보고 다시 똑같이 썻다. 결과는.. 그냥 이름 바꾼거만 바뀌고 에러는 똑같음.. 객체 id 불러오는것을 잘못썼나하고 바꿔봄 못 불러옴... 하지만 콘솔을 찍어보면 잘 나온다. 그렇다면 문제는 pug파일인것인가... ) ) 퍼그 파일을 요리조리 수정해봐도 # 부분이 잘못됬다고만 하고 뭐가 문제인지 모르겠었다. issue에도 없는 내용이고.. 잠시생각해보다가 console에서 값이 뜨는데 못가져오는게 이상해서 return 끝쪽에 video라고 객체를 받..
PUG 사용해보기 1. PUG란? pug는 템플릿을 이용하여 뷰를 만드는 템플릿 엔진이다. 뷰는 사용자가 보는 대상,화면을 말한다. html return export const see = (req, res) => { `Watch video #${req.params.id}©2023 Wetube - All rightsreserved` }; 위와 같은 길다란 html코드를 넣어야할때 pug를 사용하면 단순한문장으로 입력한것을 쉽게 html형식으로 바꿀수있다. 2. 설치방법 1. npm i pug를 입력하여 설치한다. 2. express 에게 html 헬퍼로 pug를 쓰겠다고 server.js 로알려주기.(pug를 뷰엔진으로 설정한다) sever.js에 app.use("viewengine", "pug"); 적으면 된다. 3. p..
middle(soft)ware 운영체제와 실행되는 애플리케이션 사이에 존재하는 소프트웨어이다. 기본적으로 분산된 애플리케이션의 통신 및 데이터 관리를 가능하게 한다. 데이터와 데이터베이스가 "파이프" 사이를 쉽게 통과할 수 있도록 두 가지 애플리케이션을 함께 연결하기 때문에 배관이라고도하며, 미들웨어를 사용하면 사용자가 웹 브라우저에서 양식을 제출하거나 웹 서버가 사용자의 프로필을 기반으로 동적 웹 페이지를 반환하도록 요청할 수 있다. morgan? HTTP request loogr middleware for node.js morgan은 nodjs용 request logger middleware다. morgan 함수를 호출하면 내가 설정한대로 middleware를 return해 준다. 설치방법 npm i morgan morgan 함수..
서버만들기 0. 서버란? 서버는 항상 인터넷에 열결되어있는 컴퓨터로 사용자의 요청(request)를 상시 듣고(listening)있는 컴퓨터다. 요청(request)? 사용자가 브라우저를통해 무언가를 요청하는 것 ex) 로그인id,password를 입력한 로그인요청, 뉴스 제목을 누르면 뉴스자료를 달라는 요청 서버에 요청하는것은 나의 행동을 듣는 서버에만 요청을 보낼수있기때문에 우선 서버가 어떤 port번호를 들을지를 정해줘야한다. 1. 포트번호 지정하기 const PORT = 4000; app.listen(PORT); //위 아래 모두 4000을 사용한다 app.listen(4000); 서버는 모든 것을 감시할 수 없기때문에 특정 부분을 계속해서 감시하려면 port가 필요하다. port는 컴퓨터의 수많은 문중 하..
BABEL 과 nodemon 1. BABEL 이란? Babel은 자바스크립트 컴파일러이다. 무슨말이냐면, ES6 코드(최신js문법)을 babel이 nodejs가 자바스크립트를 이해할수 있도록 구버전의 코드로 변환(transpile)해주는 도구이다. 즉, 자바스크립트 최신문법을 쓰고 싶다면 babel을 사용하면 된다. (위에는 스터디때 공부한거 설명하려고 쓰려고 만든이미지) 2. 설치방법 BABEL 공식사이트 1) 설치 명령어 입력 입력코드: npm install @babel/core @babel/node --save-dev 위 코드를 입력하고 package.json파일을 보면 devDependencies가 생긴것을 확인 할 수 있다. --save-dev 만약 명령어에서 --save-dev를 빼고 npm을 실행한다면 "dependen..
package.json 처음 공부했을때는 npm init을 치고 그냥 시키는대로만 만들고 말았는데 혼자서 공부하다보니 package.json의 중요성을 느껴서 좀 더 공부해보았다. 1. package.json이란? nodejs로 서버를 만들때 가장 처음으로 만들어보는 파일. 이라고만하면 면접은 탈락이겠지.. package.json은 node의 프로젝트 루트에 존재하는 파일로 프로젝트와 관련된 메타데이터를 보유하고있는 문서파일이라고 보면된다. 2. package.json 만들기 package.json을 만드는 방법에는 두가지가 있다. (1) npm init / yarn init 이 방법을 사용하려면 npm이 필요한데 node를 설치하면 npm은 자동적으로 설치되기때문에 node가 시스템에 설치되어 있어야 한다. 위 방법은 컴퓨터..

티스토리툴바