SPACE SPACE

우리가 웹상에서 웹사이트를 볼 수 있는 것은 브라우저에서 javascript를 실행할 수 있는 환경을 제공한다는 의미이다. 브라우저는 Browser APIs나 다른 요소들이 있는데 이번에 살펴볼 것은 javascript 엔진이다. javascript는 인터프리터 언어이다. 인터프리터란 코드를 실행함과 동시에 한 줄씩 실행한다는 의미이다. 다른 언어를 예를 들어 보자면 우리는 컴파일이라는 과정이 존재하고 (High level 언어를 low level 언어로 바꾸어주는 과정 즉, 영어로 코딩한걸 머신이 이해하기 쉬운 기계어로 바꾸어준다는 의미) 그 후 실행 명령어를 통해 해당 코드를 실행했다. 그러나 javascript 엔진은 그 중간 과정을 생략하고 실행과 동시에 컴파일을 진행한다. 그래서 javascri..

이번 FE 게시글은 Udemy 강의를 수강하며 추가로 구현한 내용을 작성해보고자 한다. 먼저 듣고 있는 강의는 다음 링크에서 확인할 수 있다. https://www.udemy.com/course/javascript-zw/ JavaScript의 초반 부분 if-else를 가지고 간단한 몬스터 죽이기 웹 게임을 만드는 프로젝트를 하게 된다. 이곳에서는 html이나 css를 디자인하지 않으며 오로지 javascript를 조작하게 되는데, 처음 시작시 화면은 다음과 같은 모습을 볼 수 있다. 다음에서 내가 추가로 구현하고자 하는 부분은 바로 PLATER HEALTH의 바로 옆 부분에 쓰인 Bonus Life였다. 강의를 그대로 따라하면, Bonus Life의 경우 전체 게임이 돌아가는 중 지거나 이기거나 비겨서..

수강 중간에 자주 사용하던 문법 한개가 눈에 거슬리기 시작했다. src={item.author ? item.author.photoURL ?? 'URL주소' : 'URL 주소'} 해당 코드는 진행하는 프로젝트에서 가지고 온 코드의 일부분이다. 이와 같이 자바스크립트에서는 삼항 연산자를 다음과 같은 물음표를 사용한 뒤 참과 거짓에 따라 구분한다. 🍳 그런데 잠깐, 삼항 연산자는 보통 다음과 같은 형식을 띄운다. 참과 거짓으로 나눌 수 있는 조건? 참일때 실행할 문장:거짓일때 실행할 문장 그렇다면 물음표 두개를 붙여쓰면 사항 연산자인걸까? 🎀 강의에 대한 소개는 다음 글에 있어요! https://coding7281.tistory.com/9 [#1day] 프론트엔드 공부 주저리 한참 프로젝트를 경험하고 공부하기..

오늘은 이전 포스팅하던 것과 별도로 다른 이야기를 하기 위해 블로그를 작성하기 시작했다. 바로 Vercel과 Netlify 의 차이점에 대한 부분이다. 먼저 Vercel과 Netlify는 프론트엔드와 백엔드를 따로 두지 않고 프론트엔드에서 플랫폼으로 배포할 수 있도록 해준다. 추가적으로 github pages를 통한 배포 역시 서버리스 배포를 의미한다. (프론트엔드와 백엔드를 함께 제공하는 wix와 같은 사이트도 존재한다.) ❓ 어라, 그렇다면 두 플랫폼 서비스 회사의 경우 정말 서버 없이 구동이 되는 것인가? 이것저것 찾아본 바로는 서버가 없다는 의미에서가 아닌, 서버를 생각할 필요가 없다는 뜻에서 서버리스 배포라는 단어가 사용된다는 것이었다. (물론 이것도 참고해서의 결론이지 정확한 내용은 아니다.😥..

수강 중간에 궁금증이 생긴 나 참을 수 없어서 알아본 뒤 정리겸 포스팅하게 되었다. 🎀 강의에 대한 소개는 다음 글에 있어요! https://coding7281.tistory.com/9 [#1day] 프론트엔드 공부 주저리 한참 프로젝트를 경험하고 공부하기 위해 이것저것 지원하던 어느 날 인프런에 들어갔는데 수업이 하나 눈에 띄었다. 바로, [만들면서 배우는 프론트엔드 DO IT 코딩] 이라는 수업이었다! 하루 하 coding7281.tistory.com 해당 프로젝트에서는 react의 createContext를 import 하여 사용하게 된다. 그런데 이때, VisualStudio Code에서 createContext를 확인해보면 두개의 createContext를 확인할 수 있는데 바로 node.js의..

프로젝트 공부 2일 차, CSS의 늪에 빠졌다. 🎀수강 이전 강의에 대한 간단한 소개는 다음 글에 있어요! https://coding7281.tistory.com/9 [#1day] 프론트엔드 공부 주저리 한참 프로젝트를 경험하고 공부하기 위해 이것저것 지원하던 어느 날 인프런에 들어갔는데 수업이 하나 눈에 띄었다. 바로, [만들면서 배우는 프론트엔드 DO IT 코딩] 이라는 수업이었다! 하루 하 coding7281.tistory.com 수업에서는 CSS를 처음부터 작성하지 않았다. UI Component를 사용하는 경우가 굉장히 많은데, 수업에서는 Chakra UI를 사용했다. 이전에 material UI를 사용해본 기억이 있어서 프로젝트에 추가 및 적용하는 법은 어렵지 않았다. 다만 수업을 듣는 중에 ..

프로젝트 수강 1일차, 현재 수업중에 준비하기만 완강한 상태이다. 그러니까 프로젝트 시작 준비의 준비라는 셈이다...😏 🎀수강 이전 강의에 대한 간단한 소개는 다음 글에 있어요! https://coding7281.tistory.com/9 [#1day] 프론트엔드 공부 주저리 한참 프로젝트를 경험하고 공부하기 위해 이것저것 지원하던 어느 날 인프런에 들어갔는데 수업이 하나 눈에 띄었다. 바로, [만들면서 배우는 프론트엔드 DO IT 코딩] 이라는 수업이었다! 하루 하 coding7281.tistory.com 💥수업 이전 1day를 작성한 뒤 발생한 일이었다. 더보기 도중 파일 관리를 잘못하는 바람에 .env 파일이 날아가버렸다. 이 파일에는 기본적인 key들을 작성해 두었는데 Firebase의 비공개키 j..

한참 프로젝트를 경험하고 공부하기 위해 이것저것 지원하던 어느 날 인프런에 들어갔는데 수업이 하나 눈에 띄었다. 바로, [만들면서 배우는 프론트엔드 DO IT 코딩] 이라는 수업이었다! 하루 하루 공부하며 배운 것을 정리해보고 느낀점을 작성해보고자 한다. 인프런 수업 링크 https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C 만들면서 배우는 프론트엔드 DO IT 코딩 (Next.js, Typescript) - 인프런 | 강의 겉만 멋진 서비스 말고 사용자를 만나서 피드백 받을 수 있는 서비스를 만들 수 있..