profile
공부하는 코린이 📚
태그 목록
전체보기 (98)공부(90)study(87)JavaScript(64)js(55)자바스크립트(53)html(28)CSS(28)vue(27)(21)vue3(13)vue.js(12)React(9)리액트(9)Node(8)canvas(7)노드(5)컴포넌트(5)JSX(4)component(4)vuejs(4)datastructure(4)캔버스(4)자료구조(4)express(4)array(3)web(3)drag(3)DROP(3)(3)드래그앤드롭(3)DOM(3)node.js(3)class(3)배열(3)this(3)git(2)렌더링(2)프레임워크(2)선택자(2)조건부렌더링(2)Event(2)socket(2)github(2)오늘의공부(2)라이브러리(2)Flex(2)selector(2)canvas-api(2)DragAndDrop(2)ts(2)개발(2)v-bind(2)Props(2)Map(2)C(2)반복문(2)canvasapi(2)BigO(1)nodejs(1)슬라이드(1)결합자(1)웹개발(1)일치선택자(1)브라우저(1)rest parameter(1)애니메이션(1)나머지매개변수(1)시간복잡도(1)callback(1)puzzle(1)캔버스애니메이션(1)타이핑게임(1)알고리즘(1)웹스토리지(1)router(1)다이나믹컴포넌트(1)specificity(1)await(1)sessionStorage(1)정리(1)useState(1)Spread_Operator(1)margincollapsing(1)이벤트캡처링(1)async(1)비동기(1)for(1)태그(1)포인터(1)&&(1)이벤트리스너(1)타입스크립트(1)자바스크립트 자료형(1)콜백함수(1)생성자함수(1)hoisting(1)타입스트립트(1)웹게임(1)문자열(1)margin(1)자바스크립트버블링(1)비동기처리(1)mongodb(1)세션스토리지(1)자손선택자(1)초보(1)foreach(1)foorLoop(1)interface(1)인터페이스(1)combinator(1)String(1)이벤트위임(1)watch(1)삼항연산자(1)css덮어쓰기(1)JS반복문(1)mask(1)목표(1)Spread연산자(1)모달창(1)State(1)함수(1)자식선택자(1)메서드(1)시맨틱HTML(1)셀렉터(1)Sass(1)그리드(1)구조분해할당(1)이벤트핸들러(1)DevTools(1)버블링막기(1)이벤트핸들링(1)스프레드연산자(1)CSR(1)SSR(1)서버사이드렌더링(1)클라이언트사이드렌더링(1)splice(1)모달(1)함수컴포넌트(1)storage(1)localstorage(1)바닐라자바스크립트(1)개발자(1)게임(1)개발입문(1)클래스(1)드래그앤드롭이벤트(1)시맨틱(1)CSS우선순위(1)cookie(1)slice(1)복습(1)구구단게임(1)c언어(1)변수(1)다차원배열(1)@Inject(1)채팅앱(1)로컬스토리지(1)collapse(1)메소드(1)teleport(1)자바스크립트 ...(1)ejs(1)개발자가되고싶은(1)if(1)provide(1)브라우저렌더링(1)grid(1)일기(1)emit(1)git버전관리(1)slot(1)modal(1)초보개발자(1)3D(1)this키워드(1)set(1)이벤트(1)element(1)클리핑마스크(1)session(1)드래그앤드랍(1)apply(1)call(1)typescript(1)mask-image(1)Rest파라미터(1)scss(1)destructuring(1)WebStorage(1)Array함수(1)콜백(1)자바스크립트Array(1)promise(1)일반형제선택자(1)커스텀이벤트(1)캐러셀(1)나의이야기(1)구조체(1)requestAnimationFrame(1)POST(1)이벤트버블링(1)클래스컴포넌트(1)bind(1)호이스팅(1)인접형제선택자(1)문서객체모델(1)for문(1)세션(1)쿠키(1)sourcetree(1)버전관리(1)attr()(1)프로미스(1)
post-thumbnail

[2022.07.05] 리액트로 구구단 게임 만들기 (클래스 & 함수 컴포넌트)

리액트로 간단한 웹 게임(구구단) 만들기제로초님의 강의를 참고하여 이해한 내용을 바탕으로스스로 다시 만들어보았다.함수 컴포넌트와 클래스형 컴포넌트 2가지로 동일한 구구단 게임을 만들어 볼 것이다.작성한 전체 jsx 코드는 다음과 같다.작성한 코드를 하나씩 살펴보며 어떤

약 15시간 전
·
0개의 댓글
post-thumbnail

[2022.07.04] 리액트 JSX 반복문

jsx에서는 for문을 중괄호 안에 작성할 수 없다.똑같은 html을 반복적으로 사용할 때 반복문을 사용하면 중복 코드를 줄일 수 있다.리액트에서 반복문을 사용하는 방법을 알아보자.array 메소드인 map 함수를 사용하여 코드 반복을 실행할 수 있다.map은 배열 내

1일 전
·
0개의 댓글
post-thumbnail

[2022.07.03] 리액트 조건부 렌더링(if문, 삼항연산자, 논리 && 연산자)

리액트의 조건부 렌더링은 자바스크립트와 동일한 방식으로 동작한다.if 또는 조건부 연산자(삼항연산자)와 같은 자바스크립트 연산자를 사용하여 리액트가 조건에 맞는 UI를 화면에 업데이트하도록 한다.props 값에 따라 다른 컴포넌트를 렌더링하는 방법이다.먼저 if문을 사

3일 전
·
0개의 댓글
post-thumbnail

[2022.07.20] React 1주차 주간 복습

벨로그에 정리한 내용으로 리액트 1주차 복습6월 27일 ~ 7월 1일에 작성한 공부 노트 복습프로젝트 이름으로 fristApp 을 만드려고 했는데 대문자 사용이 불가하다는 에러 메시지가 떠서 first-app 으로 작명하였다.yarn이 설치되어 있다면 yarn star

4일 전
·
0개의 댓글
post-thumbnail

[2022.07.01] 리액트 개발시 유용한 dev tools, 리액트에서 객체를 함부로 변경하지 말자.

리액트에서 객체를 함부로 바꾸지 마라. (불변성)자바스크립트 문법중에 array와 관련된 내장 함수를 먼저 살펴보자.바로 1번 그룹은 원본 배열을 직접적으로 수정할 것이고2번 그룹은 원본 배열을 수정하지 않고 새로운 배열을 만들어 반환할 것이다.가급적 원본 배열을 직접

5일 전
·
0개의 댓글
post-thumbnail

[2022.06.30] 리액트 defaultProps, props.children

props를 지정해서 보내지 않은 경우 기본값을 설정할 수 있다.MyComp라는 컴포넌트를 만들었다. 이 컴포넌트는 props를 받아서 props의 name을 렌더링해 보여줄 것이다.MyComp 컴포넌트에 name로 아이유를 전달했다.화면에 Hello! 아이유라고 나타

6일 전
·
0개의 댓글
post-thumbnail

[2022.06.29] 리액트 props 전달하기, 사용자 정의 컴포넌트 기초

리액트에서 작성한 JSX는 Babel이 JSX를 javascript로 변환해준다.JSX에서 위와 같이 작성했다면 Babel은 이를 javascript로 다음과 같이 변경해 준다.조금 복잡해 보이지만 React의 createElement 라는 메서드를 사용하면 해당 태

7일 전
·
0개의 댓글
post-thumbnail

[2022.06.28] 리액트 - useState 함수형 컴포넌트와 클래스형 컴포넌트

useState 사용하여 컴포넌트 내에서 바뀌는 값을 관리할 수 있다.Hook을 통해 useState를 사용할 수 있는데 Hook은 React 16.8버전에 추가된 기능이다.클래스 컴포넌트를 사용하지 않아도 state를 관리할 수 있다.먼저, useState를 impo

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

[2022.06.27] REACT - 기초 문법

리액트를 시작하기 위해서는 Node가 설치되어 있어야 하며 npm install로 리액트를 설치 후 create-react-app 명령어를 사용하여 프로젝트를 생성할 수 있다.프로젝트 생성이 완료되면 위와 같은 파일과 폴더명이 나타난다.완료 되었다면 터미널에서 npm

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

[2022.06.26] 자료구조- C 구조체

구조체란 서로 다른 자료형의 데이터를 하나의 그룹으로 묶은 자료형을 의미한다. C언어의 기본 타입을 가지고 새롭게 정의 한다고 하여 사용자 정의 타입이라고도 한다. 기본 타입만 가지고 나타내기 어려운 자료를 나타낼 때 사용한다.예를 들어, 학생이라는 구조체가 있다고 가

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

[2022.06.25] 자료구조 - C기본 기초 기본문법(자료형, 배열, 다차원배열)

C의 단순 자료형 C에서 기본적으로 제공하는 자료형(Data Type)이다. 정수 자료형 short(2바이트) : -32,768 ~ 32,767 int(4바이트) : -2,147,483,648 ~ 2,147,483,647 long( > 참고 자료 [자료구조] #0

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

[2022.06.24] 자료구조 - 알고리즘 개념, 시간복잡도 (Big O)

넓은 의미로 자료구조와 함께 컴퓨터 프로그램을 구성하는 한가지 요소이다. 컴퓨터 명령어들의 집합이라고도 볼 수 있다.프로그램이 자료와 연산으로 구성되어 있다면 알고리즘은 자료구조와 함께 프로그램을 구성하는 한가지 요소로 볼 수 있다.좁은 의미로는 어떠한 문제를 해결하기

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

[2022.06.23] 자료구조의 정의, 분류, 역할, 추상자료형(ADT)에 대해

프로그램 개발은 건물을 건축하는 것과 비슷하다.장난감 집이 초보 개발이라면 고층 아파트는 고급 개발과 같다. 초보 개발에서 고급 개발로 넘어가기 위해서는 자료구조가 필요하다. 초보자는 주먹구구 방식이지만, 고급 개발자는 체계적인 방법이 필요하기 때문이다.컴퓨터 프로그래

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

[2022.06.22] JS drag and drop으로 선택한 요소의 위치 바꾸기

이틀 전에 혼자 드래그 앤 드롭 구현했을 때 동작은 잘 되는데 뭔가 아쉬운..? 느낌이 있어서 관련 영상 찾아서 따라 만들어보고 복습겸 다시 만들어보았다.list 이름의 변수를 선언하여 class가 list인 요소를 선택하였다. ul 태그가 선택될 것이다.let으로 선

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

[2022.06.21] Node bodyParser, ejs 사용방법 & DB저장후 저장한 데이터 ejs에서 사용하기

이전에 get, post 요청하는 코드까지 작성했고이번에는 작성한 html의 form을 post했을 때 몽고DB에 저장 후, 몽고DB에 저장한 데이터를 다시 가져와서 HTML에 보여주는 것을 구현해보려 한다.express 라이브러리를 최신 버전으로 설치했기 때문에 bo

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

[2022.06.20] (스스로 해보기) 자바스크립트로 드래그 앤 드롭 이벤트 구현하기

자바스크립트 복습 겸 드래그 앤 드롭 이벤트 구현 공부HTML과 CSS를 사용해 드래그할 요소와 드래그 박스를 만들었다.드래그 요소에는 draggable 속성을 작성해주면 된다.드래그 이벤트는 드래그 가능한 대상에서 발생할 수 있는 이벤트이다.dragstart드래그가

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

[2022.06.19] Node GET/POST 요청하기

공부한 내용을 바탕으로 직접 구현해보기메인 페이지를 간단하게 디자인했다.홈에서 글쓰기 버튼을 누르면 /write 페이지로 이동되도록 코드를 작성했다.또, 사용자가 /write 페이지로 접속했을 때도 마찬가지로 get요청을 처리하도록 하였다.우선 wrtie 페이지 get

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

[2022.06.18] Node - express, CSS적용, MongoDB 연동하기

터미널에 npm init 명령어를 사용해서 package.json 파일을 먼저 만들어 주었다.npm install express하여 express 라이브러리를 설치했다.설치한 express 라이브러리를 require를 사용해 불러온 후 8000번 포트를 사용하도록 작성

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

[2022.06.17] Vue teleport(텔레포트)

vue에도 게임에서 순간이동과 같은 기능을 하는 텔레포트라는 기능이 존재한다. 작성하는 모든 코드와 내용은 결국 index.html에 id="app"을 가진 div 태그 안에 모든 내용이 작성되게 된다.App.vue 파일에 위와 같이 h1, h2 태그를 사용하여 간단하

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

[2022.06.16] Vue slot, template(v-slot)

컴포넌트를 자유자재로 손쉽게 사용할 수 있는 도구이다.prop이나 data, 이벤트 외에도 실질적인 템플릿 코드 조각을 통째로 보내서 화면에 보여줄 수 있는 유용한 기능이다.먼저, components 폴더 안에 slot 폴더를 만들고slot폴더 안에 CardView.v

2022년 6월 15일
·
0개의 댓글