코드사냥꾼의 전리품

잔디밭이 아니라 황량하기 그지없던 내 깃허브를 살리고자 오래간만에 들어갔더니 branch 이름이 master가 아니라 main으로 변경되어 있었다. (어쩐지 최근에 master로 올리니 뭐가 안보이더라🤔) 아무튼 Visual Studio Code로 작성한 코드를 깃허브에 연동시키는 방법은 아래와 같다. 연동 방법 1. Github에 VSCode와 연동시켜줄 Repository 생성 2. 해당 Repository의 HTTPS 주소 복사 3. VSCode에 접속해서 Github와 연동할 폴더/파일을 열거나 생성한다. 4. 왼쪽의 아이콘을 클릭한다. 5. 변경 사항(=changes) 탭 목록에 떠있는 로그들을 + 버튼을 클릭하여 업로드한다. 6. 그 다음 변경 사항 위의 커밋 메시지 작성과 함께 체크 표시를 ..

리액트를 공부하고 본격적으로 개인 프로젝트를 진행하기 앞서 순수 자바스크립트만 사용해서 아주 간단한 프로젝트를 만드려고 한다. (사실, 프로젝트라고 하기에는 아주 민망한 수준이다ㅎㅎ) 내가 to do list를 만드는 이유는 다음과 같다. 내가 지닌 자바스크립트에 대한 지식수준 확인 및 복습 기능 구현에 따라 아주 멋진 포트폴리오가 됨 짧은 구현 시간 더보기 사실, 기본적인 지식에 대한 부족함으로 나중에 '취업하고 나서 민폐를 끼치는 동료가 되면 안 된다'라는 생각을 한 게 가장 크다. 하하하...😂 목표 시맨틱 태그 습관처럼 활용하기 30분 내 구현하기 시맨틱 태그 활용이 목표인 이유는 별거 없다. 물론 지금처럼 아주 작은 규모의 프로젝트에서는 필요 없지만 언젠가 입사 후 큰 프로젝트를 진행할 때 시맨..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트 훅은 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 구현한 개념입니다. 예를 들어, 클래스 컴포넌트에서만 사용 가능했던 state를 훅(hook)을 이용해 함수형 component에서도 useState를 이용해서 상태 변수를 선언할 수 있습니다. 또한, useEffect를 통해 리액트 클래스의 componentDidMount, componentDidUpdate, componentWillUnmount와 같은 라이프 사이클을 관리할 수 있습니다. useEffect 기능 - componentDidMount, componentDidUpdate 수행 useEffect는 컴포넌트 안에서 state, props에 접근이..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 생활코딩을 통해 리액트의 기초를 배우고, 더 심화된 벨로퍼트님의 강의를 듣는 과정에서 클래스형 컴포넌트와 함수형 컴포넌트를 아주 가볍게 배워서 좀 더 확실하게 짚고 넘어가고 싶었다. 함수형 컴포넌트는 '단순히 값을 전달 주고 받는 역할을 할 때 사용한다'라고 설명을 들었기 때문이다. 해당 설명으로는 무언가 충족이 되지 않았다. 다행히 이고잉님이 두 컴포넌트를 비교해서 구현하는 강의를 올려주셔서 쉽게 공부할 수 있었다. (내가 생각하는 이상적인 개발자의 모습을 갖춘 분😥😛.. 일면식도 없지만 항상 감사함을 느끼고 있다.) 리액트를 조금이라도 공부한 사람들은 함수형과 클래스형에 대해 아주 많이 들어봤을 것이다. 특히,..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 데이터 삭제하기 기존의 배열 데이터를 건들이지 않으면서 데이터를 제거하기 위해서는, 여러가지 방법이 있을 수 있다. 먼저 자바스크립트 배열을 가지고 연습해보자. const arr = [1, 2, 3, 4, 5]; arr 배열에서 3을 제거해보자. 기존의 배열은 그대로 유지하고 새 배열을 만들어서 3을 제외시키겠다. 첫번째 방법은 slice와 concat을 이용하는 것이다. 3을 기준으로 좌측의 배열과 우측의 배열을 서로 합쳐주는 것이다. array.slice(0,2).concat(array.slice(3,5)) //[1, 2, 4, 5] 배열 전개 연산자(...)를 사용하면 다음과 같이 구현할 수도 ..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 데이터를 추가해보자 App 컴포넌트 state에 information이라는 배열을 만들고, 그 안에 샘플 데이터 두 개를 추가할 것이다. 각 전화번호는 다음과 같은 형식으로 담긴다. { id: 0, name: '이름', phone: '010-0000-0000' } 여기서 id는 각 데이터를 식별하기 위해 사용되는 고유값이다. 수정 및 삭제 기능을 구현할 때 필요하다. 그리고 id 값은 데이터를 추가할 때마다 증가해야 하기 때문에 +1씩 더해줄 것이다. // src/App.js import React, { Component } from 'react'; import PhoneForm from './com..

해당 게시물은 인프런의 Velopert님의 유료 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 첫 번째, 입력받는 컴포넌트 생성 먼저 만들 컴포넌트는 PhoneForm이다. 해당 컴포넌트에서 사용자의 이름과 전화번호를 입력받는다. 우선, src 디렉토리 내부에 'components'라는 하위 디렉토리를 생성하고 그 안에 PhoneForm.js 파일을 생성한다. // src/components/PhoneForm.js import React, { Component } from 'react'; class PhoneForm extends Component { state = { name: '' } handleChange = (e) => { this.setState({ name: e.target.valu..

배열과 오브젝트 두 가지를 나눠서 ES6에 새로운 문법인 비구조화 할당에 대해 알아보자 비구조화 할당 정의 우선, 비구조화 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다. 간단하게 말하자면 배열([ ])이나 객체({ }) 안의 값을 편하게 꺼내 사용할 수 있는 문법이다. 배열 비구조화 할당 비구조화 할당 시 다음과 같이 기본값을 지정할 수 있다. const [cat, dog, tiger, animal = "MONKEY"] = ["CAT", "DOG", "TIGER"]; console.log(cat); // CAT console.log(dog); // DOG console.log(tiger); // TIGER console.log(animal)..

문제 풀이 입력받은 테스트케이스 수 만큼 반복문을 돌리면서 배열에 성적을 저장하고, 동시에 누적 합을 같이 구해준다. 이후에 평균 성적을 구하고 배열에 저장된 성적들과 비교한 뒤 몇 명의 학생이 평균보다 높은지 카운트하면 된다. 참고로 printf에서 "%"라는 문자를 출력하려면 %%로 적어줘야한다. import java.io.*; import java.util.*; public class Main { public static void main(String[] args) throws IOException { BufferedReader br = new BufferedReader(new InputStreamReader(System.in)); // 테스트케이스 수 int num = Integer.parseIn..