티스토리

미니는 밍기적

검색하기

블로그 홈

미니는 밍기적

sefdcrxe.tistory.com/m

sefdcrxe 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[GDSC] 프로젝트 이렇게 해보는 건 어떨까요? ㅣ 그리고 나의 회고 여러분들은 혹시 플젝의 시작과 끝의 선에서 회고를 하시나요? 나는 3학년 시작과 동시에 여러 프로젝트를 진행하게 되며 하루에 회의를 최대는 3-4번 할 정도로 팀플이 굉장히 많아졌고, 그런 과정에서 실제로 겪는 고충들이 분명히 있었다. 나 자신에게든 프로젝트에게든 타인에 의해서든 나아가서는 시기적으로도 말이다. 내가 2023년에 전공 관련해서 진행했던 프로젝트는 아래와 같았다. 주최 명 프로젝트 명 기간 팀원 수 연구실 [kisti와의 공동연구과제] 기계학습 기반 기술수요 추출 알고리즘 개발 약 6-7개월 4명 한이음 ICT GAN을 활용한 사용자 입력 기반의 대량 이미지 생성 및 거래 플랫폼 'GANerate' -> 수료증 약 7개월 4명 FARM 크리에이터와 팬 간의 래플 기반 소통 플랫폼, Clos.. 공감수 2 댓글수 1 2023. 11. 4.
[FLUTTER] 환경설정 및 디렉터리 구조 설정 vscode의 확장에서 'Flutter'를 설치해준다 이후 커맨드 창에서 flutter를 검색하면 flutter를 사용할 수 있는 건들이 뜬다 요기서 frun flutter doctor 클릭해서 sdk 설치 되어있는지 한 번 더 확인해주고! 나는 안 설치되어있어서 이 창에서 다운로드를 시행했다 이후에 new project를 열고 내가 진행할 프로젝트 이름인 closeup을 설정해주면 디렉터리 구조를 어떻게 설정할지에 대해 고민해보며 초기 설정이 굉장히 중요했다고 생각했던 저번 프로젝트를 떠올렸다. 초반에 각 프로젝트 마자의 디렉터리 구조를 탄탄하게 짜놓아야만 다양한 코드가 통용되고 알아보기 쉽다고 생각했고 ! 초기 설정을 잘 못하면 프젝 중간마다 주기적으로 수정해조야한다 ㅠ ㅅ ㅠ 그렇기에 요번 프로젝트.. 공감수 0 댓글수 0 2023. 10. 8.
[REACT] 상품 데이터 서버에서 불러오기 프론트 측에서는 이렇게 card 형식으로도 불러올 수 있고, 해당 제품을 클릭하게 될 시, 제품 상세조회도 할 수 있으며 해당 상품을 구매하기 전의 확인 창에서도 이러한 상품 데이터를 서버에서부터 가져올 수 있다 ㅈㅣ금 모기에 물려서 다음에 과정을 쓰도록 하겠다 꼬르륵 ^C 공감수 0 댓글수 0 2023. 8. 25.
[REACT] 아임포트 일반결제 성공 아직 결제 검증 통신은 구현하지 못했지만 결제는 성공했다 ! 결제 화면을 구현하는 데에는 아래의 파일을 활용했다 1. 아임포트 payment.html -> 각종 변수 설정 및 로직 참고 2. index.html -> 아임포트 script 추가 3. PaymentPage.js -> 해당 결제 페이지 구현 창 4. VerifyPage.js -> 결제 검증 페이지 구현 창 5. user_actions.js -> 결제할 상품 통신 코드 & 결제 검증 통신 코드 ---- 6. PaymentPage.css -> 디자인 어떤 것을 중심으로 고려하면서 코드를 짰는 지에 대해서는 바로 이전 게시물을 참고하면 되고, 백엔드와의 소통은 결제 직전 정보 확인 통신과 결제 검증 통신이 있다만 그 외에는 최대한 PaymentPa.. 공감수 0 댓글수 0 2023. 8. 25.
[REACT] PG사 일반결제 포트 연동시키기 _ 아임포트 데이터유통플랫폼인만큼 결제가 필수인 플랫폼인지라 PG사 결제포트 연동이 필쑤인 것이다 이에 아임포트에서 일반결제 포트를 연동하기로 했다 이에 결제하기 버튼 연동 전, 초초안 간단하게 PaymentPage.js로 결제 페이지를 개발했다 결제하기 버튼 클릭 시, 현재는 결제 실패 Alert 창이 뜬다 당연하다 아직 access토큰을 담아두지도 않았고, 상품 정보를 담아두지도 않았으니 해당 박스들 칸에 아직 상품 정보와 결제 금액이 뜨지않는 이유는 db에 모셔놓은 상품을 갖고오지않았기때문이고 어제 밤에 api와 http 전달받은지라 이제 통신해서 불러오면 된다 이에 토큰 담기 전에 회원가입과 로그인으로 토큰 담는게 먼저인지라 이를 해결하고 결제 페이지로 넘어갈 예정이다 **맨 아래 하단 : 아임포트 결제하기 .. 공감수 0 댓글수 0 2023. 8. 19.
[REACT] 회원가입 파트에서 백앤드와 통신했던 코드 디자인은 영상 평가 (2차 평가) 또는 3차 평가가 가까워진다면 더 수정해부도록하고! 이제 통신을 위해 마지막으로 리액트를 얹었는데 마이 개발 순서는 늘 html -> css -> js과 함께 통신 코드 짜기 ~.~ 즉 통신이 가장 마지막 순서였고 이미 짜여진 반듯한 창 내에서 통신 코드를 짜는 게 맘이 편해서 자연스레 이 흐름대로 개발했다 . 어쨌든 가장 골치 아프지만 어떻게 보면 가장 기본 중에 기본인 회원가입 통신 3가지를 오늘부로 막을 내렸던 것 이런 예뿌장한 콘솔창이 뜨기 전까지는 아래와 같이 구질구질한 창만 계속 봐야했었다ㅠ 어찌됐건 백엔드와의 통신 모두 성공 (code=0)했고, 회원가입에서 가입이 정상적으로 완료됐다면 로그인 창으로 랜딩되는 것 까지 import { useNavigate }.. 공감수 0 댓글수 1 2023. 8. 19.
[REACT] 상품 등록 페이지 & 상품 상세 검색 페이지 구현 현재 진행중인 GAN:ERATE 플랫폼은 사용자가 업로드한 이미지 파일 기반으로 유사한 이미지를 대량 생성시켜주는 플랫폼이다 !.! 그렇기에 상품 등록 페이지 창은 무엇보다도 필수인데 통신 연결 전에 먼저 html 창을 개발했다 이번에는 카테고리를 html 밖으로 빼서 js의 함수 식으로 먼저 정의를 해주고 함수를 html에 연결해주었다 const Categories = [ { key: 1, value: "100장" }, { key: 2, value: "500장" }, { key: 3, value: "1000장" }, { key: 4, value: "직접입력" } ] const Continents = [ { key: 1, value: "보건/의료" }, { key: 2, value: "동물/식물" }, .. 공감수 0 댓글수 0 2023. 8. 5.
[REACT] 메인페이지 개발 원래 기존 테마를 템플릿마냥 갖고 와서 메인페이지 개발할 생각이었으나 욕심쟁이,, 나는,, 내가 디자인한대로 웹페이지 구현하고 싶어서 ㅎㅅㅎ 부트스트랩 이용해서 테마 가져오는 법만 익히고 독학으로 웹페이지 하나하나 구현했음니다 테마 가져오는 법부터 보실까융 스타투 사용하려던 테마 이름은 carousel이다. 위 처럼 테마를 다운로드 받아서 사용할 수도 있지만 웹에 있는 테마를 링크만 거는 !cdn 방식! 을 활용할 수도 있다 이렇게 코드를 붙혀서 테마를 가지고 오는 것을 cdn 방식이라고 한다 l container 방식 이렇게 우측 사진과 같이 화면을 구성하게 될 경우, 한 박스를 컨테이너라고 칭한다 즉, 나는 네비바를 포함해서 4개 정도의 컨테이너가 필요하다 피그마를 몰랐던 나는 미리캔버스로 열심히 도.. 공감수 0 댓글수 0 2023. 8. 5.
[HTML] 로그인 화면 꾸미기 | 오픈소스 사용해보기 이제 로그인 화면을 꾸릴 차례이며, https://codepen.io/ 를 활용할 예정이다 여기서! 테마 설정전에 해당 테마를 상업적으로 사용해도 되는지 알아보아야함 이에 화면 좌측 하단에 위치한 'comments' 버튼을 클릭해서 스크롤을 최하단으로 내리면 'license'칸이 있음 이때 copy 누르고 papago에 돌려보기 -> 활용가능 -> 첫두줄 복사해서 login.ejs(*html), login.css(*css) 코드에 넣어 줄 예정 (최하단에 주석으로) 나는 최대한 ganerate 설계 테마와 비슷한 검+핑 테마를 골랐다 이후 login.ejs 파일의 body 코드 내에 html 코드 전체 붙혀넣으면 된다 css코드는 전체 복사해서 login.css에 붙혀넣어준다 이때! html, css 파.. 공감수 0 댓글수 0 2023. 7. 14.
GITHUB & vscode 터미널 창에서 자주 쓰는 코드 깃허브 커밋 git add . git commit -m " 커밋 내용 " git push origin master 서버 작동 node ./bin/www.js 일반 서버 종료 컨트롤 c 서버 다른 곳에서 작동 시 종료 lsof -i :4000 (*현재 내가 사용하는 서버가 localhost:4000이라서) kill -9 작동중인 곳 숫자 node ./bin/www.js 공감수 0 댓글수 0 2023. 7. 14.
[REACT] 프론트에서 서버로 데이터 보내기 브라우저에서 사용자가 입력한 Id , 비밀번호 내역을 백엔드에게 보내주는 통신을 할 것임! 이때 전달할 데이터는 request 라는 데이터고, fetch라는 함수를 통해서 전달을 할 것이며 어떤경로로 전달을 할 것인지 정해줘야함 -> 이러한 경로는 보통 서버 개발자가 설계 프론트는 해당 경로를 요청하고, 해당 경로의 api는 미리 만들어져있어야함 이때 내 파일상 index.js에 해당 api가 만들어져있음 하지만 아직 id, 비번을 받을 api는 아직 정해지지않은 상태 하지만 만들어져있다고 가정하고 데이터를 전달해보는 과정을 구현할 것임 *index.js 이에 /login이라는 경로가 이미 있다고 가정하고 login.js에서 fetch함수를 설계할 예정 -> /Login이라는 경로로 전달 *login.j.. 공감수 0 댓글수 0 2023. 7. 14.
맥북 주피터노트북 설치 에러 해결 코드 python3 -m venv myenv source myenv/bin/activate pip install jupyter jupyter notebook 또는 python3 -m notebook 또는 /usr/local/bin/python3 -m jupyter notebook 공감수 0 댓글수 0 2023. 7. 7.
[REACT] 로그인, 회원가입 fetch 코드 구현 1.먼저 유저가 이메일을 입력합니다. -Email Input의 onChange 이벤트 핸들러에 연결된 함수가 실행됩니다. -함수에서 Email Input의 value를 setId를 통해 업데이트 합니다. 2.유저가 비밀번호를 입력합니다. -Password Input의 onChange 이벤트 핸들러에 연결된 함수가 실행됩니다. -함수 안에서 Password Input의 value를 setPw를 통해 업데이트 합니다. -Button을 클릭하면 onClick 이벤트 핸들러에 연결된 함수가 실행됩니다. 3.함수 안에서 fetch 함수를 통해 server에 요청(Request)을 보냅니다. server에서 인증 / 인가 과정을 거친 후의 결과를 응답(Response)으로 보내 줍니다. 4. 응답의 결과에 따라 M.. 공감수 0 댓글수 0 2023. 7. 6.
[REACT] 프론트와 백엔드의 기본 소통 해당 api를 호출하면 아래 같은 결과값을 반환함 백엔드는 이 api를 프론트에게 제공 이때! 백엔드는 url(웹 상에서 서비스를 제공하는 각 서버(컴퓨터)들에 있는 자원(파일)의 위치)만 띡하고 넘기는 것이 아니라 api를 어떻게 사용하는지 api 명세서 정리 (post, put, get 등) 프론트는 백엔드가 보낸 api 명세서를 확인한 후 html, css, js 사용하여 일반적인 사용자가 볼 수 있도록 하는 사용자 인터페이스인 ui 개발 1. 예를 들어 원래는 3개의 포켓몬만 있고, 나머지는 유저들이 올리는 것이라고 가정 -> 스펙이 추가되는 웹 화면 그러면 백엔드 개발팀은 포켓몬을 등록할 수 있는 등록 api 개발 [서버측] 그러면 프론트 개발팀은 사용자가 포켓몬을 등록할 수 있도록 백엔드가 개.. 공감수 0 댓글수 0 2023. 7. 6.
[REACT] 프론트와 백엔드 간의 로그인 통신 방법 우선 글을 들어가기에 앞서, 프론트와 백엔드 간의 통신 [ 로그인 방식 ] [ HTTP 통신 방식 ] 웹에서 데이터 교환 -> FrontEnd에서 ID와 Password를 입력하여 BackEnd로 데이터를 보낼 때, fetch나 axios같은 HTTP 비동기 통신 라이브러리를 사용 서버와 클라이언트가 항상 연결되어 있는 것이 아니라! 클라이언트가 요청(request)을 보내면 순간 연결이 되고, 서버가 응답(response)을 보내면 통신은 종료된다는 것이다. -> 상태를 저장하지 않아 자원 낭비를 방지한다는 장점 1. session 방식 > 서버에서 사용자의 세션 데이터를 저장해서 로그인 기능을 구현하는 방법 프론트와 서버 각각의 역할 [프론트] 프론트 쪽에서 로그인 페이지에서 아이디, 비번을 서버로 .. 공감수 0 댓글수 0 2023. 7. 6.
[Python] 백준_재귀함수 재귀 - 10870번 - 피보나치 수열 피보나치 수는 0과 1로 시작한다. 0번째 피보나치 수는 0이고, 1번째 피보나치 수는 1이다. 그 다음 2번째 부터는 바로 앞 두 피보나치 수의 합이 된다. -> Fn = Fn-1 + Fn-2 (n ≥ 2) n이 주어졌을 때, n번째 피보나치 수를 구하는 프로그램을 작성하시오. def f(n): if n == 0 or n == 1: return n else: return f(n-1) + f(n-2) n = int(input()) print(f(n)) 재귀 - 10872번 - 팩토리얼 0보다 크거나 같은 정수 N이 주어진다. 이때, N!을 출력하는 프로그램을 작성하시오. def p(n): if n == 0: return 1 else: return n * p(n-1).. 공감수 0 댓글수 0 2022. 10. 24.
[Python] 정렬, split, slicing, striding hw 1-5 str_a는 전체 길이 7로 출력하되 왼쪽 정렬하고 빈 공간은 @로 채웁니다. str_b는 전체 길이 7로 출력하되 가운데 정렬하고 빈 공간은 !로 채웁니다. str_c는 전체 길이 7로 출력하되 오른쪽 정렬하고 빈 공간은 &로 채웁니다. * my_str = '010-2468-1357' str_a = my_str[:3] str_b = my_str[4:8] str_c = my_str[9:] # 2 print(f'{str_a:@7}') #오른쪽 정렬하기 :> ----> 열로 가라~ --------------------- slicing해서 자르기 slicing : string[시작:끝] * 시작은 포함하고 끝은 포함하지 않는다. 끝은 -1자리까지 포함 ex) str_a = my_str[:3] st.. 공감수 0 댓글수 0 2022. 10. 23.
[Python] len() / .sort() / .index() len함수는 리스트의 길이를 간단하게 알려줄 수 있는 함수 *사용방법 : len(리스트) -> 숫자형은 안되고 문자형이어야 가능 -> int 앙대 str 가능 ex a = [1,2,3,4,5] print(len(a)) >>> 5 ---------------- .sort() 는 오름차순 정렬이다. (낮은거부터 올라가) .sort(reverse=True) 는 내림차수 정렬이다. (높은거부터 내려가) ex) a = [1,3,4,2,5] a.sort(reverse = True) print(a) >>> [5,4,3,2,1] ----------------- .index()는 특정 요소의 위치를 알려줌 *리스트.index(찾고싶은 값) ex) a = [1,3,4,2,5,6] print(a.index(6)) #6의 위.. 공감수 0 댓글수 0 2022. 10. 23.
[Python] for i in range 구문 / for, while 차이 range()함수를 이용해 연속된 숫자 생성 for i in range(시작, 끝+1,간격) : print(i) >>>시작 시작+간격 *시작 default는 0, 간격 default는 1 끝만 입력하면 (0,끝,1)로 run ------------------ #5번 반복해! for i in range(5): print("미니") >>>미니 미니 미니 미니 미니 for 변수 in range(횟수): 반복할 코드 *for -> 지금부터 뒤에 나오는 것을 반복하겠다 *range(5) -> 0부터 5까지 숫자를 던져주는 도구 -> [0,1,2,3,4] 랑 똑같음 -> 걍 횟수라고 생각하셈 cf)파이썬에서 같다를 쓸 때는 ==을 사용. 왜냐. =를 쓰면 변수 지정이니까. 쿠하항. ----------------.. 공감수 0 댓글수 0 2022. 10. 23.
[Python] dictionary 자료구조 - key&value *비어있는 딕셔너리를 생성하려면 -> {} 를 사용 + Key:Value 를 쌍으로 입력 + 구분은 콤마 "," * Key 값은 단 1개만 존재함 key value 이름 mini 나이 21 *key에 맞는 Value를 알기 위해서는 ['Key'] 을 입력 *key 값을 얻어오기 위해서는 keys() 를 사용하며,Value 값을 얻어오기 위해서는 values() 를 사용 *key,value 모두 얻어오기 위해서는 items() 를 사용 a = str(input()) #문자열로 받쨔. print(dic[a]) -------------------------- homework 2-2 자판기 for keys in dict_drink: print(keys, ':', dict_drink[keys][1], "won ,.. 공감수 0 댓글수 0 2022. 10. 22.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.