JH 개발 블로그

리액트의 데이터 저장공간 state 만드는 법 1. { useState } 상단에 첨부한다. 2. useState{데이터} import React, { useState } from 'react'; // 1. state 사용하려면 상단에 이렇게 첨부 import logo from './logo.svg'; import './App.css'; function App() { useState('남자 코트 추천'); // 2. [a, b] let posts = '강남 고기 맛집'; return ( 개발 Blog { posts } 11월 14일 발행 ); } useState 함수를 실행해주고 나면 두개의 원소를 가지고 있는 array 를 리턴해준다. ==> [a, b] a 는 useState() 안에 작성해준 sta..

index.js ReactDOM.render( , document.getElementById('root') ); index.js 라는 파일에서는 app.js 에 있는 코드를 public 폴더 밑에 있는 index.html 에 박아넣으라는 문구가 보인다. JSX 에 대하여 function App() { return ( ㄴㅇㄹㄴㅇㄹㄴㅇㄹ ); } app.js 파일 안에서 return 안의 소괄호에는 html 코드를 작성할수 있다. 그런데 여기에는 정확히는 JSX 문법을 작성해야 한다. (HTML 처럼 생긴 JSX 코드) 그러나 html 의 div class 를 쓰면 안된다. 자바스크립트의 문법을 가지는 JSX 이기 때문에 class 는 자바스크립트의 class 를 나타내므로 div className 을 써주..

위코드 2주차....바쁘게 지나간 일주일이었다. 나는 이 일주일을 기록해보고 회고해보고자 한다. 월 - 금 우선 이번 주 중점적으로 했던 일은 HTML + CSS + JS 로 인스타그램을 따라 만들어 보는 것이다. 아래는 결과물이다. 인스타그램을 따라 만들면서 느꼈던 생각은... 역시 난 프론트엔트 개발자가 적성에 맞는다는 느낌이었다. 기능 하나하나를 구현하고 원하는 대로 결과가 이루어질 때마다 희열이 느껴졌다. 사실 나는 HTML 과 CSS 가 좋아서 프론트엔드 개발자가 되기로 맘 먹은 거였는데 JS 로 기능을 구현할 때, 내가 이런 기능을 구현하려면 어떤 순서와 절차가 필요할까? 내가 빼먹은 순서, 절차가 있는가? 그게 화면에서 구현이 잘 되어지는가? 이렇게 수학 문제를 푸는 느낌이고 직접적으로 해결..

깃(Git) 에서 브랜치(branch) 를 사용하는 방법에 대해서 알아보자. 깃(Git) 은 동시에 여러 개발자들이 프로젝트에서 각기 다른 기능을 개발할 수 있도록 브랜치 기능을 제공한다. 각자 각기의 작업공간에서 작업하므로 서로에게 영향을 주지 않는다는 면에서 서로 다른 개발 작업을 수행할 수 있다. 브랜치의 기본 동작과정 기본적으로 Git 저장소를 만들면 자동적으로 마스터 브랜치가 생성이 되는데, 이 브랜치는 일반적으로 배포가 가능한 수준의 안정화된 버전을 포함하고 있다. 마스터 브랜치는 항상 안정화되고 배포가 가능한 상태여야 한다. ↓ 즉, 합치기(Merge) 가 수행되기 전까지는 안정적으로 배포가 이루어지고 있다가, 모든 기능이 합쳐진 이후에 또 다시 배포할 수 있으므로 개발의 안정성이 매우 뛰어..

const information = { name: '김개발' } 여기에서 키 하나를 생성하고, 그 키에 값을 할당하기 위해서는 다음과 같이 써줘야 한다. const verb = 'developes' const project = 'facebook' information[verb] = project // [A] information.developes = 'facebook' // [B] B의 방식으로도 할당이 가능하지만 이 경우 키와 값은 항상 정해진다... 하지만 A와 같은 방법은 변수 verb와 project 가 가지는 값에 따라 다른 키와 다른 값을 가지는게 가능해진다. 객체 순회하기 object.keys 메서드 Object.keys 메소드는 어떤 객체가 가지고 있는 키들의 목록을 배열로 리턴하는 메소드..

자바스크립트 클래스 개념 // 클래스를 쓴다. (옛날 방식) function 기계(){ this.q = 'consume'; this.w = 'snowball'; } var nunu = new 기계(); var garen = new 기계(); // 클래스를 쓰지 않고 객체만 생성하였을 때 var nunu = { q: 'consume', w: 'snowball' } var garen = { q: 'strike', w: 'courage' } function 기계(구멍){ this.q = 구멍; this.w = 'snowball'; } var nunu = new 기계('consume'); var garen = new 기계('strike'); nunu 의 출력결과는 기계 {q: "consume", w: "snow..

사이트에 이미지를 넣는 방법은 두 가지가 있다. 하나는 태그를 사용하는 것이고, 다른 하나는 태그에 background-image 속성을 추가하는 것이다. 이 두가지의 방법의 차이점은 뭘까? 그리고 어떤 경우에 사용하는지 알아보자. 이것을 이해하기 위해서는 먼저 시멘틱 웹과 시멘틱 태그에 대한 이해가 있어야 한다. 먼저 Semantic 시멘틱은 '의미의' '의미론의' 라는 뜻을 가지고 있다. 시멘틱 웹에 대해서 좋은 자료가 있어서 가져와 보았다. ↓ 시맨틱 웹은 컴퓨터가 정보 자원의 뜻을 이해하고 논리적 추론까지 하는 차세대 지능형 웹이다. 지금의 웹은 특정 검색어를 치면 불필요한 문서가 모두 나와 일일이 찾아 보아야 하는데 지능형 웹은 다르다. 단어의 유사성과 상관관계 등을 파악해서 원하는 결과물만 찾..

오늘은 위처럼 생긴 검색창을 만들어 볼 것이다. div 태그 안에는 input 태그, img 태그가 들어있다. .search { position: relative; width: 300px; } input { width: 100%; border: 1px solid #bbb; border-radius: 8px; padding: 10px 12px; font-size: 14px; } img { position : absolute; width: 17px; top: 10px; right: 12px; margin: 0; } 부모 태그를 relative 를 하고, input 태그를 width: 100% 를 주어서 부모 공간을 꽉 차게 만든다. 그 후 돋보기 이미지를 부모 태그 안으로 배치하기 위해서는 position:..

let 아이디 = setInterval(함수, 밀리초); clearInterval(아이디); setInterval 함수는 사실 반환값이 있다. 반환값은 타이머에 대한 아이디(숫자)로, 나중에 이 값을 사용해 타이머를 제거할 수 있다. 이와 마찬가지로 setTimeout 함수도 clearTimeout 함수로 취소할 수 있다. /* 타이머 멈췄다가 다시 실행하기 */ let intervalid = setInterval(computerHandImg, 50); const clickButton = () => { clearInterval(intervalid); // 점수 계산 및 화면 표시 setTimeout(() => { intervalid = setInterval(computerHandImg, 50); }, 1..

이번 장은 타이머 사용하기가 핵심 -> 정해진 시간 뒤에 특정 코드가 동작 저번 시간 map 메서드에 대한 복습 ① 1 - 45까지의 숫자를 준비한다. ② 숫자를 섞는다. ③ 공 7개를 뽑는다. 마지막 공은 보너스 공이 된다. ④ 1초마다 공을 하나씩 화면에 표시한다. ⑤ 끝 따라서 첫번째 순서는 배웠던 map 메서드를 통해 공 45개를 만든다. const candidate = Array(45).fill().map((v,i)=> i+1); // 1 - 45 나는 아래처럼 작성했는데 결괏값이 ... const candidate = Array(45).fill().map((v, i) => i + 1); let answer = []; while (candidate.length > 0) { const index ..