#부트스트랩

비전공 개발자 공부

안녕하세요 현재 복지관에서 1년을 채워가고 있는 26살 직장인입니다. 취업하기 전 대학교 2학년 때 우연히 마주한 파이썬에 맛을 보고 텐서플로우 공식 자료를 봐가면서 인공지능 따라해보고 직접 캐글에 있는 csv파일을 받고 분석하고 결과를 내면서 재미를 느꼈습니다. 이후에는 사이트 제작에 관심이 생겨 기본적인 html과 css, 부트스트랩을 가지고 깃허브에 올려서 사이트를 만들어보고 4학년 2학기 방학 때 파이썬 장고로 사이트를 연결하면서 접해보았습니다. 현재 복지관에서 일을 하고 있는 가운데에도 관심이 있어 최근에는 장고-러스트와 next.js를 활용한 사이트 제작 자료가 있어 퇴근 후 한 시간씩 작업을 하고 있습니다. 앞서 말씀드렸듯이, 복지관에 재직중이며 계약직으로 2024년 12월 31일 계약을 마치고 본격적으로 웹개발 중 프런트에 대해서 배워보고자 합니다. 분명 제가 만들면서 재미를 느끼고, 조금이라도 어렸을 때 다양한 경험을 해보는 것이 좋다고 생각하지만, 한편으로는 퇴사 후에 취업이 잘 될까라는 불안함에 조금은 조심스러워 집니다. 저보다 앞서 다양한 경험을 해오신 선생님들께 제 판단이 괜찮은 선택인지 아닌지 조언해주시면 감사드리겠습니다. 긴글 읽어주셔서 감사합니다.

백엔드 사이드 프로젝트 프론트??

백엔드 지망생입니다 사이드프로젝트 하려고 하는데 피그마로 디자인하고 해당 코드추출해서 프론트로 대체가 가능한가요?? 백엔드 api랑 피그마로 뽑은 웹사이트코드랑 연동이 되나요? 피그마는 디자인하는용도는 알겠는데 왜코드로도 배포가 가능한지? 혹시 이걸 프론트로대체가 정말 가능한건지.. 아니면 걍 부트스트랩이용하는게 더빠른지 알려주시면 감사하겠습니다

개발 공부를 어떻게 하는게 좋을까요? (feat. 프로젝트)

얼마 전 Next.js로 개인 프로젝트를 진행했습니다. 그런데 프로젝트를 진행해보며 제가 어떤 방식으로 개발 공부 뱡향성을 잡아야하는지 혼란스러워 질문드립니다 ,, 🙏 처음 Next.js 쓸 때는 복붙 ,, 같은 기능도 복붙해서 파일 여러 개 만들기를 하고, 서버 컴포넌트와 클라이언트 컴포넌트에 대해 잘 알지 못한채로 프로젝트를 했었습니다. (+ 상태관리나 ,, 이런 것도 아예 모르고 개발했었습니다 ,,) 이번에 제대로 공부해서 기능을 구현해보고 싶어 다시 시작해서 완성했습니다. 그런데 제가 작성한 코드를 다 이해하며 작성했지만, **제가 작성한 코드가 좋은 코드인지? 에 대한 의문이 생겼습니다.** 그래서 팀 프로젝트도 참여해보며 같은 프론트 팀원 분의 코드를 확인해보며 좋아보이는 부분은 참고도 했지만, 이 방법도 한계가 있었습니다. 더 잘해보고 싶어 빨리 보여져야하는 이미지는 이미지를 미리 로드한다거나, next/image로 이미지 최적화를 하고 최대한 코드 중복을 줄이고자 공통 컴포넌트들을 만들기 위해 노력하긴 했었습니다. (나중에 스토리북 이라는 라이브러리를 알게되어 이걸 사용해보지 못한게 아쉽긴 했습니다.) 그래도 많이 부족한거 같아 어떻게 더 나은 개발을 해야할지 잘 모르겠습니다 ,, 첫 프로젝트에서는 부트스트랩 외에는 사용해보지 않아 이번에 제대로 다양한 기술을 써보고자 시도도 해보았습니다. (> 서버 상태 관리를 위해 tansack query도 사용해보고 클라이언트 상태 관리를 위해 recoil을 사용하고, 스타일링에는 css in js가 궁금해 styled components, 직접 어느정도 깔끔한 디자인을 하고싶어 피그마 툴을 이용해보았습니다. 소셜 로그인도 넣어보고 몽고 db 사용하며 데이터베이스도 연결해보았는데 ,, 막상 완성하고 나니 제가 많이 부족하다는 생각이 들었습니다.) 🤔 제가 작성한 코드가 좋은 코드인지 ,, 더 나은 성능을 위해 어떤 개발을 하면 좋은지와 같은 부분은 제가 어떻게 학습하는게 가장 좋은 방법일까요? 또한 어떤 것을 더 배워서 적용해보는게 좋을까요? ,, (제가 생각했을 때 프로젝트를 완성은 했지만, 제 프로젝트의 매력적인 점이 없는거 같아 너무 아쉬운거 같습니다.)

JAVA 신입 웹 개발자 프로젝트 고민..

안녕하세요~ 전공자로서 다른 개발 분야에서 회사 자체 개발 툴 및 DB(ms-sql)를 사용하여 2년 반 업무 후, 회사 자체 툴을 쓴다는 리스크와 개발자로서의 많은 도태감을 느껴 퇴사한 사람입니다. 웹 개발 직군에서 새로운 출발을 하고자 퇴사 이후 Spring 관련 웹 개발 국비교육을 마치고 팀 프로젝트 하나만을 가지고 모집 공고들만 보며 어영부영 준비하다보니 퇴사 시점으로부터 이직을 준비한지가 어느덧 1년 반이 되어가고 있습니다.. 나름 잘 준비하고 있는 거라고..채용 경쟁이 심한거라고.. 속으로 합리화하며 안일하게 생각한 100% 저의 잘못이지만, 다시금 마음을 잡고 개인 웹 프로젝트부터 진행해보려 합니다.. 프로젝트 기간은 한 달 정도로 잡고 진행하려고 하는데 프론트단을 부트스트랩과 같은 템플릿을 사용하여 조금은 빠르게 개발하고 백엔드로 넘어가야할지, 아니면 처음부터 더 되짚어보며 직접 프론트단을 구현해야할지 고민중에 있습니다. 경력을 버리고 신입으로 백엔드 쪽을 희망하고 있지만 프론트도 같이 해야할거 같은 막연한 생각이 들어 이렇게 남깁니다.ㅠㅠ 교육 프로젝트 이후 오랜만에 프로젝트를 진행하려다보니 한심하고 답답한 고민일지는 몰라도 선배님들의 작은 조언 부탁드립니다.. 시간내어 읽어주신 분들 감사합니다!!

해커톤 부트스트랩 유료 탬플릿 라이선스

해커톤에서 부트스트랩 유료 탬플릿을 사용했는데 깃을 퍼블릭으로 만들어서 제출해야할 거 같은데 혹시 저작권 같은 부분은 어떻게 처리 해야하는지 아시는 분 있으신가요? ㅠㅠ 그쪽 답변으로는 부트스트랩 트리를 제출하라고 했는데 무슨 의미인지 아시는 분 있으실까요? ㅠ 해당 탬플릿은 single license 였습니다!

백엔드 개인프로젝트 고민

안녕하세요, 현재 재취업을 준비하면서 개인 프로젝트 1개, 사이드 프로젝트 (팀 단위 1개)를 진행하고 있습니다. 기존 SI에서는 거의 풀스택으로 근무를 하긴 했는데.. 백엔드에 좀 더 집중해서 커리어를 쌓고 싶어요. 사이드 프로젝트는 백단을 맡아서 SpringBoot + JPA 기반 REST API로 개발을 하고 있습니다. 반면, 개인 프로젝트는 SpringBoot + JPA 기반에 MVC 패턴으로 프론트단은 부트스트랩 + Thymeleaf를 사용하고 있습니다. 현재 개인 프로젝트 진행 단계는 기본적인 CRUD + 로그인 + 소셜 로그인 OAuth2 기능 구현까지 했습니다. 커뮤니티 성격이라 오픈 API 활용하는 부분도 있긴 하네요. 제가 조금 고민인 부분이 Thymeleaf를 쓰긴 하다보니까 자꾸 화면 단에도 신경이 쓰여서 고민입니다.. 처음에는 팀 프로젝트는 백엔드에 집중해서 REST API로 개발하고, 개인 프로젝트는 MCV 패턴으로 개발하니까 둘 다 공부도 하고, 도움이 되지 않을까 싶어서 시작하긴 했는데 화면 쪽도 신경이 쓰이다 보니까 개인 프로젝트 개발 진척도가 조금씩 더뎌지는 중이라서요.. 기간은 그만큼 걸리는데.. 막상 깃헙 까보니 결과물이 만족스럽지 못하면 그것 또한 문제인 것 같아서요. 그래서 고민 중인 부분은 다음과 같습니다. 1) 지금이라도 현재 진행하는 깃헙 리포지토리는 그대로 두고, 새롭게 리포지토리 생성해서 기존 프로젝트의 백단을 따로 분리하고, MVC 패턴을 REST API 엔드포인트 호출 형식으로 수정을 해서 백단에 좀 더 집중해서 프로젝트를 완성하며 Docker + AWS 활용이나 jenkins+nginx CI/CD 무중단 서버 배포, Swagger 문서 작성, 등 이런 백엔드 단에 좀 더 집중을 해서 진행을 하는 것이 좋을지 2) 아니면, 기존에 구현하던 그대로 MVC 패턴 기반 개발을 유지할지 조금 더 나은 방향에 대한 조언 부탁드리겠습니다. 감사합니다.

CSS 그리드 레이아웃 질문드립니다.

최근 Next.js로 프로젝트를 진행하며 여러 페이지를 벤치마킹하다가 궁금한 내용이생겨서 질문드립니다. CSS의 grid속성의경우 2차원속성으로 가로세로 전체 레이아웃을 지정하거나 특정 컴포넌트 내부에서 레이아웃을 잡는데 사용한다고 배웠습니다. 몇몇 페이지의 경우 부트스트랩을 사용한것같은데 n개의 컬럼으로 나눈뒤 내부에 하나의 요소 또는 메인과 사이드네비게이션을 배치하는경우가 있는데 방법론이 있는건지 어떤 의도가있는건지 궁금합니다. 그리드를 처음 공부할때 전체적인 레이아웃을 잡거나 인스타그램같은 n x n의 이미지 배치할때 사용하고 이외 플렉스위주로 사용했는데 성능적으로 이점이 있는건지 .. 세로스크롤 때문인지 궁금합니다.

풀스택 개발자가 하는일

제가 프로젝트를 부트스트랩으로 받아와서 웹을 만들어봤는데 회사에서 바라는 풀스택 개발자는 모든걸 하나하나 다 만들기를 원하나요??

개발자 선생님들 도와주세요..

안녕하세요 초보개발자입니다 지금 구글로 코드 복붙하며 게시판 수정중인데 아예 똑같이 복붙 하였는데 저는 왜 이런 식으로 나올까요 도와주세요 .. ㅠㅠ 프로젝트 발표가 코앞인데.. 1번째사진은 작성자의 사진이고 2번째 사진이 제 출력 화면입니다... 코드는 댓글에 적어두겠습니다..도와주세요.. ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--부트스트랩은 어떤device로 접속하더라도 해상도에 맞게 알아서 설정되는 탬플릿이다. --> <meta name="viewport" content="width=device-width" , inital-scale="1"> <!--스타일시트를 참조, 주소는 css안에 부트스트랩.css--> <link rel="stylesheet" href="css/bootstrap.css"> <title>JSP 게시판 웹 사이트</title> </head> <body> <!-- 네비게이션 구현 네비게이션이라는 것은 하나의 웹사이트의 전반적인 구성을 보여주는 역할 --> <nav class="navbar navbar-default"> <!-- header부분을 먼저 구현해 주는데 홈페이지의 로고같은것을 담는 영역이라고 할 수 있다. --> <div class="navbar-header"> <!-- <1>웹사이트 외형 상의 제일 좌측 버튼을 생성해준다. data-target= 타겟명을 지정해주고--> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-exmaple="false"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 여긴 웹페이지의 로고 글자를 지정해준다. 클릭 시 main.jsp로 이동하게 해주는게 국룰 --> <a class="navbar-brand" href="main.jsp">JSP 게시판 웹 사이트</a> </div> <!-- 여기서 <1>에만든 버튼 내부의 데이터 타겟과 div id가 일치해야한다. --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!-- div 내부에 ul은 하나의 어떠한 리스트를 보여줄때 사용 --> <ul class="nav navbar-nav"> <!-- 리스트 내부에 li로 원소를 구현 메인으로 이동하게만들고--> <li><a href="main.jsp">메인</a></li> <!-- 게시판으로 이동하게 만든다. --> <li><a href="bbs.jsp">게시판</a></li> </ul> <!-- 리스트 하나 더 생성 웹페이지 화면에서 우측 부분--> <ul class="nav navbar-nav navbar-right"> <!-- 원소를 하나 구현해 준다. 네비게이션 우측 슬라이드메뉴 구현 --> <li class="dropdown"> <!-- 안에 a태그를 하나 삽입한다. href="#"은 링크없음을 표시한다. --> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">접속하기<span class="caret"></span></a> <!--접속하기 아래에 드랍다운메뉴 생성 --> <ul class="dropdown-menu"> <!-- li class="active" 현재 선택된 홈페이지를 의미 --> <li><a href="login.jsp">로그인</a></li> <li class="active"><a href="join.jsp">회원가입</a></li> </ul> </li> </ul> </div> <!-- 네비게이션 바 구성 끝 --> </nav> <!-- 하나의 컨테이너처럼 감싸주는 역할 --> <div class="container"> <div class="col-lg-4"></div> <!-- 회원가입 폼은 위의 양식은 일치하며, 이제 내부 폼만 바꿔준다. --> <div class="col-lg-4"> <div class="jumbotron" style="padding-top: 20px;"> <!-- 양식 삽입 post는 회원가입이나 로그인같이 어떠한 정보값을 숨기면서 보내는 메소드/ 로그인 Action페이지로 정보를보내겠다--> <form method="post" action="joinAction.jsp"> <!-- 회원 가입에 맞게 위에 액션은 joinAction페이지로 밑에 제목은 회원가입 화면으로 변경 --> <h3 style="text-align: center;">회원가입 화면</h3> <div class="form-group"> <!-- 회원 가입에서도 userID or userPassword는 동일하게 가져가고, 회원가입에 필요한 나머지 속성추가 --> <input type="text" class="form-control" placeholder="아이디" name="userID" maxlength="20"> </div> <div class="form-group"> <input type="password" class="form-control" placeholder="비밀번호" name="userPassword" maxlength="20"> </div> <!-- userName 추가 --> <div class="form-group"> <input type="text" class="form-control" placeholder="이름" name="userName" maxlength="20"> </div> <!-- 성별 선택 추가 --> <div class="form-group" style="text-align: center;"> <!-- 버튼 공간을 따로 마련해준다.(남,녀) --> <div class="btn-group" data-toggle="buttons"> <!-- 선택이 된곳에 표시를 하는 active를 설정해준다. --> <label class="btn btn-primary active"> <input type="radio" name="userGender" autocomplete="off" value="남자" checked>남자 </label> <label class="btn btn-primary"> <input type="radio" name="userGender" autocomplete="off" value="여자" checked>여자 </label> </div> <!-- 성별 선택부분 완료 --> </div> <!-- email 작성부분 구현 --> <div class="form-group"> <!-- placeholder는 아무런 입력이 없을때 띄워주는 값 --> <input type="email" class="form-control" placeholder="이메일" name="userEmail" maxlength="20"> </div> <!-- 버튼 또한 회원가입으로 value변경 --> <input type="submit" class="btn btn-primary form-control" value="회원가입"> </form> </div> </div> <div class="col-lg-4"></div> </div> <!-- 애니메이션을 담당하게 될 자바스크립트 참조 --> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> <!-- 특정홈페이지에서 제이쿼리 호출 --> <script src="js/bootstrap.js"></script> </body> </html>

css에서 sass를 사용하면 각 요소를 컴포넌트화 하기 힘든가요?

안녕하세요, 회사에서 퍼블리싱 하시는 분이 sass로 작업을 하시는데 sass는 각 요소가 컴포넌트화가 힘든건가요?? 모든 요소가 최상단 컨테이너에 종속되어 있어서 컴포넌트 재사용이 아예 안되네요.. 부트스트랩처럼 컴포넌트화가 되는지 궁금합니다..

정말 작은 화면 수정 개발건 의뢰 플랫폼 있을까요?

백엔드는 다 만들었고, 화면은 아주 조잡하게 react와 부트스트랩으로 생겼는데요. MVP를 위한 화면 1본이라 개발하시는 분에겐 1시간이 걸리지 않을 공수인데, 이 정도의 개발 건 의뢰 플랫폼 있을까요?

프론트엔드는 디자인도 중요하나요?

react로 취업준비하는데 react에서 서버에서 받은 데이터를 어떻게 효율적으로 처리하는지, 상태관리나 이런 개발요소 제외하고 css나 스타일도 보나요? 부트스트랩이나 material ui 이런거 쓰면 안될거 같긴한데.. 프론트는 뭘 보는지 잘 모르겠습니다.

페이지 레이아웃을 어떻게 해야할까요?

안녕하세요 질문드립니다 저는 그동안 사실 국비에서 백엔드 쪽을 배워서 프론트는 그냥 부트스트랩에서 제공하는 css 12 그리드로 작업했었거든요 좌우 여백 주고 싶으면 col-md-2, col-md-8, col-md-2 이런 식으로 나눠서요 그런데 프론트를 공부하려고 부트스트랩 css, js를 빼고 인프런 페이지를 만들어보고 있는데 사진처럼 좌우 고정 여백을 어떻게 줘야 하는지 잘 모르겠어요 이건 flex 로 하는건가요? 개발자 도구 보는데도 잘 이해가 안되네요 ㅠ 답변 부탁드려요!

C#사용하는 회사 탈주/스테이 봐주실 분

국비학원에서 JAVA,Spring framework배우고 C#과 .net Core 이용해서 웹사이트 개발한다고 해서 이 회사에 입사했습니다. 회사가 예전에 개발해둔 솔루션이 있지만 곧 서비스 종료되고 현재는 si처럼 관련 업계 프로젝트 수주받아서 계속 진행하는 중입니다. 프로젝트 자체는 꾸준히 진행중이고 동시에 2-3건 정도 나눠서 돌리는 것 같습니다. 고민은 저는 백엔드 개발을 많이 해보고 싶은데 입사 일주일 차여서 그런지 모르겠지만 곧 서비스 종료되는 기존 솔루션 프로그램 운영관리만 맡고 있고 신규 프로젝트에 투입 예정이라고는 하는데 이 회사는 퍼블리셔가 따로 없어서 프로젝트 진행할때 퍼블리싱도 어느정도 필요하다며 부트스트랩, css 쪽을 먼저 보고 계시라하시네요 일반적인 웹사이트가 아니어서 예쁘고 화려하게 할 필요는 없고 화면 배치와 구성을 변경해야하는 경우에 다룰 줄 알아야하니 필요하다고 보고계시라 하세요 작은회사는 퍼블리싱도 도맡아한다는건 각오하고 들어온 부분이라 상관 없는데 일주일차인데 쿼리문 치는거 말곤 개발관련 코드를 한 줄도 못봤다는 부분에서 걱정이 되네요 일주일밖에 안되어서 그런걸까요? 스테이할지 아니면 지금이라도 다른 데를 알아봐야할지 고민입니다..

부트스트랩 모달창 질문

한페이지에 모달 버튼을 여러개 만드려고 하는데 어느 부분을 수정해야 각각의 모달버튼을 클릭했을때 다른 모달창이 뜨도록 할 수 있을까요 ? ...

Bootstrap 프레임워크 정해진 범위 외 사용

안녕하세요. 프론트엔드를 공부하고 있는 학생입니다. 최근에 홈페이지 하나를 만드는 작은 프로젝트를 완료하였는데요. vue.js를 활용해 프론트를 구성했습니다. css는 따로 프레임워크를 사용하지 않고 기본 css로 직접 입력을 해줬습니다. 이렇게 프로젝트를 완료하고 bootstrap같은 프레임워크로도 몇페이지를 재구성해보려고 했는데요. 부트스트랩에서 제공하지 않는 스타일을 사용하고 싶다면 어떤식으로 사용하시나요? 예를 들어 width: 80% 값을 주고싶은데 bootstrap에는 w-25, w-50, w-75, w-100 이렇게 25%단위로만 존재하더라구요. 이럴 경우 그냥 bootstrap과 기본 css를 섞어서 사용하시는지 아니면 bootstrap API를 편집하여 원하는 스타일 값을 추가하시는지 궁금합니다. 또한 기본 CSS로 만들어진 페이지를 bootstrap을 사용하여 재구성 해보는게 좋은 경험이라고 생각하시나요?

리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다

리액트와 타입스크립트를 연습해보려고 혼자 토이프로젝트를 만드는 중인데 어떤 타입을 지정해줘야 할지 모르겠어서 질문올립니다. 혹시 더 자세한 설명이 필요할 것 같으면 댓글부탁드려요! 상황) 리액트, 타입스크립트를 사용하는 프로젝트에서 부트스트랩 모달을 사용하려고 합니다. 사진1번이 모달을 포함하고있는 부모컴포넌트, 사진2번이 모달컴포넌트 인데 부모컴포넌트에서 모달컴포넌트로 show, onHide라는 2개의 props를 넘깁니다(부트스트랩에서 지정해놓은 프롭스입니다.) 부모컴포넌트에는 모달의 표시 여부를 관리하는 const [showEmptyInputModal, setShowEmptyInputModal] = useState(false); 이라는 상태값이 있고 그게 각각 props로 넘겨지게 되는 것 같습니다. 여기서 문제) 그런데 사진2번에 넘겨주는 props의 타입을 어떻게 설정해야할 지 모르겠습니다... 일단 any로 하면 작동은 되긴하는데ㅠㅠ any는 최대한 쓰지 않는게 좋다고 해서요 사진4번의 빠른 수정을 보면 이런 옵션들이 있던데 unknown이나 never를 사용하면 그 props를 사용하는 곳들에서 에러가 납니다. any를 사용하거나 빠른 수정의 옵션 중 eslint 규칙을 무시하는 선택지밖에 없는 걸까요? state와 setState를 실행하는 함수 props로 넘기려면 타입을 어떻게 줘야하나요...!

백엔드 신입 포트폴리오 수준

안녕하세요? 컴퓨터 공학을 전공하고 혼자 취업준비중인 25세 취준생입니다 백엔드를 희망중이고, 주로 공부하고 있는 스택은 스프링 부트, Java, AWS, JPA, Docker, mysql입니다. 현재 ‘스프링 부트와 AWS로 혼자 구현하는 웹서비스(프리랙, 이동욱)’ 책을 실습중인데, 이 책을 따라하면 스프링 부트로 구현한 기본 CRUD 게시판(+OAuth2.0 소셜 로그인, AWS 배포)이 나옵니다. 실습결과물에 부트스트랩과 댓글 기능, 제가 구상한 웹사이트 컨셉에 맞는 페이지를 몇 개 더 넣어서 포트폴리오로 활용하려고 합니다. 그런데 기초적인 기능만 있다보니 백엔드 신입 포트폴리오로 보여주기 충분할지 고민이되어 질문글을 올리게 되었습니다. 아무래도 평범하고 튀는데 없고 초보적인 포폴이겠죠? 🥲 더이상 공백기 늘리고싶지 않아서 초보포폴이라도 일단 가지고 면접으로 헤딩할것같긴합니다만.. ㅎㅎ😅