본문 바로가기

전체 글198

2차 프로젝트 계획 또는 다짐 2차 프로젝트 계획 또는 다짐 1차 스프린트 플래닝 미팅 ( 8.29 월요일 ) 트렐로 생성, 유저 행동 플로우 차트 생각하면서 티켓 생성 FE : UI, UX, Data 에 대한 거의 모든 것 을 트렐로에 문서화 해둬야한다. BE : API Docs를 미리 문서화 해두는게 좋을것 같다. 티켓 FE: 티켓 생성 시 UI, 기능은 분리해서 짜야 하고, 최대한 세분화 해서 짜는게 효율적인 티켓 배분, 트래킹에 도움이 된다. 티켓 생성 시에 작성된 UI, 기능이 전부가 아니라는걸 인지해야한다. 완성도 높은 프로젝트가 되기 위해선 미리 선정한 티켓이 100이라면 50의 부가적인 기능이 필수적이다. 이건 추가기능 구현의 문제가 아니라, 필수 기능을 구현할 때 미리 생각지 못한 당연한 부가기능들이 많음을 간과하기 .. 2022. 8. 28.
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.
프로그래머스 2022 데브매칭 하반기 과제 테스트 후기 개요 프로그래머스에서 진행하는 프론트엔드 데브 매칭 과제 테스트를 치뤘다. 시험은 3시간에 걸친 시험이었고, 이전 과제 테스트 모범 답안을 보면 Vanilla JS를 통해 SPA를 구현하는 시험이었는데, 이번 시험도 마찬가지로 이전 과제들 처럼 Vanilla JS를 통해 SPA를 구현하는 시험이었다. 웹 개발 공부를 시작한지 얼마 안된 FE개발자인 내가 이번 시험을 통해 감히 유추해보자면, 현업에서 Vanilla JS 역량이 가장 중요한 역량이라는 것이다. 그리고 이를 통해 SPA를 구현하라는 과제를 내주었다는 것은 ReactJS, VueJS, Svelt 등 라이브러리, 프레임워크와 관계없이 SPA에 대한 명확한 개념을 알고 있는것이 중요하다는 점을 유추 할수 있었다. 이는 네이버의 무료 웹개발 강의 사.. 2022. 8. 28.
[React.JS] Fetch문 Try-Catch로 Error handling하기, Async-Await로 가독성 개선하기 Fetch문은 필수 프로젝트에서 Fetch문은 당연히 필수적으로 사용하는 부분입니다. 근데 이 Fetch문에서 문제가 생기는 경우가 많다는 걸 조금씩 깨닫고 있습니다. Fetch가 끝나지 않았는데 존재하지도 않는 데이터로 map()함수를 돌린다던지....(이전 포스팅) 등등 BE-FE의 통신 부분인 Fetch문이 굉장히 중요합니다. 그렇다면 FE에서도 이런 Fetch문을 그냥 둘수는 없지 않을까요? BE에서 여러가지 경우의 수를 생각하며 Validation과 Try-Catch문에 힘을 쓰는데, 우리도 Fetch에서 에러가 났을 때 확인도 하고, 처리도 할 수 있도록 해야 하지 않을까요? 단순 Fetch 코드 useEffect(() => { fetch('/data/releaseProducts.jso.. 2022. 8. 22.
[React.js] fetch로 받은 데이터 map() 에러 동적 라우팅 강의를 보다가 동적 라우팅 강의를 보며 코드를 따라 치다 문제가 되는 부분이 생겼습니다. fetch를 사용해서 users 데이터를 데려온 뒤, map으로 뿌려주는 형태였는데, users 패치가 완성 되기 전 map으로 뿌리는 렌더링을 먼저 실행해서, undefined에 map() 메서드를 실행하려 하니 에러가 뜨고 더 이상 리렌더링도 진행되지 않았습니다. import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; function List() { const [users, setUsers] = useState(); try { useEffect(() => { fetch(&#3.. 2022. 8. 19.
코드카타 못 푼 문제 (재귀 함수) (최단 경로?) 매일 진행하는 코드카타 매일 진행하는 코드카타에 처음으로 못 푸는 문제가 나왔습니다!! 아주 좋네요!! 매일 못 푸는 문제가 나왔으면 좋겠습니다. 페어 프로그래밍 짝과 10분 가량 이야기해본 결과 재귀함수로 풀어야 한다는건 알겠는데 풀이를 모르겠다는 의견으로 합일되서 답을 보고 이해해보기로 했습니다. 구글링을 통해 아래 해답을 찾았고, 아래 해답을 한명씩 돌아가며 { 설명 : 키보드 } 역할을 해보았습니다. 그리고 마지막은 누가누가 외운거 빨리 치나 경쟁도 해봤습니다. ㅋㅋ 재귀함수 문제는 항상 어렵다고 느껴지는데, 이 문제는 이해하고 답을 외우는 형태로 가니 오히려 이해가 된것 같은 느낌이네요. 재귀함수 많이 풀어봐야겠습니다. 문제 양수로 이루어진 m x n 그리드를 인자로 드립니다. 상단 왼쪽에서 시.. 2022. 8. 18.
[React.JS] (Refactor) Array.filter()를 이용한 검색 기능 리팩토링 검색 기능 리팩토링 건 검색 기능을 구현했다는 포스팅을 올렸었습니다. 해당 기능까지 구현 후 다른 공부를 하다 더 좋은 필터코드를 발견해서 해당 코드로 리팩토링 후 기능이 정상 작동하는 지 확인 하고 포스팅을 올립니다. import React, { useEffect, useRef, useState } from 'react'; import SearchBox from './Components/SearchBox/SearchBox'; import CardList from './Components/CardList/CardList'; import './Monsters.scss'; function Monsters() { const [monsters, setMo.. 2022. 8. 16.
[React.JS] shouldComponentUpdate(), React.memo() 공식 문서에서는? shouldComponenteUpdate(nextProps, nextState) 생활코딩 강의 중 shouldComponentUpdate() 가 나왔습니다. 생활 코딩 Class형 컴포넌트 리액트 강의 중 state의 배열을 array.push()를 통해 state를 변경 하는것이 불가능 하고, 새로운 배열을 만들어서 넣어야 한다고 했습니다. 여기서 한 걸음 더 나아가 추가 강의로 왜 그런지 찝찝한 분들을 위한 강의가 있었습니다. 그래서 그게 뭐임? shouldComponentUpdate() 함수는 props, state가 새로운 값으로 갱신되어 렌더링이 발생되기 직전에 호출됩니다. 해당 함수에서 return false일 경우 렌더링이 일어나지 않고, return true가 될 경우 렌.. 2022. 8. 15.
[Javascript] (프로그래머스 level 2) 피보나치 수 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 function solution(n) { const dp = new Array(n + 1).fill(0); dp[0] = 0; dp[1] = 1; for (let i = 2; i < n + 1; i++) { dp[i] = (dp[i - 2] + dp[i - 1]) % 1234567; } return dp[n]; } 일반 풀이로는 속도 제한에 걸려 DP로 풀었다. DP 개념은 대충 알고 있어가지고 생각나는대로 풀었는데 일단은 맞았다… 근데… 이제 DP로 풀어야 하는 문제가 나오는건가… 하는 생각에 두렵다.. ㅠ 생각 FE는 이제 과제 전형으로 대부분 바뀌는 추세인데,,, 문제 풀이를 계속 하는게 정답일까? 라는 생.. 2022. 8. 15.
[React.JS] 함수형 컴포넌트 => 클래스형 컴포넌트 import { useEffect, useState } from &#39;react&#39;; import Comment from &#39;./Comment&#39;; import &#39;./Article.scss&#39;; function Article({ userId, profileImg, feedContents, feedImg, commentsListProps, }) { const [loggedInUserId] = useState(&#39;chaedong&#39;); const [commentsList, setCommentsList] = useState([]); const [commentContent, setCommentContent] = useState(&#39;&#39;); const inpu.. 2022. 8. 12.

티스토리툴바