프론트엔드 개발자 엄성준

Intellj를 사용할 때는 빽 서버와 프론트 서버 가동을 쉽게 했지만 같이 협업하시는 프론트엔드 동료분은 VSC를 통해서 둘 다 실행시키고 싶어 하셔서 방법을 찾았습니다. 먼저 VSC에서 spring boot를 실행 시키기 위해선 Debugger for Java와 Spring Boot Extension Pack을 설치해 주었습니다. 그 후 settings.json에 jdk경로를 넣어줬습니다. "spring-boot.ls.java.home": "C:\\Program Files\\Java\\jdk-11.0.17" 그 후 Application.java에서 Run java를 실행시키면 됩니다. 다음으로 협업을 하기 위해서 팀원 분들을 프로젝트에 초대해 드렸습니다. 그 후 저는 Github Desktop을 통해..

우리 팀의 프로젝트는 Front는 React -- ts를 통해서 구성하고 Back은 Spring boot를 통해서 구상하기로 하였다. Back-end 분들은 작업 Tool로 Intellij를 이용하시고 Front는 VScode를 이용하기로 하였다. 먼저 Project를 구축하기 위해 https://start.spring.io/ 접속하였다. 예전에 김영한 선생님 강의를 볼 때 제외하고 처음이었다. Group명을 제외하고 나머지는 이렇게 작성한 듯싶다. 그 후 GENERATE를 통해서 파일을 내려받았다. 그 후 아래의 링크의 내용을 적어주신 분의 글을 참고하여서 개발환경을 구축하였는데 https://velog.io/@u-nij/Spring-Boot-React.js-%EA%B0%9C%EB%B0%9C%ED%99..

Pre기획에서 와이어 프레임만 Update를 했었는데 전체적인 내용을 수정하였다. 먼저 우리의 웹 사이트 명칭은 나침반으로 정한 상태이다 기획 배경 및 기대 효과 https://www.figma.com/file/1koGclNNTmJZVIykCVl1JZ/1seok4jo?node-id=0-1 Figma Created with Figma www.figma.com 기술 스펙 초안 요구 사항 🛠 Back-end 회원가입 - 이메일(중복 제한), 비밀번호, 닉네임(중복 제한), 나를 소개하는 한 문장(ex : 저는 여행을 좋아하는 20대입니다.) 모든 기능을 사용하려면 회원가입이 전제 조건임 로그인 - 일반 로그인, 카카오 로그인 비밀번호 찾기 - 가입된 이메일을 통해서 초기화된 비밀번호 전송 글쓰기 - 카테고리(..

먼저 이전에 작성한 pre기획을 멘토님에게 컨펌을 받았는데 아래와 같은 답변을 받았습니다. 멘토 : 조금 더 구체적으로 와이어프레임과 서비스에 대한 기준으로 작성이 되고 나면 다시 한번 멘트 드릴게요~ 이렇게 되어서 협업하고 있는 다른 프론트엔드 개발자 분이랑 회의를 통해서 Figma를 통해서 와이어 프레임을 제작하게 되었습니다. https://www.figma.com/file/1koGclNNTmJZVIykCVl1JZ/1seok4jo?node-id=0%3A1&t=H5z5MrQVO2osZPOr-1 Figma Created with Figma www.figma.com 대학교 때는 이 작업을 power point를 통해서 진행했었는데... FIgma 사용법이 낯설긴 하지만 훨씬 수월하고 빨리 끝낸 것 같습니다..

제로베이스 프론트엔드 스쿨 10기 수강생 엄성준입니다. 처음으로 대학교 캡스톤 프로젝트를 제외한 첫 번째 프로젝트를 진행하게 되었습니다. 먼저 저희 팀원은 백엔드 개발자 4명, 프론트 엔드 개발자 2명으로 구성되었습니다. 기획 배경은 코로나 방역이 완화되고 날씨가 따듯해지는 지금 여행을 떠나고 싶으신 분들에게 도움을 줄 수 있는 커뮤니티 웹 사이트입니다. 먼저 와이어프레임을 통해서 팀원들과 어떤 페이지들로 구성할지 정했습니다. ()=> 요소는 정확하게 결정되지 않은 요소 - 로그인, 회원가입(카카오), (아이디 찾기), (비밀번호 찾기) - 전체 리스트 페이지 - 메인 - 카테고리별 페이지 - 글 상세 페이지 - 마이 페이지(작성한 글(수정, 삭제), 추천한 글) 프론트엔드 팀원과 상의를 통해서 구현할 ..

Given a zero-based permutation nums (0-indexed), build an array ans of the same length where ans[i] = nums[nums[i]] for each 0 { return nums.map(num => nums[num]) } Colored by Color Scripter cs 문제를 풀며 느낀 점 - 처음에 문제 자체가 정말 이해가 안 되었는데 map() 함수에 대해서 먼저 자세하게 알아보았습니다. map()은 새로운 배열에 앞에서부터 차례대로 push 해주는 함수라서 nums = [0, 2, 1, 5, 3, 4] 일 때 nums[num] 첫 번째는 nums배열의 0번째 index의 값이 들어가고, 두 번째로는 nums[2] 값이 들어..

OSI7 Layer Application (Layer 7) 응용서비스 HTTP , SMTP Presentation (Layer 6) 인코딩 / 암호화 / 압축 등 데이터의 변형이 이루어짐 Session (Layer 5) TCP / IP 통신 연결을 수립 / 유지 / 중단 Transport (Layer 4) TCP / UDP Network (Layer 3) IP통신, 라우팅 Data Link (Layer 2) 이더넷, 랜카드, Mac 통신, 에러검출 Physical (Layer 1) 네트워크 하드웨어 전송 기술에 대한 프로토콜 Application (Layer 7) - 응용 계층 - HTTP, SMTP 같은 인터넷 응용 서비스와 관련 - 사용자와 가장 밀접한 계층으로 인터페이스 역할 - 응용 프로세스 간의..

JavaScript 프로젝트 과제 MISSION 2를 코딩하면서 느낀 점에 대해서 적어볼까 합니다. 먼저 아직도 스코프 영역에 대한 부분이 미흡한 것 같습니다. Utils나 Modul의 대한 개념은 강의를 학습하면서 꽤 많이 알게 된 것 같습니다. 이번 프로젝트에서는 Utils를 사용했으면 좋겠다 해서 이전에 우희은 선생님에게 배운 DOM객체 생성 util과, DOMList생성 util을 사용해 봤습니다. 또한 지정된 시간마다 사용하는 setInerval() 함수를 사용했고 현재 시간을 가져올 수 있는데 Date() 함수 또한 사용했습니다. 이전에 강의에서 stopwatch를 만든 경험이 있어서 크게 어렵지는 않았지만 가장 어려웠던 부분이 여러 개의 시계를 생성해도 똑같이 작동하게 하는 부분이었는데 많이..

제가 2022.12.01부터 제로베이스 프론트엔드 스쿨 10기 수강생이 되었는데요. 앞으로 강의 수강 중에 학습한 점이나 기억하고 싶은 부분 등을 이곳에 기록하겠습니다. 시멘틱 태그(sementic tag)란 - HTML의 구조를 설계하는데 있어 태그에 의미를 부여 함으로써 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그 시멘틱 태그(sementic tag) 예시 - 이 페이지에서 최상위 제목을 의미 - div 태그와 똑같은데 주요 링크를 모아둔 박스를 의미 , , , , - layout 태그 a태그 1. 절대경로 : 인터넷, url로 접속 가능한 경로 2. 상대 경로 : (통상적으로) 개발 환경에서 시작되는 경로 : . 현재 파일이 위치한 경로 : .. 이전 경로 / 상위 경로 ..