힘내봐요 개발의 숲

스터디를 시작하며,'혼자 공부하는 컴퓨터구조 + 운영체제' 책을 공부하기 위한 스터디인 혼공학습단 12기에 신청했습니다!TIL 카테고리에 혼공단 매주 과제와 학습한 내용을 업로드 하려고 합니다.6주동안 화이팅!! 컴퓨터가 이해하는 정보컴퓨터는 0과 1로 표현되는 정보(2진수)만을 이해하며, 크게 데이터와 명령어로 구분한다.데이터 : 숫자, 문자 등의 정보ex : 10, '안녕하세요'명령어 : 데이터를 움직이고 작동시키는 정보ex : '10'과 '1'을 더해라 컴퓨터의 4가지 핵심 부품컴퓨터의 4가지 핵심 부품에는 중앙처리장치(CPU: Central Processing Unit), 주기억장치(메모리: main memory), 보조기억장치(secondary storage), 입출력장치(input/ouput(..

2023.12 ~ 2024.04프로젝트를 시작하며42Seoul의 마지막 과제로 핑퐁 게임과 채팅이 포함된 웹프로젝트를 진행하게 되었다. 과제의 요구사항은 프론트엔드는 Vanilla JS로 할 것, SPA를 구현할 것 등등이 있어 학습하기는 좋겠지만 난이도 있게 느껴졌다. 프로젝트 인원은 프론트엔드 3명과 백엔드 2명이였고, 42Seoul 기간이 끝나기 전에 프로젝트를 완료해야 했기 때문에 조금 촉박하게 진행해야 했었다. 기획필요한 페이지와 기능이 많아서 기획 단계에서 시간과 애를 많이 먹었다.팀원들과 여러 차례 회의하며 노션 페이지에 각 페이지 별 필요한 기능들과 디테일을 정리했다. (디자인 이후에 삭제되었는지 없어졌다..)최종적으로 구현해야 하는 페이지와 기능은 크게 아래와 같다.로그인 페이지 : 생동..

2023.10 ~ 2023.12프로젝트를 시작하며사이드 프로젝트 주제를 고민하다가, 곧 크리스마스인데 내 트리를 꾸며줘 같은 롤링페이퍼 서비스를 만들면 어떨까? 하는 의견이 있었다. 큰 규모도 아니고, 귀엽게 만들어서 지인들과 사용하면 좋겠다는 생각이 들어 프론트엔드 2명과 백엔드 1명이 모여 진행하게 되었다. 셋이서 기획, 디자인, 개발을 진행했고, 12월 전까지 서비스 오픈을 목표로 하였기 때문에 꽤나 촉박하게 진행되었다. 기획피그잼을 사용하여 필요한 화면과 각 화면의 기능을 논의했고, 최종적인 내용은 간단하게 표현해두었다. 다행히 기획 단계에서 논의한 로직에서 거의 바뀌지 않고 구현했다.이후에 노션에 아래처럼 각 페이지별 기능에 대한 명세를 해두었다. 이렇게 정리해두니 어느 부분에서 API가 필요한..

웹폰트 란,웹폰트(Web Fonts)는 웹 디자인에서 더 나은 시각적 경험을 위해 필수적인 요소입니다. 기본 시스템 폰트로만 제한되어 있으면 웹사이트의 디자인 선택폭이 제한되는데, 이는 디자이너와 개발자 모두에게 제한된 경험을 제공하게 됩니다. 웹폰트는 이러한 제한을 극복하고, 웹사이트에 디자인 요소를 추가할 수 있는 강력한 도구입니다.웹폰트 최적화의 필요성하지만, 웹폰트를 사용할 때는 최적화가 필수적입니다. 왜냐하면 웹폰트는 웹페이지의 성능에 영향을 미치는 요소 중 하나이기 때문입니다. 웹폰트를 사용하면 추가적인 리소스가 필요하므로 로딩 속도가 길어져 FOIT, FOUT와 같은 문제가 발생할 수 있어 사용자에게 혼란을 줄 수 있고, 사용자 경험을 저하시킬 수 있습니다.FOIT, FOUT 란,FOIT(F..

Git Hooks, Husky, Lint-Staged, ESLint 는 Git 저장소에서 코드 품질을 유지하고 개발 효율성을 높이는 데 도움이 되는 강력한 도구입니다. 코드 검사 및 형식 정리 작업을 자동화하여 개발 시간을 단축하고 코드 품질을 일관되게 유지할 수 있으며, 모든 개발자가 동일한 코드 검사 기준을 적용하면 코드 오류를 줄이고 협업 효율을 높일 수 있습니다.이전의 프로젝트에서는 팀원들과 Prettier 정도만 사용하여 동일한 설정내용으로 맞춰 작업을 했었는데, 이번에 새로 진행하는 프로젝트에서는 협업에 도움되는 여러 도구들을 사용해보고자 합니다.Git Hooks 란,Git Hooks는 특정 Git 이벤트(commit, push 등) 발생 시 자동으로 실행되는 스크립트입니다. 반복적인 작업을 ..

i@i-ui-MacBookAir nebtoon % git pushUsername for '': namePassword for '':새로운 프로젝트를 위해 GitHub에서 레포지토리를 클론한 후, push 시 마다 인증을 요구했습니다.private 레포지토리여도 매번 요구하지는 않았던 것 같아 검색해보았는데, HTTPS URL을 통해 클론된 레포지토리이기 때문에 인증을 요구한다라는 내용을 찾을 수 있었습니다. Git에서 항상 암호를 묻는 메시지를 표시하는 이유는 무엇인가요? - GitHub Docs Git에서 항상 암호를 묻는 메시지를 표시하는 이유는 무엇인가요? - GitHub DocsGitHub와 상호 작용하려고 할 때마다 Git에서 사용자 이름 및 암호를 묻는 메시지가 표시되면 리포지토리에 HTTPS..

웹 개발자라면 누구나 CSS를 사용하지만, 복잡한 CSS 코드 작성으로 어려움을 겪은 적이 한 번쯤 있을 것입니다.Tailwind CSS는 바로 이러한 문제를 해결하기 위해 등장한 CSS 프레임워크입니다. 기존 CSS와는 달리 유틸리티 클래스 기반으로 구성되어 있어, 마치 레고 블록처럼 직관적으로 CSS 코드를 작성할 수 있습니다. Tailwind CSS 란,Tailwind CSS는 Adam Wathan과 Adam Pisoni가 개발한 CSS 프레임워크로, 2017년 오픈 소스로 공개되었습니다. Tailwind CSS는 유틸리티 클래스 기반으로 구성되어 있으며, HTML 요소에 직접 클래스를 추가하여 원하는 스타일을 적용할 수 있습니다. 또한, 다양한 색상, 글꼴, 크기, 여백, 패딩 등을 위한 미리 정..

App.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.라는 에러가 발생했다. 보통 import, export 시 파일 명이나 경로가 잘 못 되었을 경우 발생한다고 한다. 나의 경우에는 index.html 파일에 아래처럼 상대경로인 ./src/App.js 라고 써서 발생했던 문제였다. . 을 지워 절대경로로 바꾸어 주니 에러가 해결되었다!   출처