본문 바로가기

전체 글40

1차 프로젝트 crowsSeven 쇼핑몰 후기 프론트엔드 GitHub repository 백엔드 GitHub repository 💡 프로젝트 소개 법랑 소재의 식기와 굿즈를 판매하는 크로우캐년 사이트 클론 코딩 저작권 문제로 이미지는 unsplash에서 제공하는 무료 이미지로 대체 📚 기술 스택 프론트엔드 (5명) JavsScript (ES6+) ReactJS React-Router HTML5 SASS 백엔드 (2명) Python Django Bcrypt MySQL pyjwt 협업 Tool Git Slack Trello Notion 🗓 개발 기간 5월 23일 - 6월 3일 (11일) 🛠 구현 기능 작업한 부분은 파란색으로 표시 회원가입 / 로그인 ID / PW 유효성 검사 필수 옵션 선택 후 가입 메인페이지 Nav / Footer Search Box.. 2022. 6. 7.
query parameter를 사용하여 pagination 구현하기 pagination 한 번에 많은 데이터를 렌더하게 되면 성능이 떨어지면서 사용자 편의성이 감소하기 때문에 데이터를 나눠 내려받게 되는데 가장 많이 쓰이는 페이지를 나누는 방식을 뜻하는 것이 바로 pagination 기능이다. query parameter pagination을 위해 사용하는 것이 쿼리 파라미터(쿼리 스트링)이며, 말 그대로 엔드포인드 뒤에 ?(쿼리)를 보내는 요처을 한다. limit과 offset을 설정할 수 있으며, offset은 데이터가 시작하는 위치(index)를 뜻하고, limit은 내려받을 데이터의 수를 뜻한다. 우선 버튼을 클릭했을 때 정상적으로 동작하는지 확인하기 위해 console.log를 적어줘야 한다. const getBtnIndex = () => { console.lo.. 2022. 6. 5.
useParams와 useLocation을 이용한 페이지 이동 (2) page를 이동할 때 쓰는 next 혹은 previous 버튼 또한 리액트 훅을 사용하여 구현할 수 있다. url의 id 값이 nex를 누를 때는 +1이, previous를 누르면 -1이 되면 된다. Previous Next const goToPrevious = () => { navigate(`/monsters/detail/${params.id - 1}`); }; const goToNext = () => { navigate(`/monsters/detail/${params.id + 1}`); }; 하지만 단순히 이런 함수를 만들어도 제대로 동작하지 않는다. 이유는 params.id 에 저장되는 값이 string 이기 때문이다. 문자열 - 1은 연산이 되지만 + 1은 되지 않는 것 ! const goToPr.. 2022. 6. 5.
useParams와 useLocation을 이용한 페이지 이동 (1) 들어가기 전에 우리가 Web을 사용하다 보면 브라우저의 url이 페이지마다 바뀌는 것을 볼 수 있다. 리액트에서는 useParams와 useLocation 훅을 활용하여 구현할 수 있는데 이 두가지 훅들이 어떤 기능을 하는지 먼저 알아보자. const params = useParams(); console.log(params); useParams를 console로 확인해보면 객체Object로 id값이 들어있는 것을 볼 수 있다. 이 id값은 Rounter.js에 입력했던 path URL의 id 이다. export default function Router() { return ( ); } 그럼 useLocation을 console로 확인하면 어떤 값이 나올까? const location = useLocati.. 2022. 6. 5.
Comment component // import { useEffect } from "react"; import { useState } from "react"; const Comment = () => { const [userInput, setUserInput] = useState({ nickname: "", comment: "", }); const [commentArr, setCommentArr] = useState([]); const { nickname, comment } = userInput; const onChange = (e) => { e.preventDefault(); const { value, name } = e.target; setUserInput({ ...userInput, [name]: value, }); }; cons.. 2022. 5. 30.
import order convention 코딩에서 사용되는 컨벤션Convention의 뜻은 '협업을 위한 규칙 or 표준 작성 기준'으로 보면 된다. react를 사용하다 보면 import를 많이 쓰게 되는데, import 순서에도 컨벤션이 있다고 한다. 1번이 가장 위쪽에 입력되고 8번이 가장 아래쪽에 입력되는 순서이다. 1. 노드 빌트인 모듈 1. node "builtin" modules import fs from 'fs'; import path from 'path'; 2. 외부 모듈 2. "external" modules import _ from 'lodash'; import chalk from 'chalk'; 3. 내부 모듈 (내부 경로를 다루기 위해 웹팩이나 경로를 따로 설정한 경우) 3. "internal" modules (if yo.. 2022. 5. 29.
[Git] 폴더 이름 소문자 변경하기 Local 폴더에서의 폴더명을 바꿨었다. 자꾸 컴포넌트를 생성했었던 버릇 때문에 첫문자를 대문자를 썼었다가 public/Data > public/data로 변경했던 것이다. 그런데 멘토님에게 이런 피드백을 받게 되었다. 아무 생각없이 변경됐겠거니 push를 했는데 GitHub에 들어가보니 여전히 Data로 폴더명이 적혀 있었다. 찾아보니 Git은 파일명만 일치하면 같다고 인식하기 때문에 대소문자 변화는 인식하지 못 한다고 한다. 그래서 폴더명을 변경할 때 사용하는 명령어가 git mv 이다. Git mv ? 과정은 다음과 같다. 0. 현재 파일명을 확인한다. git ls-files 1. git mv [기존 이름] [변경할 이름] 을 작성한다. git mv src/Home src/home 2. 이름을 변.. 2022. 5. 29.
[JS] key값으로 value 값 찾아서 반환하기 문제 💡 로마자에서 숫자로 바꾸기 1~3999 사이의 로마자 s를 인자로 주면 그에 해당하는 숫자를 반환해주세요. 로마 숫자를 숫자로 표기한 각각의 Symbol과 Value는 다음과 같습니다. I = 1, V = 5, X = 10, L = 50, C = 100, D = 500, M = 1000. 로마자를 숫자로 읽는 방법은 로마자를 왼쪽부터 차례대로 더하면 됩니다. III = 3 XII = 12 XXVII = 27 입니다. 그런데 4를 표현할 때는 IIII가 아니라 IV 입니다. 뒤의 숫자에서 앞의 숫자를 빼주면 됩니다. 9는 IX입니다. I는 V와 X앞에 와서 4, 9 X는 L, C앞에 와서 40, 90 C는 D, M앞에 와서 400, 900 입니다. 풀이 function romanToNum(s){ c.. 2022. 5. 22.
input과 type으로 알아보는 useState ⚛️ 들어가기 전에 westagram 구현 중 useState 부분에 관한 이해가 부족하여 실습을 진행하였으나 여럿 에러들을 만났다. useState에 대한 개념을 다시 잡고자 만났던 에러들 중 하나를 뜯어보며 글을 남겨보려 한다. useState의 기본적인 개념 useState는 리액트 16.8에서 나온 Hook 기능 중 하나이며 컴포넌트에서 동적인 상태를 관리할 수 있다. const [state, setState] = useState(initialState); https://reactjs.org/docs/hooks-state.html Using the State Hook – React A JavaScript library for building user interfaces reactjs.org 첫번째 값인.. 2022. 5. 21.
NPM Capital letters 설치 오류 리액트 연습을 위해 폴더를 만들고 npx create-react-app . 을 실행했는데 오류가 생겼다. name can no longer contain capital letters 말 그대로 대문자를 포함할 수 없다는 것이다. devseulgi@Seulgiui-MacBookAir ReactPractice % npx create-react-app . Cannot create a project named "ReactPractice" because of npm naming restrictions: * name can no longer contain capital letters Please choose a different project name. devseulgi@Seulgiui-MacBookAir Reac.. 2022. 5. 16.
[JS] 중복되는 시작 단어(Prefix) 찾기 문제 💡 strs은 단어가 담긴 배열입니다. 공통된 시작 단어(prefix)를 반환해주세요. 예를 들어 strs = ['start', 'stair', 'step'] return은 'st' strs = ['start', 'wework', 'today'] return은 ' '; 들어가기 전에 처음에 문제만 보고 쉽다고 생각했었지만, 제한 시간 1시간 안에 풀지 못했던 문제이다. 이후에 다른 사람의 풀이를 확인하고 나서야 접근 방법 자체는 근접했지만 왜 풀지 못했는지 알 수 있었다. 복잡한 풀이일수록 중간 중간에 console.log를 통해 확인하는 습관을 가지고, 풀리지 않는다면 사고의 전환을 꼭 해보자! 풀이 const getPrefix = strs => { for (let i=1; i 2022. 5. 14.
[JS] 문자 뒤집기 문제 💡 숫자인 num을 인자로 넘겨주면, 뒤집은 모양이 num과 똑같은지 여부를 반환해주세요. num: 숫자 / return: true or false (뒤집은 모양이 num와 똑같은지 여부) 예를 들어, num = 123 return false => 뒤집은 모양이 321 이기 때문 num = 1221 return true => 뒤집은 모양이 1221 이기 때문 num = -121 return false => 뒤집은 모양이 121- 이기 때문 num = 10 return false => 뒤집은 모양이 01 이기 때문 풀이 const sameReverse = num => { let numString = num.toString(); let reversed = numString.split("").revers.. 2022. 5. 14.
[JS] 특정 수를 더한 배열 출력하기 문제 twoSum함수에 숫자배열과 '특정 수'를 인자로 넘기면, 더해서 '특정 수'가 나오는 index를 배열에 담아 return해 주세요. nums : 숫자 배열 target : 두 수를 더해서 나올 수 있는 합계 return : 두 수의 index를 가진 숫자 배열 예를 들어, nums은 [4, 9, 11, 14] target은 13 nums[0] + nums[1] = 4 + 9 = 13 이죠? 그러면 [0, 1]이 return 되어야 합니다. ( 가정 : target으로 보내는 합계의 조합은 배열 전체 중에 2개 밖에 없다고 가정하겠습니다.) 풀이 const twoSum = (nums, target) => { // twoSum함수에 숫자 배열과 '특정 수'를 인자로 넘기면, // 더해서 '특정 수'.. 2022. 5. 10.
[TIL] React Intro 🚀 학습 목표 어떠한 흐름으로 오늘날 React가 많이 사용되고 있는지 설명할 수 있다. React가 무엇인지 정의할 수 있다. CRA를 설치하고 폴더와 파일이 어떻게 구성되어 있는지 설명할 수 있다. Component의 개념과 종류에 대해 설명할 수 있다. JSX 를 정의하고 기본 특성에 대해 설명할 수 있다. 기존에 구현한 Westagram을 React로 변환해 렌더링 할 수 있다. 💡 무조건 코드 많이 쳐서 익히자! 3세대 웹이 나타난 이유? 웹이 발전하며 처리해야할 것이 많아짐 프론트엔드와 백엔드가 나눠짐 대표적인 웹 프레임워크 & 라이브러리 앵귤러Angular → 프레임워크 뷰Vue → 프레임워크 리액트React → 라이브러리 웹 프레임워크 & 라이브러리의 차이 내장 기능 유무 차이 프레임워크 .. 2022. 5. 9.
React & JSX 기초 Why React? React는 페이스북 엔지니어들에 의해 만들어진 JavaScript 라이브러리이다. 사람들이 React를 선택한 이유는 다음과 같다. 빠른 속도. React로 만들어진 앱은 복잡한 업데이트를 다룰 수 있으면서도 반응성이 좋다. 모듈성. 큰 파일이 아닌 작고 재사용이 가능한 파일을 사용. React의 모듈성은 JavaScript의 유지보수 관리에 좋은 솔루션이 된다. 확장성. 유동적인 데이터를 다루는 대형 프로그램이야말로 React에 적합하다. 유연성. 사람들은 아직도 React를 어디에 쓸 수 있을지 고민하며 이곳 저곳에 접목한다. 유명성. 취뽀에도 한 몫한다. 이건 또 무슨 새로운 언어인고 const h1 = Helllo world; 🤨? 자바스크립트와 HTML의 짬뽕의 모습. 조금.. 2022. 5. 8.

티스토리툴바