[TIL]

클릭 시 숨겨진 div를 보여주는 기능 구현 과정에서 아래와 같이document.querySelectorAll 로 원하는 Element를 가져와서 forEach 로 각각의 addEventListener를 추가했다. 이후 브라우저에서 각 Element 클릭 시 sh

python을 실행시켰는데 위와 같이 터미널창에 뜨면서 css파일이 적용이 안되었다. 기존에 HTML파일에 있던 CSS코드를 새로운 파일로 분리하면서 발생했다. http://flask.pocoo.org/docs/0.10/quickstart/#static-file

문제점사진과 같이 팀소개 프로젝트 중 방명록 섹션에서 문제가 생겼다.제일 좌측에는 처음 "comment"를 작성 하는 곳이고 작성된 "comment"는 오른쪽에 이어서 붙는다.display : grid;로 구성하고 글작성 부분을 제외한 작성된 "comment"는$('

오늘은 GIT HUB 사용법 중 git-bash의 명령어 및 기본 개념을 배웠다.브랜치는 작업의 분기점이며 Master로 부터 분기된다.github 활용 순서는 다음과 같다작업물을 로컬저장소에서 원하는 파일만 add하여 스테이지로 올린다.commit하여 업데이트된 기록

지난 시간에 이어서 Flex Item에 적용 하는 속성을 알아보자.컨테이너에 적용하는 속성(1편 참고)https://velog.io/@hanbyul1025/TILCSS-FLEX-%EC%9D%B5%ED%9E%88%EA%B8%B01%ED%8E%B8flex Item

자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요.예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다.제한사항N의 범위 : 100,000,000 이하의 자연수내 코드다른 코드프로그래머

프로그래머스 최빈값 구하기 문제에서 트러블이 발생했다.문제 설명최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 re

오늘은 모던 자바스크립트 튜토리얼에 있는 객체 파트를 정독했다..다음은 내가 생각했을 때 중요한 정보를 모아보았다.<빈객체를 만드는 법><프로퍼티 추가><프로퍼티 삭제><여러 단어를 조합해 프로퍼티 이름을 만든 경우><상수로 선언된 객체는 수

버블정렬을 시작하기 전에 얼마나 다양한 정렬 방법과 각 정렬방법의 장단점을 알고 싶으면 아래 사이트를 확인해보자. 시각적으로 표현되어 흐름을 이해하기 쉽다.https://www.toptal.com/developers/sorting-algorithms버블 정렬(

영화 평점 TOP20 데이터를 open API로 불러와서 간단하게 보여주는 개인 프로젝트를 진행 중이였다. 필요한 필수 기능을 만들었지만 같은 구문을 다시 사용하는 과정이 많아 리팩토링을 해야했다. 그 중 검색기능 부분이 문제가 많아서 수정중이였다. 아래처럼 데이

문제문자열 my_string과 정수 num1, num2가 매개변수로 주어질 때, my_string에서 인덱스 num1과 인덱스 num2에 해당하는 문자를 바꾼 문자열을 return 하도록 solution 함수를 완성해보세요.내 코드간단하게 조건문과 temp 변수를 만

문제문자열 my_string이 매개변수로 주어질 때, my_string 안에 있는 숫자만 골라 오름차순 정렬한 리스트를 return 하도록 solution 함수를 작성해보세요.작성코드여기서 문제는 filter가 정상동작 하지 않는다.사진처럼 return n !== 'N

자바스크립트 강의의 3주차 과제 풀고있었다.아래코드에서 마지막 줄에 있는 함수를 실행 했을때 결과로 "Passed!\~~"가 출력되게끔getAged 함수를 작성하는 것이다. 이 과제에 본질은 어떻게 객체를 가져와서 age만 수정할 것인가 이다.나는 바보같이 새로운 변수

팀과제 프로젝트에서 댓글 CRUD 구현과제를 만들고 리팩토링 하는 과정에서 문제가 발생했다.아이콘 버튼을 누를 시 수정과 삭제가 되게 만들었는데 새로운 감상평을 등록하고 나면 버튼이 동작하지 않는다.그러나 새로고침을 하면 동작을 하게 된다.처음 생각난 것은 댓글들이 리

간단한 댓글 기능을 구현 중 좋아요 기능을 추가하고 있었다.그러던 중 갑자기 난생 처음보는 에러를 만났다.대충 느낌을 보아하니 콜백함수를 그만 부르라는 말 같다.......call 스택이 넘친거 같다..현재 내 코드의 구조는 이런 식이고 저 내부함수에서는 클릭이벤트가

선택정렬을 시작하기 전에 얼마나 다양한 정렬 방법과 각 정렬방법의 장단점을 알고 싶으면 아래 사이트를 확인해보자. 시각적으로 표현되어 흐름을 이해하기 쉽다. https://www.toptal.com/developers/sorting-algorithms > 선택 정렬

삽입정렬을 시작하기 전에 얼마나 다양한 정렬 방법과 각 정렬방법의 장단점을 알고 싶으면 아래 사이트를 확인해보자. 시각적으로 표현되어 흐름을 이해하기 쉽다. https://www.toptal.com/developers/sorting-algorithms > 삽입 정렬

오늘 내배캠 React 첫 강의를 듣고 실습문제를 따라하던 중 style 객체를 선언하는 과정에서 오류가 발생했다.분명히 강의대로 따라 했는데 위와 같이 에러가 발생했다.원래 CSS사용법에서 뒤에만 세미콜론에서 콤마와 문자열로 바꾸어줬는데계속 밑줄이 그어져있다....처

문제 설명 회사원 Demi는 가끔은 야근을 하는데요, 야근을 하면 야근 피로도가 쌓입니다. 야근 피로도는 야근을 시작한 시점에서 남은 일의 작업량을 제곱하여 더한 값입니다. Demi는 N시간 동안 야근 피로도를 최소화하도록 일할 겁니다.Demi가 1시간 동안 작업량 1

리액트 첫주차 개인 과제를 완료하고 오늘 아침 실행시켰는데 갑자기 실행이 안되는 문제가 발생했다. 문제가 되는 부분은 아래와 같다로컬 스토리지에 아무런 값이 없을 때에는 더미데이터를 넣어주는 로직을 구현하고 싶었다.todoList를 기준으로 useEffect를 사용하여

React.memo / useCallback / useMemo컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두리액트에서 리렌더링이 빈번하게, 자주 일어난다는 것은 좋지않다.비용이 발

아래 처럼 셀렉트 창을 만들고 기능을 확인 하던 중 클릭 시 아래화살표 그림을 넣었던 부분이 이동하는 문제가 생겼다.개발자도구를 열어 한참을 찾아본 결과 오른쪽 끝에 알 수 없는 div가 존재했다...이후 코드를 확인해보니,리턴부분에 jsx문법을 사용하기 위해 전체를

GardenGram 이라는 SNS 프로젝트를 진행 중에 데이터를 Post하는 기능을 만들다가 문제를 만났다. 먼저 위와 같이 render되는 부분을 작성하였고 Form태그를 Styled-Components로 만들었다. 함수까지 위와 같이 작성했는데 버튼을 클릭해도 아

사진 업로드 기능을 만들던 중 에러가 발생했다. Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'. input 창에서 사진을 고르다가 취소를 눌렀더니 바로 위와 같은

json-server를 알게 되어 사용하려 라이브러리를 설치했다.이후 강의대로 json-server --watch db.json --port 4000 명령어를 사용했다.그러나 command not found에러가 발생했다. 구글검색을 해보니 global로 받아야한다고

JavaScript는 동적 타입 언어로 개발자가 실수를 저지른 것을 프로그램을 실행할 때 알려준다.JavaScript의 취약점은 크게 3가지가 있다.JavaScript는 변수의 타입이 실행 시간에 결정되기 때문에 개발자의 실수로 인한 오류가 발생하기 쉽고 찾기도 까다로

1) boolean두가지 상태를 담고 싶은 변수에 사용한다.3가지 이상은 enum이나 string으로 사용한다.boolean 타입은 참(true) 또는 거짓(false) 값이다.2) number보통 일반적인 프로그래밍 언어에서 정수는 short, int, long,

유틸리티 타입은 이미 정의해 놓은 타입을 변환할 때 사용하기 좋은 타입 문법이다. 유틸리티 타입을 꼭 쓰지 않더라도 기존의 인터페이스, 제네릭 등의 기본 문법으로 충분히 타입을 변환할 수 있지만 유틸리티 타입을 쓰면 훨씬 더 간결한 문법으로 타입을 정의할 수 있다.1)

상속을 통해서 사용하게끔 하는 클래스추상 함수를 구현해서 직접 사용하지만무조건 추상함수만 가지고 있는 것은 아님일반 함수도 상속시켜서 정의하지 않고 곧바로 사용할 수도 있음.추상 클래스는 클래스와는 다르게 인스턴스화를 할 수 없는 클래스추상 클래스의 목적은 상속을 통해

AWS는 Amazon Web Services의 약어로, 아마존닷컴이 제공하는 클라우드 컴퓨팅 플랫폼이다. AWS는 전 세계에 분산되어 있는 데이터 센터에서 사용자에게 IT 인프라를 제공하며, 사용자는 필요한 인프라를 빠르고 쉽게 설정하고 관리할 수 있다.AWS의 주요

AWS Identity and Access Management (IAM)은 AWS 리소스에 대한 액세스를 안전하게 제어할 수 있는 웹 서비스다.IAM을 사용하면 AWS에서 사용자, 그룹 및 역할을 생성하고 관리하여 리소스에 대한 액세스를 안전하게 제어할 수 있다.협업하

AWS Billing은 AWS 계정 사용량과 비용을 모니터링하고, 요금 청구 정보를 제공하는 서비스다. AWS 사용량과 비용을 모니터링하고 분석함으로써, 비즈니스에서 AWS 비용을 최적화할 수 있다.EC2를 사용할 때 AWS Billing은 다음과 같은 기능을 제공한다

Scalability와 Availability는 모두 분산 시스템에서 중요한 개념이지만 서로 다른 개념이다.Scalability는 시스템이 커지거나 작아질 수 있는 능력을 의미한다.이는 사용자 수, 데이터 양, 처리량 등이 증가할 때 시스템의 성능과 처리 능력을 유지하

Next.js는 웹 개발자에게 필요한 다양한 기능을 제공해주는 리액트 프레임워크SEO(Search Engine Optimization)을 위한 SSR(Server-Side rendering)을 지원한다.CSR과 SSR을 적재적소에 맞게 복합적으로 사용 가능(추후 설명

다운로드 UI 가 있을 때, 또는 UX 저해시키는 불필요한 네트워크 요청을 제거하기 위해 사용된다.대용량 fetching을 중간에 취소하거나 사용하지 않는 컴포넌트에서 fetching이 진행중이면 자동으로 취소시켜 불필요한 네트워크 비용을 줄일 수 있다.queryFn

eslint-plugin-unused-imports

git 명령 취소 방법git을 사용하다 보면 잘못된 커밋 메세지나 추가, 브랜치 혼동 등 많은 이슈가 있을 수 있다. 간단한 커맨드로 git pull 취소, git commit, git add, git merge 등의 명령들을 취소하고 되돌릴 수 있다.위 코드로 간단하

supabase Policies 설정하기supabase에 DB를 사용하려면 Policies 설정을 해주어야 한다.아무나 DB데이터를 쓰고 삭제하면 안되기 때문에 적절한 보안이 갖춰줘야한다.이 중에서 본인이 원하는 옵션을 선택한다.보통 두번째 옵션을 선택하면 인증된 사용

Optimistic Update + Infinite Query 구현프로젝트 진행 중 tanstack-Query의 Optimistic update를 사용하여 좋아요를 구현했으나, 리패칭되면서 Infinite Query 기능의 유지가 되지않고 사라졌다.개발자 툴을 보면 p