TIL

객체 지향 프로그램(OOP)캡슐화추상화상속다형성Prototype과 \_ proto \_ 대해 알기Prototype chain을 이해class와 new 대해 알기constructextendssuper🤏🤏이만큼 아는 듯 .. 화이팅 !

넌 뭐다냐? Memoization은 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시에 저장된 결과를 반환하여 처리 속도를 높이는 기술언제사용 ? \- 고차함수를 부를 때, 즉 무거운 계산을 처리할 때 \- 제한적이고 반복적인 범위를 가진

Data Structure종류Stack 개념, 자바스크립트로 구현Queue 개념, 자바스크립트 구현Tree 개념, 자바스크립트 구현전위 순회후위 순회중위 순회정 이진 트리포화 이진 트리완전 이진 트리Siblingparent NodeChild NodeLeaf NodeGr

GraphDFS(Depth First Search): 깊이 우선 탐색 -> StackBFS(Breathed First Search): 너비 우선 탐색 => Queue접근여기까지가 끝인가보오\~~ 이제 나는 돌아서겠소\~~억지 노력으로 인연을 거슬러 괴롭히지는 않겠소~오

Come back home~ 고차함수, 클로져, 스코프, 콜백함수 고차함수 : 함수를 인자로 받을 수 있고, 함수의 형태로 리턴할 수 있는 함수콜백함수 : 다른 함수의 인자로 전달되는 함수를 콜백함수클로져 : 외부 변수를 기억하고 이 외부 변수에 접근할 수 있는 함수

비동기CallBack FunctionPromisepromise Constructorpromise ChaniningPromiseAll 메소드Async & awaitNode.js 모듈셋 다싫어알아야할 것은 많은데 아는게없네 ....그래도...반찬투정하지말고 열심히하자 ~

비동기fetch()를 사용한 비동기 promisepromise.allAsync & await이벤트 루프 node js는 기본적으로 동기적 실행을 하지만, 이벤트 루프를 통해 비동기를 구동할 수 있다.1\. function이 시작되면 호출스택에 순서대로 넣어준다2\

클라이언트 & 서버 ==> 클라이언트 + 서버 아키텍처 + 데이터베이스 ===> 3- tier 아키텍처프로토콜 : https://steemit.com/kr-dev/@wonnieyoon/sxgya-it-story-tcp-ip URL(Uniform R

HTTP & NetWorkREST(Representational State Transfer) APIroot-endpointOpen APIAPI KeyPostMan을 통한 GET / POST / 날씨 API 사용해보기자유에는 책임이 따르는 법주말에 뭐한거지 ...큰일이다

리액트상태 끌어올리기 (Lifting State Up)상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행Side Effect함수 내부에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 useEffect(함수,배열

라이브 러리와 프레임워크 차이라이브러리 쉽게말해 방향성만 알려주는 친구 (필요한 기능을 만들 수 있는 환경을 제공)보통 프론트에서 사용프레임워크이미 구현된 애들의 집합체 (필요한 기능이 이미 다 만들어진 것)생산성이 좋음 백엔드에서 자주 사용why? CRUD의 내용은

Storybookstyled Component Automatic critical CSSStyled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입No class name bugsStyled Comp

Sprint : Component 만들기Storybookstyled Component styled Component 사용프로그래머스 : 실패율 이게 성장했을 때 오는 행복감인가스프린트와 프로그래머스 문제를 해결하면서 처음으로 내가 발전했음을 느꼈다.그리고 그 느낌을 받

Linux 심화user / group / other 차이 chmod : 권한을 변경하는 명령어rwx를 3bit로 해석하여 숫자 3자리로 권한을 표기해서 변경하는 absolute form 더하기(+) 빼기(-) 할당(=)과 액세서 유형을 표기해서 변경하는 Symboli

자료구조DFS와 BFSgreedyDynamic Programming클론코딩 ==> 어제 만든 것을 React로 리팩토링 인새에에에에엥~매일 1시간 알고리즘 문제 풀기 (inflearn, programers)완료 !비전공자를 위한 진짜 올인원 개발 클래스(infle

자료구조DFS와 BFS🖕🖕🖕🖕🖕greedy🖕🖕🖕🖕🖕Dynamic Programming🖕🖕🖕🖕🖕순열🖕🖕🖕조합🖕🖕🖕멱집합 🖕🖕🖕🖕🖕정규표현식 🖕클론코딩 ==> antD/useHistory/useParams 사용 기분이

SQL(Structured Query Language)관계형데이터베이스NoSQLMysql클론코딩 : antD를 이용해 상품 업로드 페이지 제작 문제점 : required 값 때문인지 아무것도 작성 안하고 등록하기 버튼을 누르면 오류가 발생 ... ㅠㅠ SQL오랜만이야

SQL클론코딩 Clientdayjs사용dayjs.extend(relativeTime)을 통해 확장된 기능 사용ServerfindAll과 findOne에 들어가는 인자들이 무엇을 나타내는 지 공부models.테이블이름.findAll({order :\["createdAt"

SQL어제 몰랐던 params 이해2, 5, 1 // bulk insert로 삽입해야하는 여러 개의 레코드param = \[ 2, 5, 1, 2, 6, 2 ] // ?로 인식되도록 배열에 감싸기(하나의 변수)params = \[ \[ 2, 5, 1, 2, 6, 2 ]

SQL 내가 뭔가 홈페이지같은 것을 만든다는 것에 엄청난 흥미를 느낀다.매일 1시간 알고리즘 문제 풀기 (inflearn, programers)section 5까지 완료 비전공자를 위한 진짜 올인원 개발 클래스(inflearn)multer을 활용하여 보다 서버와 클라이

Today I Learned! 오늘 배운 것 SQL Sequelize sprint 마이그레이션 어소시에이션 자료구조 stack 후위식 연산 크레인 인형뽑기 쇠막대기(실패) 느낌점 > 노력은 배신할 것 같기도 ..

NoSQLmongo DB자료구조 stack Queueantd carousel 이모 여기 프로젝트 걱정 추가요 매일 1시간 알고리즘 문제 풀기 (inflearn, programers)section 6 - 완료 비전공자를 위한 진짜 올인원 개발 클래스(inflearn)a

Today I Learned! 오늘 배운 것 NoSQL mongo DB 자료구조 stack Queue antd carousel 느낌점 > 이모 여기 프로젝트 걱정 추가요 매일 1시간 알고리즘 문제 풀기 (inflearn, prog

인증 보안 O auth들어오는 데이터 타입 잘 확인하기.header에 들어오는값쿠키에 저장하는 값인증 next를 사용한 NodeBird만들기 useCallbackuseMemostyled components 넉다운입니다. 10..9...8...7....매일 1시간 알고

컴퓨터 공학 기초 문장열유니코드아스키UTF-8 / UTF-16그래픽레스터(비트맵)벡터 운영체제프로세스멀티스레드와 스레드동시성과 병렬성가비지컬렉션캐시next를 사용한 NodeBird만들기 redux 리덕스가 또 ? 매일 1시간 알고리즘 문제 풀기 (inflearn, pr

네트워크 심화IP와 PacketIP패킷에는 출발지, 목적지의 IP주소가 포함IP주소는 네트워크에서 장치들이 서로 인식하고 통신을 하기 위해서 사용하는 특수번호 TCP vs UDP각종 HTTP 헤더https://gmlwjd9405.github.io/2019/01

typescript에서 변수는 하나의 타입을 가진다.하지만, type casting은 변수가 또 다른 타입을 가지도록 도와준다.JwtPayload를 제외한 타입을 컴파일 오류를 발생여기서 userData에 IUserTypes이라는 새로운 타입을 더 해준다.type as

Memoization란 ? 동일한 반복 계산을 처리할 때 이 처리값을 배열, 객체, 변수 등에 담아둬 반복 수행을 제거하는 처리 기법

https://programmers.co.kr/skill_check_assignments/100물론 시간 안에 고양이 사진첩 만들기는 성공했다. 하지만 ... 내 코드는 DOM 사용을 극대화 한 코드였다. 아직 버리지 못한 "만들기만 하면 된거지 뭐" 이 생각

버텍스와 엣지로 이루어진 자료구조버텍스 : 정점엣지 : 버텍스를 이어주는 간선한쪽으로만 이동가능양 노드(버텍스)간 이동이 가능이동에 가중치 값이 포함됨

인터넷을 보던 중 useLayoutEffect에 대해 보게 되었고 useEffect와의 차이점에 대해 알아본 과정을 정리해보려한다.useEffect에 전달된 함수는 화면에 컴포넌트 렌더링이 완료된 후에 수행useEffect는 컴포넌트가 렌더된 후 실행되기도 하며, 특정

React는 왜 상태관리 라이브러리가 필요한가? 리액트는 단방향으로 상태를 전달해주기에 props drilling을 피하기 위해 필요 대표 EXRedux, Recoi, mobX React를 위한 상태관리 라이브러리가장 대중적으로 사용되는 Redux보다 쉽고 빠르게 사용

프로젝트 진행 중 카테고리를 직접 만들기 위해 재귀를 사용해야했다. 하지만 카테고리 데이터가 고정적인 것이 아닌 가변적이었기 때문에 폴더를 눌렀을 때 데이터를 받아오고 폴더가 아닌 파일이었을 때는 파일의 데이터를 받아왔어여했다.1) 폴더라면 UI적으로 폴더를 보여줘야함

pnpm이라는 패키지 매니저에 대해 정리해본다.며칠 전 나는 패키지 매니저는 오직 npm, yarn만 있다고 생각을 했었다.이런 저런 서칭 중 pnpm이라는 패키지가 존재하고 yarn이나 npm이 가지고 있던 문제점을 해결하기 위해 새롭게(2017년 쯤) 만들어진 녀석

typescript를 사용하다보면 Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ test: string; }'. No index

회사 발표를 위한 pnpm 발표에 관한 정리글 = 미완 오늘날 node.js의 패키지 매니저의 대표주자로는 npm과 yarn이 있을 것입니다. 10년에 나온 npm과 16년에 나온 yarn은 시간이 많이 지났음에도 불구하고 대부분의 프로젝트에서 사용되고 있습니다. 하지

FROM : node tjfcl RUN: 명령어 수행WORKDIR : 디렉토리 설정COPY : 복사ENTRYPOINT : 명령어 실행CMD : 명령어 실행ENTRYPOINT와 CMD의 차이를 서술하시오주의RUN은 Local에서 실행나머지들은 DOCKER 내부에서 실행된

프로젝트를 진행하다보면 router를 사용하여 페이지 이동하는 경우가 생길 것이다. 이런경우 우리는 흔히 useNavigate을 사용할 수 있다.대충 이러한 사용법이다 .navigate안에는 첫번째 인자로 Path가 들어간다는 것만 기억하자.홈페이지가 이동했을 때 우리

오늘날 없어서는 안되는 것 중 하나인 인터넷에 대해 알아보자인터넷은 TCP/IP를 기반으로 하여 전 세계적으로 연결되어있는 컴퓨터 네트워크 통신망을 일컫는 말이다. TCP/IP인터넷으로 통신하는 데 있어 가장 기반이 되는 프로토콜로 대다수 프로그램은 TCP와 IP로 통

http는 hyperText, image 등 데이터를 빠르게 교환하기 위한 애플리케이션 레이어 프로토콜의 일종으로, 서버와 클라이언트의 사이에서 어떻게 메시지를 교환할지를 정해 놓은 규칙이다. 해당 포스트에서는 http가 어떻게 구성되었으며 어떻게 변화해가고 있는 지에

오늘날 인터넷을 사용하는 모든 디바이스에서 떼어낼 수 없는 것 중 하나인 브라우저는 HTML 문서와 그림, 멀티미디어 파일 등 월드 와이드 웹(WWW)을 기반으로 한 인터넷의 컨텐츠를 검색 및 열람하기 위한 응용 프로그램을 뜻한다. 쉽게 말해 사람들이 월드 와이드 웹에

나는 친구 A에게 친구 B의 집을 알려줄려고한다. 뭐가 더 쉬울까 ?1\. 제주특별자치도 서귀포시 남원읍 중산간동로7227번길 111-102\. 민수네 옆집 예시가 극단적이고 살짝 안맞기는 하지만, 2번이 상대적으로 쉬울 것이다. DNS로 이러한 예시와 비슷하다고 생각

먼저 도메인이라는 것을 알기 전에 IP주소에 대해 집고 넘어가겠습니다. IP는 Internet Protocol의 약어로 송신 호스트와 수신 호스트가 패킷 교환 네트워크에서 정보를 주고받는 데 사용하는 정보 위주의 규약이며, OSI 네트워크 계층에서 호스트의 주소지정과

호스팅이란 서버 컴퓨터의 전체 또는 일정 공간을 이용할 수 있도록 임대해 주는 서비스를 말한다. 사용자가 직접 서버를 구입하고 운영할 필요없이 호스팅 업체가 미리 준비해 놓은 서버를 빌려 사용하는 형식이다. 홈페이지를 운영하는 사용자를 위해 서버 컴퓨터의 일부 공간을

우리가 보는 웹페이지가 어떻게 구조화되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어마크업 언어태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.Opening tag : Tag의 시작을 나태냄Closing tag : Tag의 끝을

HTML폼은 사용자와 웹사이트 또는 어플리케이션이 서로 상화 작용하는 기술 중 하나이다. 폼은 사용자가 웹사이트에 데이터를 전송하는 것을 허용하는 기술이다. HTML 폼은 하나 이상의 위젯으로 만들어지며 종류로는 텍스트 필드, 셀렉트 박스, 버튼, 체크박스, 라디오 등

해당 글은 web.dev를 보고 작성한 글입니다.우리가 CSS로 표시하는 모든 것이 Box라는 것으로 이루어져있다. 그게 우리 눈에 단순이 텍스트, 이미지로 보여도 그것은 사실 하나의 박스이다. Box는 display 값, 설정된 치수 및 박스 안에 있는 컨텐츠에 따

해당글은 web.dev를 정리한 글입니다.HTML Element 특정 요소에 CSS를 적용하기 위해서는 그 요소를 선택할 수 있어야한다. 해당 포스팅에서는 이러한 선택자 Selector에 대해 알아보려한다. 단 1편 ,2 편으로 나누어 2편에서는 CSS pseudo

HTML Element는 다양한 상태(마우스 포인터로 가리키는 등)에 놓였을 때 pseudo selector를 사용하여 CSS 규칙을 적용한다. 많은 Pseudo Selector는 여기에서 확인하자Pseudo element는 선택한 요소의 일부분에만 스타일을 입히는 규

CSS는 Cascading Stylesheets의 약자입니다. Cascade는 말 그대로 계단식으로 내려와 여러 CSS규칙이 HTML요소에 적용되는 알고리즘입니다. 위 CSS코드에서 button의 색상은 무엇일까요 ? !codepenbyungmin12/embed/MW

상속을 알기 전에 아래 코드를 먼저 보겠습니다. 자 위와 같이 html과 css에 코드를 작성했다면 I am a button link의 text color는 무슨택일까요 ??!codepenbyungmin12/embed/MWQRrzr?default-tab=html%2Cr

인터페이스의 질을 높이기 위해서는 적절한 단위 설정이 필요합니다. 해당 포스트에서는 이에 대해 알아보도록 하겠습니다.!codepenbyungmin12/embed/dydEJym?default-tab=css%2CresultNumbers 값는 opacity,line-heig

Electron은 Javascript, HTML, 및 CSS를 사용하여 플랫폼 간 데스크탑 앱을 빌드해주는 프레임워크이다. 이러한 Electron은 크롬과 Node.js를 사용하여 빌드한다. 또한 Mac, Windows, Linux까지 호환한다.위의 말처럼 우리는 Ja

우리는 앞서 CSS 기본 사항, 스타일링 등에 대해 배워보았습니다. 이제는 뷰포트와 관련하여 컴포넌트, 상자를 올바른 장소에 배치하는 방법에 대해 알아보도록 하겠습니다.페이지 레이아웃을 정하지 않았을 경우 HTML은 Cascading에 의해 계산신으로 배치된다.오늘의

자바스크립트는 single thread기반의 언어입니다. 하나의 일을 처리한 뒤 다른 일을 처리할 수 있는 언어이죠. 그치만 우리가 자바스크립트를 사용하여 api요청 등을 보냈을 때, 그렇게 작동하지 않는다는 것을 우리는 알고있습니다. 이는 event loop때문입니다

CSS에서 가장 많이 쓰이는 텍스트의 흐름은 좌에서 우로 , 박스의 흐름은 위에서 아래로 이루어진다. 그렇기에 CSS 흐름은 항상 위, 왼 아래, 오른쪽으로 이루어진다. 하지만 텍스트나 박스의 흐름은 다를 수 있어야하며 이것은 CSS로 지정해줘야 flexable int

CSS에도 Function이 존재한다는 사실을 아시나요 ?Function이 존재하는지 몰랐어도 사실 우리는 사용하고 있었습니다. 그럼 이러한 Function들에 대해 배워나가 볼까요 ? 함수란?프로그래밍에서 함수(function)란 특정 목적의 작업을 수행하기 위해 설

ECMAScript 5에서 소개된 엄격모드 use stric에 대해 알아보도록 하겠습니다.use stric은 ECMAScript5가 출시되며 이전 하위 버전과 호완성 문제를 개선(?)하기 위해 새롭게 추가된 기능입니다. 이러한 엄격모드는 다음과 같은 행동을 합니다.기존

나는 개발 중 값이 null이나 undefined일 때 다음과 같은 코드를 작성했었다.그치만 이제 이런 코드는 nullish(??) 연산자를 통해처럼 간단하게 작성할 수 있다. nullish는 ??로 작성할 수 있다. 또한 nullish 결과는 다음과 같다a가 null

JavascriptInfo를 읽던 도중 닌자코드에 대해 알게되었다. 정말 우습게도 나는 이 글을보며 어쩌면 내가 잘하고 있는 것일 수도라고 생각했다. 사실 닌자코드는 이렇게만 작성하지 않으면 멋진 개발자(?)가 될 수 있다라고 알려주는 글이다. 하하나는 닌자코드에서

가비지 컬렉션은 메모리 관리 기법 중 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능이다. 자바스크립트는 도달 가능성이라는 개념을 사용해 메모리 관리를 수행합니다. 여기서 도달 가능성이란 쉽게 말해 어떻게든 접근하거나 사용할

늦은 퇴근으로 인해 JS대신 출퇴근길에 읽은 면접을 위한 cs 전공지식 노트 내용 중 연결리스트에 대해 정리해봅니다.연결 리스트는 데이터를 감싼 노드를 포인터로 연결해서 공간적인 효율성을 극대화시킨 자료 구조입니다.공간 복잡도프로그램을 실행시켰을 때 필요로 하는 자원

객체의 프로퍼티는 우리가 흔히 사용하는 데이터 프로퍼티와 함수로서 값을 획득(get)하고 설정(set)하게하는 접근자 프로퍼티로 나뉩니다 오늘은 접근자 프로퍼티 getter, setter에 대해 알아보도록 하겠습니다.객체 안에서 getter는 get으로 setter는

위 책을 읽고 작성하였습니다.스코프란 참조 대상 식별자를 찾아내기 위한 규칙입니다. 참조 대상 식별자란 말이 쉽게 말해 변수라고 생각하면 됩니다.자 여기서 함수 whereIsMyCheese 안에는 here이라는 변수가 존재하지 않습니다. 그치만 위 코드를 실행한다면 콘

일반적인 함수는 하나의 값을 반환합니다. 하지만 제너레이터를 사요하면 여러 개의 값을 필요에 따라 하나씩 리턴할 수 있습니다. 오늘은 이 이터레이터를 정리해보겠습니다.iteration interface는 iterable,iterator,iterator result로 구

우리는 웹 사이트에 애니메이션을 적용할 때 CSS의 tansition이나 animation을 사용하거나 JS의 setInterval, setTimeOut이나 requestAnimationFrame, cancelAnimationFrame을 사용합니다. 이 두개가 무슨 차

거의 매일 알고리즘 문제를 풀긴하지만 leetcode에서 처음으로 hard문제를 푼 기념으로 블로깅을 해봅니다. 또한 개인적으로 문제를 푸는 방법이 이상하다 생각하여 정리해보려 합니다. https://leetcode.com/problems/bus-routes/

프로젝트 진행 중 적용해 본 최적화에 대해 기술해보려합니다. 우선 렌더링(rendering)이란 무엇인지부터 확인하고 가야할 것 같습니다.렌더링이란 컴포넌트가 현재 상태값을 바탕으로 UI를 구성하는 것을 말합니다. 예를 들어 위 코드에서 컴포넌트는 상태 href=url