전체 글116 블록체인 이해하기 / Git 명령어 💭 교육 1일차 서울시에서 주관하는 뉴딜일자리사업인 [메타버스 핵심기술, 블록체인 기반의 기술사업화 전문인력 양성과정 2차] 과정에 참여하게 되었다. 메타버스와 블록체인은 꺼지지 않는 불씨와도 같으니 궁금했고 알고 싶었다. 취업 준비를 하면서 내 실력에 의문이 너무나도 많고 더 배우고 싶고 일단 좀 더 코드를 짜보고 싶단 마음이 많이 들게 되어 지원하게 됐다. 3개월의 짧은 기간 동안 초심을 잃지 않고 꾸준함을 유지하기 위해 매일매일 배운 것을 기록 해보기로 결심! 오늘은 블록체인을 이해하는 시간을 가졌고 간단한 cmd와 git 명령어를 배웠다. git 명령어는 얼추 알고 있긴 했지만 강사님께서 재미있게 비유 해주셔서 빡! 기억할 수 있었다 ㅎㅎ 💡 블록체인? 데이터를 나누어져있는 블록(block)들에 .. 2023. 5. 2. 자바스크립트 File input 동적 추가, 삭제하기(이벤트 위임) 서론 💭 전에 진행했던 프로젝트에서 j쿼리를 이용해 작성한 코드를 자바스크립트로 바꾸는 과정을 진행하고 있는데 약간의 애를 먹었던 동적으로 input file 태그를 추가해주는 작업! 파일 추가 버튼을 누르면 input이 추가 되고 추가된 삭제 버튼을 누르면 해당 input이 삭제되는 기능이다. input 태그는 잘 늘어나는데 삭제가 뒤죽박죽으로 됨, 삭제는 되는데 파일 선택이 안 됨, 걍 삭제가 안 됨 등 다양했는데 어쨌는 해내었다 ㅎ JSP 일부 HTML 삽입 미리보기할 수 없는 소스 메인이미지는 이미지 한 장만 업로드 할 수 있도록 구현했기 때문에 상세이미지에만 기능을 적용했다. input 태그의 name 값으로 각각의 input을 구분하도록 했고 동적으로 input 태그가 추가될 곳은 div 태그.. 2023. 4. 29. 리액트 찍먹 3 - Component 컴포넌트 컴포넌트는 쉽게 말해 UI를 구성하는 UI 요소를 의미한다. 리액트 홈페이지의 공식 문서에 따르면 컴포넌트를 사용하면 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다고 설명한다. '재사용 가능'과 '개별적으로 살표 볼 수 있음'이 핵심이라고 볼 수 있을 것 같다. 컴포넌트는 간단히 이런식으로 사용할 수 있다. 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. 함수 안에 UI를 제작하여 컴포넌트를 사용할 부분에 HTML 태그를 사용하는 것 처럼 을 써주면 되는 것! 이로써 HTML을 줄여 쓸 수 있는 것이다. 이렇게 함수로 작성한 컴포넌트를 함수 컴포넌트라고 호칭하고 ES6의 class를 사용하여 정의할 수도 있는데 클래스 컴포넌.. 2023. 4. 21. 리액트 찍먹 2 찍먹 과정인 만큼 리액트로 간단하게 블로그 UI를 구성 했다! 1. navbar 생성 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 차례대로 App.js와 App.css App.js의 필요없는 부분을 모두 삭제하고 네이게이션 bar만 간단히 생성했다. (정말 구색용 ㅎㅎ..) class 대신 className을 사용할 것! 자동완성 덕분에 헷갈릴 일은 없다. 반응형도 잘 적용 되었다! 2. 제목과 내용을 보여주는 List - state로 변수 만들기 HTML 삽입 미리보기할 수 없는 소스 state로 제목 데이터를 저장했다. App() 함수의 return 위에 작성해주면 된다. state를 사용하려면 js 파일 최상단에 꼭 import React, { useState } .. 2023. 4. 14. 리액트 찍먹 1 1. 리액트 설치 및 셋팅 node.js와 VS Code 다운로드가 필요하다. LTS 말고 현재 버전(비번역은 Current 어쩌고라 나왔을 것)을 설치 했다. (VS Code는 이미 사용 중이었어서 캡쳐 패스...) 다운로드가 완료 되었으면 Work Space를 생성해야 한다. 자신이 원하는 위치에 원하는 이름으로 원하는 폴더를 만들면 된다. 나는 C드라이브에 생성해주었다. 폴더 생성 후 상단 메뉴 중 File-Opend Folder로 방금 생성한 폴더를 불러오고 위와 같이 터미널에 npx create-react-app '프로젝트명' 을 입력해준다. 프로젝트를 생성하는 방법이다. 코드 입력 전 빨간 밑줄친 부분을 확인 해야하는데 빨간 밑줄이 본인이 생성한 폴더명으로 끝나야 폴더를 잘 불러온 것이다. 코.. 2023. 4. 13. 이전 1 ··· 5 6 7 8 9 10 11 ··· 24 다음
