profile
코린이 화이팅
post-thumbnail

Node.js

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 Non-blocking I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다. 내장 HTTP 서버 라이브러

2023년 8월 2일
·
1개의 댓글
·

JS 개념 정리

Get과 Set을 이해하기 전에 JS의 클래스와 인스턴스라는 개념을 먼저 이해해야 한다. 클래스는 ES6에 도입된 개념으로 객체를 만들어내는 '틀'이다. 이 '틀'로 만들어진 것이 객체이면서 그 클래스의 '인스턴스'이다.1-1. 객체 객체(object)란 두 종류의 정

2023년 7월 23일
·
1개의 댓글
·
post-thumbnail

JS & CSS

CSS 강의를 들으면서 새로 알게된 내용을 정리해보자

2023년 7월 18일
·
2개의 댓글
·
post-thumbnail

Git & Github

git이란 특정 폴더, 파일들의 버전 관리를 위한 프로그램이다.회사나 개인이 진행하는 프로젝트는 한번에 완성되지 않고 기능 추가, 버그 수정 등 다양한 작업을 거친다. 이 과정을 거치면서 git을 통해 버전 관리를 하는 것이다.github는 git이 로컬 저장소에서 관

2023년 7월 14일
·
0개의 댓글
·

Movie API - constant & custom hooks

constant는 말 그대로 자주 쓰는 변수를 선언한 폴더를 만들어 export하고 다른 폴더에서 import 하는 기능을 위해 만든 것이다. constant > index.js이미지를 불러오기 위한 기본 URL과 데이터를 불러오기 위한 조건인 KEY 값을 선언한 폴더

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

Movie API - Moviedetail

List에 나온 영화들에서 포스터를 클릭하면 해당 영화의 detail 페이지로 넘어간다. 마찬가지로 API에서 오는 데이터의 형식을 확인해야한다. 또한 불러오는 조건도 다르기에 데이터를 불러올 때 유의해야한다. useParams 후크는 현재 URL에서 와 일치하는 동적

2023년 5월 28일
·
0개의 댓글
·

Movie API - fetch & axios

데이터를 불러오고 화면에 보여주는 작업에서 짚고 넘어가야 할 개념인 데이터 불러오기를 arabozaAPI라고 제목에 표시했지만 보통 open API를 사용한다. open API는 공공 기관이 이용자에게 정보를 재활용하거나 상업적, 비영리적으로 이용할 권리를 부여함으로써

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

Movie API - Movielist

핵심 기능인 MovieList, 영화 데이터를 불러오고 리스트로 나열한다.영화 제목을 받는 input, 영화 평점 option 평점은 대체로 낮아서 주로 선택하지 않고 검색하긴 한다.영화 검색 후 list 가 나열되고 옆으로 스크롤 가능하게 만들었다. useState와

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

Movie API - Home

데이터를 불러오는 작업을 드디어 해봤다. 처음엔 이해하기 어려웠지만 많이 적응했다. 파일은 Home, constant, hooks, moviedetail, movielist로 구성되어있다. HomeCSS

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

To Do List - CSS update

to do list에 css update 했다. 물론 디자인 감각이 전혀 없기에 검색하다 이쁜 디자인 가져왔다. 죄송하고 감사합니다....기존 기능에 Done list와 checkbox 에 check시 underline 기능을 추가했다.Done listCSS

2023년 5월 28일
·
0개의 댓글
·
post-thumbnail

To do list -CRDU

update 기능을 추가하기 위해 delete 기능과 마찬가지로 무엇을 수정할지 targeting 하고 list에서 input 화면으로 바뀌는 기능을 추가한다. 이 기능을 위해선 삼항 연산자를 통해 수정이 클릭되지 않았을시 updateTarget.id !== todo.

2023년 4월 4일
·
0개의 댓글
·
post-thumbnail

To do list - CRD

React.js로 to do list 만들기delete 기능 시 지워야하는 <li>를 지정하기 위해 data-이름 형태로 dataset을 DOM에 저장하여 onClick시 .currentTarget.dataset.이름 으로 타켓팅하여 delete 기능을 실행한다.

2023년 3월 30일
·
0개의 댓글
·
post-thumbnail

NETFLIX 화면 구현

HtmlCSS

2023년 2월 22일
·
0개의 댓글
·
post-thumbnail

nomadcoders - meme maker(3)

@import "reset.css" CSS 리셋은 일관성 없는 다양한 브라우저의 기본 스타일을 초기화하는 목적으로 사용한다.

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

카카오 로그인 화면 구현

HtmlCSS

2023년 2월 20일
·
0개의 댓글
·
post-thumbnail

nomadcoders - mememaker(2)

lalala

2023년 2월 15일
·
0개의 댓글
·
post-thumbnail

nomadcoders - meme maker(1)

Html<canvas></canvas> 일반적인 이미지 처럼 스타일을 적용시킬 수 있습니다. 하지만 이 방법은 실제 캔버스 위에 그리는 것에는 영향을 끼치지 않습니다. app.js.fillRect() x,y,width,height 설정하여 색칠된 도형을 출력

2023년 2월 8일
·
0개의 댓글
·
post-thumbnail

nomadcoders - weather

weather.jsNavigator 인터페이스는 사용자 에이전트의 상태와 신원 정보를 나타내며, 스크립트로 해당 정보를 질의할 때와 애플리케이션을 특정 활동에 등록할 때 사용한다. Geolocation.getCurrentPosition() 메서드는 장치의 현재 위치를

2023년 2월 3일
·
0개의 댓글
·
post-thumbnail

nomadcoders - deleting todos

todo.js항목 구분을 위해 newToDo를 객체 형식으로 만들고 id를 부여한다. id는 랜덤한 숫자를 부여하기 위해 Date.now()를 사용한다. li구분을 위해 li에 newToDo.id를 부여한다. 기존에 선언한 deleteToDo에 .filter()를 사용

2023년 2월 2일
·
0개의 댓글
·

nomadcoders - loading todos

todo.jstoDos 배열을 let으로 바꿔 재할당이 가능하게 만든다. JSON.parse() 메서드는 JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성한다. JSON.parse()로 str으로 저장된 값을 객체로 생성하고 새로고

2023년 2월 2일
·
0개의 댓글
·