분류 전체보기222 [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 '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. <코딩을 지탱하는 기술> 개발 입문자 필독서라는 말이 있어서 읽어보았다. 이 책을 한마디로 표현하면 “편견 없는 프로그래머가 되기 위한 컴퓨터 언어 책”이다. 편견 없는 이 책은 다양한 언어를 통해 개념을 소개한다. 예를 들자면 if문 부분에선 C언어로 if문을 소개하고, for문에선 python코드로 개념을 설명한다. 에러 처리 챕터에선 c언어 로 먼저 설명을 하고, 들어본 적도 없는 PL/I라는 언어로 설명을 추가한다. 이후 CLU, JAVA, Ruby, Python 에서는 어떻게 하는지 보여준다. 처음엔 조금 혼란스럽기도 했다. 하지만 저자가 이런식으로 다양한 언어를 보여주는것은 독자를 혼란스럽게 하기 위해서도, 다양한 언어를 사용할 줄 안다고 자랑하기 위함도 아니다. 오히려 프로그래밍 언어라는것은 개발을 하기 위한 일종의.. 2022. 8. 10. [Javascript] (LeetCode) 21. Merge Two Sorted Lists (Easy) [Javascript] (LeetCode) 21. Merge Two Sorted Lists (Easy) 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 다른 사람 풀이 참고한 내 풀이 /** * Definition for singly-linked list. * function ListNode(val, next) { * this.val = (val===undefined ? 0 : val) * this.next = (next===undefined ? null : next) * } */ /** * @param {ListNode} list1 * @param {ListNode} list2 * @return {ListNode} */ var mergeTwoLists = functi.. 2022. 8. 9. 이전 1 ··· 9 10 11 12 13 14 15 ··· 23 다음
