Dev Diary 💻

Intro안녕하세요. 이번 시간에는 React useForm 라이브러리에 대해 간단히 정리해보려고 합니다. React mui 템플릿을 살펴보던 도중 useForm 라이브러리를 사용하는 부분을 처음 발견했거든요! :)  UseForm?useForm은 React에서 Form 관리를 간편하게 할 수 있도록 도와주는 라이브러리 중 하나입니다. React Hooks를 기반으로 동작합니다. useForm을 사용하면 상태 관리와 유효성 검사 등의 복잡한 폼 관련 작업을 간소화할 수 있어 개발자들이 폼을 더 빠르고 쉽게 작성할 수 있습니다. 이는 개발 생산성을 높이고 코드의 유지보수성을 향상시킵니다. UseForm's functionForm 상태 관리 : useForm 훅을 사용하여 폼의 상태를 관리할 수 있습니다. ..

이 글은 모던 자바스크립트 Deep Dive 바탕으로 정리한 내용입니다. 6.1 숫자 타입 자바스크립트는 C/Java와 달리 하나의 숫자 타입만 존재합니다. 6.2 문자열 타입 문자열 타입은 텍스트 데이터를 나타내는 데 사용합니다. 6.3 템플릿 리터럴 ES6부터 템플릿 리터럴이라고 하는 새로운 문자열 표기법이 도입되었습니다. 백틱을 사용합니다. 6.4 불리언 타입 불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐입니다. 6.5 undefined 타입 undefined 타입의 값은 undefined가 유일합니다. undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값입니다. 변수에 값이 없다는 것을 명시하고 싶을 때는 ..

Intro MongoDB의 프로젝션에 대해 알아보겠습니다. What is projection? MongoDB에서 projection(프로젝션)은 한 document 전체를 선택하는 것이 아니라, 특정 필요한 데이터를 선택하는 것입니다. 예를 들어 document가 3개의 필드를 갖고 있을 때, 1개의 필드만 보여주고 싶다면 1개의 필드에 대해 프로젝션을 걸어주면 됩니다. Projection parameter MongoDB에서 find로 query를 걸어줄 때 파라미터는 다음과 같습니다. db.$(collection name).find( {filter condition} , {projection parameter}) Example 다음은 projectType이 "GO"이면서, projectName과, st..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 52. 모듈 개요 파일 기반의 routing, 정적 및 동적 routes, 페이지간의 네비게이팅에 대해 배울 예정입니다. 53. 시작 설정 Setup 사이트 소스 코드 참고 54. 파일 기반 라우팅이란 무엇일까? React.js는 react-router-dom을 사용하여, 라우트를 진행합니다. 하지만 Next.js는 라우터를 설치하지 않고, 라우트와 페이지 구조를 정의하는 데 JSX와 JS 코드를 사용하지 않습니다. Next.js에서는 React 컴포넌트 파일을 생성합니다. 특별한 폴더에 일반적인 React 컴포넌트 파일을 생성합니다. 이후 Next.js가 설정된 폴..

이 글은 udemy의 Next.js & React - 완벽 정복 가이드 (incl. Two Paths) 강좌를 바탕으로 정리한 내용입니다. 1. Welcome to the Coursel 시작하도록 하겠습니다. 꾸준히 화이팅 🤟🤟 2. Next.js란 무엇인가? Next.js를 왜 사용하는 걸까? NextJS는 프로덕션용 React 프레임 워크 입니다. 큰 규모의 프로덕션용 React 앱을 쉽게 구축할 수 있도록 해주는 많은 기능을 가지고 있습니다. ReactJS는 사용자 인터페이스 구축을 위한 JS 라이브러리입니다. 즉 Third Party 패키지로 프론트 엔드 프로젝트에 추가되는 라이브러리 입니다. 결국 클라이언트 측 JavaScript 코드라는 이야기 입니다. 주로 사용자 인터페이스 부분인 컴포넌트,..

이 글은 생활코딩의 'Java' 강좌를 바탕으로 정리한 내용입니다. 초기화 어떤 일을 시작하기 전에 준비하게 되는데, 이를 초기화라고 합니다. 객체 지향 프로그래밍도 초기화에 해당하는 기능이 제공되는데 이를 생성자 (constructor)라고 합니다. 앞서 살펴봤던 계산기 예제를 다시 봅시다. Calculator c1 = new Calculator(); c1.setOprands(10, 20); c1.sum(); c1.avg(); 메소드 setOperands의 값으로 10과 20을 지정했습니다. 이는 객체 내부에서 인스턴스 변수 left과 right의 값으로 설정되어 유지됩니다. 하지만 아래와 같이 메소드 setOperands 호출하기 전에 sum과 avg를 호출한다면 원하는 결과를 얻을 수 없습니다. C..

Intro javascript의 익명함수에 대해 알아보도록 하겠습니다. Anonymous function 익명 함수는 연결된 이름이 없는 함수입니다. 일반적으로 JavaScript에서 함수를 정의하기 위해 함수 이름 앞에 function 키워드를 사용하지만 JavaScript의 익명 함수에서는 함수 이름 없이 function 키워드만 사용합니다. 익명 함수는 처음 생성된 후에는 접근할 수 없으며 값으로 함수로 저장된 변수로만 접근할 수 있습니다. 익명 함수는 여러 인수를 가질 수도 있지만 하나의 표현식만 가질 수 있습니다. Syntax function() { // Function Body } → function 키워드를 사용하여 선언하였습니다. ( () => { // Function Body... } )..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 82. 모듈 소개 Conditional & Dynamic Styles Styled Components CSS Modules error error:03000086:digital envelope routines::initialization error 소스코드를 다운받아 실행하자 다음의 에러가 발생했다. 노드 17관련 에러로 nvm 을 사용하여 node 버전을 낮춰 다시 실행하니 정상 작동되었다. 83. 동적 인라인 스타일 설정하기 input 창에 입력 없이 Add Goal을 눌렀을 때 color를 동적으로 바꿔주도록 한다. Course Goal 하지만 inline 스타일은..

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다. 67. 모듈 소개 Outputting Dynamic Lists Of Content Rendering Contend Under Certain Conditions 68. 데이터와 렌더링 목록 JSX 코드에서 map 함수를 사용하여 동적인 구문을 실행해보도록 하자. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map return ( {props.items.map((expense) => ( ))} {/* */} ); 69. State 저장 목록 사용 초기 expenses ..

이 글은 드림코딩 엘리님의 "HTML 태그들, 헷갈리는거 정리해 보았다 🥳" 영상을 바탕으로 정리한 내용입니다. Intro Html은 다른 프로그래밍 언어에 비해서 진입장벽이 훨씬 낮은 마크업 언어이지만, 만만하게 공부하면 어디에서 어떤 태그를 사용해야 하는지 매우 헷갈립니다. 필수로 알아야 하는 시멘트 태그들과 헷갈리는 태그들에 대해 알아보도록 합시다. Semantic Tags (Semantic Markup)? semantic이란 "의미의, 의미가 있는"을 뜻합니다. html에서 div 태그만 이용해서 모든 웹사이트를 만들 수도 있지만, 브라우저도 개발자도 의미있게 이애할 수 있기 위해서는 semantic tags 를 적절하게 잘 사용하는 게 중요합니다. Top level heading Top leve..