이진욱의코딩

오래간만에 블로그에 글을 작성해보네요... 반갑습니다. 마지막 글이 아마 20년도 1월쯤 제가 리액트를 처음 접했던 그 시절이네요 지금 와서 다시 돌아보면 순수 자바스크립트 외의 현업에서 많이 쓰는 웹 프레임워크인 리액트를 처음 배웠을 때 그 재미와 충격은 쉽게 잊혀지질 않는 것 같습니다. 저는 현재 개발에 대해 공부를 약 2년 정도 하고 지금은 대구 수성구 쪽의 빅데이터 솔루션 회사에서 리드 프론트엔드 개발자로 일을 하고 있습니다. 주로 사용하는 툴은 react와 react native정도 되겠네요 아무래도 생긴지 얼마 되지 않은 스타트업이라 상당히 바쁜 나날들을 보내고 있습니다... 이제부터 간간히 시간날때마다 게시글도 업로드하며 블로그를 다시 활성화시킬 예정입니다. bb 근황은 여기까지 말씀드리고 ..

이번 포스팅은 react.js(쉽게 리액트라고 부를게요) 설치하는 방법과 간단하게 구동하는 방법에 대해서 알아보도록 하겠습니다. react.js란 무엇일까요? => 컴퓨팅에서 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지 보수된다. 리액트는 싱글 페이지나 모바일 애플리케이션의 개발 시 토대로 사용될 수 있다. 당연히 js이기 때문에 자바스크립트를 기반으로 하고 있습니다. 그러므로 기본적으로 코딩을 할 수 있는 프로그램들이 필요합니다. vs code같은. 우리는 리액트를 사용할때 얀(yarn)을 사용할 예정입니다. 얀의 설치방법은 일단 얀 사이트에 접속하시면 https://yarnpkg.com/lang/en/ Ya..

이번 시간부터는 vue.js를 여러 가지 설치방법을 배워보고 간단히 적용시키는 방법도 알아봅시다. 우선 vue.js가 무엇이지 먼저 살펴보도록 하겠습니다. vue.js가 무엇일까요? Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다. 저는 저번에 node를 설치하고 bitnami패키지를 설치해서 sql서버 등을 열..

이번 시간에는 함수의 사용법과 배열에 대해서 알아보도록 하겠습니다. 함수에서는 매개변수 즉, 전달 인자를 통해서 동작하는데요. 예시를 먼저 보시죠 function myinfo(name,area){ document.write(name+"이 사는 곳은"+area+" 입니다." + " "); } myinfo("이진욱,"대구"); 이런 식으로 name과 area라는 매개변수를 만든 뒤에 대입을 해서 코드를 적으시면 됩니다. 자연스럽게 사용을 하기 위해서 여러 번 사용해보시면 됩니다. 예를 들어 2019년은 기해년입니다. 를 출력해봅시다. function datt(aa,adat){ console.log(aa+ "년은 " +adat+ " 입니다."); } datt(aa,adat); 이제 함수의 우선순위에 대해 알아..

이번 시간에는 여러 가지 연산(+, -, *, /,%)을 하는 법과 비교 연산자, 논리 연산자, 함수에 대해 알아봅시다. 자바스크립트를 이용해서 여러 가지 연산을 할 수 있습니다. 덧셈, 뺄셈, 곱셈, 나눗셈을 비롯해서 나머지도 구할 수 있습니다. var a = 3, b = 5; console.log(a+b); console.log(a-b); console.log(a*b); console.log(a/b); console.log(a&b); 이렇게 console.log()를 이용해서 연산을 할 수 있습니다. var n = 1; console.log(++n); console.log(n++); 변수 n의 값에 하나하나 증감을 시킬 수 있는 증감 연산도 가능합니다. 피연산자가 하나이면 단항 연산자라고 하고 두 개..

이번 시간부터 한 달 동안은 자바스크립트에 대해 공부한 내용을 포스팅하도록 하겠습니다. 웹페이지를 구축함에 있어 각각의 역할이 있다. HTML은 문서의 구조와 내용을 구축하고, CSS는 문서를 스타일시트를 조작해 꾸미게 된다. 현재는 웹페이지가 단순히 문서를 읽는 것을 벗어나 액션이나 동적인 느낌을 표현하는 경우가 대부분이다. 이때 동적인 부분을 담당하는 역할을 자바스크립트(JS)가 맡고 있다. 우선 자바스크립트의 핵심 개념과 특징에 대해서 말씀드리겠습니다. §. 자바스크립트의 핵심 개념 1. 객체 기본 데이터 타입 boolean, number, string, null, undefined를 제외한 나머지는 객체이다. 2. 함수 일반적인 객체보다 더 많은 기능이 있는 객체. 3. 프로토타입 모든 객체는 숨..

이번 시간에는 동기와 비동기 그리고 콜백에 대해서 알아보도록 하겠습니다. 우선 동기와 비동기에 대해 알아보겠습니다. Node.js에서 매우 중요한 특징인 비동기 처리방식을 살펴보겠습니다. 이번 내용은 Node.js의 실행 순서를 파악하는 것이 목적입니다. syntax라는 폴더안에 sync.js와 sample.txt 파일을 만들겠습니다. 먼저 fs라는 모듈을 불러와서 fs라는 변수에 넣도록 하겠습니다. var fs = require('fs'); 그리고 sample.txt라는 파일을 만들어서 텍스트를 넣은상태로 저장합니다. 내용은 apple이라고만 적어두겠습니다. 그리고 filesync 부터 해보도록 하겠습니다. 외부에서 불러들일 생각이기 때문에 외부 파일의 위치를 적어주고 utf-8을 적어줍시다. 코드입니..