전체 글 (136) 썸네일형 리스트형 10/20 - 프로젝트 시작(프론트엔드) 내가 다니는 학원인 '광주 스마트 인재개발원'에서 2차 프로젝트를 시작하였다. 1차 프로젝트는 자바로만 구현을 하여 '야구게임'을 만들었다. 그런데 이번에는 작성할 산출문서도 많다. 이번 핵심 프로젝트 주제는 "SNS"기반 리버스 엔지리어링 이다. 그래서 트위터+렛플을 결합하여 웹 사이트를 만들 것 입니다. 팀은 4명으로 구성되어있고 나 = 프론트엔드 / 팀원3명 = 백엔드 이다. 풀스택으로 공부중이라 프론트엔드가 어디부터 어디까지 인지 몰랐는데 선생님께 여쭤보니까 화면구성, 값을 받아오고, 값을 넘겨주는것 까지 프론트엔드 이다 한마디로 눈에 보이는 화면을 구성하고 데이터 베이스를 연결해야 한다. 우리팀에는 디자이너가 없으므로 무료 템플릿을 뜯어서 고칠것이다. 템플릿 없기는 멘땅에 해딩이기 때문에.. h.. 2022년 웹 개발 로드맵 총정리 (공부순서 알려드림) 풀스택 과정을 공부중입니다. 그런데 프론트엔드 언어와 백엔드 언어를 같이 배우니까 너무 헷갈립니다... 그래서 저를 위해서 정리했습니다!!! 1.basic tools * computer: mac OS / Windows /Linux * text editor: VS Code/ IntelliJ/ Atom /sublime Text * Browser : Chrome/ Edge / Safari/ Firefox * Terminal : Powershell / Bash / zsh 2.Front-end * HTML: HTML Tags / Page Structure/ Sematic Tags / SEO / Accessibility(접근성) * CSS: Styling/ Layouts / Respomsive Design / An.. 데이터 모델링의 이해 제1절 1. 모델링은 현실세계에 대해서 표현하는 것으로 이해할수 있습니다. 모델링의 특징은? - 현실세계를 일정한 형식에 맞추어 표현하는 추상화의 의미를 가질 수 있음 - 모델링은 단지 시스템 구현만을 위해 수행하는 타스크가 아니며, 시스템 구현을 포함한 업무분석 및 업무형상화를 하는 목적도 있음 - 복잡한 현실을 제한된 언어나 표기법을 통해 이해하기 쉽게 하는 단순화의 의미를 가지고 있음 - 애매모호함을 배제하고 누구나 이해가 가능하도록 정확하게 현상을 기술하는 정확화의 의미를 가짐 발생시점에 따른 엔터티 분류 - 기본/엔터티(Fundamental Entity, Key Entity) - 중심엔터티(Main Entity) - 행위엔터티(Active Enity) 2. 데이터 모델링이 필요한 이유는? 첫 번.. 10/11- react import React, {useRef, useState, useEffect } from 'react' const Join = () => { const [userData, setUserData]= useState({}) const idRef = useRef() const pwRef = useRef() const nameRef = useRef() const selRef = useRef() const btnCk=()=>{ console.log('id : ', idRef.current.value) console.log('pw : ', idRef.current.value) console.log('name : ', idRef.current.value) console.log('selected : ', idRef.c.. 10/07 작업 1. Header에 있는로고 클릭 시, 메인 창으로 이동한다 2. 우리가 가진 json 파일 => 목록안에 세팅 완료! 1. JSX: HTML +JS -- 규칙 a. 반드시 하나의 부모요소로 감싸줄 것 b. {} return 문 안에서 js문법쓰려면? => if문 사용 불가 => 삼항연산자?: =>&&연산자 c. 태그 사용할때 무조건 소문자 2.Component - class Component => this문법 - function Component 컴포넌트: 어플의 최소단위 => 반복되는 코드를 하나로 묶어서 컴포넌트로 만든다 3.props 프로퍼티: 상위 컴포넌트 => 하위 컴포넌트로 값을 전달 => 하위 컴포넌트 : Const 하위컴포넌트 = (props) => {} 그런데, 속성 이름만 가져오.. 10/6- react [라우터(Router)] 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 [리액트는 한개의 페이지] Single Page Applicatin [눈속임으로 여러 페이지처럼 구현 -> spa의 장점은 그대로 유지] [React Router 설치] npm install react-router-dom 1.설치 - npm 설치는 프로젝트 단위 - 내가 새로운 프로젝트를 설치한다면 다시 설치 npm install react-router-dom => npm i react-router-dom 대체 가능 Q.yarn? npm 대체 ex) yarn add react-router-dom + npm 2. index.js에서 전체 App을 BrowserRouter로 감싸줄 것! 2-1. import{Br.. 10/5(수) React-[useEffect, 영화 데이터 리액트로 바꾸기] 오전 React [리액트 훅] 1.useEffect(()=>{로직 작성} [ ] ) 화면이 렌더링 되자마자 화면에 처음 보여져야할 데이터들을 다룬다 import './App.css'; import Ex01 from './Example/Ex01' import Ex02 from './Example/Ex02'; import Ex03 from './Example/Ex03'; import Ex04 from './Example/Ex04'; import Ex05 from './Example/Ex05'; import Ex06 from './Example/Ex06'; import Ex07 from './Example/Ex07'; import Ex08 from './Example/Ex08'; function App() {.. 10/4 - Spring & React[미니실습!- 댓글달기, 클래스 컴포넌트, Lifecycle, 리액트 훅] spring 자바 플랫폼을 위한 오픈 소스 어플리케이션 프레임워크 Spring Framework - 동적인 웹 사이트 개발을 위해 여러가지 서비스 제공 - 한국에서는 공공기관의 웹 서비스 개발 시 사용을 권장하는 전자정부 표준 프레임워크의 기반 기술로 사용 Spring Boot - 스프링 프레임워크를 사용하기 위한 설정의 많은 부분을 자동화하여 사용자가 편하게 스프링을 활용할 수 있는 환경 제공 Spring 특징 1. POJO(Plain Old Java Object) : 객체 간의 관계 구성시 별도의 API나 라이브러리를 사용하지 않는 POJO 구성만으로 가능하도록 제작 : getter/setter 등의 단순한 메서드를 가진 Object [POJO가 사용되는 이유?] - Java EE 등 중량 프레임 워.. 이전 1 ··· 5 6 7 8 9 10 11 ··· 17 다음
