Web
-
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. 0Web 2023. 7. 22. 21:53
이 글을 쓰게 된 이유 죽이는 웹사이트를 만들어내는 웹 개발자라는 거창한 목표를 세운 뒤, 얼렁뚱땅 나의 첫 포트폴리오 웹사이트를 1년 전 즈음에 만들어서 어찌저찌 도메인도 사서 깃허브를 통해 배포하였다. 첫 배포 경험을 한 웹 개발자로서, 두근거리는 마음으로 구글에 나의 웹사이트를 검색해 보았다. 내 성씨는 철자가 꽤나 독특한지라, 구글에 검색하면 맨 위에 뜨겠지?하는 생각은 확고했다. 이럴 수가. 전혀 뜨지를 않는다. 한 스무페이지 가까이 지났을 즈음이었나, 구석탱이에 쪼그려있는 나의 웹사이트를 볼 수 있었고, 마음이 짠해졌다. 나는 정확하게 검색을 했는데도 불구하고, 뷔페 코너의 인기없는 메뉴 마냥 구석진 곳에 홀로 존재하는 웹사이트를 보고 이게 어찌 된 일인지 알아내야만 하겠다는 생각이 들었다. ..
-
[ Next.js ] Pre-rendering 방식Web/Next.js 2023. 7. 7. 17:00
"긍까 굳이 왜 Next.js를 쓰는건데?" 이게 내가 next.js라는 걸 처음 들었을 때 들었던 궁금증이었다. 당시에 나는 이제 막 바닐라 자바스크립트로 웹사이트를 만들고 배포해보는 몇번의 경험을 지낸 후, 리액트를 조금씩 공부하면서 내 포트폴리오 웹사이트를 만들고 있는 중이었다. ('당시'라고 하지만, 이건 고작 몇주전의 일이다.) 물론 next.js를 이제 막 공부하는 시점이기 때문에, 모르는 것 투성이이고 배워야할 개념들이 아주 많다. next.js 뿐만이 아니라 그냥 난 웹 개발 자체에 아직 많이 무지하다. 여튼, next.js를 처음 듣고, '이건 리액트를 사용하여 Server-side Rendering (SSR)을 가능하게 해주는 프레임워크임!'라는 내용을 보긴 봤는데, 그래서 Server..
-
[ React.js / 에러 ] HTML video 엘레먼트 src 변경 시 렌더링 업데이트가 되지 않는 에러.Web/React.js 2023. 6. 30. 19:00
사실 에러라고 하기보다는 리액트의 렌더링에 대해 더 명확하게 알지 못해서 벌어진 나의 실수라고 하는 것이 더 정확하지만... 에러 상황 : 현재 리액트로 나의 작업물들을 모아둔 아카이빙 웹사이트를 개발하는 중이다. 내가 구현하고자 했던 기능은, 화면 왼편의 프로젝트 리스트 중 하나를 클릭하면, 화면 오른편에 해당하는 프로젝트의 정보를 보여주는 것인데, 이때, 프로젝트의 데이터에 비디오가 있다면 video 태그를 함께 return하여 보여주는 것이었다. 알고리즘을 구상하여 코딩을 진행했고, 잘 동작하는듯 했다. 하지만, 뜻밖의 문제를 직면했는데, 비디오가 없는 프로젝트를 클릭했다가, 다시 비디오가 포함된 프로젝트를 클릭하는 경우에는 제대로 비디오가 보여졌으나, 비디오가 포함된 다른 두 프로젝트를 연속으로 ..