- [ 💻 코드스테이츠 x 경남abclab/Section 4 ]Reference 4 - S3로 정적 웹 호스팅 가이드2024-02-26 22:15:04여러분이 향후 각자 개인의 AWS 그룹 계정을 활용하는 경우에는, 아래 가이드에 따라서 S3로 정접 웹을 호스팅하고 관리할 수 있습니다. 이번 실습에서는 S3 버킷을 이용하여 정적 웹 사이트를 호스팅하는 방법에 대해서 알아보겠습니다. 먼저 정적 웹 사이트를 호스팅하는 과정은 4 단계로 요약됩니다. 첫 번째로 구현이 완성된 정적 웹 페이지를 빌드합니다. 빌드 과정이 끝나면 S3 대시보드에 접속하여 버킷을 생성하고, 생성한 버킷을 정적 웹 사이트 호스팅 용으로 구성합니다. 그다음으로 빌드된 정적 웹 페이지를 버킷에 업로드합니다. 업로드가 완료되면 퍼블릭 액세스 차단 설정을 해제하고, 다른 사용자의 접근 권한을 부여하는 버킷 정책을 생성합니다. 먼저 '빌드(build)'에 대해 잠시 알아보는 시간을 가지겠습니..
- [ 📋 기타/정처기 ]정처기 필기특강 - 수식 표기법2024-02-13 23:28:04# 수식표기법 전위 표기법 : +ab 중위 표기법 : a+b 후기 표기법 : ab+ # 후위 표기법 후위 표기법은 연산자가 피연산자 뒤에 나타나는 표기법입니다. 예를 들어, 중위 표기법에서는 "3 + 4 * 5"와 같이 연산자가 피연산자 사이에 위치하지만, 후위 표기법에서는 "3 4 5 * +"와 같이 연산자가 피연산자 뒤에 나타납니다. 후위 표기법을 사용하면 괄호가 필요 없고, 연산자 우선 순위에 대한 혼동이 줄어들며, 계산을 위한 루프나 재귀 함수를 쉽게 작성할 수 있습니다. → 번호 문제 풀이 1 다음 수식을 후위 표기법(postfix)으로 옳게 표시한 것은? (A+B)*C+(D+E) 연산자 우선순위 () AB+ *C + DE+ 그다음 * 수행 AB+ C* + DE+ 그다음 +를 뒤로 뺌 AB+ C..
- [ 📋 기타/정처기 ]정처기 필기특강 - 그래프 운행법2024-02-13 22:49:01출처: 유튜브 - 흥달쌤 - 정보처리 필기 특강 (깊이 우선 탐색/ 너비 우선 탐색) # 그래프 운행법 아주 가끔 나옴! 하지만 쉬움 2과목은 고득점을 목표로 해야하니까 공부하기 깊이 우선 탐색 너비 우선 탐색 # 깊이 우선 탐색 깊이 우선 탐색 : 아래로 갈때까지 간다음 왼쪽가고 오른쪽 가고! 번호 문제 풀이 1 다음 그래프에서 정점 A를 선택하여 깊이우선탐색(DFS)으로 운행한 결과는? 알파벳 순서 같은 조건 없으면 그냥 밑→왼쪽→오른쪽 (이 문제는 조건이 명확하지 않은 문제임) A→B→E→F→G→C→D 2 깊이우선탐색 알고리즘을 적용하여 아래의 트리를 탐색한다고 했을 때, 방문 순서를 나타낸 것으로 옳은 것은? A→B→E→F→K→C→G→D→H→I→L→J 3 시작 정점이 6일 때, 다음 그래프에 대한..
- [ 📋 기타/정처기 ]정처기 필기특강 - 트리운행법2024-02-13 02:49:39출처: 유튜브 - 흥달쌤 - 정보처리 필기 특강 (전위순회 / 중위순회/ 후위순회) # 트리운행법 - 트리운행법은 2과목에서 2~3문제 무조건 나오는 부분 트리운행법 전위 운행 Preorder: 부모부터 방문>왼쪽>오른쪽 중위 운행 Inorder: 왼쪽>부모>오른쪽 후위 운행 Postorder:왼쪽>오른쪽>부모 # 중위순회 번호 문제 풀이 1 왼쪽을 다 끝내고나서 부모로 가기 D→B→A→E→C→F 왼쪽→부모→자식 2 다음 이진 트리의 노드를 중위 순회(inorder traversal)할 때, 4, 5, 6번째 방문 노드를 순서대로 바르게 나열한 것은? F→D→G→B→A→E→C 정답 : B,A,E 3 다음 이진트리를 중위 순회(inorder traversal)하는 경우 노드 방문 순서는? 4→2→5→1→6..
- [ 💻 코드스테이츠 x 경남abclab/팀 프로젝트 ][팀프로젝트] S3 배포하기2024-01-24 09:20:46백엔드까지 전체 배포가 끝났는데 .. 내 아이디로 버킷을 다시 만들기로 했다! 배포 테스트때 실패했었는데... 🫠 지금 EC2에서는 다 되어있고 그냥 S3 버킷만 다시 하는 상황! 아무튼 어렵지 않으니 S3 배포 도전!! 1. env 파일 환경변수 설정하기 빌드하기에 앞서 환경 변수를 담은 .env 파일을 확인합니다. .env 파일의 파일명이 제대로 적혀있는지, 환경 변수에 담긴 서버의 주소는 문제가 없는지 확인합니다. 참고로 요청을 보내는 서버의 주소를 환경 변수에 담을 때는 필히 'http://' 나 'https://'를 포함해야 합니다. 2. npm run build 환경 변수 관련 설정이 완료되면, 터미널에 'npm run build' 명령어를 입력하여 빌드 과정을 진행합니다. 얼마간에 시간이 지..
- [ 💻 코드스테이츠 x 경남abclab/팀 프로젝트 ][팀 프로젝트] Git pull받기2024-01-08 11:05:39먼저 우리팀은 브랜치를 fe 하나로 쓰기로 했다. 그런데 커밋-풀-푸시 할때마다 충돌이...🤯 한명이 올리고 세명이 받으면 세명 다 수동으로 오류를 처리해야만 했다. 그것도 몇번씩이나... 근데 알고보니 같은 파일 app.js 등을 서로 동시에 수정해서 그런거였고, 공통파일을 수정할때면 미리 말하고 수정하자! 라는 규칙을 세웠다. 한명이 수정한 후에 푸시해서 올리면? 내가 해야하는 절차는? 1. 먼저 표시한 노란 점선 박스 안에 메세지를 적어서 커밋을 한다. ex) 프로필 수정, css 생성 커밋! 만 해야한다. 커밋 및 동기화 (X) 2. 터미널에 git pull 입력한다. (같은 파일을 수정하면 보통 여기서 오류남...) 3. pull 완료되면 git push 한다. 4. 푸시 완료후 깃허브 - 해당..
- [ 💻 코드스테이츠 x 경남abclab/팀 프로젝트 ][팀프로젝트] JWT토큰2024-01-06 22:24:03멘토링 시간... 인증은 어떻게 하시나요? JWT 토큰..? ... 또 나만 잘 모르네...;; 🫨 지금부터 알면됨ㅋ 😂 유어클래스랑 구글링 유어클래스로 기본적으로 토큰에 대해 알아봤다. ✔️ JWT 토큰 JWT 는 JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON입니다. 전자 서명은 JSON 의 변조를 체크 할 수 있게되어 있습니다. JWT( JSON Web Token)은 정보를 안전하게 전송하기 위한 컴팩트하고 자체 포함 형식의 표준입니다. JWT는 특히 웹에서 정보를 주고받을 때 사용되며, 서버와 클라이언트 간의 정보를 안전하게 인코딩하여 전송할 수 있게 해줍니다. JWT의 구조는 세 부분으로 나뉩니다: Header(헤더): 토큰..
- [ 📋 기타/기타 ]노마드 코더 <세션vs토큰vs쿠키 기초개념>2024-01-05 09:56:49노마드 코더 https://www.youtube.com/watch?v=tosLBcAX1vk ✔️ 쿠키vs토큰 쿠키는? 쿠키를 이용해서 서버는 나의 브라우저에 데이터를 넣을 수 있다. 나에 대한것을 기억하기 위해서! 사이트에 방문하면 브라우저는 서버에 요청을 보냄 서버는 응답한다. 응답에는 데이터랑 내가 찾던 페이지 정보가 있고, 거기는 브라우저에 저장하고자하는 쿠키가 있어! 내가 브라우저에 쿠키를 저장하고 해당 웹사이트 에 방문할때마다 브라우저는 해당 쿠키도 요청과 함께 보낸다. 쿠키는 도메인에 따라 제한됨(유튜브 쿠키는 유튜브에만) 그리고 서버가 정한 기간동안 유효하낟. 쿠키는 인중말고 다른 정보도 저장 가능 웹사이트 언어설정을 바꾸면 서버는 쿠키를 주고 내가 선택한 언어를 저장한다. 그다음에 내가 웹..
- [ 💻 코드스테이츠 x 경남abclab/팀 프로젝트 ][팀프로젝트] 회원탈퇴 모달 만들기2024-01-04 16:03:28가장먼저 회원탈퇴 팝업(모달)을 만들 예정이다. 피그마로 만들었던 팝업창의 대략적인 모습! ✔️ 모달 라이브러리 설치 react-modal 라이브러리를 이용해서 모달을 만들것이다! 먼저 npm install react-modal을 설치한다. npm install react-modal 그다음 해당 페이지에서 Import import Modal from 'react-modal'; ✔️ 모달 코드 작성 그리고 대략적인 모달 창의 코드를 작성했다. //LeaveModal.jsx import React, { useState } from 'react'; import Modal from 'react-modal'; function LeaveModal() { const [modalIsOpen, setModalIsOpen..
- [ 💻 코드스테이츠 x 경남abclab/팀 프로젝트 ][팀프로젝트] git 설정하기 🫠2024-01-04 11:20:42깃허브를 통한 초기 설정시에 헷갈렸던 부분, 어려웠던 부분, 주의 할 부분들을 모아서 작성한 글입니다. # .gitignore 만들기 일단 팀원들이 만들어준 폴더구조를 pull을 통해서 받았다! 그리고 열어서 npm install을 했는데.... 커밋 변경사항이 10000개를 넘어가는 상황...🫠 .gitignore파일을 생성해주고 그안에 아래코드 그대로 .gitignore파일 안에 복사해서 넣고 저장한다. # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. # dependencies /node_modules /.pnp .pnp.js # testing /coverage # production /build..
- [ 💻 코드스테이츠 x 경남abclab/팀 프로젝트 ][팀프로젝트] Sprint1 회고2024-01-04 11:06:392024.01.03(수) 1주 차 회고가 있었다! ....🫠 그리고 많은 일을 했다! 기능 관련 회의 피그마 작성 역할 분배 화면정의서 작성 깃허브 브랜치 나누기 깃허브 칸반 작성 내가 맡은 파트는 [마이페이지] & [회원정보수정] 내가 잘할 수 있을까? 그래도 해야지 😄ㅋㅋㅋ 무사히 코드를 잘 짜고 깃허브 충돌도 없이 목표했던 1순위를 무탈하게 잘 구현하고 추가 기능들도 잘 구현했으면 좋겠다 ㄷㄷ
- [ 💻 코드스테이츠 x 경남abclab/팀 프로젝트 ][팀프로젝트] 초기설정하기2024-01-01 22:01:582023년 12월 말 팀이 정해지고 어렵게 깃허브 포크, 머지 실험(?)을 완료하고 코드를 개미만큼 짰는데... 갑자기 팀이 해체되고 변경되었다! 🫠 그래서 새로운 팀에 합류하게 되었다. 멋진 주제로 진행되고있었는데... api 관련 문제로 프로젝트의 주제를 바꾸게 되었다. 그래서 연말/연초에 휴일이지만 시간을 내서 짧은 회의를 했다. # 초기설정 디스코드 Github Figma Notion Google Sheets 팀장, 부팀장, 팀 규칙, 프로젝트 규칙 정하기 프로젝트 주제, 아이디어 미믹, 회의를 통해서 큰 틀 정하기 이후 사용자 요구사항 정의서, 화면정의서 만들기 새로운 팀원들과 프로젝트를 잘 해내고싶다! 내 새해 소원!😃🙏