profile
공부하는 코린이 📚
태그 목록
전체보기 (246)공부(142)study(140)자바스크립트(85)js(84)JavaScript(83)리액트(39)React(37)CSS(31)html(29)vue(27)알고리즘(26)(21)자료구조(14)vue3(13)C(13)백준(13)vue.js(12)Node(10)boj(10)토이프로젝트(7)canvas(7)class(7)프로그래머스(6)ts(6)컴포넌트(6)타입스크립트(5)node.js(5)hooks(5)배열(5)JSX(5)노드(5)router(4)웹게임(4)CS(4)캔버스(4)vuejs(4)array(4)연결리스트(4)component(4)express(4)datastructure(4)DROP(3)(3)git(3)DOM(3)this(3)클래스컴포넌트(3)게임(3)web(3)드래그앤드롭(3)&&(3)Map(3)그리디알고리즘(3)훅스(3)drag(3)next(2)디자인패턴(2)이중연결리스트(2)클래스(2)linkedlist(2)todoList(2)useReff(2)네트워크(2)조건부렌더링(2)끝말잇기(2)github(2)렉시컬환경(2)Java(2)useEffect(2)웹팩(2)비동기(2)useState(2)ReactHooks(2)복습(2)자바(2)Circular_Linked_List(2)원형연결리스트(2)초보(2)오늘의공부(2)라이브러리(2)프레임워크(2)interface(2)인터페이스(2)호이스팅(2)webpack(2)Event(2)socket(2)선택자(2)useReducer(2)개발(2)생성자함수(2)숫자야구(2)그리디(2)canvasapi(2)selector(2)단일연결리스트(2)애니메이션(2)CSR(2)SSR(2)렌더링(2)Flex(2)투두리스트(2)반복문(2)DragAndDrop(2)Props(2)v-bind(2)import(2)Routes(2)canvas-api(2)FetchAPI(1)캡슐화(1)리덕스(1)실행컨텍스트(1)캔버스애니메이션(1)타이핑게임(1)웹스토리지(1)라우팅(1)create-next-app(1)MVC(1)Date객체(1)styledcomponents(1)다이나믹컴포넌트(1)데이터(1)specificity(1)클래스다이어그램(1)await(1)sessionStorage(1)정리(1)운체(1)거스름돈(1)Spread_Operator(1)(1)margincollapsing(1)이벤트캡처링(1)nullish(1)async(1)abstract(1)doublylinkedlist(1)컴퓨터과학(1)for(1)태그(1)포인터(1)바벨(1)export(1)이벤트리스너(1)고차함수(1)Deque(1)자바스크립트 자료형(1)ip(1)tcp(1)이터러블(1)콜백함수(1)hashtag(1)이코테(1)ReactRouter(1)유니코드(1)hoisting(1)타입스트립트(1)일곱난쟁이(1)문자열(1)margin(1)자바스크립트버블링(1)Route(1)오큰수(1)json(1)비동기처리(1)NestedRoutes(1)mongodb(1)가위바위보(1)CNA(1)리액트라우터(1)wan(1)세션스토리지(1)클로저(1)repeat(1)코테(1)DFS/BFS(1)라우터(1)자손선택자(1)require(1)foreach(1)foorLoop(1)as(1)추상클래스(1)combinator(1)빌드(1)String(1)key(1)이벤트위임(1)context(1)커링(1)watch(1)삼항연산자(1)재귀함수(1)싱글톤패턴(1)BFS(1)렉시컬스코프(1)css덮어쓰기(1)JS반복문(1)mask(1)영역구하기(1)Spread연산자(1)모달창(1)State(1)useContext(1)useMemo(1)함수(1)setInterval(1)자식선택자(1)1000번(1)메서드(1)rtk(1)protected(1)Outlet(1)시맨틱HTML(1)셀렉터(1)Sass(1)그리드(1)구조분해할당(1)useCallback(1)이벤트핸들러(1)DevTools(1)EffectHook(1)버블링막기(1)narrowing(1)이벤트핸들링(1)스프레드연산자(1)서버사이드렌더링(1)클라이언트사이드렌더링(1)splice(1)모달(1)useInterval(1)함수컴포넌트(1)storage(1)로컬스토리지(1)절차지향(1)바닐라자바스크립트(1)개발자(1)개발입문(1)split()(1)A+B(1)hex(1)jest(1)리액트훅스(1)lan(1)드래그앤드롭이벤트(1)시맨틱(1)CSS우선순위(1)객체지향(1)cookie(1)next.js(1)slice(1)구구단게임(1)c언어(1)변수(1)틱택토(1)다차원배열(1)ExecutionContext(1)babel(1)useNavigate(1)@Inject(1)채팅앱(1)localstorage(1)regexp(1)currying(1)collapse(1)메소드(1)teleport(1)자바스크립트 ...(1)커스텀훅(1)ejs(1)(1)if(1)provide(1)브라우저렌더링(1)Date(1)grid(1)운영체제(1)redux(1)오버라이딩(1)emit(1)git버전관리(1)private(1)mockserver(1)slot(1)modal(1)3D(1)this키워드(1)set(1)이벤트(1)element(1)클리핑마스크(1)session(1)코린이(1)오버로딩(1)드래그앤드랍(1)apply(1)call(1)typescript(1)mask-image(1)TypeAssertion(1)function(1)정규표현식(1)Rest파라미터(1)scss(1)destructuring(1)object(1)WebStorage(1)클래스형컴포넌트(1)렉시컬(1)Array함수(1)콜백(1)자바스크립트Array(1)promise(1)일반형제선택자(1)커스텀이벤트(1)캐러셀(1)CLL(1)동기(1)TCP/IP(1)link(1)public(1)구조체(1)requestAnimationFrame(1)별찍기(1)POST(1)수열(1)matcher(1)이벤트버블링(1)uml(1)순열(1)아스키코드(1)OOP(1)bind(1)CRA(1)옵셔널체이닝(1)랜덤컬러(1)queue(1)배포(1)무한스크롤(1)인접형제선택자(1)문서객체모델(1)for문(1)세션(1)쿠키(1)sourcetree(1)버전관리(1)attr()(1)해시태그(1)프로미스(1)typing(1)BigO(1)nodejs(1)슬라이드(1)코딩테스트(1)결합자(1)man(1)모듈(1)웹개발(1)객체(1)iterable(1)일치선택자(1)브라우저(1)recursion(1)rest parameter(1)나머지매개변수(1)시간복잡도(1)스코프체인(1)rgb(1)callback(1)puzzle(1)
post-thumbnail

라이브러리 없이 React로 해시태그 구현하기 (feat. 버그와의 싸움)

갑자기 패기롭게 해시태그를 구현하고 싶어졌다.원래는 라이브러리를 사용하거나, 그냥 투박하게 일반 텍스트를 백엔드에게 보내버릴까 생각도 했었지만..일단 일반 텍스트로 만든다면 예쁘지도 않을게 분명하고 지금 아니면 언제 내가 해시태그를 직접 구현해볼까 싶어서 해시태그 구현

2022년 12월 12일
·
0개의 댓글
·

UML 클래스 다이어그램 - 접근제어자 표기, 관계 표기하기

클래스 다이어그램 작성해보기! 클래스 다이어그램 툴은 GitMind를 사용했다. 중간부터는 툴이 마음에 안들어서 다른 거로 갈아탔다. UML 통합 모델링 언어(Unified Modeling Language)의 약자로 시각적 모델을 만들기 위한 도안 표기법을 포함한다

2022년 11월 30일
·
0개의 댓글
·
post-thumbnail

자바스크립트 Proxy - get, set

프록시란, 특정 객체의 작업을 가로채어 재정의하는 객체이다.객체를 Proxy로 감쌌다면 절대 타깃 객체를 참조하는 코드는 없어야 한다.프록시를 사용하면 기존 객체 대신 사용할 수 있는 객체를 만들 수 있다.첫번째 인자로 target, 두번째 인자로 handler 메서드

2022년 11월 29일
·
0개의 댓글
·

npm ERR! code ELIFECYCLE 해결하기

갑자기 npm 에러가 발생해서 npm run strat 하면 프로젝트가 실행이 안 되는 문제가 발생했다. 처음엔 경로를 잘못 들어온 줄 알고 npm run start를 다시 입력했지만 그게 아님을 깨닫고.. 이건 다른 문제구나... 오류 메시지를 봐도 무슨 소리인지

2022년 11월 28일
·
0개의 댓글
·

재귀 (Recursion)

며칠 전에 순열 공부하면서 재귀도 잠깐 살펴봤었는데 재귀 지옥에 빠져서 한참동안 헤맸던 기억이 있다. 1부터 N까지의 합을 구하는 함수 1부터 N까지의 합을 구하는 함수 sum을 재귀로 구현해보았다. 수학적 귀납법

2022년 11월 27일
·
0개의 댓글
·

split 구현하기 (C++)

C++은 STL에서 split이 지원되지 않기 때문에 문자열을 자를 때 직접 구현해서 사용해야 한다. C++ split 문자열과 구분자를 파라미터로 받는 함수 split을 만들어주었다. 특정 구분자 하나를 기준으로 자르기 (JS) 자바스크립트는 split이 있긴

2022년 11월 25일
·
0개의 댓글
·
post-thumbnail

아이디어가 떠올라서 오랜만에 꺼내들다. 🎨 (비전공자 찐따의 로고 만들기)

경영학 전공하던 비전공자 찐따가 만들었던 로고어도비 툴 사용하는 방법 조금밖에 모릅니다. 디자이너 선생님들이 보시면 비웃으시겠지만 나름 열심히 만들었었음 ㅠㅠ함께해서 더러웠고 다시는 보지말자~경영대와 이별 후 소융대로 전과하고 일년 쯤 됐을 땐가? 4-1학기였나보다.ㅋ

2022년 11월 25일
·
0개의 댓글
·
post-thumbnail

순열 만들기 (C++, JS)

순열 : 서로 다른 n개의 원소에서 r개를 순서에 상관있게 중복없이 뽑는 것을 순열이라 한다.C++로 순열을 먼저 만들어보고 그 다음 자바스크립트로 순열을 구현해보기로 했다.c++에서는 알고리즘 헤더의 next_permutation 을 통해 순열을 쉽게 만들 수 있다.

2022년 11월 23일
·
0개의 댓글
·

객체 지향 프로그래밍 입문 - 객체

절차지향으로 만들면 코드를 복사하게되고, 복잡해지고, 수정이 어려워지는 문제가 발생한다.그렇다면 객체지향은 어떨까?데이터와 프로시저를 객체로 묶는다.특정 객체가 가지고 있는 데이터는 객체의 프로시저만 접근할 수 있게 된다.이렇게 되면, 다른 객체에서는 해당 객체의 데이

2022년 11월 22일
·
0개의 댓글
·

자바스크립트 String 메서드 탐방 #3 - raw, repeat, replace, replaceAll, search, slice, split, startWith, subString

자바스크립트 String 내장 메서드 살펴보기, 세번째!이건 뭐지! 처음 보는 메서드였다.MDN에 의하면 템플릿 리터럴의 태그 함수라는데 어떻게 사용하고 어떤 상황에 쓰이는지 살펴보자.템플릿 리터럴의 유일한 내장 함수이다.raw에 그냥 ()로 호출하면 에러가 발생하는데

2022년 11월 21일
·
0개의 댓글
·

클린코드 - 함수

로버트 마틴의 클린코드 책 2장 함수를 읽고 공부한 내용을 정리하였다.함수는 작게 만들어라.함수를 만들 때는 작게만드는 것이 좋다. 그리고 더 작게 만들어라.각 함수가 이야기 하나를 표현하도록 작성해보자.블록과 들여쓰기if/else 문, while문 등에 들어가는 블록

2022년 11월 19일
·
0개의 댓글
·

클린 코드 - 의미있는 이름

로버트 마틴의 클린 코드 책에 나오는 내용을 기반으로 정리하였다.루프에서 반복 횟수를 세는 변수 i, j, k는 괜찮지만, 그 외에는 대부분 적절하지 않으므로 문자 하나만 사용하는 변수는 지양해야한다.클래스 이름과 객체 이름은 명사 또는 명사구를 사용하자.동사는 사용해

2022년 11월 19일
·
0개의 댓글
·

자바스크립트 String 메서드 탐방 #2 - indexOf, lastIndexOf, localeCompare, match, matchAll, padEnd, padStart, fromCharCode, fromCodePoint

지난 \[자바스크립트 String 메서드 탐방 생각보다 String 메서드가 많다...전체 문자열에서 인수로 주어진 문자를 찾는다.두번째 인수로 포지션을 넣어줄 수 있는데 넣지 않는 경우 가장 앞쪽에 있는 문자의 위치를 찾아서 반환한다. 주의할 점이라면 찾지 못하는 경

2022년 11월 18일
·
0개의 댓글
·

객체스럽게 사용하기

객체에 데이터를 직접 get 해오는 것 대신 메시지를 보내는 방법을 사용해서 객체를 객체스럽게 사용하라고 하셨다. 그거 어떻게 하는 거죠? 싶어서 관련 자료 글을 정독해보며 정리해보았다.자바 빈 설계 규약 (자바 빈 : 자바로 작성된 소프트웨어 컴포넌트)클래스의 멤버

2022년 11월 16일
·
0개의 댓글
·

객체지향설계 (SOLID)

클린 소프트웨어 책에 나오는 SOLID에 대해 공부해보았다.객체 지향 프로그래밍 설계 다섯가지 원칙을 SOLID라고 부른다.SRP, OCP, LSP, ISP, DIP의 앞 글자를 따서 SOLID이다.SOLID의 다섯 가지 원칙을 살펴보면 다음과 같다.단일 책임 원칙 (

2022년 11월 15일
·
0개의 댓글
·
post-thumbnail

자바스크립트 String 메서드 탐방 #1 - Symbol.iterator, at, charAt, charCodeAt, codePointAt, includes, concat, endsWith

MDN 공식문서 자바스크립트 String 메서드 사용해보기Symbol.iterator가 있으면 순회가 가능하다 정도로만 알고 있었는데반복문을 수동으로 돌릴 수도 있다니.. 갑자기 yeild나 제너레이터 개념은 어려워서 예전에 아- 그렇구나- 이런게 있구나.하고 넘겼었던

2022년 11월 14일
·
0개의 댓글
·

자바스크립트 private 필드와 메서드

ES2019부터 자바스크립트에서도 프라이빗으로 선언된 경우 선언된 내부의 클래스에서만\` 접근이 가능하다.this 가 아닌 \`Iu.private Methodprivate static 메서드는 public static 메서드와 달리 인스턴스가 아닌, class에서 호출

2022년 11월 12일
·
0개의 댓글
·
post-thumbnail

Jest Mock Function (Mocking) 사용해보기

Jest에서 가짜 함수(Mock)를 만들어서 테스트하는 방법mock 함수는 어떻게 호출 되었는지, 몇 번 호출되었는지, 함수의 파라미터로 어떤 인수가 넘어왔는지 확인할 수 있는 유용한 기능을 제공한다.jest에서 mock 함수를 만드려면 jest.fn()을 호출하면 된

2022년 11월 11일
·
0개의 댓글
·

Jest - Setup and Teardown (beforeEach, afterEach, beforeAll, afterAll)

자바스크립트 테스트 프레임워크 Jest테스트 코드가 실행 전에 작업할 것이 있다면 beforeEach, beforeAll을 사용할 수 있고테스트 코드 실행 후에 작업할 것이 있다면 afterEach, afterAll을 사용할 수 있다.테스트가 수행되기 전에 무언가 동작

2022년 11월 11일
·
0개의 댓글
·
post-thumbnail

자바스크립트 클래스 이해하다가 머리터지기 🤯 (feat. 필드와 컨스트럭터)

객체지향에서 내부 인터페이스와 외부 인터페이스를 구분해야 한다.OOP 말로만 들었지 직접 공부해보게 될 줄은 몰랐다. 특히 그것도 자바스크립트에서..동일한 클래스의 다른 메서드에서는 접근할 수 있지만, 해당 클래스 외부에서는 접근할 수 없는 프로퍼티와 메서드를 의미한다

2022년 11월 9일
·
0개의 댓글
·