맹정의 행복코딩랜드

무한 스크롤 이란? 무한 스크롤은 무한히 스크롤링을 기능하는 기능을 말한다. 페이지를 클릭하면 다음 페이지 주소로 이동하는 pagenation과 달리 페이지 하단에 도달하면 새로운 컨텐츠가 한 화면에 추가로 로드된다. 무한 스크롤의 장점 1. 사용자 참여 및 콘텐츠 탐색이 쉽습니다. 2. 무한 스크롤이 클릭하는 것보다 더 나은 사용자 경험을 제공합니다. => 따라서 다음 콘텐츠를 보기 위한 추가 클릭이 필요없고 페이지 로드 시간이 짧습니다. 3. 터치 스크린(모바일) 일때 더 유용하게 적용됩니다. => 화면이 작을수록 스크롤이 길어지기에 모바일 환경에서 콘텐츠를 보여주기 직관적이고 사용하기 쉽습니다. 무한 스크롤의 단점 1. 페이지 성능이 느려집니다. 2. 특정 항목 검색 및 원래 위치로 돌아오기 힘듭니..

Nest.js 멀티쓰레드 방식에서는 sync(싱크나이즈) 걸어야함 쓰레드는 누가 먼저 들어오는지 순서를 알수 없음 옵션 : durable ⇒ 영원히 존재할건지? 데커레이터 : ‘코드를 바꾼다. 바꾼 코드를 다 싱글톤으로 만든다’ 라고 이해하기 함수, object 에는 데커레이터 사용 불가 따라서 class에서만 사용가능함으로 react 같은데에서 사용할 수없음 메서드 데커레이터가 먼저 실행 요즘은 e2e(BDD) 테스트만 진행한다 함 exports : [UsersService] 해야, 다른 ts 에서 사용 가능함 passport / nestJWT 패키지 header ⇒ url(query[?a=1], param[/:id]) ⇒ body 로드밸런서 : 같은 도메인 주소가 다른 ip 주소를 가지고 있어서 가능..

수업 들으며 메모 하듯이 작성한 글이라 정리가 안되어 있을수도 있습니다. DI 의 목적? 느슨하게 디커플링하기 위해서, 작은놈이 큰놈에게 주입시키면 된다 라고 생각 데코레이터 - DI(Denpendency Injection) 데코레이터는 호출 됐을때, 바로 실행됨 DTO : 데이터를 객체화로 변환해서 보내는것 VO : value 를 가지고있는 객체 리액트 : MVVM 리액트 라우터 : controller 모듈 : 하나의 컨텍스트를 나눈것 corepack : nodev16 이상이면 같이 깔림 corepack enable ⇒ 그래야 pnpm 사용가능 prepare pnpm NestJS jest—coverage : 높을수록 좋음/ 80% 이상 이런식으로 NestFactory : Factory pattern 싱..

1. 배운 점 구름톤에서 요즘 코테 트렌드에 맞춰 1주차는 구현 문제에 대해 알아보는 것이 좋았습니다. 확실히 구현문제가 난이도가 높아지고 있는상황에서, 많은 문제를 푸는 경험을 쌓을수 있었고 구현문제는 많이 풀어보는게 가장 좋은것같습니다. 다음날에 해설지가 보고 복습할수있는 점에서 배운것같습니다. 2. 느낀 점 일차가 진행될수록, 난이도 및 알고리즘의 필요성을 느꼈습니다. 학창시절때, 공부했던 알고리즘이 바로바로 생각이 나지 않아 아직 공부를 많이 해야한다고 생각했습니다. 확실히 요즘 트렌드가 구현문제로 가고 있는만큼, 이번주차 문제들의 중요성을 느끼는것같습니다. 3. 어려웠던 점 개인적으로 "완벽한 햄버거 만들기" 문제가 어려웠던것같습니다. 어떻게 접근을 해야할지 몰라 찾아 보면서 했는데, 배열을 나..

#Hooks 란? Hooks는 리액트에서 새로 도입된 기능으로 함수 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직 후 작업을 설정하는 useEffect 등의 기능을 제공하며 기존의 함수 컴포넌트에서 할 수 없었던 작업을 할 수 있게 해줍니다. 1. useState useState는 가장 기본적인 Hooks 이며, 함수 컴포넌트에서도 가변적인 상태를 지닐 수 있도록 해줍니다. 만약 함수 컴포넌트에서 상태를 관리해야한다면 이 Hook을 사용하면 됩니다. import {useState} from 'react'; const Counter = () => { const [value,setvalue] = useState(0); return ( 현재 카운트 값은 {value} 입니다. setVal..

# 라이프 사이클? 모든 리액트 컴포넌트에는 리액트 사이클이 존재합니다. 컴포넌트의 수명은 페이지 렌더링 되기전에 페이지가 사라질때 끝이 납니다. 오늘은 라이프 사이클 메서드의 대해서 알아보겠습니다. # 라이프 사이클 메서드의 이해 1. 라이프 사이클 메서드의 종류는 총 아홉가지로 Will 접두사가 붙은 메서드 = 어떤 작업을 작동 하기 전 실행되는 메서드 Did 접두사가 붙은 메서드 = 어떤 작업을 작동 한 후에 실행되는 메서드 2. 리액트사이클은 총 세가지로 마운트, 업데이트, 언마운트로 나뉩니다. 하나씩 알아보도록 하겠습니다. # 라이프 사이클의 마운트 DOM이 생성되고 웹 브라우저 상에 나타나는 것을 마운트 라고 합니다. - constructor : 컴포넌트를 새로 만들때마다 호출하는 클래스 생성..

https://school.programmers.co.kr/learn/courses/30/lessons/12912 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr function solution(a, b) { let answer = 0; for(let i = Math.min(a,b); i (a+b)*(Math.abs(b-a)+1)/2;

# 어떻게 하면 효율적으로 보여주고 관리가 가능할까? 자바스크립트에는 배열 객체 내장 함수인 map() 함수를 사용하여, 반복되는 컴포넌트를 렌더링 할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환 뒤 그 결과로 새로운 배열을 생성합니다. map() 함수의 문법 - arr.map(callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는 세가지 입니다. currentValue : 현재 처리하고 있는 요소 index : 현재 처리하고 있는 요소의 index 값 array : 현재 처리하고 있는 원본 배열 thisArg[선택] : callback 함수 내부에서 사용할 this 레퍼런스 # 데이터 배열을..