목표 : FE에서 api로 아이디, 비밀번호, 닉네임 정보를 POST하면(이 때, 보안과 관련된 처리도 해야한다) BE에서는 이 정보를 받아서 ORM을 통해 데이터베이스(MySQL)에 저장한다. 이 때, 유효성 검사를 반드시 하고 진행을 해야하고, 만약 유효성 검사 단

회원가입 관련 컨트롤러, 서비스(프로바이더) 정의 : 컨트롤러: 프로바이더그리고 실제로 프론트에서 이를 호출했다.호출을 할 때는 axios 모듈을 사용했다. 로컬끼리의 통신이었지만, 일단 정상적으로 작동하고, 데이터를 주고 받을 수 있다. 중간에 cors 관련 문제가

위의 형식으로 Users 테이블을 만들 예정이다. nestJS, MySQL, typeORM을 사용해서 만들 예정이며 이번 주말에는 Users 테이블의 마이그레이션 및 로컬에서 react <-> nestJS 테스팅까지 완료가 목표이다(이 과정에서 인증 등의 구현도

맨 상단에는 기존에 썼던 GlowHeader 컴포넌트를 재활용해서 Profile(title 부분) 페이지임을 표시한다.하단에는 본래 위와 같이 디자인을 했지만, email -> id로 바뀌고, height & weight 정보는 초기 버전에서는 추가하지 않을 예정이므로

: 일단 아직도 완성이 안됐나?! 라고 내 스스로에 대한 반성으로 시작한다. 하지만, 새해 목표와 같이 매번 실패를 해도 끝에 가서는 완성만 하면 되는거다. 이번엔 5월 7일까지 끝내보자 라는 원대한(?) 계획을 갖고 시작해보자.recoil 로 리팩토링 완료nestJS

요구 사항(실무 기준)을 받고, 바로 코딩을 해서는 안된다. 해당 요구 사항을 바탕으로 시나리오를 작성할 줄 알아야 한다(코딩테스트를 볼 때 요구 사항을 수도코드 만으로 구현을 끝낸 것처럼). 적절한 시맨틱(개발자에게 의미라는 뜻)과 뉘앙스(단어 선택이 똑같더라도 뉘앙

: 위의 현상을 다시 살펴보고자 글을 써본다. : 위의 JSX 를 렌더링하고 있는건데, 포인트는 div 태그의 key값에 map 메서드의 index를 준 상황이다. 물론 아예 key값을 주지 않아도 위의 상황과 똑같을 것이다. key값을 index(map의)로 줬을 때

: 생각해보니 항상 당연하다고만 알고 쓰고 있었던 이 부분에 대해서 내가 명확한 이유를 잘모르고 있다는 생각이 들어서 이에 대해 테스팅과 무엇이 포인트인지를 짚고 넘어가고자 글을 써봤다. React에서 map 메서드를 이용해서 배열을 렌더링할 때, 각 요소에 고유한 k

: 어떤 값을 직접 변경하지 않고, 새로운 값을 만들어내는 것이다... 이게 무슨 뜻일까? 어쨌든, 리액트를 사용할 때는 이러한 불변성을 지켜줘야한다는건 모두가 대략적으로는 안다. 예를 들어, 위에와 같은 함수를 써서 혹은 로직을 써서 직접 값을 변경하면 안되고, se

key 값(리액트에서 같은 이름의 컴포넌트를 구분하기 위해 선택 속성으로 만들어놓은 것)은 props 로 받을 수 없다. 예를 들어,이런식으로 해놨다고 해도 Data 컴포넌트에서 props로 key를 받을 수 없다.

리액트의 동작 원리 Virtual DOM 이해하기 DOM(Document Object Model) 이란? : 문서 객체 모델로 불리는 DOM은 결론적으로, 웹 브라우저 안에서 HTML 문서에 JS를 통해 접근해서 문서 구조, 스타일, 내용 등을 변경하기 위해 우리

부제 : 기본 세팅: Prettier 란 vscode의 extensions 파트에서 다운 받을 수 있는 code formatter이다. 코드 포매터란 무엇일까?. 예를 들어, 다음의 코드를 보자. 전혀 이상할거 없이 보이는 위 코드에는 보기 불편한 들여쓰기가 두번이나

https://velog.io/@tosspayments/%EA%B2%B0%EC%A0%9C%EC%9C%84%EC%A0%AF%EC%9C%BC%EB%A1%9C-30%EB%B6%84%EC%95%88%EC%97%90-%EA%B2%B0%EC%A0%9C-%ED%8E%98%

: scoop을 쓰면 된다. 그러나, 직접 다운받아도 상관없다.위와 같이 타입스크립트를 사용해서 프로젝트를 만들어봤다.웹팩(WebPack) : 웹팩은 프론트엔드 프레임워크에서 사용하는 대표적인 모듈 '번들러'이다. 웹 애플리케이션은 JS 코드 뿐만 아니라 다양한 css

리액트는 페이스북에서(현재 meta) 2013년에 발표한 오픈 소스 자바스크립트 프레임워크이다.리액트 프레임워크는 가상 DOM(Document Object Model)과 JSX(Javascript XML)라는 새로운 방식으로 동작하는 프레임워크이다.eXtensible

: 이 말을 약간 풀어서 말해보면 js의 함수는 우리가 객체 지향 프로그래밍에서 특정 클래스에서 인스턴스를 생성하면, 그 인스턴스는 해당 클래스에 정의된 특성 및 메서드를 실행할 수 있는 자격 등을 갖게되는 것처럼, 함수도 Function(같은 말이지만) 클래스의 인스

아토믹 패턴 정리 경과 보고(?) : 지난번 아토믹 패턴 관련 포스팅을 하고 나서 어언,, 3개월 정도가 지나서 이 포스팅 시리즈를 마무리하려고 한다. 이렇게 시간이 지난건 그 시간동안 실제로 아토믹 패턴을 팀원분들과 설계하고, 실제 적용하고 개발하느라 이다(핑계인가

: 사실 여태까지 Interface 보다는 Type을 주로 써와서즉, 위와 같이 써도 interface와 같은 역할을 type이 해주기 때문에 주로 type을 썼었다. 하지만, 인터페이스도 사실 같은 기능을 하는 것이기에 알아두면 분명 쓸데가 있을..까(이건 팀마다 혹

: 우리가 흔히 아는 ES5, ES6 는 포함 관계가 명확하다. 즉, ES5에 없는 문법이 ES6에 있고, ES6로 코딩을 했을 경우에 결국엔 ES5로 트랜스파일링을 해줘야한다. 그러면 같은 원리로 Typescript도 ES6의 문법을 포함함과 동시에(당연히 ES5도

https://www.codeit.kr/roadmap/frontend-2023