분류 전체보기52 엘리스 프로젝트 회고 시작 2022 5/ 23 새로운 사람들과의 스터디가 시작됐다. 모두 새로운 성향의 새로운 사람들이었고 나는 팀장 역할을 맡게 되었다. 어쩌다 보니 내가 나서서 하게 됐고 내가 추천한 게더 타운과 노션을 이용해 스크럼 방식으로 스터디가 진행되었다. 그렇게 2주간의 짧은 기간동안 쇼핑몰을 만드는 프로젝트를 시작하게 되었고 나는 다른 한분과 함께 백엔드를, 나머지는 프런트 3명으로 멋진 팀원들을 만나게 되었다. 하지만 코드 분석부터 난관이었다. 처음 사용해보는 깃랩과 깃허브에 오류에 MR에 , 스켈레톤 코드를 제대로 이해하지 못해 제대로 된 백엔드를 구현하지 못하고 허덕였던 것 같다. 이때 코드 분석의 중요성을 알게 됐다. 남이 쓴 코드를 하나하나 분석해보며 한줄 모르는 부분 없게 이해하는 것. 그게 초반은 .. 2022. 6. 5. 백엔드 폴더 흐름 정리 개요 쇼핑몰 제작 팀 프로젝트에서 백엔드를 담당하게 됐다. 배울때는 할 수 있을 것 같았는데, 받은 코드의 폴더가 나뉘어져 있어서 각각 폴더가 어떤 역할을 하고 어떤 흐름으로 연동되는지 정리하려 한다. db : 데이터가 array형식으로 저장되어 있다. routers : 라우터들이 구현되어 외부에서 사용할 수 있게 export 되어있다. services : 필요한 기능들이 함수 또는 클래스로 구현되어있다. 클래스로 만들어져 있다면 객체를 생성한 후, export 해준다. static-files : bulma 관련 코드들, 프론트에서 백을 향해 fetch함수를 통해 요청을 보낸다. 그리고 결과를 받아서 , html 스크립트에 적용한다. 즉 pug와 같은 라이브러리인 것 같다. app.js : 백엔드의 ma.. 2022. 5. 24. req.on req.end , RESTful API req.on(), req.end() 할때 .on 과 end 는 이벤트리스너에 함수를 추가하는 메서드이다. 짧게 생각하자면 req.on(eventName, listener)구조인데 해당하는 이벤트가 들어올때 리스너를 실행하겠다는 뜻인데, 콜백함수와 유사한 느낌이다. res.writeHead()는 응답헤더로, 상태코드와 오브젝트객체 2022. 5. 18. express 경로 이해하기 app.get("/page/:pageId", function (req, res) { return res.send(req.params.pageId); }); app.get("경로",콜백) 해당 경로에 접근하면 콜백을 수행한다. "/page/:pageId" express에서 제공하는 시맨틱 URL 처리방식 :뒤에 지정한 값은 일종의 변할 수 있는 값, 즉 변수이다. req.params에 저장되고 접근할 수 있다. params는 이를 key value로 제공한다. 소스코드에서 지정한 /:pageId라는 값에 32가들어간 걸 볼 수 있다. 이해한 바로는 :는 수많은 숫자 페이지 기타등등에 대한 경로를 다 지정하기 곤란하니 제공되는 변수처럼 사용할 수 있는 파라미터이다. 그래도 해당 경로의 값을 얻어와야 할 경우.. 2022. 5. 17. 게임 랜덤 뽑기시스템 구현 const restNumber = []; for (let i = 0; i [0]은 리턴되는 뽑힌 배열의 넘버 pokemonName.myPokemon[getPoke] = 1; //뽑은 번호 1로 바꿈 console.log("뽑은 값", getPoke); } 결과 2022. 5. 14. Blob JS에서 Blob (Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰때 사용하는 데이터 형식이라고 할 수 있다. 1. 데이터의 크기 및 MIME(Multipurpose Internet Mail Extensions)타입을 알아내거나 2. 데이터 송수신을 위해 작은 Blob객체로 나누는 등의 작업에 사용한다. 3. Binary 형태로 Large 큰 Object 객체를 저장한다는 의미 4. 이미지, 비디오 , 사운드등과같은 멀티미디어 객체들을 주로 가리킨다. Blob blob =null; 2022. 4. 20. flex 공부 flex : 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성. justify-content의 속성들 : -수평정렬 관련, 간격과 관련있다. flex-start:요소들을 컨테이너의 왼쪽으로 정렬 flex-end:요소들을 컨테이너의 오른쪽으로 정렬 center : 요소들을 컨테이너의 가운데로 정렬 space-between : 요소들 사이에 동일한 간격을 둠 space-around: 요소들 주위에 동일한 각견을 둠 align-items의 속성들 : - 수직정렬 관련 flex-start:요소들을 컨테이너의 꼭대기로 정렬합ㅂ니다. flex-end:요소들을 컨테이너의 바닥으로 정렬합니다. center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬.. 2022. 4. 17. [Git] 원격저장소와 연결하기 1. 로컬저장소 지정 로컬저장소로 지정할 폴더(내 컴퓨터의)로 이동한 후 git init으로 초기화 요런 .git폴더가 생기면 성공! 2. 원격 저장소와의 연동 git remote add (원격저장소이름) (깃허브주소) git remote를 했을때 설정한 원격저장소 이름이 나오면 성공! gir remote : 등록된 리모트 저장소 이름을 보여준다. *) 깃허브 주소 위치 자신이 생성한 원격저장소(Repository)로 가서 초록색 Code 버튼누르고 해당 주소 복사 3. 원격저장소의 데이터를 가져오는 git clone 해보기 git clone (데이터를 가져올 원격저장소) (주소) remote 메세지와 done 메세지가 뜬다면 성공! **) Could not read remote repository 인증.. 2022. 4. 9. [Udemy Web 부트캠프] 섹션 19,20,21 루프의 구조, 함수란?, 함수 레벨업 섹션 19 루프의 구조 for of 메소드와 객체에는 .length같은 길이가 없어서 for of에 사용할 수 없다 (반복가능한 객체가 아니기 때문에) 그래서 Object.key()와 Object.value()등을 이용해서 for of 문을 돌릴수있다. 해당 메소드들은 키값과 value값을 배열로 만들어서 반환하기 때문에 for of를 돌릴 수 있기 때문이다. For(let score of Object.values(객체명)){ } 18) { input = prompt(`The number is lower then ${input}`); } } //미니 ToDo List만들기 let todoes = []; let countTodo = 0; let input = prompt("명령어를 입력해 주세요!"); w.. 2022. 3. 29. [Infrearn]스프링 부트와 JPA 활용1 을 시작! Intellij 설정과 자바설치, 버전오류, Junit 버전 오류를 거쳐 드디어 환경설정 1강을 끝냈다. 내가 서버에대해 지식이 부족했단 걸 깨달았다. 일단 활용편을 훑은 후 기본편을 들을 생각이다. 용어정리 ORM (Object-Relational Mapping) - 객체 관계 매핑: 객체는 객체대로 설계, 관계형 데이터베이스는 관계형 데이터베이스 대로 설계 ORM프레임 워크가 중간에 객체와 DB를 매핑해준다. ORM은 객체와 RDB 두 기둥 위에 있는 기술 JPA (Java Persistence API): 현재 자바 진영의 ORM 기술 표준으로, 인터페이스의 모음이다. Spring Framework: Application 프레임워크, OpenSource SW 엔터프라이즈 애플리케이션 개발을 좀 더 쉽.. 2022. 3. 28. 이전 1 2 3 4 5 6 다음
