1) 완강에 도전할 강의 1개를 선택해 주세요.진도율 30% 미만인 강의라면모두 참여가 가능하답니다. 2) 선택한 강의의 학습 알림을 설정해 주세요.여러분들의 수강을 독려할 수 있는학습 알림을 설정해 주세요.카카오톡 메시지로 알림톡을 보내드려요. 3) 페이지에 댓글로 선택한강의명과 참가 다짐을 작성해 주세요!댓글 작성 후 자동으로 참가 신청이 완료됩니다.참가 신청과 동시에 강의를 수강해 주시면 됩니다.    2025년 2월 3일(월) 참여 완료!

회사우리팀에서 프로젝트 갖고오니 마니 하는 중.. 전무님 눈치보임.. 분위기 이상함.새로운 시니어 팀원과 팀장님 왔는데.. 팀장님은 신사업 안해봤대서 난관이 예상됨 ㅋㅋ팀에서 Tool 너무 많이 쓴다고... 노션 쓰지말자는데... 이것 또한 난관일듯...토스 TPD는 떨어졌다 ㅎㅎ 공부포트폴리오 만드는 강의 수강 중인데 다른 사람의 포트폴리오를 볼 수 있다는 장점은 있지만 내용 자체는 주니어에게 더 맞는듯kotlin 강의 시작... 아직은 열심히 잔디 심고 있음 🌿🐛 내년에 개발자 취직을 노려볼까?방송대 2학년 1학기 수강신청함 ㅋㅋ 1학년 때 유비쿼터스 F 맞아서 재수강.. 이번에는 이산수학이랑 Java 해야하는데 미리 공부해야겠다.건강붓기 안빠지는거 때문에 피 검사 했는데 류마티스 양성..;; 당..

1. brew 설치하기https://brew.sh/ HomebrewThe Missing Package Manager for macOS (or Linux).brew.sh복사하여 Terminal에 복사 붙여넣기 a. brew 설치 중 Error가 날 경우적혀있는 대로 적어주기eval $(/opt/homebrew/bin/brew shellenv) b. 적은 후, brew help를 적어서 잘 설치되었는지 확인 + Homebrew는?macOS용 패키지 관리자. 터미널에서 손쉽게 소프트웨어를 설치/업데이트/관리할 수 있도록 도와주는 도구 장점1. 최신 버전 유지가 편리함macOS에는 기본적으로 git이 설치되어 있지만, 버전이 오래된 경우가 많음.brew install git을 하면 최신 버전을 쉽게 설치할 수 ..

프론트엔드 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..

pagination 한 번에 많은 데이터를 렌더하게 되면 성능이 떨어지면서 사용자 편의성이 감소하기 때문에 데이터를 나눠 내려받게 되는데 가장 많이 쓰이는 페이지를 나누는 방식을 뜻하는 것이 바로 pagination 기능이다. query parameter pagination을 위해 사용하는 것이 쿼리 파라미터(쿼리 스트링)이며, 말 그대로 엔드포인드 뒤에 ?(쿼리)를 보내는 요처을 한다. limit과 offset을 설정할 수 있으며, offset은 데이터가 시작하는 위치(index)를 뜻하고, limit은 내려받을 데이터의 수를 뜻한다. 우선 버튼을 클릭했을 때 정상적으로 동작하는지 확인하기 위해 console.log를 적어줘야 한다. const getBtnIndex = () => { console.lo..

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..

들어가기 전에 우리가 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..

// 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..

코딩에서 사용되는 컨벤션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..

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. 이름을 변..