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. 값이 없는 것을 의도..

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

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

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 등이 있다. 깃이 없다면? 깃이 왜 필요할까? 반대로 깃이 없다면 어떻길래 깃이 필요한 것인지 몇..

mixin Scss에서는 믹스인이라는 문법이 있다. 반복적으로 재사용할 CSS 스타일을 하나의 함수처럼 지정해놓을 수 있다. 많은 mixin을 생성해도 호출하지 않으면 코드의 길이에 영향을 미치지 않는다는 점이 있다. 기본적으로 아래와 같이 정의할 수 있다. @mixin 믹스인이름(필요에 따라 변수지정도 가능){ 내용 } 호출은 include 키워드를 이용한다. @include 믹스인이름(지정했다면 변수사용 가능); 말줄임표 텍스트의 양이 공간보다 넘치는 경우 mixin으로 말줄임표('...')를 만들 수 있다. white-space는 자동 줄바꿈 여부에 관한 속성이다. nowrap으로 해제한다. overflow:hidden으로 넘치는 텍스트 양을 가리고 elipse로 대체한다. @mixin ellips..