일반적으로 router설정은 여태 위와같이 /를 붙혀 절대경로로 지정했는데,위와 같이 부모라우트를 절대경로로 지정하고, 자식 페이지들(RootLayout 컴포넌트의 Outlet으로 들어가는)은 상대경로로 지정해주면 부모 url의 뒤에 자동으로 붙는다.product의 리

Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법을 제공합니다.overflow: hidden대화 상자를 불러오는 구성 요소가 대화 상자를 방해하는 컨테이너 또는 다른 스타일 안에 있더라도 포털을 사용하여 페이지의

디바운싱(Debouncing) : 연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식으로, 주로 그룹에서 마지막, 혹은 처음에 처리된 함수를 처리하는 방식으로 사용되곤 한다.위와 같이 enteredEmail, enteredPassword를 의존성 배열에 추가하

getter, setter 함수라고도 부름스스로는 값을 갖지 않음 - 다른 프로퍼티의 값을 읽거나 저장할 때 사용get, set을 앞에 붙임클래스에서도 사용가능하다.정상적인 숫자가 들어가야 no가 바뀌는 것을 볼수 있다.이렇게 필드 이름과 setter의 이름이 같을 때

클래스의 기본 형태.constructor매서드는 아래와 같은 특성을 지닌다.인스턴스 생성시 인자를 받아 프로퍼티를 초기화함클래스에 하나만 있을 수 있음 - 초과시 오류 발생다른 메서드 이름을 쓸 수 없음기본값 사용 가능필요없을 (인자가 없을 때 등) 시 생략 가능값을

JS공부를 할수록 기본이 제일 중요한 것 같다.생성자 함수에 대해 어렴풋하게 알고 있었는데, 추후 프로토타입공부할때 헷갈리지않게 확실히 공부해보자.위와 같이 같은 형식의 객체를 만들었다.그러나 관광지들이 100개, 1000개라면?와 같이 하나의 틀을 만들면 된다.생성자

퇴근 후 자바스크립트 공부는 적은 시간이지만 꾸준히 하고 있다.기억해 둘법한 내용들을 간단하게 정리해보자.콘솔찍어보기전에는 에러가 날 것 같았는데 x:1, y:2로 할당이 되었다.위와 같이 마치 클래스를 찍어내듯 사용할 수 있다.ES6부터는 위의 표현으로 정의된 함수만

최근 일복이 터져 react 프로젝트를 삼주간 매달려서 완성하였다.바로 다음 프로젝트가 이어졌고, 처음으로 실전에서 개발 환경 구성을 진행하였다.사실 회사에서도 devops의 개념이 처음 도입되면서, 백엔드 쪽은 다른 분이, 프론트는 내가 맡게 되었고, AWS 버킷생성

최근 사내 조직개편에 따라 front개발과 devops까지 수행하게 되었다.드림코딩 영상을 참고하여, 간단한 app을 build해서 image를 만드는 과정을 기록해보자!express로 구성한 간단한 백엔드 코드구성한 dockerfile과 강의 내용 설명dockerfi

자바스크립트뿐만 아니라 Java, C언어 등의 다른 언어들에서도 위와 유사한 계산 오류가 발생한다. 컴퓨터가 램에 숫자를 저장할때는 기본적으로<mark style='background-color: 그러나 몇몇 소수(ex: 0.1)는 10진법에서 2진법으로 변환하는

학습 중 처음보는 연산자를 보았다.사실 &&(and)연산자와 ||(or)연산자, 삼항 연산자로 큰탈없이 업무를 수행하고 있지만, 추후에 활용도가 있어보여 null 병합 연산자에 대해 가볍게 기록한다.<mark style='background-color: 1번은 변

유튜브 '코딩앙마'님의 TS강의를 보며 잊어버릴 것같은 것들만 정리해보자.enum에 값을 할당하지 않으면, 자동으로 0부터 할당된다.이렇게 양방향으로 인식된다.이런식으로 사용할 수 있다.문자열도 할당할 수 있으며, 이 때는 단방향으로 인식된다.컴파일 시에 const O

22.05.09 ~ 22.05.20까지 진행한 2차프로젝트 회고록.야놀자를 베이스로 한 '잠못자.서울' 프로젝트.2차 프로젝트에는 styled-component가 추가 되었다.처음에는 낯설고 왜 해야하는지 몰랐지만, 금새 적응이 되었고, 특히 props를 사용하여 cs

노마드 코더 next.js를 보면서 기억해야할만한 것을 정리해보자.파일명이 url주소가 된다. 따로 react-router-dom을 설치하여 경로를 지정안해줘도 되니 참 쉽다.그러나 index.js는 예외인데, 홈페이지의 메인에 해당하는 페이지가 되니 주의하도록 하자.

클라우드 서비스중 가장 많은 이용률을 가지고 있는 대표적인 서비스 Amazon Web Service 에 대해 학습해보자.Amazon Web Service. AWS는 소위 클라우드 서비스라고도 한다. 클라우드 서비스는 서버 등의 인프라스트럭쳐를 필요한대로 on deman

유닛 테스트란, 내가 작성한 코드의 가장 작은 단위인 함수를 테스트하는 메소드 이다. 지금까지는 크롬브라우저를 띄워서 실제로 동작시켜보는 E2E 테스트를 해왔을 것이다. 프론트의 경우 버튼을 추가해서 이벤트를 처리하는 신규 로직을 구현할 때마다 크롬 브라우저를 띄워서

Git에서 한 브랜치에서 다른 브랜치로 합치는 방법은 Merge와 Rebase다.실행결과는 같지만 rebase를 하면서 동시에 squash 를 사용해 커밋을 하나로 정리 할 수 있다. merge는 쉽지만 커밋개수가 많아지면서 히스토리가 지저분해지고, rebase는 약간

리액트 컴포넌트는 props로 children이라는 걸 받습니다. 이를 통해 일반 JavaScript 데이터(ex. number, string, ...) 뿐만 아니라 HTML 태그(ex. div, li, ...) 컴포넌트(JSX Element) 등 어떤 값이든 배열로

REST라는 뜻은 웹에 존재하는 모든 자원(resource, ex. 이미지, 동영상, 데이터)에 고유한 URI를 부여하여 자원에 대한 주소를 지정하는 방법론, 또는 규칙이다. 그리고 RESTful API는 REST 특징을 지키면서 API를 제공한다는 의미이다. 쉽게 설

22.04.25 ~ 22.05.06 진행한 1차 팀프로젝트를 기록해두고자 한다.처음 팀프로젝트를 시작하기 전에는 나의 부족한 실력 탓에 걱정을 많이 했다. 팀원분들께 피해를 주면 어떡하지 라는 생각을 했다.아마 실력도 걱정이었지만, 팀프로젝트가 어떻게 흘러가는지 아예