본문 바로가기

전체 글

(351)
yoga 프로젝트 작업일지 - 5 # 이제 클라이언트에서 로그인 하는 부분을 구현해봅시다. [ Login.js ] 1. 이전과 마찬가지로 서버단에 axios 요청을을 하기 위해 임포트 합니다. 2. 로그인 성공시 쿠키를 배포하여, 권한 관리를 해줄거기 때문에 npm에서 쿠키 라이브러리를 다운 받은 후, 임포트 합니다. 3. 서버 이동을 하기위해 navigate 훅을 임포트합니다. 4. 마찬가지로 서버쪽 url은 고정이기에 변수로 선언하고 이용할 것 입니다. import axios from "axios"; import { useState } from "react"; import { useCookies } from "react-cookie"; import { useNavigate } from "react-router-dom"; const s..
yoga 프로젝트 작업일지 - 4 # 오늘 할 것은..? 이전 포스팅에 서버단을 구현했으므로, 오늘은 클라이언트 단에 관한 포스팅을 해볼까 합니다. [ Register.js ] 1. 입력한 데이터를 저장할 용도를 쓸 useState 값. 2. 서버단에 요청을할 용도를 쓸 axios 3. 사이트 이동 용도로 쓸 useNavigate import { useState, useEffect } from 'react' import axios from 'axios' import { useNavigate } from "react-router-dom"; 1. server단에 url에 아래와 같습니다. 아래의 url로 요청할 것 이고 앞부분은 바뀌지 않을꺼기 때문에 선언해서 이용하려고 합니다. const server = { "url": "http://lo..
yoga 프로젝트 작업일지 - 3 # 들어가기에 앞서.. YogaA!를 만들면서 여러 작업에 관여하면서 기여했지만, 일단 내가 맡은 할당량만 블로그에 리뷰합니다. 그리고 디자인적인 부분의 구현은 스킵합니다. 자세한 작업을 알고 싶다면, 깃허브 주소를 남길테니 가서보시길.. 저는 로그인및, 회원 가입, 헤더, 푸터의 디자인 및 기능 추가를 맡아서 진행했습니다. 서버단 부터 구현을 들어갔습니다. 여러 미들웨어가 있고 app.js에서 라우팅하는 형태이지만, 저는 로그인 회원가입을 맡았으므로 그 부분에 코드만 리뷰합니다. [ 서버단 구현 ] {먼저 회원가입을 구현합니다} exprss를 이용하여 서버를 구현했으므로 import하고, crypto를 이용하여 해쉬를 적용했습니다 jsonwebtoken 라이브러리를 이용하여 라이브러리를 구현햇으며, s..
자바스크립트 배열 선언 및 초기화 시 편안한 방법 정리 /* Array.from()으로 길이가 5, 값이 0인 배열 생성하기 */ const arr = Array.from({length: 5}, () => 0); console.log(arr); // => Array(5) [0, 0, 0, 0, 0] console.log(arr[0]); // => 0 console.log(arr.length); // => 5 Array.from()의 첫번째 매개변수로 {length: 원하는 길이} 객체를, 두번째 매개변수로 원하는 값을 반환하는 콜백함수를 넘겨주면 된다. /* Array.from()으로 길이가 5, 값이 (0~5)인 배열 생성 */ const arr = Array.from({length: 5}, (v, i) => i); // i(index) 1씩 증가 cons..
yoga 프로젝트 작업일지 - 2 # 시작하기 전에... 프로젝트는 이미 끝났지만 당시에는 바빠서 작업 일지를 메모장에만 적고, 여기에 적지를 못함. 지금이라도 적고자 한다. # 일단 협업을 시작하면서 github 버전관리를 맨땅에 헤딩하면서 버전관리 관련 오류를 무수히 겪었다. 그에 관련한 명령어들을 정리하고자 합니다. # 깃 허브 초기 세팅 방법 1. git bash 열기 2. git init 3. git remote add origin 프로젝트 깃 주소 >> 세팅 완료 # 수정 코드 업로드 방법 1. git add -A 2. git commit -m "메모내용작성하기" 3. git checkout 브랜치이름 4. git push origin 브랜치 이름 5. 깃허브 가서 확인 후 pull request # 새로운 브랜치 생성 방법 ..
yoga 프로젝트 작업일지 - 1 저장소를 pull 하고 내가 작업을 하고 나서 push를 하려고 했는데 push가 안됨 이유는.. push를 하려고 할 때 brach를 만든 이후 해야했었음. # 브렌치 생성 git checkout -b yogabranch # 그리고 brach에 push git push origin yogabranch # 추후 관리자가 merge 했었음
리액트를 베이스로 데이터를 요청하고 화면에 보여줘 보자! - (2) # 이전 내용 이전에 일정 width를 넘어가면 줄 바꿈 하는 ui를 구현해주지 못했다. 이 부분을 수정하는 데 성공했다. [ 설명 ] 입력받은 태그 목록들을 일정 width에 도달하면 줄 바꿈을 하려면 display: flex; 와 flex-wrap: wrap; 이 필요하다 우리는 현재 app이라는 클래스를 가지고 있는 div태그에 카드를 추가하고 있습니다. [ 컴포넌트 코드 ] {loading === true ? ( data.map((information) => ( 카드 { information.gender } { information.name.first } { information.name.last } { information.phone } { information.email } )) ):(Load..
리액트를 베이스로 데이터를 요청하고 화면에 보여줘 보자! -(1) # 들어가기에 앞서... 최근 라이브 코딩할 때 주어진 과제를 주제로 하려고 합니다. 처음 해보는 방식이였는데 너무 긴장되고 아무 생각도 안 나서 중도 포기 나왔지만, 해보고 싶었기에 해봤고 해 본 과정을 복습 차 포스팅합니다. [ 요구 사항 ] 정확히 기억은 안나지만 대충 데이터를 요청하면 해당 데이터는 사람 하나하나의 인적사항이 있습니다. 해당 인적사항을 카드 형태로 보여주는 것이 있었고, 가져오는 동안 Lodading...이라는 문구가 나오게 하는 거였습니다. 추가적으로 ui도 입맛에 맞게 구현할 수 있으면 해 보라 하는 것도 있었던 거 같은데 이건 패스하겠습니다. [코드] 해당 url로 axios를 이용하여 데이터를 요청하는 코드 async function axiousCall() { await a..

728x90