profile
공부하는 코린이 📚
태그 목록
전체보기 (95)공부(87)study(84)JavaScript(64)js(55)자바스크립트(53)html(28)CSS(28)vue(27)(21)vue3(13)vue.js(12)Node(8)canvas(7)리액트(6)React(6)컴포넌트(5)노드(5)자료구조(4)express(4)vuejs(4)datastructure(4)component(4)캔버스(4)DROP(3)DOM(3)배열(3)web(3)drag(3)드래그앤드롭(3)array(3)(3)node.js(3)class(3)this(3)오늘의공부(2)canvas-api(2)git(2)canvasapi(2)selector(2)github(2)Props(2)JSX(2)Flex(2)socket(2)개발(2)Event(2)라이브러리(2)ts(2)C(2)프레임워크(2)v-bind(2)DragAndDrop(2)선택자(2)attr()(1)프로미스(1)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)태그(1)포인터(1)이벤트리스너(1)타입스크립트(1)자바스크립트 자료형(1)콜백함수(1)생성자함수(1)hoisting(1)타입스트립트(1)문자열(1)margin(1)자바스크립트버블링(1)반복문(1)비동기처리(1)mongodb(1)세션스토리지(1)자손선택자(1)초보(1)interface(1)인터페이스(1)combinator(1)String(1)이벤트위임(1)watch(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)클라이언트사이드렌더링(1)splice(1)모달(1)storage(1)localstorage(1)로컬스토리지(1)바닐라자바스크립트(1)개발자(1)게임(1)개발입문(1)클래스(1)조건부렌더링(1)드래그앤드롭이벤트(1)시맨틱(1)CSS우선순위(1)cookie(1)slice(1)복습(1)c언어(1)변수(1)다차원배열(1)@Inject(1)채팅앱(1)Map(1)collapse(1)메소드(1)teleport(1)자바스크립트 ...(1)ejs(1)개발자가되고싶은(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)bind(1)호이스팅(1)인접형제선택자(1)문서객체모델(1)for문(1)세션(1)쿠키(1)sourcetree(1)버전관리(1)
post-thumbnail

[2022.07.20] React 1주차 주간 복습

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

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

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

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

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

[2022.06.30] 리액트 defaultProps, props.children

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

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

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

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

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

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

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

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

[2022.06.27] REACT - 기초 문법

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

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

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

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

6일 전
·
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개의 댓글
post-thumbnail

[2022.06.15] Vue 컴포넌트 - Provide&Inject, 다이나믹 컴포넌트

보통 부모에서 자식 컴포넌트로 데이터를 보낼 때 props를 사용한다. 하지만 중첩된 관계(자식의 자식의 자식.. 과 같은)라면 번거롭고 복잡해진다.components 폴더 안에 provide-inject 라는 폴더를 만들고CompLevel1, 2, 3 세가지 vue

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

[2022.06.14] Vue 컴포넌트 - 컴포넌트간 데이터 전달, 커스텀이벤트($emit)

DetailView.vue 파일을 컴퍼넌트 폴더에 하나 만들었다.간단하게 모달창을 디자인했다.이제 App.vue 파일에서 방금 만든 DetailView 를 import하고 등록해서 사용하면 된다.그리고 모달 창이 처음부터 보여지면 안되므로 v-if 디렉티브를 사용하여

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

[2022.06.13] Vue component - 오브젝트 컴포넌트로 각각 다른 데이터 바인드하기, non-prop 속성

먼저 products 데이터 배열을 만들고 오브젝트 아이템을 작성하였다.템플릿 태그 안에 html 요소도 작성해주었다.li 태그 안에 product 오브젝트가 리스트로 작성된다.이제 이 오브젝트들을 하나하나의 모양을 가진 컴포넌트로 만들어보고자 한다.기본적으로 반복문을

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