이번에 스터디에서 바닐라 자바스크립트로 프로젝트를 하고 있는데, 매번 리엑트를 사용하다보니 JS로만 프로젝트를 하는 것은 은근히 까다롭고, JS 공부에 도움이 많이 되고 있다. (얼마나 외부 라이브러리에 의존적이었는지 느끼고 있다.) 리엑트에서 API KEY같은 정보를 외부로부터 숨길 때에 DOTENV를 사용했었는데, 바닐라 자바스크립트에서는 외부 라이브러리를 사용하지 않으므로 사용할 수 없다. 그래서 config.js 파일에 API_KEY 값을 저장하고 export한 후 사용하려는 곳 (api.js)에서 import한 후 gitignore에 추가하는 방식으로 진행했다. 이 방법이 완전히 옳은 방법인지는 잘 모르겠다. 나중에 배포를 하게 된다면 오류가 나게 될 수도 있을 것 같은데, 배포 단계에서 포스팅..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr GitHub - cjy00n/coding-test Contribute to cjy00n/coding-test development by creating an account on GitHub. github.com 실패율 #42889 문제 설명 실패율 슈퍼 게임 개발자 오렐리는 큰 고민에 빠졌다. 그녀가 만든 프랜즈 오천성이 대성공을 거뒀지만, 요즘 신규 사용자의 수가 급감한 것이다. 원인은 신규 사용자와 기존 사용자 사이에 스테이지 차이가 너무 큰 것이 문제였다. 이 문제를 어떻게 할까 고민 한 그녀는 동적으로..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr GitHub - cjy00n/coding-test Contribute to cjy00n/coding-test development by creating an account on GitHub. github.com 약수의 개수와 덧셈 #77884 문제 설명 두 정수 left와 right가 매개변수로 주어집니다. left부터 right까지의 모든 수들 중에서, 약수의 개수가 짝수인 수는 더하고, 약수의 개수가 홀수인 수는 뺀 수를 return 하도록 solution 함수를 완성해주세요. 제한사항 1 ≤ left ≤..

이번 감정 일기장 프로젝트에 moment.js 라이브러리를 사용한 내용을 정리하고자 한다. 한국어로 사용하기 - 요일이나 시간 사용 시 영어로 뜨게 되는데, 한국어로 뜨게 하고 싶으면 따로 import 문을 추가해주면 된다. import moment from "moment"; import "moment/locale/ko"; format 형식 지정 - 원하는 방식으로 format을 설정할 수 있어 매우 편하다. - 아래는 프로젝트에서 사용했던 format 설정 코드들이다. format("YYYY-MM-DDTHH:mm") // 2023-01-15T23:00 -> datetime-local input의 형식 format("MM월 DD일 dddd") // 01월 15일 일요일 format("LT") // 오후 ..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com 페이지 구현 - 홈(/) Header 세팅하기 - Home의 헤더에는 가운데 텍스트로 현재 리스트의 년/월이 있고, 왼쪽에는 이전 월로 이동하는 버튼, 오른쪽에는 이후 월로 이동하는 버튼이 있다. - 현재 리스트의 날짜 (curDate) ..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com 페이지 라우팅 0 - React SPA & CSR # 라우팅 : 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 - 경로를 정해주는 행위 자체 # 페이지 라우팅 : 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선..

프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 자릿수 더하기 문제 설명 자연수 N이 주어지면, N의 각 자릿수의 합을 구해서 return 하는 solution 함수를 만들어 주세요. 예를들어 N = 123이면 1 + 2 + 3 = 6을 return 하면 됩니다. 제한사항 N의 범위 : 100,000,000 이하의 자연수 ▼ 나의 풀이 function solution(n) { var answer = 0; while (n > 0) { answer += n % 10; n = parseInt(n / 10); } return answer; } ▼ 반복문을 이용하지..

인프런 이정한님의 한입크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 ] 강의 수강 후 강의의 내용을 정리하며 공부한 것을 쓴 게시글입니다. 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, - 강의 소개 | 인프런... www.inflearn.com React에서 사용자 입력 처리하기 - DiaryEditor 컴포넌트가 필요한 것 작성자 일기본문 감정 점수 - 작성자, 일기 본문, 감정 점수를 state로 저장하고 변경한다. - 하나의 state로 객체 배열을 관리할 수 있다. - 초..

- 노마드코더의 하단 강의 수강완료 후 작성하는 게시글입니다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders Javascript For Beginners nomadcoders.co - 소스코드 : https://github.com/cjy921004/mywebpage GitHub - cjy921004/mywebpage Contribute to cjy921004/mywebpage development by creating an account on GitHub. github.com 배경화면은 새로고침시마다 랜덤으로 바뀌도록 함 중앙에는 현재 날씨가 초 단위로 보여짐 오른쪽 상단에 현재위치와, 해당 위치의 날씨와 온도 표시 왼쪽 하단에는 명언과 작가가 표시되는데, 새로고침시마다 랜덤으로 ..

React # React : 사용자 정의 태그를 만드는 기술 - 자바스크립트의 라이브러리 - 사용자 정의 인터페이스를 만들기 위해 사용 - https://ko.reactjs.org/ React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org npx create-react-app my-app cd my-app npm start 컴포넌트 # 컴포넌트 : 사용자 정의 태그 - UI를 재사용이 가능한 개별적인 여러 조각으로 나누고 각 조각을 개별적으로 살펴볼 수 있음 - 이름의 시작은 항상 대문자 - 함수 컴포넌트 / 클래스 컴포넌트 - props 객체를 인자로 받고, 화면에 어..