전체 글198 [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. [Javascript] (LeetCode) 13. Roman to Integer (Easy) [Javascript] (LeetCode) 13. Roman to Integer (Easy) 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {string} s * @return {number} */ var romanToInt = function(s) { const baseArray = { 'IV': -2, 'IX': -2, 'XL': -20, 'XC': -20, 'CD': -200, 'CM': -200 } const romanNums = { 'I': 1, 'V': 5, 'X': 10, 'L': .. 2022. 8. 8. [Javascript] (LeetCode) 206. Reverse Linked List (Easy) [Javascript] (LeetCode) 206. Reverse Linked List (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} head * @return {ListNode} */ var reverseList = function(head) { if (head === null || head.next ==.. 2022. 8. 8. [React.js] 인풋 태그 위 이미지 태그 없애기 인풋태그에 값 적으면 그 위 이미지, 글자 없애기 과제 아닌데 팀원들끼리 막 아이디어 내면서 재밌게 개발했습니다. ㅋㅋㅋ 이것저것 많이 했는데, 포스팅 하면 좋을만한 개발건, 리팩토링건이 있어서 기록으로 남깁니다. 말로 설명하는게 어려워서 그냥 코드 위주로 이야기하겠습니다. ㅎㅎ 위 코드처럼 인풋창 위에 이미지, placholder가 있습니다. 인풋창에 밸류값이 주어지면 해당 이미지와 글자를 없애보았습니다. 글자는 placeholder로 넣어주면 인풋입력할 때 자동적으로 사라집니다 여기에 좀 어울리게 색을 넣기 위해 &::placeholder { opacity: 0.5; }를 넣어줬습니다. 이미지는 useState를 활용해 Change이벤트가 발동하면 hasValue State가 true로 바뀌고, 이를.. 2022. 8. 4. [Javascript] (LeetCode) 66. Plus One (Easy) [Javascript] (LeetCode) 66. Plus One (Easy) 💡 구글에 Javascript 풀이가 많이 없거나, 배운 점이 있으면 포스팅합니다. 내 풀이 /** * @param {number[]} digits * @return {number[]} */ var plusOne = function(digits) { for (let i = 0; i < digits.length; i++) { let idx = digits.length - 1 - i; if (digits[idx] !== 9) { digits[idx] += 1; return digits; } if (digits[idx] === 9) { digits[idx] = 0; if (idx === 0) { digits.unshift(1); r.. 2022. 8. 4. 이전 1 ··· 9 10 11 12 13 14 15 ··· 20 다음
