이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. 한 주 동안 스터디하시느라 다들 수고하셨습니다! 이번 주 부원님들께서 워크북 발표하시는 내용을 듣고 추가적으로 보충 설명을 했었는데요. 한 번 글로 정리해서 공유해보려 합니다. LocalStorage HTML Web Storage API는 localStorage와 sessionStorage를 포함합니다. 그 중 localStorage는 브라우저가 닫히고 다시 열려도 데이터가 지워지지 않습니다. 데이터는 만료 날짜가 없으며, JavaScript를 통해 브라우저 캐시/로컬 저장된 데이터를 지우는 것을 통해서만 지워집니다. localStorage는 로그인 여부를 확인할 때 사용됩니다. 만약에 토큰 방식을 활용하여 로그인을 한다면, 우리는 백엔..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. 안녕하세요! 1주차 강의에 저희 웹 파트는 HTML에 대하여 배우게 됩니다. 강의에 나오듯이 HTML은 마크업 언어일 뿐이라 별 기능이 없는데요. 그래서 웹 개발을 할 때 개발자들은 기능을 구현할 때 JavaScript나 React를 사용하게 됩니다. 하지만 제가 지금 소개해드릴 ‘htmx’ 라이브러리를 활용하면 JavaScript 없이도 많은 기능을 사용할 수 있습니다. htmx를 사용하고 싶다면 html에 아래와 같은 script 구문 하나만 추가하면 됩니다. 매우 간단하죠? htmx를 활용하면 매우 간단하게 서버와의 통신을 할 수 있습니다(서버에서 html을 가져올 수 있습니다). JavaScript나 React에서 서버와의 통신을..
HTML HyperText Markup Language의 약자 → 웹 페이지를 구조화하고 표시하는 언어 HTML은 웹 브라우저에서 해석되어 사용자에게 보여지는 모든 콘텐츠를 기술. HTML은 태그로 이루어져 있음. → 문서가 HTML5로 작성된 것임을 브라우저에 알려줌. → 문서의 모든 내용을 감싸는 컨테이너 역할 → 문서의 메타데이터와 스타일 시트를 포함 → 문서의 콘텐츠를 포함 → HTML 문서의 메타데이터를 정의 메타데이터 문서에 대한 정보를 나타내는 데이터 charset 문서의 인코딩 방식을 정의 인코딩을 명시하지 않으면 웹 브라우저에서 자동으로 인코딩을 처리하기 때문에 한글이 깨질 수도 을 적어주는 것이 좋다. name 메타데이터의 이름 content 해당 메타데이터의 값을 정의 viewport..
1. 인트로 수정 저번에도 언급했듯이 카카오로 소셜로그인을 하는 대신 이메일로 로그인과 구글로 로그인을 구현하기로 해서 인트로 화면을 변경해야 했다. 카카오 로그인 버튼을 빼고 이메일과 비밀번호 입력란, 회원가입(이메일) 버튼, 구글로 로그인 버튼을 새로 만들었다. 이메일로 회원가입도 진행해야 되니 회원가입 화면도 새로 구현했다. 비밀번호 확인은 비밀번호 코드를 복붙해서 만들었는데 비밀번호에 input을 입력하면 비밀번호 확인에서도 똑같은 input이 입력되는 오류가 생겼다. 아무래도 수정이 필요할 것 같다. 2. Quill 에디터 도입 전에는 글 작성을 그냥 textarea로 구현했었는데, 생각해보니 게시물에는 사진도 첨부되는 것이 맞는 것 같아 어떻게 하면 좋을까 생각하다가 에디터 라이브러리를 도입하..
지금까지는 Webpack(Create-react-app) 환경에서 TypeScript를 실행했었기에 custom.d.ts(혹은 global.d.ts)에서 declare module "*.svg" { import React = require("react"); export const ReactComponent: React.FC; const src: string; export default src; } 위와 같이 작성하면 svg 파일이 잘 실행이 되었었다. 그런데 이번에 새로 프로젝트를 할 때 아래와 같이 svg 파일을 사용하려고 했는데, import { ReactComponent as ~~~Icon} from '../../ ........생략' 위와 같이 ReactComponent로 불러올려고 했는데 svg..
1. 백엔드를 전공하는 친구에게 연락이 왔다. 이번 겨울방학 동안 동아리에서 진행했던 프로젝트가 끝이 났다. https://www.behance.net/gallery/192520373/-MOCU 모두의 쿠폰, MOCU 모두의 쿠폰, MOCU 게시: 2024년 2월 27일 www.behance.net (저번 겨울방학 동안 개발한 프로젝트의 포트폴리오는 위 링크를 통해 참고할 수 있다.) 프로젝트가 끝나기 하루 전 날, 갑자기 친구한테 카톡이 왔다. 백엔드를 공부하고 있는 친구였다. 지금 하고 있는 프로젝트가 끝나면 같이 프로젝트를 할 생각이 없냐고. 프로젝트를 하면서 프론트엔드 실력을 더 기르고 싶었기에 바로 수락했다. 프로젝트가 끝나고 며칠 뒤, 우리는 프로젝트에 대한 회의를 했다. 만들고자 하는 프로젝..
Day 9 개미 군단 https://school.programmers.co.kr/learn/courses/30/lessons/120837 function solution(hp) { // 장군개미 = 5, 병정개미 = 3, 일개미 = 1 // hp가 0이라면 if(hp === 0) { return 0; } // hp가 1이거나 3이라면 if(hp === 1 || hp === 3) { return 1; } // hp가 2이거나 4라면 if(hp === 2 || hp === 4) { return 2; } // hp가 5 이상이라면 if(hp >= 5) { // hp를 5로 나눈 몫 let quotient = parseInt(hp / 5); // hp를 5로 나눈 나머지 let remainder = hp % 5..
배열 자르기 https://school.programmers.co.kr/learn/courses/30/lessons/120833 function solution(numbers, num1, num2) { let answer = []; let cnt = 0; // num1부터 num2까지 numbers 배열의 값을 answer 배열에 넣어준다. for(let i = num1; i b가 된다! for(let i = 0; i < age_string.length; i++) { answer += String.fromCharCode(Number(age_string[i]) + 97); } return answer; } 진료순서 정하기 https://school.programmers.co.kr/learn/courses/..
Day 6 문자열 뒤집기 https://school.programmers.co.kr/learn/courses/30/lessons/120822 function solution(my_string) { let answer_string = ''; // my_string의 끝에 있는 문자부터 answer_string에 넣어주기 for(var i = my_string.length - 1; i >= 0; i--) { answer_string += my_string[i]; } return answer_string; } 직각삼각형 출력하기 https://school.programmers.co.kr/learn/courses/30/lessons/120823 const readline = require('readline');..
Day 4 피자 나눠먹기(1) https://school.programmers.co.kr/learn/courses/30/lessons/120814 function solution(n) { // n을 7로 나눈 나머지를 integerCheck 변수에 저장 let integerCheck = n % 7; let answer = 0; // integerCheck가 0이라면 피자는 n / 7개가 필요하다. // 예시: 피자를 나눠먹을 사람이 21명이면 피자는 3판이 필요하다. if (integerCheck === 0) { answer = n / 7; } // integerCheck가 0이 아니라면 피자는 n / 7의 몫 + 1개가 필요하다. // 예시: 피자를 나눠먹을 사람이 22명이면 피자는 3판 + 1판이 필..
