본문 바로가기

wecode14

1차 프로젝트 개인 회고 개인 회고 프로젝트 명 : 따봉 가락신 🏖 클론 대상 사이트 : 하바이아나스 브라질 Havaianas 팀원 FE 박승민 : 메인 페이지, 장바구니 송경용 : 로그인, 회원가입 임채동 : 메인 페이지, 상품 목록 페이지 최슬기 : NavBar, 상품 상세 페이지 BE 길성민 : 제품 상세 API, 장바구니 API, 카테고리 API, 색상별 제품 조회 API 문정진 : 로그인/회원가입 API, 메인 페이지 API, 필터링, 추천 알고리즘 API, 구매 API 기술 스택 FE: React, React-router-dom, SCSS, 이외 라이브러리 없이 진행 BE: Node,js, Express, TypeORM, MySQL 내가 담당한 티켓 (메인 페이지 일부 컴포넌트, 상품 목록 페이지) 메인 페이지 { 베.. 2022. 8. 28.
코드카타 못 푼 문제 (재귀 함수) (최단 경로?) 매일 진행하는 코드카타 매일 진행하는 코드카타에 처음으로 못 푸는 문제가 나왔습니다!! 아주 좋네요!! 매일 못 푸는 문제가 나왔으면 좋겠습니다. 페어 프로그래밍 짝과 10분 가량 이야기해본 결과 재귀함수로 풀어야 한다는건 알겠는데 풀이를 모르겠다는 의견으로 합일되서 답을 보고 이해해보기로 했습니다. 구글링을 통해 아래 해답을 찾았고, 아래 해답을 한명씩 돌아가며 { 설명 : 키보드 } 역할을 해보았습니다. 그리고 마지막은 누가누가 외운거 빨리 치나 경쟁도 해봤습니다. ㅋㅋ 재귀함수 문제는 항상 어렵다고 느껴지는데, 이 문제는 이해하고 답을 외우는 형태로 가니 오히려 이해가 된것 같은 느낌이네요. 재귀함수 많이 풀어봐야겠습니다. 문제 양수로 이루어진 m x n 그리드를 인자로 드립니다. 상단 왼쪽에서 시.. 2022. 8. 18.
[React.JS] shouldComponentUpdate(), React.memo() 공식 문서에서는? shouldComponenteUpdate(nextProps, nextState) 생활코딩 강의 중 shouldComponentUpdate() 가 나왔습니다. 생활 코딩 Class형 컴포넌트 리액트 강의 중 state의 배열을 array.push()를 통해 state를 변경 하는것이 불가능 하고, 새로운 배열을 만들어서 넣어야 한다고 했습니다. 여기서 한 걸음 더 나아가 추가 강의로 왜 그런지 찝찝한 분들을 위한 강의가 있었습니다. 그래서 그게 뭐임? shouldComponentUpdate() 함수는 props, state가 새로운 값으로 갱신되어 렌더링이 발생되기 직전에 호출됩니다. 해당 함수에서 return false일 경우 렌더링이 일어나지 않고, return true가 될 경우 렌.. 2022. 8. 15.
[React.JS] 함수형 컴포넌트 => 클래스형 컴포넌트 import { useEffect, useState } from 'react'; import Comment from './Comment'; import './Article.scss'; function Article({ userId, profileImg, feedContents, feedImg, commentsListProps, }) { const [loggedInUserId] = useState('chaedong'); const [commentsList, setCommentsList] = useState([]); const [commentContent, setCommentContent] = useState(''); const inpu.. 2022. 8. 12.
[ReactJS] Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용) Input 창 입력에 따른 검색 기능 (Arrays.filter() 활용) 1시간 이내로 끝나버린 과제여서 난이도 설정이 조금 아쉬웠다. 그래도 이렇게 토이 프로젝트를 통해 배운 내용들을 복습 하니 너무 좋았다. 리액트라는 걸 활용해 이렇게 뭔가 만들어 냈다는 것이 너무나 뿌듯하고 좋았던 과제였다. 아래는 해당 과제의 핵심(?)인 검색 기능 ! import React, { useEffect, useRef, useState } from 'react'; import SearchBox from './Components/SearchBox/SearchBox'; import CardList from './Components/CardList/CardList'; import .. 2022. 8. 12.
[Javascript] 동기와 비동기 헷갈림을 없애준 한 문장 동기 비동기 많이 헷갈리더라구요. 물론 저도 설명은 많이 들어서 알고 있었습니다. 동기적인 코드는 위에어 아래로 순차적으로 실행되지만 비동기적인 처리는 (setTImeout, fetch)같은 함수는 해당 라인 실행이 끝나지 않았지만 아래 코드들이 실행이 된다. 이것이 비동기다.... 물론 다 맞는 말입니다. .. 맞는데.... 다 아는데... 설명도 어렵고, 실제로 제대로 이해했다고 말하기가 애매하더라구요... 그래서 정말 많이 찾아봤습니다. 비동기란 무엇인지, async의 뜻이 뭔지, promise 객체가 뭔지, then이 뭔지... 이 모든 고민을 해결해 준 단 한 문장. 근데 이 모든 고민을 해결해 준 단 한 문장이 있었습니다. 동기란 "응답"과 "요청"이 동시에 일어나는 것 비동기란 "응답"과 ".. 2022. 8. 11.
[React.js] 나의 this만 undefined가 아닌 이유 리액트 클래스형 컴포넌트를 공부하고 있습니다. 위코드에서 함수형 컴포넌트를 기준으로 리액트를 배우는 중입니다. 그런데 자꾸 공부하면 할수록 클래스형 컴포넌트도 배워서 좀 더 리액트에 대해 잘 알고 싶다는 생각이 들었습니다. 공식문서를 보면 대부분이 클래스형 컴포넌트, 함수형 컴포넌트 2가지를 병행해서 설명해주고 있는데, 그것이 클래스형 컴포넌트를 기준으로 배운 사람을 위함일수도 있지만, 함수형 컴포넌트만으로는 설명이 안되는 부분이 있어서 일지도 모르겠다는 생각을 했거든요.... 생활코딩에 클래스형 컴포넌트 리액트 강의를 보다가... 그래서 생활코딩 리액트 (클래스형 컴포넌트) 강의를 보고 있습니다. 그런데 강의에서 this바인딩에 대해 알려주는 부분에서 저의 this와 egoing님의 this가 다른 것.. 2022. 8. 11.
remote에 있는 branch 가져오는 방법 (git pull 대신) 깃 정말 어려워요 😭 깃, 깃헙을 개인 레포와 잔디 찍기용(?)으로만 사용하다 부트캠프에서 협업을 위해 제대로 사용하다 보니 정말 익숙해지는 것이 힘들다는걸 느끼고 있습니다. 😭😭 오늘은 리모트에 있는 브랜치를 git pull 없이 깨끗하게 있는 그대로! 가져오는 방법을 적으려 합니다. 이 글은 다른 사람들을 위한 글이라기 보단 제 자신이 다시 보기 위한 글이므로 더 퀄리티가 좋은 이 글 을 보시면 됩니다. 클릭! git fetch remote에 있는 "review/chaedie" 브랜치를 땡겨 오고 싶을 때 (로컬엔 해당 브랜치가 없는 상태) $ git fetch origin review/chaedie 위 명령어를 치면 리모트에 있는 브랜치를 당겨와서 "FETCH_HEAD"라는 브랜치로 저장됩니다. $.. 2022. 8. 11.
[React.js] 인풋 태그 위 이미지 태그 없애기 인풋태그에 값 적으면 그 위 이미지, 글자 없애기 과제 아닌데 팀원들끼리 막 아이디어 내면서 재밌게 개발했습니다. ㅋㅋㅋ 이것저것 많이 했는데, 포스팅 하면 좋을만한 개발건, 리팩토링건이 있어서 기록으로 남깁니다. 말로 설명하는게 어려워서 그냥 코드 위주로 이야기하겠습니다. ㅎㅎ 위 코드처럼 인풋창 위에 이미지, placholder가 있습니다. 인풋창에 밸류값이 주어지면 해당 이미지와 글자를 없애보았습니다. 글자는 placeholder로 넣어주면 인풋입력할 때 자동적으로 사라집니다 여기에 좀 어울리게 색을 넣기 위해 &::placeholder { opacity: 0.5; }를 넣어줬습니다. 이미지는 useState를 활용해 Change이벤트가 발동하면 hasValue State가 true로 바뀌고, 이를.. 2022. 8. 4.
[javascript] form 태그를 이용한 input event listener form 태그를 활용한 리팩토링 주석 처리한 코드가 이전 코드였던 부분입니다. 아래는 이전 코드에서의 이벤트 리슨 상황입니다. input창에 keydown 이벤트가 발생 (keyCode가 "Enter, NumpadEnter"일 때) Button태그에 Click이벤트 이 코드를 div를 form 태그로 바꿔주어 form태그를 리슨하면 훨씬 간결하게 바꿀 수 있습니다. form태그에 submit이 일어나는지 리슨 (Enter Press, NumpadEnter Press, Click 3가지 케이스 전부 콜백펑션을 호출합니다.) // 태그 선택 // const inputComment = document.querySelector('.articleInputComment input'); // const submitC.. 2022. 7. 28.

티스토리툴바