웹개발
-
NPM vs NPXWeb 2023. 9. 1. 20:45
npm install…? npx install…? 이전에 node.js를 통해 프로젝트를 생성하는 경우에는, 언제나 npm init을 시원하게 터미널에 쳤었더랬지. 하지만, 리액트로 프로젝트를 진행하고, next로 프로젝트를 진행하니 이제는 npm이 아니라 npx를 사용하는것이 아니겠나. 처음에는 오타인줄 알았지만, 터미널이 잘 인식하고 프로젝트를 생성해주었는데, 둘이 무슨 차이인가 싶어서 알아보았다. npm과 npx의 차이는 뭔가 어떤 프로그램을 내 컴퓨터에 실행 프로그램을 통해 설치하여 사용하거나, 또는 그냥 웹-어플리케이션을 통해 설치하지 않고 웹 상에서 접근하여 사용하는 것의 차이라고 생각한다. 피그마(Figma)가 좋은 비유가 될 것 같다. 피그마는 현재 앱 스토어에서 다운로드 받아서 사용할 수..
-
타입스크립트 : EP.2Web/Typescript 2023. 8. 7. 13:48
이 글 시리즈는 타입스크립트를 공부하면서 느끼거나 정리할 부분들을 나의 언어로 정리해보는 글 시리즈이다. 타입 스크립트는 어떤 장점이 있나? 이전에 이야기한 것처럼… 복습을 해보자. 타입스크립트는 정적 타입의 컴파일 언어이다. 이는 우리가 변수를 만들 때, 이 변수가 어떤 유형인지를 미리 명시하고 개발을 진행해야한다는 의미이다. 이전 에피소드에서 썼듯이, 나는 자바스크립트 코딩을 하면서 변수의 타입을 처음부터 명시하지 않고 그때그때마다 데이터 타입을 바꾸거나 하는 과정을 꽤나 즐기면서 코딩을 해왔다. 하우에버...타입스크립트는 이러한 행위를 좋아하지 않는다. (any 타입을 사용하여 구현이 가능은 하다.) 타입스크립트의 모든것 타입스크립트를 한번 쭉 둘러보면서 공부를 해본 결과, 내가 생각한 타입스크립트..
-
타입스크립트 : EP.1Web/Typescript 2023. 8. 5. 13:59
타입스크립트, 도대체 왜 만들었을까? 타입스크립트를 처음 공부하기 시작하면서, 일단 이놈의 정체가 뭔지에 대해 알아보았다. 가장 많이 나오는 내용이 ‘Typescript는 Javascript의 슈퍼셋입니다.’ 였다. 그러니까, 자바스크립트를 포함하는 새로운 언어를 만들었다는 것이다. 처음 든 생각은, 굳이 왜 자바스크립트를 포함하는 새로운 놈을 만들었을까?하는 의문점이었는데, 타입스크립트를 쭉 공부하면서 이건 필요한 것이었구나 하는 생각이 스멀스멀 들기 시작했다. 이 글 시리즈는 타입스크립트를 쭉 공부하면서 자바스크립트를 위주로 코딩을 해온 내가 다음 단계로 넘어가는 과정을 담는 시리즈가 될 것같다. Typescript = ‘정적 타입의 컴파일 언어’ 타입스크립트의 개념을 공부하면서 두번째로 가장 많이 ..
-
컬러 렌즈 개발 후기 EP. 1 : 그냥 100vh만으로는 충분치 않다..!프로젝트 개발 후기 2023. 8. 3. 21:11
사건의 발단 컬러 렌즈 프로젝트는 온전히 모바일에서만 동작하는 프로젝트이다. 따라서 모바일에 최적화된 UI를 만드는 것이 이번 프로젝트의 핵심적인 디자인 목표였는데, UI를 구성할 때, header부터 footer까지 딱 첫눈에 보이는 화면에 꽉 차도록 구현하고 싶었다. 하지만, 문제가 발생했다. 처음에 CSS 상에서 나는 단순하게 데스크탑 UI를 만들때처럼 전체 화면의 높이값을 100vh로 설정했다. 왜냐면, 데스크탑 상에서는 이렇게 진행해도 하단에 추가적인 상태바가 존재하지 않았기 때문에, 가려지는 부분이 없었기 때문이다. 하지만, 모바일에서 이러한 방식은 통하지 않았다. 왜냐하면, 모바일 버전에서 크롬 브라우저는 상/하단에 위치한 주소창 및 메뉴 바가 존재했고, 이때 화면을 100vh로 해버리면 하..