이번 글은 하찮은 코딩 관리자 페이지에 대해 소개한다. 하찮은코딩 회원가입/로그인 페이지 글에 이어 오늘은 본격적으로 쇼핑몰 페이지를 만들기 전에 필요한 관리자 페이지 개발를 소개하고 진행상황을 정리한다. 관리자 페이지 요구사항 관리자 페이지는 관리자 역할을 가진 사용자만 접근 가능 하다. 관리자 페이지는 크게 공통 그리고 서비...

이번 글은 내가 가진 기술 set과 새로운 기술들을 공부하면서 여러가지 서비스를 개발하고 출시해볼 하찮은코딩(trivialcoding.com)의 첫 서비스인 회원가입/로그인 개발에 관한 회고 글이다. 안녕하세요 하찮은 개발자입니다 ✋ 우선 이름에 대해서 간단히 소개하면 한창 박명수님이 찮은이형이라고 불릴 때 마침 내 이름도 초성이 ㅎㅊ ...

이번 글에서는 React 18 버전부터 도입된 개념인 React Server Component 에 대해 정리한다. 이번에 침하하 clone 과 쇼핑몰 사이트 개발을 하면서 공부 겸 Next 14 를 사용했었다. 회사에서 사용할 때는 Next를 써보지 않않고, 공부할 때는 제일 최신버전인 14 버전으로 공부해서 page router 가 아닌 ...

이번 글은 임하하 페이지의 홈 화면을 완성하기도 했고, 새해가 되었으니 다짐한 것들에 대해 가볍게(?) 적어보겠다!! 구현 화면 전에 header만 찔끔있어 휑하게 보이던 페이지가 구현해놓고 나니 이제 나름 실제 페이지랑 거의 비슷해보인다 ㅎㅎ 한 페이지지만 이 페이지를 구성하는데 써보고 싶었던 기술들을 다 맛보기를 해봤다 msw 를 이용해 메...

임하하 프로젝트의 폴더 구조 및 path 정리를 정리한다. 구현 화면 아직은 볼품 없지만 나름 비슷해져가고 있다 ㅎㅎ 폴더 구조 및 path 정리 app 하위 폴더 구조 next app router 에서는 파일 시스템 기반으로 라우팅을 구현하기 때문에 app 하위의 디렉토리가 곧 라우팅 될 페이지라고 볼 수 있다. 또한 [디렉토리 이름...

이 전 실행 컨텍스트 포스팅에서도 언급했던 개념인 자바스크립트 this에 관해 정리해본다. this this 키워드를 알아보기 전 객체에 대해 알고 넘어가자. 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 자료구조이다. 이때 동작을 나타내는 메서드는 자신이 속한 객체의 프로퍼티를 참조하고 변경할 수...

객체지향 설계에서 사용되는 5가지 원칙인 SOLID 원칙에 대해 정리해본다. SOLID 원칙 SOLID 는 위키에 따르면 로버트 마틴이 2000년대 초반 명명한 객체 지향 프로그래밍 및 설계의 5가지 기본 원칙을 소개한 것으로 개발자가 시간이 지나도 유지 보수와 확장이 쉬운 시스템을 만들고자 할 때 이 원칙들을 적용할 수 있다고 소개한다. ...

임하하 Home 화면 작업 전 실제 침하하 Home 화면의 요소들을 정리해본다. 침하하 Home 전체 화면 아래 사진은 침하하 Home 화면이다. 화면이 상/하로 길어 크게 회원가입/로그인 부터 광고영역까지 상단 부분, 아래 게시글 목록 하단 부분으로 정리해본다. 상단부분 침하하 Home 상단부분에서는 크게 Header 영역, short...

그 동안 공부했던 기술들을 바탕으로 침하하 사이트를 클론 코딩하는 프로젝트를 진행하기 위해 관련 내용을 정리한다. 사용할 스킬 Core 타입스크립트 / React(Next.js) 최근 Next.js 14버전이 릴리즈 되어 14버전의 app router 기반으로 프로젝트를 세팅한다. 상태 관리 Recoil, React Query(...

자바스크립트 실행 컨텍스트에 대해 정리한다. 실행 컨텍스트 소스코드의 평가와 실행 실행 컨텍스트를 알아보기에 앞서 모든 소스코드는 실행에 앞서 평가하는 과정을 거치면서 실행을 하기 위한 준비를 한다. 소스코드 평가 과정에서는 실행 컨텍스트를 생성하고 변수, 함수 등의 선언부부터 먼저 실행하여 변수나 함수 식별자를 키로 실행 컨텍스트가 관리...

자바스크립트 호이스팅에 대해 정리한다. 호이스팅은 무엇인가? MDN 문서에 따르면, 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정을 말한다. 아래 코드를 예시로 보면 console.log(x); // undefined var x = 1; ...

맨날 마음으로만 해야지 해야지 했던 블로그를 드디어 시작하게 되었다. 그래서 첫 글로 내가 왜 블로그를 시작했고, 앞으로 어떤 글을 작성해 나갈지를 간단히 적어보려고 한다. 블로그를 시작한 이유 퇴사 👋 나는 3년 반 정도 다니고 있던 회사에서 곧 퇴사를 앞두고 있는 상황이다. 퇴사를 앞두고 있다 보니 자연스레 여유 시간도 생겨서 그동안 생...