코드사냥꾼의 전리품

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트 앱을 배포하기 전에 파일의 용량을 줄여주는 작업(빌드)을 수행한다. 실제 서비스할 때 파일이 용량이 무거우면 사용자 관점에서는 불편함이 생기기 때문이다. 우선, 관리자 도구의 네트워크 탭을 주목해보자 빈 캐시 및 하드 새로 고침 (=캐시 비우기 및 강력 새로고침) 버튼 클릭 후 네트워크 탭을 보면 단순 텍스트가 적힌 웹 페이지임에도 불구하고 1.7MB의 용량을 차지하고 있다. 그 이유는 create-react-app으로 개발 환경을 구축할 때 개발의 편의성을 위해 여러 가지 기능을 자동으로 추가하기 때문이다. 그래서 위와 같이 불필요한 용량을 줄이기 위해 빌드를 하는 것이다. 리액트 앱 빌드하기 npm ru..

해당 게시물은 생활코딩의 이고잉님 강의를 듣고 개인적으로 정리한 내용을 담고 있습니다👩‍💻 리액트로 웹 애플리케이션을 만들기 위해서 개발환경 세팅이 필요하다. 리액트는 npm(node package manager)으로 설치되기 때문에 사전 작업으로 Node.js와 VSCode(필수 X)를 설치하도록 한다. Node.js 설치하기 본인 운영체제 환경에 맞게 설치하면 된다. 최신 버전을 다운받아도 되지만, 안정화 등의 이유로 LTS 사용을 권장한다. 설치 후 윈도우의 cmd창을 열어 npm 설치를 확인한다. npm -v 6.5.0 위와 같이 버전 정보가 출력된다면 성공적으로 설치가 된 것이다. 이후 create-react-app을 활용하여 리액트를 설치해보자 리액트 설치하기 리액트를 설치하는 방법은 두 가지..

본 내용에 들어가기 앞서 Window 객체에 대해 간단히 알아볼 것이다. JSC(Javascript core), DOM, BOM을 포함한 전역 객체이기 때문이다. 이때, F12를 눌러 콘솔 모드를 열어 Window 객체에 접근해보자 위의 예시를 보면 알 수 있듯이 모든 객체들이 Window 객체에 소속되어 있다는 것을 확인할 수 있다. 따라서 우리가 만든 변수, 함수이거나 브라우저가 제공하는 기본적인 내장 함수는 Window 객체의 메소드이다. alert('hello world!'); == window.alert('hello world!'); BOM이란? Browser Object Model의 약자이며, 웹 브라우저에 대한 모든 내용을 담고있는 객체이다. 뒤로 가기, 북마크, 웹 브라우저 새 창 띄우기,..

본 내용에 들어가기 앞서, 자바스크립트는 클래스라는 개념이 없다. 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 즉, 프로토타입을 사용하여 새로운 객체를 만들어낸다. (참고로, ES6 표준에서 클래스 문법이 추가되었다.) 프로토타입이란? 한국어로는 단순히 원형(원래 형태)으로 번역된다. 말 그대로 객체의 원형이라고 할 수 있다. 자바스크립트의 객체지향 프로그래밍을 지탱하고 있는 핵심 개념이며, 이를 활용하여 상속 개념을 제공하고 있다. [목표] 프로토타입의 기초를 다져보자 아래 코드를 보고 상상해보자. 'o' 객체의 'ultraProp' 프로퍼티에 접근했을 때 어떤 값이 출력될 것 같은가? function Ultra(){} Ultra.prototype.ultraProp = t..

리팩토링이란? 비효율적인 코드를 가독성이 높고, 유지보수가 편리하며, 중복된 코드의 수가 낮은 효율적인 코드로 개선하는 작업이다. 틈틈이 리팩토링 작업을 하는 것이 좋은 프로그래머의 자세이자 좋은 프로그램을 만들 수 있다. [목표] 비효율적인 코드를 제거하는 리팩토링 작업 학습 우선, Night 버튼 기능을 웹 페이지 하단에서도 동작하도록 해보자 이때, 하단 버튼을 클릭하면 버튼의 값이 바뀌는 대상은 상단에 위치한 버튼이다. 그 이유는 input 태그의 id의 값이 동일하기 때문이다. 이 경우 하단 버튼의 id 값을 'night_day2'로 수정하면 정상 작동한다. 그러나, 버튼이 여러 개라면 수많은 버튼을 일일이 변경해줘야 하는 불편함이 발생한다. 이 불편함을 해결하기 위해 this 키워드를 사용한다...

아래의 코드만 작성하면 항상 최신 버전의 제이쿼리를 사용할 수 있다. ☝🏻 ✌🏻

코드 간결화의 중요성이 대두됨에 따라 path 값도 clean url, semantic url으로 변경하는 추세이다. 따라서, 기존에 query string을 사용한 주소 값을 간결하게 바꿔 라우팅 하려고 한다. (Express 환경입니다.) [💡before] MAIN.js app.get('/page', function(req, res) { fs.readdir('./data', function(error, filelist){ // 변경될 부분 var filteredId = path.parse(queryData.id).base; fs.readFile(`data/${filteredId}`, 'utf8', function(err, description){ // 변경될 부분 var title = queryDat..

Node.js 와 MySQL를 연동하며 사용하던 도중 갑자기 에러가 발생하며 웹 사이트에 진입되지 않았다. 해당 오류는 노드에서 MySQL version 8.0 의 새로운 인증 방법을 지원하지 않기 때문에 발생한 것으로, 한 줄의 코드를 작성하면 간편하게 해결 가능하다. 💡 해결 방법 'Client does not support authentication protocol requested by server; consider upgrading MySQL client' => ALTER USER ‘root(본인 계정명)’@‘localhost’ IDENTIFIED WITH mysql_native_password BY ‘사용할패스워드’ [참고] https://stackoverflow.com/questions/50..

1. Java와 Javascript의 차이점을 설명하시오. 👉🏻 자바는 객체지향 프로그래밍의 대표적인 언어로서 JVM이라는 가상 머신을 이용하기 때문에 운영체제 종류에 관계없이 대부분의 시스템에서 실행됩니다. 또한, 변수 자료형이 반드시 선언되어야 하며 소스코드를 자바 바이트 코드로 변환해야 하는 컴파일 과정을 거칩니다. 자바스크립트는 HTML의 상호작용성과 동적인 시각효과를 나타내기 위한 객체 기반 스크립트 언어입니다. 자바와 달리 변수 자료형을 선언하지 않아도 브라우저가 자동으로 파악하며, 인터프리터 언어로서 컴파일 과정을 거치지 않습니다. 즉, 자바와 자바스크립트의 차이점은 컴파일의 과정이 다르며 자바는 서버측의 언어이고, 자바스크립트는 클라이언트용 언어라는 것입니다. JVM이란? 자바 바이트 코드..

문제 풀이 ( 점수 : 50/100 ) class Solution { public String solution(String[] participant, String[] completion) { String answer = ""; // 완주했냐 안했냐 판별 boolean finish = true; for(int i=0; i