developing software engineer

💣기존 코드 사용자가 값을 입력할 수 있는 로그인 input 창의 입력 값을 별개의 useState()로 상태관리했다. - saveUserId, saveUserPw 두 함수 모두 사용자가 입력한 값으로 state를 업데이트하는 동일한 로직을 가지고 있으므로 하나의 함수로 합쳐서 관리할 수 있다. import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './Login.scss'; const Login = () => { const navigate = useNavigate(); const [userId, setUserId] = useState(''); const [userPw, setUserPw..

1️⃣ Side Effect 1) Side Effect란? Side Effect가 발생한다면, 코드의 동작 결과를 예측하기 어렵기 때문에 개발자의 입장에서 유지 보수가 어려워진다. Side Effect는 기피하면 좋겠지만, 프로그래밍에서 외부의 값을 변경 및 읽어오는 행위와 같은 Side Effect는 완전히 배제할 수 없는 필수불가결한 요소이다. ▶ Side Effect를 최소화하며 프로그래밍을 하는 동시에, Side Effect가 프로그래밍에 필요 시, Side Effect를 통제 가능하도록 설계해야 한다. 일반적인 의미의 '부수효과' : 주요한 효과 외에 부수적으로 발생하는 효과 프로그래밍에서의 '부수효과' : 코드가 의도한 주요한 효과 이외에, 부수적으로 발생하는 효과 2) [예시] 함수를 알아보..

List에서 key란? 각 객체나 아이템을 구분할 수 있는 고유한 값 일반적인 key의 개념 : 아이템들을 구분하기 위한 고유한 문자열 key의 값은 같은 list에 있는 elements 사이에서만 고유한 값이면 된다. (ex. A 대학에서의 학번과, B대학에서의 학번은 같아도 된다. 각 대학 내에서의 학번만 고유하게 구분되면 된다.) [ 초기 구현 코드 - Worst Case ] 올바른 key 값을 부여하지 않으면, 아래 사진과 같은 오류 메시지가 뜬다. {commentList.map(comment => { return ( ); })} [ 초기 구현 코드 - Bad Case ] 올바르게 index 값을 props에 부여하면, 위와 같은 에러 메시지는 발생하지 않지만, 다음과 같은 문제가 발생할 수 있다..

✅ 구조 분해 할당이란? 배열 혹은 객체의 속성을 분해해서 각 속성의 값을 개별적인 변수에 담을 수 있게 하는 JavaScript 표현식. 구조 분해 할당을 사용하기 전에는, 배열의 경우, 각 요소에 접근하기 위해서는 index 값을 통해 접근해야 했다. (ex. array[0]) 객체의 경우, 각 요소에 접근하기 위해서는 key (프로퍼티 명)을 통해 접근해야 했다. (ex. object.propertyName, object['propertyName']) 구조 분해 할당을 사용하면, 배열 혹은 객체 내 각 요소의 값을 바로 변수에 저장할 수 있기 때문에, 일일이 인덱스 혹은 프로퍼티 이름을 통해 배열 혹은 객체의 요소에 접근하는 것이 아니라 구조 분해 할당을 통해 할당된 변수를 이용해 간단하게 요소의 ..

글을 시작하며... 처음 리액트로 댓글을 추가하는 기능을 구현하려니 막막했다. 어떤 데이터 구조로 댓글을 관리해야하지? (배열의 형태 [] ?) 우선, 사용자가 인스타그램에서 댓글을 작성하고, 댓글이 추가되는 과정을 잘게 쪼개보았다. [Psuedo Code for Updating Comments in SNS] 사용자가 input 창에 댓글을 입력한다. ▶ 댓글 작성을 위한 및 UI가 필요함 사용자가 입력한 값을 가져온다. 2.에서 사용자가 입력한 값을 useState를 통해 상태를 저장하여 관리한다. ▶ 하나의 댓글을 string 데이터 타입으로 관리함. 여러 사용자들에 의해 여러 댓글이 달릴 수 있기 때문에 댓글 리스트를 [] 배열을 통해 관리한다. ▶ 여러 string 타입의 댓글을 하나로 묶어서 관..

📢이번 목표 Login Validation 기능 구현 : 사용자가 입력한 ID, Password가 조건을 충족시켰을 시에만 로그인 버튼 색상 활성화 [완성 코드] import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import './Login.scss'; const Login = () => { const navigate = useNavigate(); const [userId, setUserId] = useState(''); const [userPw, setUserPw] = useState(''); const saveUserId = e => { //사용자가 현재 입력하고 있는 input 창의 입력 값..

Git 분산 버전 관리 시스템, 즉, 프로젝트 파일들의 변경 사항을 추적하는 시스템 개발 프로젝트 협업 시, 프로젝트 변경 사항을 기록하고, 특정 시점의 코드 버전으로 돌아갈 수 있고, 각 개발자가 자신의 로컬 컴퓨터에서 작업한 개별 파일을 하나의 프로젝트로 병합할 수 있게 해준다. Git 필수 용어와 명령어 ✅Repository (저장소) 깃으로 관리하는 프로젝트 저장소로, 내 컴퓨터에 저장된 프로젝트 저장소인 Local repository와 원격 서버 내의 프로젝트 저장소인 Remote repository로 구분된다. 1️⃣Initializing a repository Git으로 새롭게 프로젝트 관리를 시작하기 위해 프로젝트 폴더에서 아래의 명령어를 입력하면, 프로젝트 폴더 내에 .git 디렉토리가 ..

React의 등장배경 Web Aplication의 발전으로, 사용자와의 늘어난 상호작용과 복잡한 UI/UX를 처리하기 위해서 기존 JavaScript의 DOM 조작 방식의 한계로 인해 React 및 다른 프레임워크 및 라이브러리가 등장한다. ▶ 리액트의 등장으로 복잡한 웹 애플리케이션 개발의 생상성이 향상되었고, 많은 양의 데이터 및 코드 관리 및 유지보수가 용이해졌다. 웹 애플리케이션(유저가 별도의 응용 소프트웨어를 다운로드받지 않아도 웹 사이트 내에서 응용 소프트웨어 기능을 이용할 수 있도록 만든 웹 서비스) 내에서 UI(User Interface 사이트에 보이는 요소) & UX(User Experience) 가 다양해지고 복잡해짐에 따라 유저와의 상호작용과 처리해야 할 데이터 및 코드가 증가하게 되..

1️⃣JavaScript : ID, PW 각 각 한 글자 이상 입력해야 버튼이 활성화되는 기능 구현하기 1. JS로 동적으로 조작할 DOM 요소 취득하기 2. form 태그에 .addEventListener 함수를 달고, 키보드에서 손이 떨어질 때 발생하는 keyup 이벤트 감지하기. - id 인풋창과 pw 인풋창, buttom의 색깔을 조작해야 하므로, 관련되는 모든 태그를 아우르는 form 태그가 이벤트를 감지하도록 작성함. 3. .addEventListener 함수에 전달할 콜백함수(changeBtnColor)를 작성한다. 4. 콜백함수(changeBtnColor)가 event 객체를 인자로 받을 수 있도록 하고, 키이벤트가 당장 발생하고 있는 e.target HTML 요소에 지정해둔 minLeng..

데이터베이스(컴퓨터 시스템 내에 저장된 정보 및 데이터를 잘 정리하여 모아놓은 집)는 많은 양의 자료를 정리하는 시스템으로, 크게 관계형 데이터베이스(RDBMS)과 비관계형 데이터베이스(ex. NoSQL)로 나뉜다. 데이터베이스의 필요성 데이터를 장기간 저장 및 보존의 목적 서버에도 데이터를 저장할 수 있지만, 메모리에 데이터를 저장하는 것이라서, 메모리의 특성 상 컴퓨터를 껐다 키면 데이터가 날라간다는 휘발성을 지녀 한계가 있기 때문에 데이터베이스에 필요한 정보를 오랜 기간 저장한다. 데이터 체계적 관리의 목적 언제든 필요한 데이터를 쉽게 참조할 수 있으려면 데이터베이스에 데이터들을 체계적으로 정리하여 입력해야 한다. 관계형 데이터베이스는 데이터 간의 관계(테이블-표들 사이의 관계)에 기초를 둔 데이터..