JH 개발 블로그

Framework, library 에 대해 알아보자. 공통점: 다른 사람이 만들어 둔 코드 차이점: Framework - 다른 사람이 만든 틀(Frame) 안으로 내가 들어가서 작업하는 것 library - 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것 Framework : Angular, Vue Library : React 프레임워크는 신라면, 주방을 제공한다고 보면 되고, 라이브러리는 냄비를 제공한다고 보면 된다. 예를 들어... ▼ 프레임워크가 모두 제공되서 편리하지만 문제는 신라면만 제공되면 신라면만 먹어야 한다. 또한 해당 조리도구를 익혀야 한다. 하지만 라이브러리는 라면을 끓이기 위한 하나의 도구인 냄비 (남들이 만들어 놓은 도구) 를 제공 받는다. 안성탕면이나 불닭볶음면 등 ..

return ( ) return 소괄호 안에 이렇게 div 태그가 여러개 들어가는 것은 불가능하다. 대신 하나의 큰 div 태그가 여러 div 태그들을 감싸는 것은 가능하다. return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행 { 글제목[2] } 11월 16일 발행 // 주목하기 제목 날짜 상세내용 ); div 태그 지옥... 리액트는 HTML 을 한 단어로 줄여서 쓸 수 있는 방법을 제공한다. --> 이것이 리액트의 Component 문법이다. ↓ return ( 개발 Blog 버튼 { 글제목[0] } {따봉변경(따봉 + 1)}}>👍 {따봉} 11월 14일 발행 { 글제목[1] } 11월 15일 발행..

리액트의 데이터 저장공간 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:..