본문 바로가기

프로그래밍/프로젝트93

프로젝트 -요구사항명세서, 화면정의서 작성 0. 구성한 추가아이디어 stack overflow 클론 코딩을 하면서 추가 기능을 고려해보려고 한다 비즈니스의 관점에서 돈 벌 수 있는 기능 추가 사람들이 더 머물 수 있는 기능 추가 필수적인 기능을 구현한 후에 시간이 있다면 구현하여 프로그램에 추가하고 싶다 1. 요구사항 명세서 작성 질문과 대답을 주 기능으로 잡고 나머지를 서브 기능으로 구분하였다 각 기능별로 어떤 기능이 있고, 설명, 중요도를 구분하여 작성하였다 user, question, answer는 필수적으로 구성하고 company, bookmark, response, videos 등의 기능은 각 중~하로 구분하여 시간에 따라 구성하기로 하였다 2. 화면정의서 작성 프론트 담당은 화면정의서를 작성하고 백엔드 담당은 테이블 명세서를 담당하여 .. 2022. 8. 24.
프로젝트 관리하기 소프트웨어 개발 단계 - 분석단계 - 설계 단계 - 구현 단계 - 시험 단계 SRS(Software requirements specification) 정의: 어떤 소프트웨어인지, 기능과 어떻게 작동할 것인지 설명하는 문서 테이블 명세서 정의: 최종적으로 설계된 테이블과 인덱스를 데이터베이스 공간에 맵핑시키고 저장공간 등의 물리 모델을 기술 데이터베이스 명 : 데이터베이스 명칭 테이블 명 : 테이블 명칭 요구사항 ID : 테이블이 사용되는 요구사항 정의서의 ID를 기술 테이블 설명 : 테이블의 목적 및 역할을 간략하게 기술 컬럼명 : 테이블 컬럼의 내용과 특성을 인식할 수 있는 명칭을 기술 컬럼 ID : 테이블 컬럼 ID를 기술 타입 및 길이 : 컬럼의 타입과 최대 허용 길이를 기술 NOT NULL : 필.. 2022. 8. 23.
Stack Overflow 클론코딩 레퍼런스 찾기 프론트엔드 1. https://github.com/Mayank0255/Stackoverflow-Clone-Frontend Front-end Framework: React.js (with Redux) Styling: SASS and BOOTSTRAP 백엔드 1. https://github.com/Mayank0255/Stackoverflow-Clone-Backend For handling index requests: Node.js with Express.js Framework As Database: MySQL with Sequelize API tested using: POSTMAN 2. https://github.com/ValeryKorzhavin/stackoverflow Java 12 Spring Boot.. 2022. 8. 19.
NFT 민팅 사이트 만들기 NFT 민팅 사이트 완성 숙경의 민팅 사이트 ssukhackathon.netlify.app 전체 만든 과정 1. 프로그램을 이용해서 자동으로 조합된 이미지와 JSON파일 준비 피그마를 활용하여 이미지 생성 Figma Created with Figma www.figma.com 위에는 내가 작성한 nft이미지를 담은 피그마 파일이다 (여러개를 요소별로 만들어 다양한 조합을 유도) 비주얼 스튜디오를 들어가서 코드 작성 //index.js const nftName = "K-Birdz Egg"; const description = "K-Birdz, Flappy Bird Style P2E game with K-culture made by youtuber JoCoding"; const hiddenImgUrl = "i.. 2022. 8. 17.
TDD - Testbuilder 과제 detectNetword.js /* * 이 파일을 어떻게 사용해야 하는지 STEP을 진행하다보면 알 수 있습니다. * 만일 그 전에 이 파일을 이용하고 싶다면 주석을 참고하여 직접 연구해야 합니다. */ /** * 11번 줄에 있는 FILL_ME_IN을 수정하실 필요는 없습니다. * 하지만 이 파일의 다른 곳에서 FILL_ME_IN을 보시게 된다면 다른 것으로 바꾸셔야합니다. */ let FILL_ME_IN = "Fill this value in"; describe("Introduction to Mocha Tests - READ ME FIRST", function() { // Mocha 테스트는 그저 다음 기능을 하는 도구입니다! // - 함수를 실행할 때 오류가 발생하면, 실패합니다. // - 오류가 .. 2022. 8. 3.
프로젝트 경험 설명 0. 발표 할 프로젝트 선정 1. 왜 이런 서비스를 개발하고자 했는지 2. 왜 이런 기술스택을 선정했는지 3. 어떤 api를 어디에 활용했는지 4. 어떤 역할을 맡았고 무었을 배웠는지 5. 어떤점이 어려웠고 어떻게 극복했는지 이런 질문들에대한 대답만 명확하게 하기 + 앞에 프로젝트나 기능들을 00기업에서 어떻게 활용할 수 있을지에 대한 본인의 생각 2022. 7. 28.
번들링과 웹팩(web-pack) 웹팩을 사용해보는 과제를 수행했다 index.html 안녕하세요 웹페이지 포트폴리오 입니다. _config.yml theme: jekyll-theme-cayman web-pack 과제 번들링은 여러 제품이나 코드, 프로그램을 묶어서 제공하는 것을 말한다 프론트엔드 개발자에게 번들은 '사용자에게 웹 애플리케이션을 제공하기 위한 파일 묶음'이다 webpack은 2022년 7월 현재 프론트엔드 애플리케이션 배포를 위해서 가장 많이 사용하는 번들러이다 모듈 번들러란 HTML, CSS, JavaScript등의 자원을 전부 각 모듈로 보고 이를 조합해 하나의 묶음으로 번들링 하는 도구이다 웹팩의 핵심 개념 Entry: entry point를 기반으로 직간접적으로 의존하는 다른 모듈과 라이브러리를 찾아낼 수 있음 O.. 2022. 7. 25.
구글 클론 코딩 내가 만든 사이트: http://127.0.0.1:5500/index.html 주말을 활용해서 구글 클론 코딩을 했다 배운점 1. 부트스트랩 사용법 익힘 Borders Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. getbootstrap.com 이런식으로 코드 가져올 때 html 설정해주어야 함 2. 코드펜에서 라이브러리 가져올 수 있음을 알게됨 CodePen An online code editor, learning environment, and community for front-end web development u.. 2022. 7. 24.
[Backend] 인증/보안 auth-basic-cookie 과제: 로그인과 로그아웃이 가능하고, 필요에 따라 쿠키에 인증 정보를 넣어 로그인 상태를 유지하는 앱 개발 1. 서버 설치가 어려울 경우 아래의 코드를 통해 설치 npm install --force 2. index.js const corsOptions = { origin: "http://localhost:3000", credentials: true, methods: ['GET', 'POST', 'OPTION'] }; 3. Login.js import React, { useState } from 'react'; import axios from 'axios'; export default function Login({setIsLogin, setUserInfo}) { const [loginInfo, setLog.. 2022. 7. 15.

티스토리툴바