부트스트랩이 버전을 업그레이드하며 이제 Sass(SCSS)로도 사용이 가능하다는 사실!... SCSS의 편리함을 잘 알기 때문에 설치해서 써보기로 했다. 👏 부트스트랩 패키지 설치 먼저 패키지 설치 전에 npm iniy -y로 package.json 생성하기! 이어서 부트스트랩 패키지를 설치해준다. npm install bootstrap@5.2.2 여기서는 진행하지 않았지만, 부트스트랩 아이콘까지 사용하고 싶다면 icons 패키지 추가 설치! npm install bootstrap-icons 디렉토리 세팅 scss 디렉토리를 만들어주고 main.scss에 bootstrap.scss를 import 해주기 vscode에서 빠른 설정을 위해 혹시 live Sass Compiler가 설치되어있지 않다면 요 확장..

Today, What I learned? 파이썬 문법 강의를 들으며 기초 문법을 익히고, 오후에는 바닐라 JS로 끝말잇기 게임을 만들어 보았다. (아직 에러 처리 중이지만!) 파이썬 문법은 원래 살짝만 알고있었던 터라 새롭게 알게 된 부분을 정리해본다. Python 파이썬 문법을 배우며 느낀 것은 들여쓰기가 정말 중요하다는 것과!... 자바스크립트 문법에 익숙해져있다보니 자연스럽게 js 문법으로 써놓고 아차 싶은 경우가 많다는 것... ('===' 연산자나 if문 괄호 등등) f-string 자바스크립트의 템플릿 리터럴 같은 녀석이다. f'코드'로 문자열 안에 변수를 편하게 넣을 수 있다. for s in scores: name = s['name'] score = str(s['score']) print(..

Today, What I learned? 오늘은 자바스크립트 개념을 다시 훑어보며 잘 몰랐던 부분들에 대해서 좀 더 깊게 공부하는 시간을 가졌다. 타입 중 null과 undefined, undeclared의 차이점과 객체 리터럴에 대해서 정리해보려 한다! null, undefined, undeclared의 차이점 먼저 undefined부터 정리해보자! undefined undefined는 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값인데, 스코프에 변수가 선언되었지만 값이 할당되지 않은 상태다. 고로 초기화되지 않았을 때의 값이라 할 수 있다. let name; console.log(name); // undefined null undefined와 헷갈리는 경우가 많은 null. 값이 없는 것을 의도..

11월 첫째 주를 보내며 캠프가 공식적으로 시작되었고, 새로운 팀원들과 미니 프로젝트를 시작하여 발표까지 끝낸 정신없는 한 주였다. 이번 주는 특히나 첫 주였기 때문에 어떤 마음 가짐으로 캠프에 임하는지 또한 정리해보기로 했다. 그리고 주간 회고를 어떤 방식으로 작성할까 하다가 주간 인프런에서 알게 된 5F 방식으로 회고해보기로 했다. 5F는 Fact, Feeling, Finding, Future action, Feedback 이 다섯 개의 키워드 순서대로 회고를 진행하며 사실 - 느낌 - 배운 점 - 향후 행동 - 피드백으로 이어지며 시간 순서에 따라 정리할 수 있다. 한 주를 순차적으로 돌아보기에 적합한 방식인 것 같아 채택! 아, 오늘 멋진 웰컴 키트도 받았다. 🙌 생각보다 탄탄한 티셔츠와 귀여운 ..

미니 프로젝트를 마치며 월요일부터 시작된 미니 프로젝트가 끝났다!.. 월요일 오후부터 오늘 오전까지 4일이라는 짧은 시간 안에서 결과물을 만들어냈다는 것이 다 끝나고 보니 대단하다는 생각 👏👏 특히 우리 팀은 나를 제외하고 이런 개발 프로젝트가 처음인 분들이 대부분이었는데, 끝까지 포기하지 않고 깃허브로 협업도 착착 해낸 것이 뿌듯하다 😊 발표 후 튜터님들의 피드백을 바탕으로 결과물에서 좋았던 부분과 아쉬웠던 부분, 개선되었음 하는 부분을 따로 정리해보려 한다! 아쉬웠던 부분 다크 모드 적용 디테일 담당 파트는 아니었지만, 개인 페이지에서 다크 모드 적용 시에 입력창과 방명록 부분도 변화가 있었어야 했는데 챙기지 못해 사용성 부분에서 아쉽다! 웨일 브라우저의 경우, 다크모드에서 아래와 같이 입력창을 포함..

1. Today, What I learned? 오늘은 프로젝트를 진행하면서 첫 PR을 보내보았다!.. 한번 PR 보내니 그간의 두려움이 눈 녹듯이 사라지는 매직.. ✨ Flask 에러와 html 태그 에러 등등 수정했고 아직 마무리 작업이 좀 더 남아있기는 하지만 🥲.. 일단 오늘 알게 된 부분 정리를 해본다! Flask 관련 에러 서버를 실행하면 에러가 줄줄 길게 나오는 것을 발견... 관련해서 구글에도 찾아보니 폴더 구조에 문제가 있어서 발생한 오류였다. Flask 프레임워크에서는 templates에 html 파일을, static에 css, js 등 나머지 에셋 파일을 담을 수 있는데 이때 파일 구조에는 templates 폴더가 없었다!.. 폴더 구조를 제대로 맞추어서 해결! 관련 글 스파르타코딩클럽..

문제점 나의 맥북에만 있던 소스트리 문제가 있다.. 진작 해결했어야 했는데 미루다 보니 여기까지.... 🥹 문제점은 이렇다. 1. push 할 때 403 에러가 뜰 때 있음 (이건 토큰 문제라는 것을 알고 있었음) 나의 경우에는 토큰을 처음 설정해야 하는게 아니라 다시 발급받아서 설정해주어야 했다. 2. 갑자기 튕겨서 강제종료되며 에러 창이 뜸 2번을 해결하기 위해 여러번 재설치했으나.. 정말 삭제하고 재설치해야겠다 생각이 들었다. 먼저 완전한 삭제 후 재설치부터 해보기로 했다. 맥북에서 소스트리 완전 삭제하기 완전한 삭제를 위해 터미널에서 아래 파일들을 지워주었다. cd Library rm -rf 'Application Support/SourceTree' rm -rf 'Preferences/com.to..

Today, What I learned? 이전부터 내 맥북에만 있었던 소스 트리의 문제가 몇 개 있었는데 관련해서는 따로 포스팅해보려 한다. 미니 프로젝트를 진행하면서 다크 모드를 구현하고, Flask 서버에서 HTML 중복 처리에 관해서 새롭게 알게 되었다. 소스트리 문제 해결 포스팅은 아래 에서 볼 수 있다. 👇 [git] 맥북 소스트리 완전 삭제하고 토큰 재설정 문제점 나의 맥북에만 있던 소스트리 문제가 있다.. 진작 해결했어야 했는데 미루다 보니 여기까지.... 🥹 문제점은 이렇다. 1. push 할 때 403 에러가 뜰 때 있음 (이건 토큰 문제라는 것을 알고 있 i-ten.tistory.com 다크 모드 구현 완성된 다크 모드 먼저 보기 다크 모드를 구현하기 위한 과정은 다음과 같다. 1. b..

Today, What I learned? 본격적으로 미니 프로젝트를 시작하면서 마크업과 CSS 작업을 먼저 진행했다. 메인 페이지를 작업하다가 새롭게 알게 된 CSS Filter에 대해서 정리해본다. CSS Filter 아래처럼 이미지에 마우스 hover시에 이미지가 어두워지며 이름이 보이는 부분을 짜다가 Filter라는 새로운 CSS 속성을 알게 되었다. filter는 말 그대로 사진에 적용하는 필터 효과들과 비슷한 역할을 한다. 흐림 효과나 색상 등의 그래픽 효과를 요소에 적용할 수 있고, svg 필터도 적용이 가능하다. Filter 속성 내부 함수들 filter 속성 내부의 함수들은 대표적으로 이런 것들이 있다. filter: blur(5px); // 흐림 효과 filter: brightness(0..

Today, What I learned? 내일배움캠프 개강 첫날! 정신없는 오티를 지나 깃&깃허브 특강을 듣게 되었다. 그동안 혼자서 깃허브를 써오긴 했지만 각각의 개념에 대해서는 가볍게 훑고 넘어갔던 터라 자세히 알지 못했다. 오늘 배운 깃과 깃허브에 대한 개념을 다시 한번 정리해본다. Git 깃 협업하는 개발자에게 있어 깃은 필수적이다! 깃은 파일의 변경사항을 기록하고, 함께 협업하는 개발자들 사이에서 작업의 조율을 원활하게 위한 버전 관리 시스템(VCS, Version Control System)이다. 이런 버전 관리 시스템에는 대표적으로 깃이 있지만 깃 이외에도 Subversion, Mercurial 등이 있다. 깃이 없다면? 깃이 왜 필요할까? 반대로 깃이 없다면 어떻길래 깃이 필요한 것인지 몇..