이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. box-sizing: border-box box-sizing : border-box로 설정하고 border나 padding을 추가하면 해당 box의 크기는 그만큼 더 커지지 않고 사용자가 지정한 너비나 높이만큼 길이에 맞추게 된다. → border값이나 padding 값이 지정한 width값이나 height값에 포함이 된다. 출처: https://juicyjerry.tistory.com/entry/css에서-box-sizing-을-border-box로-하는-이유 position sticky가 적용이 되지 않는 이유 sticky 속성을 갖는 요소는 자신의 부모 요소 안에서만 적용됨 부모 태그는 무조건 height 높이 값이 들어가 있어야 ..
2024년 1학기 현재, 3학년 2학기를 다니고 있다.(즉, 엇학기로 다니고 있다.) 내가 다니는 학교에서 컴퓨터공학부는 졸업프로젝트를 1년 단위로 진행한다. 사실 4학년부터 시작하는 것이 일반적이지만, 운이 좋게도 아는 사람들끼리 팀을 구성할 수 있어서 이번 학기부터 졸업프로젝트를 시작하기로 했다. 주제 팀원분들과 상의한 결과, ‘공공 데이터와 AI를 활용하여 개인 맞춤형 코스를 제공하는 웹 애플리케이션’ 을 개발하기로 했다. 크게 구현할 기능은 3가지로 나눌 수 있는데, AI를 활용한 사용자 정보 기반 코스 추천 실시간으로 공공데이터에 기반한 추천 제공 유저 간 코스 기록 및 공유 이렇게 기능을 개발할 예정이다. 초기 세팅 팀에서 프론트엔드는 나랑 다른 팀원, 총 두 명이다. 어제 만나서 같이 개발 ..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. CSS 전처리기 CSS 전처리기는 전처리기가 가진 특별한 문법으로 CSS를 생성하도록 하는 프로그램입니다. → 기존 CSS가 가진 문제점들을 해결하기 위해 만들어졌습니다. CSS 전처리기를 사용하면 다음과 같은 장점이 있습니다. 재사용성 공통 요소 또는 반복적인 항목을 변수, 함수로 대체 가능 시간적 비용 감소 임의 함수 및 내장 함수로 인한 개발 시간적 비용 절약 유지 관리 CSS코드를 여러 파일로 나눠 유지 보수성 향상 중첩, 상속과 같은 요소로 인해 구조화된 코드로 유지 및 관리 용이 Learning curve 낮음 하지만 전처리기를 위한 도구가 필요하다는 점과, 퍼블리셔나 디자이너가 개발에 대한 역햘과 요소 접목으로 개발적인 요소..
이 글은 KUIT Web 파트 부원분들을 대상으로 작성한 글입니다. id와 class의 차이 html에서 id를 사용할 때도 있고, class를 사용할 때도 있습니다. 이 둘은 무슨 차이일까요? id는 태그에 유일한 이름을 쓸 때 사용됩니다. → 단 하나의 요소에만 사용되므로 중복이 불가합니다. → class보다 우선적으로 적용이 됩니다. class는 같은 유형으로 반복되는 태그들을 유형별로 분류하고 싶을 때 사용됩니다. → 유형별로 동일한 class를 사용할 수 있으므로 중복이 가능합니다. 출처: https://velog.io/@jos9187/id-속성과-class-속성의-차이 css 우선순위 id가 class보다 우선적으로 css가 적용되는 것은 이제 알겠습니다. 그렇다면 전체적으로 css 우선순위는..
이 글은 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 (저번 겨울방학 동안 개발한 프로젝트의 포트폴리오는 위 링크를 통해 참고할 수 있다.) 프로젝트가 끝나기 하루 전 날, 갑자기 친구한테 카톡이 왔다. 백엔드를 공부하고 있는 친구였다. 지금 하고 있는 프로젝트가 끝나면 같이 프로젝트를 할 생각이 없냐고. 프로젝트를 하면서 프론트엔드 실력을 더 기르고 싶었기에 바로 수락했다. 프로젝트가 끝나고 며칠 뒤, 우리는 프로젝트에 대한 회의를 했다. 만들고자 하는 프로젝..
