#html

질문 96
해시태그 없이 키워드만 일치하는 질문은 개수에 포함되지 않아요.

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

안녕하세요 초보개발자입니다 지금 구글로 코드 복붙하며 게시판 수정중인데 아예 똑같이 복붙 하였는데 저는 왜 이런 식으로 나올까요 도와주세요 .. ㅠㅠ 프로젝트 발표가 코앞인데.. 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>

개발자

#jsp

#java

답변 2

댓글 4

보충이 필요해요 3

조회 361

7달 전 · 백승윤 님의 새로운 답변

서버 운영중에 궁금증이 생겼는데 이 로그는 해킹시도인가요?

django.core.exceptions.DisallowedHost: Invalid HTTP_HOST header: 'pingjs.qq.com'. You may need to add 'pingjs.qq.com' to ALLOWED_HOSTS. 2023-10-03 05:09:32,644 [ERROR] django.security.DisallowedHost: Invalid HTTP_HOST header: 'pingjs.qq.com'. You may need to add 'pingjs.qq.com' to ALLOWED_HOSTS. Traceback (most recent call last): File "/usr/local/lib/python3.9/site-packages/django/core/handlers/exception.py", line 55, in inner response = get_response(request) File "/usr/local/lib/python3.9/site-packages/django/utils/deprecation.py", line 133, in __call__ response = self.process_request(request) File "/usr/local/lib/python3.9/site-packages/django/middleware/common.py", line 48, in process_request host = request.get_host() File "/usr/local/lib/python3.9/site-packages/django/http/request.py", line 167, in get_host raise DisallowedHost(msg) django.core.exceptions.DisallowedHost: Invalid HTTP_HOST header: 'pingjs.qq.com'. You may need to add 'pingjs.qq.com' to ALLOWED_HOSTS. 2023-10-03 05:09:32,646 [WARNING] django.request: Bad Request: /ping.js 2023-10-03 05:09:32,646 [WARNING] django.request: Bad Request: /ping.js 2023-10-03 05:38:50,055 [WARNING] django.request: Not Found: /wp-admin/setup-config.php 2023-10-03 05:38:50,055 [WARNING] django.request: Not Found: /wp-admin/setup-config.php 2023-10-03 05:38:55,464 [WARNING] django.request: Not Found: /wp-admin/install.php 2023-10-03 05:38:55,464 [WARNING] django.request: Not Found: /wp-admin/install.php 2023-10-03 05:39:03,014 [WARNING] django.request: Not Found: /readme.html 2023-10-03 05:39:03,014 [WARNING] django.request: Not Found: /readme.html 2023-10-03 05:39:12,407 [WARNING] django.request: Not Found: /license.txt 로그를 까보면 이런식으로 무언가 요청을 엄청 많이 하더라구요 ?? 방지하는 방법이라던가 혹시 어떻게 대처해야할지 아시는분이 있을까요 ..?

개발자

#django

#nginx

답변 2

댓글 0

추천해요 1

조회 649

Gmail이 안 보내져요 ㅠㅠ 퇴근하고 싶어요

서버 비용 잇슈로 이관 진행 중에 있습니다. 그런데 이전 서버인 AWS에서는 Gmail이 정상적으로 전송이 됬는데 카페24로 이관을 하고선 Gmail 전송이 안되고 있습니다. 차이는 Nginx를 안사용하다가 사용하게된 차이가 있습니다. 방화벽 인바운드, 아웃바운드 설정을 해줬고요 로그를 확인해 보니 이런 에러만 나오는데 스택오버에서는 같은 질문에 답변이 안 달려 있더라고요 0|npm | [0] info: chet createShowhostChat updateMember {"timestamp":"2023-04-17 18:28:50"} 0|npm | [0] [2023-04-17 09:28:50] DEBUG Sending mail using SMTP/6.8.0[client:6.8.0] 0|npm | [0] 0|npm | [2023-04-17 09:28:50] DEBUG [SDdf79wZJFg] Resolved smtp.gmail.com as 74.125.23.109 [cache hit] 0|npm | [0] [2023-04-17 09:28:50] ERROR [TSzLl35tpQ] Connection timeout 0|npm | [0] 0|npm | [2023-04-17 09:28:50] DEBUG [TSzLl35tpQ] Closing connection to the server using "destroy" 0|npm | [0] 0|npm | [2023-04-17 09:28:50] ERROR Send Error: Connection timeout 소스는 이렇게 구성되어 있습니다. 예상은 SMTP 587 Port가 활성화가 아니구나라고 생각을 했는데 잘 안되더라고요 선배님들 도와주세요 ㅠㅠ 추가 로그 입니다. 0|npm | [0] [2023-04-17 11:51:32] DEBUG Sending mail using SMTP/6.8.0[client:6.8.0] 0|npm | [0] [2023-04-17 11:51:32] DEBUG [4tmiO0CAyPQ] Resolved smtp.gmail.com as 64.233.188.109 [cache hit] 0|npm | [0] POST /showhost/approval/approve - - - - ms 0|npm | [0] 0|npm | info: request url : /root/path/to/custom/error/path/500.html {"timestamp":"2023-04-17 20:52:32"} 0|npm | [0] error: app.js/404 {"timestamp":"2023-04-17 20:52:32"} 0|npm | [0] GET /root/path/to/custom/error/path/500.html 404 9 - 3.101 ms 0|npm | [0] [2023-04-17 11:53:02] ERROR [m98HJ7ZDhGM] Connection timeout 0|npm | [0] [2023-04-17 11:53:02] DEBUG [m98HJ7ZDhGM] Closing connection to the server using "destroy" 0|npm | [0] [2023-04-17 11:53:02] ERROR Send Error: Connection timeout 0|npm | [0] error: app.js/500 {"timestamp":"2023-04-17 20:53:02"} 왜 저에게 이런 시련이 ㅠㅠ 원인조차 모르겠습니다. ㅠㅠ 빨리 해결해 퇴근하고 싶습니다.

개발자

#node

#gmail

#방화벽

#smtp

답변 2

댓글 1

추천해요 1

조회 517

일 년 전 · 이상선 님의 새로운 답변

Async await fetch 오류

const Content: React.FC = () => { const [htmlContent, setHtmlContent] = useState<string>(''); const data = { "filePath": ""https://cdn-image-dev.test.io/dev/contents/terms/2023/10/11/",", "fileName": "test.html" } const url = `${data.filePath}${data.fileName}`; // HTML 파일 가져오기 const fetchHtmlFile = async () => { try { const res = await fetch(url); console.log('res', res); if (res.ok) { const html = await res.text(); setHtmlContent(html); } else { console.error('Failed to fetch HTML file'); } } catch (error) { console.error('Error fetching HTML file:', error); } }; fetchHtmlFile(); return( <div dangerouslySetInnerHTML={{ __html: htmlContent }} /> ) } fetchHtmlFile 호출 시켜 res에서 얻은 html소스를 가져와 htmlContent에 넣어야하는데 에러나네요,, **에러메세지 Content.tsx:30 Error fetching HTML file: TypeError: Failed to fetch Cors 오류 참고 -- api url : https://api-dev.test.io/api/test/v1/~~ 도와주세요!

개발자

#react

#html

#async

#fetch

답변 1

댓글 0

조회 94

일 년 전 · 고건 님의 새로운 댓글

nginx 관련 질문 있습니다 ㅠㅠ

안녕하세요, 현재 프로그래밍을 공부하고 있는 학생입니다. 공부를 하던 중 django를 사용해 프로젝트를 진행했고 aws, nginx, uwsgi 로 배포를 진행하게 되었는데, 배포는 성공적으로 됐지만 처리해야할 데이터가 많은 기능을 사용하면 자꾸 아래 오류가 뜨더군요. (퍼블릭 ip 주소는 X로 가렸습니다) 2023/11/07 15:14:13 [error] 7487#7487: *1 upstream timed out (110: Unknown error) while reading response header from upstream, client: xx.xxx.xxx.xxx, server: _, request: "POST /file_upload/upload/ HTTP/1.1", upstream: "uwsgi://unix:/home/ubuntu/docusift/uwsgi.sock", host: "xx.xxx.xxx.xx", referrer: "http://xx.xxx.xxx.xx/success_with_token/WeDkQYs84hDYcDsl/" 구글링을 해봐도, 스택오버플로우를 찾아봐도 110 오류가 unknown error로 뜨는 것에 대한 해결책은 나오지 않아서 이렇게 여쭤보게 되었습니다. 다만 구글링을 해본 결과 설정을 따로 만져줘야 한다는 것을 봐서 설정은 아래처럼 해놓은 상태인데, 아직 해결은 되지 않은 상황입니다. [uwsgi] chdir=/home/ubuntu/docusift/blog module=blog.wsgi:application master=True pidfile=/tmp/project-master.pid vacuum=True max-requests=5000 daemonize=/home/ubuntu/docusift/debug_uwsgi.log home=/home/ubuntu/docusift/venv virtualenv=/home/ubuntu/docusift/venv socket=/home/ubuntu/docusift/uwsgi.sock chmod-socket=666 socket-timeout=600 harakiri = 300 http-timeout = 300 server { listen 80 default_server; listen [::]:80 default_server; root /var/www/html; index index.html index.htm index.nginx-debian.html; server_name _; location / { include /etc/nginx/uwsgi_params; uwsgi_pass django; proxy_buffer_size 512k; proxy_buffers 16 512k; proxy_busy_buffers_size 1024k; proxy_connect_timeout 500s; proxy_send_timeout 500s; proxy_read_timeout 500s; send_timeout 500s; } location /static/ { alias /home/ubuntu/docusift/blog/staticfiles/; } http { upstream django { server unix:/home/ubuntu/docusift/uwsgi.sock; } client_max_body_size 100M; proxy_connect_timeout 800s; proxy_send_timeout 800s; proxy_read_timeout 3600; 혹시라도 해결 방법을 아시는 분들 답변 주시면 정말 감사하겠습니다!!!

개발자

#배포

#aws

#ubuntu

#nginx

#uwsgi

답변 1

댓글 1

조회 173

10달 전 · 프레드윰 님의 새로운 답변

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

개발자

#html-css-js

#웹디자인

#css

#html

#script

답변 2

댓글 0

조회 81

일 년 전 · 이상선 님의 새로운 답변

Lighthouse를 이용한 성능 최적화 - 텍스트 압축 사용

안녕하세요. 개발한 웹 페이지를 lighthouse를 통해 성능 최적화에서 난관을 겪고 1년차 React 개발자입니다. lighthouse에서 추천 항목에 "텍스트 압축 사용"을 적용해보려 시도 중입니다. .htaccess 파일에 다음과 같은 코드를 넣어서 텍스트 압축을 실행하였습니다. <IfModule mod_deflate.c> AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE font/opentype font/ttf font/eot font/otf </IfModule> 결과적으로 네트워크 탭에서 Content-Encoding: gzip 으로 표시되는 것을 보니까, 텍스트 압축이 되는 것처럼 보입니다. 그런데 lighthouse에서는 성능 점수가 더 올라가지 않고 있습니다. 혹시 "텍스트 압축" 부분에서 최적화 하는 다른 방법이 있을까요? 아니면 제가 놓치고 있는 부분이 있는 걸까요?

개발자

#react

#lighthouse

#front-end

답변 1

댓글 0

조회 310

display:-webkit-box 왜 적용이 안될까요?

1. p태그에 말줄임css(display:-webkit-box 포함)를 적용했습니다만 적용이 되지 않고 overflow:hidden처리만 되더라구요... display:box 나 display:block를 적용하거나 display속성을 아예 지워버리면 나오는데 webkitbox가 먹히지 않는 이유가 있을까요? (개발자도구에는 찍힙니다) display:flex로 코드를 짜고 있는데 이것도 영향이 있을까요? 2. 그리고 css에서 display: box와 display: block 두 가지의 차이점이 무엇인가요?? html, css구조 같이 올릴게요! -webkit-box 적용이 안되는 이유 알려주세요 html구조 <section> <div> <div> <div> <div> <p></p> <span></span> </div> </div> </div> </div> </section> css구조(scss) @mixin shortening($line, $lineHeight){ overflow: hidden; text-overflow: ellipsis; @if($line == 1){ white-space: nowrap; }@else{ line-height: $lineHeight; max-height :$lineHeight * $line; -webkit-line-clamp: $line; -webkit-box-orient: vertical; display: -webkit-box; } } section { margin-bottom: 160px; div { div { display: flex; justify-content: space-between; div { width: 200px; div { p { margin: 20px 0 10px; font-size: 18px; color: $titleColor; @include shortening(2, 18px); } div { display: flex; justify-content: space-between; align-items: center; p { font-size: $subTextFont; color: #ff4e43; } span { //아이콘 font-size: 20px; color: #efd942; cursor: pointer; } } } } } } }

개발자

#css

#말줄임표

#display속성

답변 1

댓글 0

조회 455

2달 전 · 이상래 님의 새로운 답변

FE 화면 디렉토리 어떤 구조로 생성하나요?

BE 개발자입니다. 어쩌다보니 테스트용 화면을 만들게됬는데 백엔드에서 RESTFull 하게 호출할 수 있게 하고 싶다보니 각 path별 디렉토리에 html을 넣어주다보니 구조가 많이 복잡해지는 감이 있네요. 다른 분들은 어떤 방식으로 구조를 만드시는지 궁금해서 질문드립니다. 1. 방법 각 path에 맞는 디렉토리 생성 - test - page - user - edit.html - item.html - equip.html - status.html - home - account - money.html 2. 기능에 맞는 디렉토리 - page - user.html - home.html - component - user-edit.html - user-item.html - user-equip.html - user-status.html - home-account-money.html

개발자

#frontend

#html

답변 2

댓글 1

보충이 필요해요 1

조회 588

2년 전 · 커리어리 AI 봇 님의 새로운 답변

크롤링 관련 질문드립니다.

js로 크롤링을 하려고 axios, cheerio 모듈을 이용했습니다. 단순하게 특정 부분 클래스를 따서 로그를 찍어보면 LoadedCheerio { length: 0, options: { xml: false, decodeEntities: true }, _root: <ref *1> LoadedCheerio { '0': Document { parent: null, prev: null, next: null, startIndex: null, endIndex: null, children: [Array], type: 'root', 'x-mode': 'no-quirks' }, length: 1, options: { xml: false, decodeEntities: true }, _root: [Circular *1] }, prevObject: <ref *2> LoadedCheerio { '0': Document { parent: null, prev: null, next: null, startIndex: null, endIndex: null, children: [Array], type: 'root', 'x-mode': 'no-quirks' }, length: 1, options: { xml: false, decodeEntities: true }, _root: [Circular *2] } } 다음과 같이 나옵니다. 질문은 1. 크롤링이 안되는 사이트가 있다면 어떻게 확인할 수 있나요 ? 2. https://m.kinolights.com/title/98065 이 사이트에 크롤링을 연습해보고 싶은데 html 요청시에 추가해줘야 할 헤더값같은게 있을까요 ?

개발자

답변 1

댓글 0

조회 188

9달 전 · 김유진 님의 새로운 댓글

리액트에서 superagent를 활용해서 minio에 업로드하는 방법을 알려주세요 😂

제발 도와주세요 ㅜㅜㅜㅜㅜ 몇일동안 오류를 해결하지 못하고 있어요.. .. 리액트 웹에서 모바일 핸드폰으로 웹을 접속했을 경우, input을 통해서 사진을 업로드하거나 촬영한 이미지를 minio에 업로드 하고 싶은데, 아래 부분에서 계속 오류가 발생해서 도움을 요청해요 ㅠㅠ https://min.io/docs/minio/linux/developers/javascript/API.html#presignedPostPolicy 위 문서를 참고해서 코드를 작성했어요! [핸드폰으로 웹 접속 -> 사진 업로드/촬영 -> minio 업로드] 이 순서인데, minio에 이미지가 업로드가 되지 않고 계속 오류를 발생시켜요. superagent를 활용해서 minio에 업로드가 가능하다고, 위 문서를 참고해서 작성을 했는데, 계속 아래 에러 메시지를 전달받고 있어요ㅜㅜ 아래 에러를 게속 반환해요. <Error> <Code>MalformedPOSTRequest</Code> <Message>The body of your POST request is not well-formed multipart/form-data. (The name of the uploaded key is missing)</Message> <BucketName>bucket</BucketName> <Resource>/bucket</Resource> <RequestId>RequestId...</RequestId> <HostId>HostId...</HostId> </Error> f12 개발자 모드 페이로드 전달 데이터 bucket: 데이터 Content-Type: multipart/form-data x-amz-date: 날짜정보 x-amz-algorithm:데이터 x-amz-credential: 데이터 policy: 데이터 x-amz-signature: 데이터 file: (바이너리)

개발자

#react

#superagent

#typescript

답변 1

댓글 2

조회 60

일 년 전 · 유택범 님의 답변 업데이트

JSON 데이터 DB 저장

안녕하세요. Java Spring으로 백엔드 서버 마이그레이션, 알람 기능 개발 중에 고민이 있어 질문드립니다. [상황] 기존 알람 서비스는 하나의 서비스 Class로 통합해서 두고, 문자, 푸쉬알람, 이메일 3가지 경우로 기능을 swith하여 각 기능별로 서비스를 호출하는 방식으로 구현되어 있습니다. 알람과 관련된 데이터는 JSON 파일에서 불러와 jsonObejct와 Map 자료구조를 통해 가공하여 기능 구현이 되어있습니다. 알람 데이터 JSON 파일은 상황별 코드에 따라 문자, 푸쉬알람, 이메일로 데이터가 구분되어 있습니다. JSON 파일은 대략적으로 아래와 같은 형태입니다. (mail 알람의 경우엔 HTML 파일을 전송하는 방식입니다. thyemleaf를 통해 전달받은 파라미터 값만 HTML에 주입하는 형태로 구현되어 있어서 msg 안에 String 대신 JSON 형태의 데이터가 들어가고 있습니다.) [알람 JSON 데이터 구조 예시] { "code1" : { "Sms" : { "title" : "sms 제목", "msg" : "sms 메세지", }, "Push" : { "title" : "push alarm 제목", "msg" : "push alarm 메세지", }, "Mail": { "title" : "mail 제목", "msg": { "name" : "#{name}", "use" : "#{use}", ... }, "code2" : {... }, ... } [문제 인지 & 개선 방향 고민] 알람 데이터가 JSON으로 정의되어 있다보니, 기능 개발을 위해 Json 파일을 읽고, JsonObject와 Map 자료구조로 데이터 가공을 할 수 밖에 없는 상황인데요. 제가 알기로는 자바에서 Map 자료구조를 사용하게되면 타입 자체가 불명확해서 지양해야 하며, JSON 파일로 관리 시 하드코딩에 해당되어 기능 자체에 제약이 많다고 판단하여 해당 상황을 DTO로 관리함과 동시에 Database에서 관리하도록 바꿔볼까 생각중입니다. [궁금증 & QnA] 이 상황에서 고민 & 궁금증이 몇 가지 있습니다. 1. 해당 알람 데이터를 DB 관리로 바꾸는게 더 나은 선택인지? -> 만약 바꾼다고 하면 Alarm Table을 따로 두고, User Table과 N:M 매핑하는식으로 구현할 생각입니다. 2. , mail HTML Template이 다양하다보니, Template 마다 넘겨줘야하는 JSON 데이터가 다양한 상황입니다. 그러다보니 mail msg 컬럼에는 다양한 형태의 JSON 데이터가 들어가게 되어 이걸 DB로 구현한다고 하니 막막한 상황입니다. -> 결국 해당 부분만 JSON 데이터로 넣는것 말고는 떠오르는 방법이 없네요.(해당 부분만 JSON 데이터로 넣으면 오히려 관리가 더 어려워지지 않을까 고민입니다.) 3. 다른 분들은 알람 기능을 어떻게 구현하는지 궁금합니다.

개발자

#spring

#database

#json

#fcm

답변 1

댓글 0

조회 293

일 년 전 · 윪 님의 새로운 댓글

html form태그에서 action속성 오류

html 중에서 <form aciton="/signup" method ="POST">이 부분엔서 /signup부분에 하이퍼링크처럼 줄이 생기고 페이지를 로드했을 때 404오류가 뜨는데 혹시 어떤 부분이 잘못되서 그런지 알 수 있을까요..? 그리고 언더바가 생기는 이유도 알고 싶습니다! 구글링을 해도 제가 원하는 답이 없어서 조언 부탁드립니다 ㅜㅜ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <form action="/signup" method="POST"> <div> <label for="id">아이디</label> <input type="text" id="id" name="id" /> </div> <div> <label for="password">패스워드</label> <input type="text" id="password" name="password" /> </div> <div> <button type="submit">회원가입하기</button> </div> </form> </body> </html>

개발자

#html

#form

#frontend

#action

답변 1

댓글 1

조회 96

NextJS에서 Component 호출 할 때 getServerSideProps 호출 방법이 있나요?

JSTL 이나 Thymeleaf 하다가 NextJS 하려니 많이 해메고 있네요. @,@;;; 우선 시나리오는 ProductList.html 페이지에서 서버로부터 상품 목록 주욱 받아 화면 출력 하는 것 까지는 했어요. 이때 서버 목록은 getServerSideProps 함수에서 받아 처리 했구요. 이제 상품 이름 클릭 했을 때 상세 정보를 Layer 화면으로 띄우려는데 그게 잘 안되네요. Thymeleaf에선 해당 페이지만 빌드 돼 html 형태로 받아 올 수 있었는데 nextjs는 어떻게 해야 하는지 모르겠어요. // 상품 상세 내용 export default function ProductModalLayer({ product }:IProduct) { return (<div> {product.name}</div>); } export async function getServerSideProps(context: any) { // 서버 통신으로 product 상세 정보 전달 const data = ... 생략... return { props: { product: data, }, }; } ------ ProductList 부분에서 상품 이름을 클릭 했을 때 const ModalView = dynamic(() => import("../ProductModal.layer")); // 선언 ... // 화면 그리기 <ModalView seq={prod.productSeq}></ModalView> 이런 형식으로 호출 하니까 getServerSideProps를 호출 하지 않네요. 다른 방법으로 fetch를 이용해 호출 해 봤는데 const res = await fetch("/ProductModal.layer?seq=" + seq); const content = await res.text(); 이렇게 하면 getServerSideProps를 호출 하지만 html Tag가 엄청 붙어 나오고 return 의 결과가 아닙니다. getServerSideProps를 고집 하는 이유는 서버 호출 인터페이스는 꼭 서버에서 이뤄지게 하고 싶어서에요. 브라우져 디버거로 노출 안되게 하고 싶어서. 힌트나 방법좀 부탁 드려요~ 다시 JSTL 이나 Thymeleaf로 돌아 갈 수 없어~~~~

개발자

#nextjs

#react

#ssr

#getserversideprops

답변 1

댓글 1

조회 184

일 년 전 · 손호영 님의 질문

닫힌 질문 | 문제가 뭔지 알려주세요

<!DOCTYPE html>> <html> <head> <title>Love 출석부 로그인</title> <style> h1{ position: absolute; left: 650px; } </style> <script>let name =document.getElementById("samename") alert(name.values+"님 환영합니다.") event.preventDefault();</script> </head> <body> <h1>로그인</h1> <form accept="API.py" method="post" onsubmit="keypress" method="get" action="Love2.html"> 이름:<input type="text" id="samename" size="30" value=""><br> </form> </body></html> 이름을 쓰고 엔터를 누르면 그 다음에 출석부 사이트에 가는데 문제는 엔터를 누르면 crbug/1173575, non-JS module files deprecated.라고 떠요

개발자

#javascript

#백앤드

#html

#css

답변 0

댓글 0

보충이 필요해요 5

조회 94

django 정적 이미지 업로드 질문드립니다

제가 venvs/mysite/pybo/templates 안의 hello.html 파일 안에 {%load static} 하고 venvs/mysite/pybo/static/image 이 폴더에 있는 이미지 를 불러오기 하려고 <img src={%static '/django.jpg' %}> 이걸 하는데 계속 이미지는 안뜨고 css 파일만 뜨네요 ㅠㅠㅠ django.jpg는 이미지이름입니다 config 파일 내에 settings 안에서도 STATIC_URL = "/static/" STATICFILES_DIRS = [ os.path.join(BASE_DIR,"pybo/static") ] 이것도 했는데 안되네요 ㅠㅠㅠㅠ pybo/view.py 파일 안에도 from django.shortcuts import render,get_object_or_404,redirect from django.http import HttpResponse from .models import Question,Answer def hello(request): #return HttpResponse('pybo/hello.html') return render(request,'pybo/hello.html') 뭐가 문제인걸까요 ... 파이썬 migrate랑 runserver도 다 새로고침 했습니다..

개발자

#디장고

#django

#프레임워크

#장고

#백엔드개발

답변 1

댓글 0

조회 97

2년 전 · 커리어리 AI 봇 님의 새로운 답변

HTML div contenteditable=true로 에디터 만드는데

div 태그에서 contenteditable=true를 적용하여 에디터를 만드는데 볼드체와 글꼴색상만 필요합니다~ 근데 볼드체 적용하면 글꼴색상(빨간색)은 적용안되고, 글꼴색상(빨간색)을 적용하면 볼드체는 또 적용안되고.. 즉, 빨간색+볼드체가 동시에 적용이 안되는데, 어떻게 코드를 작성해야 좋을까요 ㅠㅠ 고수님들 답변 부탁드립니다! const btnBold = document.getElementById('btn-bold'); btnBold.addEventListener('click', function () { setStyle('bold'); }); function setStyle(style) { document.execCommand(style); focusEditor(); } function focusEditor() { editor.focus({preventScroll: true}); } const selectFontColor = document.getElementById('select-font-color'); selectFontColor.addEventListener('change', function () { setFontColor(this.value); }); function setFontColor(color) { document.execCommand('foreColor', false, color); focusEditor(); }

개발자

#자바스크립트

답변 1

댓글 0

조회 463

10달 전 · 백승훈 님의 답변 업데이트

프론트엔드 개발자 부트캠프 고민 중 입니다..

안녕하세요 프론트엔드 개발자를 준비하고 있는 1인 입니다. 요번에 운좋게 부트캠프 2개를 붙어서 결정을 해야 하는데 어떤게 더 좋은지 모르겠어서... 질문 남깁니다.. 1. 유데미 웅진씽크빅 풀스택 부트캠프 https://udemy.wjtb.co.kr/event/id/244?utm_medium=paid&utm_source=googleads&utm_campaign=nnt_traffic_bootcamp-KDT_SA&utm_content=id_244&utm_term=240409&gad_source=1&gclid=Cj0KCQjwxeyxBhC7ARIsAC7dS3-3gWAFIN_KxCxPxMz3BPiXaYOnJAtTtj8mtwbt_lJ_lhrhksM5DKwaArdtEALw_wcB 2. 이스트소프트 오르미 프론트엔드 부트캠프 https://estfamily.career.greetinghr.com/o/108906 이렇게 2개를 붙었는데 뭐가 더 좋을까요..? 유데미 웅진씽크빅 풀스택 기술스택 - Html, CSS, Javascript, React.js, Java, Spring, MySQL, AWS 이스트소프트 부트캠프 기술스택 - Html, CSS, Javascript, React.js, Redux, TypeScript, GitHub, Figma 입니다. 둘 다 온라인강의가 기본베이스고 유데미는 오프라인 모임도 진행을 한다고 합니다. 유데미는 신청할 때 프론트엔드 백엔드 풀스택을 고르라고 해서 프론트엔드를 골랐는데 교육과정만 보면 이스트소프트가 맞는거 같은데 어떤걸 선택해야할지 잘 모르곘습니다 ㅠㅠ 도와주세요..

개발자

#부트캠프

#유데미

#오르미

답변 1

댓글 0

조회 301

6달 전 · 정성린 님의 질문

[사이드 프로젝트] 패션 이커머스 플랫폼 '푸츠(PUTS)' 앱 개발팀 모집

프로젝트 소개: ‘푸츠(PUTS)_Pick Up The Style!’서비스는 패션 디자이너 브랜드를 중심으로 BM특허까지 보유한 혁신적인 패션 커머스 플랫폼서비스 입니다. 데모버전까지 외주개발을 통해 개발이 완료되었지만 현시점에서 리뉴얼하여 새롭게 런칭버전을 개발하고자 역량있는 팀원을 모집합니다. <참고> 본 서비스의 시장성은 2024년 약 19조 5천억원(캐주얼) 정도의 시장성을 예상하고 있으며 연간 약 3.5%씩 지속적으로 성장 중에 있습니다. 3-5년이내 시장의 10%이상 점유를 목표하고 있으며 시장을 장악 가능한 비즈니스 모델과 마케팅 능력을 보유하고 있습니다. (참조: https://global.fashionseoul.com/2023-11-10/Korean-Fashion-Market-Size-Anticipated-Highest-Growth-Ever) 우리는 패션과 기술을 접목해 사용자와 소비자에게 최상의 쇼핑 경험과 정보 공유, 소득을 제공하는 서비스로 패션산업의 큰 파도를 함께 일으킬 분들을 모집합니다. 사이드 프로젝트 형태로 진행되며, 유연한 근무 환경에서 협업을 지향합니다. 3-5년이내 엑싯을 목표로 진행됨으로 임금지급 방식이 아닌 지분분배 방식으로 진행됩니다. 프로젝트 완료시 파트별 기여도에 따라 지분설정이 되며 관련 내용은 프로젝트 진행 전 협의를 통해 산정하여 계약진행 예정.(급여를 제공 받고자 하시는 분은 정중히 사양합니다.) 모집 직군: 1. 프론트엔드 개발자 (1~2명) o 주요 업무: 모바일 앱 UI/UX 구현, 웹 랜딩페이지, 사용자 인터페이스, 어드민 프론트엔드 개발 o 기술 스택: React Native 또는 Flutter, JavaScript/TypeScript, HTML/CSS o 우대 사항: 모바일 퍼포먼스 최적화 경험, 패션 커머스 개발 경험 2. 백엔드 개발자 (1~2명) o 주요 업무: 서버 및 데이터베이스 설계, API 개발, 어드민 백엔드 개발 o 기술 스택: Node.js, Django, AWS, PostgreSQL, RESTful API o 우대 사항: 대용량 트래픽 처리 경험, 보안 및 결제 시스템 개발, 이커머스 어드민개발 경험, 포인트관리 및 쿠폰설정 관리 등 3. UI/UX 디자이너 (1명) / 대표자와 함께 진행 또는 대표자가 진행 o 주요 업무: 모바일 앱 디자인, 사용자 경험 설계 o 필수 스킬: Figma 또는 Photoshop, Illustrator o 우대 사항: 패션 브랜드 디자인 경험, 사용성 테스트 및 피드백 반영 경험 근무 형태: • 프로젝트 기반 협업 (파트타임 가능) • 원격 근무 가능 (주 1회 온라인 미팅) • 유연한 일정과 주도적인 업무 환경 우대 사항: • 사이드 프로젝트 경험 • 패션, 커머스에 대한 관심과 열정 • 스타트업 문화에 익숙한 분 • 책임감 강하신 분 지원 방법: • 이력서와 포트폴리오를 [dcode00@naver.com]로 제출 • 지원 시 사이드 프로젝트 경험 및 참여 가능 시간을 명시해 주세요. 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe] • 회사주소: 경기도 안산시 상록구 한양대학로55 제2과학기술관 지하2층 B210호 (한양대학교 에리카캠퍼스 소재) 지원 마감일: [채용 완료시까지] 로켓펀치 참여링크 https://www.rocketpunch.com/jobs/139647 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe]

개발자

#사이드플젝

#사이드프로젝트

#팀빌딩

답변 0

댓글 0

추천해요 1

보충이 필요해요 1

조회 151

일 년 전 · 변재정 님의 새로운 댓글

next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ <footer.tsx 파일> 'use client' import React, { useEffect } from 'react' import style from '../styles/footer.module.scss' const Footer = () => {     if (window.location.pathname === '/user-page') return null return ( -생략- ) } <루트 layout.tsx 파일> 'use client' export default function RootLayout({     children, }: {     children: React.ReactNode }) {   return (         <html lang="ko">             <body className={inter.className}>                 <div className="wrap bg-white">                     <Header />                     {children}                     <Footer />               </div>             </body>         </html>     ) }

개발자

#next.js

답변 3

댓글 3

조회 366

일 년 전 · 익명 님의 새로운 댓글

토큰값을 받아오지 못하는 문제 (undefined)

안녕하세요 JWT 토큰을 이용해 로그인 검증하는 로직을 구현하고 있습니다. 로컬스토리지에 토큰을 저장하는 것까지 성공했으나 프론트 측에서 로그인 검증을 요청할때 실제 토큰 값을 받아오지 못하는 문제가 있어 질문 드립니다. login-required에서 토큰 값 유무 로직을 전부 지우고 콘솔로만 찍는 경우 undefined와 실제 토큰값이 나타납니다. 만약 토큰 값 유무 로직을 이용한다면 undefined값만 서버로 들어와 페이지가 무한로딩 되는 현상이 나타납니다. next()처리가 안되기 때문인 것 같습니다. (+ index.html은 test.js를 연결하고 있습니다.) 사진으로 보면 네트워크 요청헤더에서 확인한 결과 1. 처음엔 document 유형의 localhost를, (인증 헤더 x) 이후 js를 불러온다 2. 마지막에 xhr형식인 localhost를 불러옵니다 (인증 헤더 o) (여기서 undefined, 실제 토큰값이 콘솔에 동시에 나타나는 이유라고 생각이 듦) (순서를 보면 document 유형 localhost -> css, js -> xhr 유형 localhost 즉 처음에 document 유형에서 인증헤더를 못가져와서 (js가 로드되기 전이여서) 토큰 유무를 체크하지 못하는 것 같습니다) 결론적으로 제가 생각한 문제 분석 (1) ('/') 에 get 요청을 보낸다. (2) 서버는 loginRequired를 실행한다. (3) 서버로 부터 html을 받지 못한 상태에 loginRequired가 실행되어 토큰 값은 undefined가 된다. (4) next()를 거쳐 서버에서 html을 클라이언트로 부터 응답을 해준다. (5) html을 브라우저에 보여주면서 그 html에 연결된 js를 불러온다. (6) 이때 불러온 test.js에서 get요청 ('/') 로직을 불러와 다시 server.js에서 loginRequired 응답으로 토큰 값을 불러온다. 즉 js가 로드가 되어야 userToken을 로컬스토리지로 부터 받아오고 요청을 하여 토큰 값을 불러올 수 있다. 그런데 get 요청전에 토큰 검증을 하고 허가가 되어야 html을 로드해야 하지 않을까? 그렇다면 서버에서 처리를 해야하는가? 배워가는 학부생으로 많이 부족하다고 생각합니다,, 선배님들의 견해를 받고 싶어 게시물 올립니다..! 핵심 코드는 다음과 같습니다.

개발자

#javascript

#node.js

#axios

#rest-api

답변 2

댓글 2

조회 157

일 년 전 · 익명 님의 질문

nextjs에서 랜더링 시점 바꾸기

안녕하세요! nextjs 프로젝트 진행중에 궁금증이 생겼습니다. 현재 Sidebar 컴포넌트에서 카카오맵이 불러와져야 작업을 할 수 있는 상태입니다. 카카오 맵은 children 에서 랜더링되기 때문에 아래와 같이 코드작성시, Sidebar 랜더링 시점에 kakao is not defined 라는 오류가 뜹니다. 혹시 Sidebar를 좀 늦게 랜더링 할 수 있을까요? export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body className={inter.className}> <div id="login-modal" /> <section className="flex h-screen"> <nav className=" h-full bg-slate-100"> <Sidebar /> </nav> {children} </section> </body> <Script src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${APIKEY}&libraries=services,clusterer`} strategy="beforeInteractive" /> </html> ); }

개발자

#nextjs

#reactjs

답변 0

댓글 0

조회 57

7달 전 · 성지수 님의 새로운 답변

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

개발자

#환경변수주입

#모노레포

#빌드

#node.js

#react

답변 1

댓글 0

조회 73

일 년 전 · 정연준 님의 새로운 댓글

프론트엔드 개발자를 지망하는 취준생인데 이력서에 뭐가 부족한 것일까요?

5월 19일에 국비 부트캠프를 수료한 후 현재까지 5개월 동안 구직 활동을 하고 있는 취준생입니다. 현재까지 100군데 넘게 스타트업, 중소, 중견, 대기업 가리지 않고 다 지원했는데 면접은 커녕 서류 통과가 되는 곳이 한 군데도 없습니다. 취업에 먼저 성공했던 동료 취준생과 디스코드의 개발자 커뮤니티를 통해 이력서를 수정하고 있는데 현재 맞게 진행되고 있는지 긴가민가 합니다. 그래서 여기 계시는 현직자 분들한테 피드백 요청드리고자 합니다. 가감없는 솔직한 평가 부탁 드리겠습니다. 1. 이력서 제목: '이력서 | 안녕하세요, 정연준입니다!' -부족해도 멈추지 않는 개발자 -아는 것과 모르는 것을 구분할 줄 아는 개발자 2. 자기 소개: `안녕하세요, 신입 React 프론트엔드 개발자 정연준입니다. -시행 착오를 통해 성장해나갑니다. -잘하는 것과 부족한 것을 구분하여 잘하는 것을 부각시키고, 부족한 것을 채울려고 노력하는 개발자가 될려고 합니다. -좋은 서비스와 더불어 사용자가 편하게 이용할 수 있는 서비스를 만드는 것을 목표로 하고 있습니다. ` 3. 개발 직무: 프론트엔드 개발자 4. 프로젝트: -기간: 2023.04.17 ~ 2023.05.19 -서비스 제목: One-Line -한 줄 요약: AI모델이 사용자가 작성한 게시글을 한 줄 요약 및 제목 생성 -프로젝트 종류: 팀 프로젝트 -역할: 프론트엔드 파트(메인 페이지 게시글 목록 전체 조회, 인증 페이지 구현) *메인페이지 게시글 목록 전체 조회 1) Trending 섹션 2) Recent Posts 섹션 *메인 헤더(Global Navigation 메뉴) *인증 페이지에 Firebase Authentication 기능 적용 5. 교육 이력: -기간: 2022.11.28 ~ 2023.05.19 -주관 기관: 엘리스 -교육 프로그램 이름: 엘리스 AI트랙 6기 -학습한 기술 스택: React, Express.js, MongoDB, HTML5, CSS3, JavaScript, GitLab, Python, MySQL, TensorFlow, Pandas, Node.js -세부 사항 *JavaScript 1) JavaScript 기초 2) 싱글 스레드, Event, Promise 개념 숙지 *React 1) React 기초 *Express.js 1) Express.js 기초 *MongoDB + Mongoose 1) DBMS 기초 2) MongoDB, Mongoose 기초 *데이터 분석 1) Python, SQL 기초 2) Pandas 기초 *인공지능 1) 데이터 과학 기초 2) 이미지 처리 기초 6. 링크 -프로젝트 링크: https://10team.vercel.app/ -프로젝트 시연 영상: https://drive.google.com/file/d/16Qni0swyC8HbAY2iqnEy5QWze9ianjln/view?usp=sharing -개인 블로그: https://chadolbaegi128.tistory.com/

개발자

#프론트엔드-취준

#react

#javascript

답변 3

댓글 5

추천해요 7

보충이 필요해요 1

조회 2,245

nodejs driver로 replicaSet option 변경하기 도움 부탁드립니다.

아래 코드는 https://medium.com/@cramirez92/build-a-nodejs-cinema-microservice-and-deploying-it-with-docker-part-1-7e28e25bfa8b 여기에서 공부하다가 나온 코드입니다. getMongoUrl을 찍으면 다음과 같이 나옵니다. "mongodb://127.0.0.1:27017,127.0.0.1:27018,127.0.0.1:27019/movies" 현재는 해당 코드가 deprecated 되어서 실행이 전혀 안되서 현재버전으로 바꿔서 짜보고 싶은데 옵션 넣어주는 코드가 어떤 의미 인지 모르겠습니다. 도움주시면 정말 감사드리겠습니다. mongodb documentaion 링크도 같이 남겨드립니다. https://www.mongodb.com/docs/v6.0/replication/ https://mongodb.github.io/node-mongodb-native/4.13/index.html 추가로 const MongoClient = require('mongodb'); const {MongoClient} = require('mongodb'); 의 차이도 궁금합니다.

개발자

#nodejs

#mongodb

답변 1

댓글 0

조회 104

일 년 전 · 최건 님의 질문

firebase authentication

html에서 아래 같이 data를 전송했을 때 백엔드에서 const {createUserWithEmailAndPassword,signInWithEmailAndPassword,signOut,browserSessionPersistence, setPersistence}= require("firebase/auth"); const db = require("../config/firestore"); const {email,password} = req.body; console.log(email,password) await signInWithEmailAndPassword(auth,email,password) res.redirect("/api/home") 로 받으면 첫 번째 로그인시 Cannot POST /auth/login가 뜨면서 로그인이 안되고 뒤로 갔다가 다시 로그인을 하면 로그인이 완료되는 오류가 발생합니다... firestore은 form 데이터를 받아 저장하는 것에 오류가 발생하지 않는데 왜 authentication에서는 이러 오류가 발생하는지 궁금합니다 ㅠㅠ 해결 방안도 궁금합니다 ! ㅠㅠ

개발자

#firebase

#firebase-authentication

답변 0

댓글 0

조회 59

6달 전 · 포크코딩 님의 새로운 답변

IT 계열 회사 인턴십과 취업준비에 대한 조언을 구하고 싶습니다

안녕하십니까, 미국의 UCLA 대학에서 1학년으로 재학중인 학생입니다. 유학생으로서 IT 계열 인턴십 및 취업 준비에 대한 조언을 부탁드리고자 질문 드립니다. 한국에 위치한 국제학교를 졸업하여 이제 막 미국 대학 1학년 과정을 시작하였습니다. 제 꿈은 IT 계열 회사에서 일을 하는 것인데, 구체적인 직무와 취업준비에 있어 아직 방향을 잡지 못하였습니다(온라인 강의, 포트폴리오, 부트캠프, 프로젝트 등). 인터넷에서 실제 인턴십에 합격한 사람들의 후기 찾아보아도 명확한 출발점이 보이지 않는 경우가 많으며, 부트캠프나 인턴십의 경우에도 학기 중에는 수강이 불가능한(부트캠프에 투자해야할 시간 + 시차 문제) 경우를 자주 봤습니다. 내년 6월 경에 1학년 과정을 마치고 7월에 군 복무를 하여 2027년도 1월 쯤에 전역할 예정입니다. 전역 후 8월 정도까지 시간이 남을 것 같은데 이 기간 동안 어떻게 시간을 보내야 준비가 잘 될지 의문입니다. 저의 프로그래밍 경험이라고는 중/고등학교 당시 정보 올림피아드 준비를 위한 C언어, 고등학교의 Computer Science 수업 때 들은 Java, web 개발을 위한 HTML/CSS, javascript, 그리고 약간의 Python이 전부입니다. 추가로, 고등학교 당시 친구들과 교육회사를 창업하여 현재 웹사이트 개발 툴(Wix)을 활용한 웹사이트 디자인, 과외 강사등으로 활동하고 있는데 이런 경험도 지원시 도움이 되는지 여쭤보고 싶습니다. (아래는 제 Git Hub 링크입니다) Git Hub(고등학생 당시): https://github.com/qwertyuiop12as/David-Study-Record/tree/main Git Hub(대학생 및 이후 자료): https://github.com/dcho-jaewook 온라인 강의나 프로젝트, 포트폴리오/GitHub 운영법 등에 대한 조언을 해주신다면 큰 도움이 되겠습니다. 시간들여 고민 읽어주셔서 감사합니다. (추가로 현재 컴퓨터 수학과를(Mathematics of Computation) 전공하고 있는데 학사 학위 이후에 석사 학위가 있으면 취업 때 어느정도 이점이 있는지도 궁금합니다)

개발자

#인턴쉽

#대학생

#대학생-취업

#부트캠프

#프로젝트

답변 1

댓글 0

추천해요 3

조회 56

일 년 전 · 익명 님의 댓글 업데이트

노드 https질문

안녀하세요. 프로젝트를 진행중에 애러를 만났는데 혹시 알고계신분 답변해주시면 정말 감사합니다. 리액트로 프론트를 만들고 node+express 를 웹서버 역할로 프록시 설정을 했습니다. 그리고 ssl 인증을하여 브라우저에 https로 접속 가능하게 하였습니다. 문제는 여기부터인데,, 기존 통신 api가 http로 되어있었는데 그런데 백앤드 개발자분이 api도 https로 바꾸셨다고 하여 https 통신을 하니 Error occurred while proxying request happyman:11111 to https://happyman:11111/ [EPROTO] (https://nodejs.org/api/errors.html#errors_common_system_errors) 라는 오류가 났습니다. 또 신기한건 기존 http로 설정된 api 통신은 되네요? 인터넷이서 하라는거 대부분 했는데 잘 안되네요ㅠㅠ

개발자

#react

#node

#express

답변 1

댓글 1

추천해요 1

조회 454

8달 전 · 익명 님의 질문 업데이트

css에서 % 단위

만약 어떤 요소의 width를 % 단위를 사용하면 부모 요소의 width를 기준으로 한 퍼센트 값이 적용되잖아요. 그런데 부모 요소가 width가 지정되어 있지 않고 하위 컴포넌트들을 감싸기만 해서 유동적인 width를 가지는 상황이고 부모의 부모 요소가 고정된 width를 가지는 상황이라면, 부모의 부모 요소의 width를 기준으로 퍼센트 값이 되는건가요? react와 tailwind를 사용한 예시로 다음과 같은 html 구조가 있다고 할 때, 저는 {item}을 감싸는 div의 width에서 %를 쓰면 <div className="flex items-center w-full gap-[30px]"> 요소의 width를 기준으로 될 줄 알았는데 <div className="w-full overflow-hidden"> 요소를 기준으로 한 값이 적용되는 거 같더라구요. 원래 css의 %단위가 무조건 직계 부모의 값을 기준으로 하는게 아니라 직계 부모의 값이 고정된 값이 아니면 더 상위의 부모들 중 고정 값인 요소를 기준으로 하게 되는 건가요?

개발자

#css

답변 0

댓글 0

조회 63

next.js에서 img onload가 가끔 실행이 안됩니다ㅠ

next.js에서 HTML img element의 onload가 가끔 실행이 안되는데 이유를 아시는 분 계신가요? img의 onload에 isLoading 값을 바꿔주는 콜백 함수를 넣었는데, 가끔 실행이 안되어서 무한 로딩 화면이 보여지더라구요. 간략하게나마 코드 첨부해봅니다. 도와주세요 선생님들 ㅠㅠ import { useState } from "react"; export default function Home() { const [isLoading, setIsLoading] = useState(true); const hello = () => { console.log("loaded") // 왜 안되지... // setIsLoading(false) } return ( <div className="App"> {isLoading && <p>Loading...</p>} <img onLoad={() => hello()} src="이미지 url" /> </div> ); }

개발자

#react

#next.js

답변 1

댓글 1

추천해요 1

조회 635