본문 바로가기

Develop

 (55)
[Develop/Tools] Visual Studio Code(VSCode) Emmet 사용 (JSX Emmet 설정) Visual Studio Code(VSCode) Emmet 사용 근래 들어 React, Vue와 기본적인 HTML, CSS 등 프론트엔드 공부를 많이 진행하면서 여러 강좌를 보다 HTML에서 사용했던 Emmet을 VSCode에서 일반 사용과 React JSX에서도 사용하는 방법을 공유하고자 한다. Emmet 이란? 위키에서 HTML,XML,XSL문서 등을 편집할 때 빠른 코딩을 위해 사용하는플러그인이라고 설명되어있다. Emmet 사용 여러 Emmet 문법이 많이 있겠지만 기본적인 사용 몇 개만 설명하고자 한다. HTML 구조 생성 ! 느낌표를 치고 Tab 키를 누르면 아래와 같이 HTML 구조가 자동으로 생성된다. Element 생성 생성하고 싶은 Element를 문자열로 작성하고 Tab 키를 누르면 아..
[Develop/Tools] VSCODE vscode-author-generator Extension 사용 VSCODE vscode-author-generator 사용 여러 개발 회사에서는 각각의 코드 컨벤션을 가지고 있다. 코드의 간격을 탭으로 할지? 스페이스로 할지? 각 자바 클래스나 함수에 주석은 어떤 규약으로 달아 놔야 하는지, glt commit 메시지는 어떻게 하는가 등등 많이 있을 것이다. 회사랑은 별개지만 지인이나 친구들과 같이 스터디 등 토이 프로젝트를 진행하면서 누가 만들었고 무엇을 목적으로 생성한 소스코드인지를 볼 수 있도록 file-header Extension으로 사용하면서 추천하고자 블로그에 포스팅한다. vscode-author-generator 설치 vscode-author-generator는 각 VSCODE에서 좌측에 Extensions 탭을 이용해서 검색하여 설치해도 되고 Ctr..
[Develop/Node&Express] graphql-voyger사용 graphql-voyger사용 최근에 GraphQL에 대해서 궁금증을 가졌었다. 간단하게라도 직접 해보는 게 생각정리도 빠르고 더욱 유익하다고 느껴 저번 포스팅에서 간단하게 Express, React와 Apollo, GraphQL을 사용해서 서버와 클라이언트를 생성했다. 이번에 Naver DEVIEW 프론트엔드 GraphQL 관련 영상을 보면서 graphql-voyager를 알게 되었다. graphql-voyager? graphql-voyager는 GraphQL 스키마를 시각화하여 보여주는데 협업하는 여러 개발자가 참고할 수 있도록 지원한다. 언젠가 GraphQL을 사용해서 프로젝트를 진행하면 적용하기 위해 정말 간단하게 이전에 구현했던 Express에 미들웨어로 추가하여 테스트해봤다. graphql-v..
[Develop/React] React, GraphQL, Apollo 맛보기 React, GraphQL, Apollo 맛보기 GraphQL을 공부하면서 서버를 간단하게 개발해보고 이후 적용할 만한 프로젝트가 있으면 사용해보고자 했지만 하면서 프론트엔드에는 어떤 식으로 Apollo가 Redux를 대체할 수 있다는 것인지와 프론트엔드에 간단하게라도 붙여보고 싶어 테스트를 해본 경험을 공유하고자 한다. Express, GraphQL, Apollo Server 작업 진행 시 서버 구현에 대한 정보가 궁금하다면 아래 포스팅을 참조 hoons-up.tistory.com/53 [Develop/Node&Express] Express / GraphQL / Appllo 맛보기 2 (Mysql) Express / GraphQL / Appllo 맛보기 2 (Mysql) 이번에는 Expess, Grap..
[Develop/Node&Express] Express / GraphQL / Appllo 맛보기 2 (Mysql) Express / GraphQL / Appllo 맛보기 2 (Mysql) 이번에는 Expess, GraphQL, Apollo-Server, Mysql을 사용해서 Express와 Mysql 연결과 Apollo-Server를 사용한 GraphQL 서버를 간단하게 만들어 볼려고한다. 추후 다음 포스팅을 통해서 React와 GraphQL, Apollo-Client를 사용해서 클라이언트까지 정말 간단하게 구성해 볼 것이다. 간단하게 혼자 테스트하면서 진행 한 Sample 코드로 그 점은 감안하여 주시길.. GraphQL과 Apollo에 대한 간단한 설명은 이전 포스팅을 참고 hoons-up.tistory.com/52 [Develop/Node&Express] Express / GraphQL / Appllo 맛보기 ..
[Develop/Node&Express] Express / GraphQL / Appllo 맛보기 1 시작하며 이번에 GraphQL을 알게 되면서 한 번을 사용해서 서비스를 제공해보고 싶었지만 회사에서 제대로 GraphQL을 적용할 여건이 생기지 않아 개인적으로 간단하게나마 구현해보면서 GraphQL이 무엇인지? 어떤 상황에서 개발에 어울릴지 장점은 무엇인지? 에 대하여 정리해보고 간단하게 테스트 해보았다. Express / GraphQL / Appllo 간단 맛보기 1 먼저 일반 서버를 Node.js 만을 사용해서 Backend를 구성해도 되지만 기존에 관심을 가지고 개인적으로 공부하던 Express.js를 사용하기로 했다. 이번 포스팅의 중점은 Express 보단 GraphQL과 Apollo에 맞춰서 포스팅하려 한다. GraphQL 이란? GraphQL은 페이스북에서 만든 쿼리 언어로 REST API..
[Develop/React] React Create-React-App(CRA) 환경변수 간단사용 (dotenv) React Create-React-App(CRA) 환경변수 간단 사용 (dotenv) React Create React App(CRA)은 개발자가 Babel이나 webpack 같은 build 도구를 별다른 설치 과정과 설정 없이도 동작할 수있도록 도와준다. CRA로 React Project를 진행할 경우 dotenv를 포함하게 되는데 dotenv는 project의 환경 별로 프로젝트 구성을 제공할 수 있도록 해준다. 즉, development, test, production.. 등 각 환경에 맞춘 변수들을 제공하여 줄 수 있다. CRA로 시작하면 dotenv가 package에 포함되어있다. 간단 사용 방법 먼저 dotenv는 .env 파일을 따른다. Project의 src 아래에 아래의 이름으로 파일을 ..
[Develop/Node] Node란? 설치 및 맛보기 시작하며 작년부터 Vue나 React 평소에 관심이 있던 SPA들을 공부하고 프로젝트를 진행하면서 자연스럽게 node에 대한 관심이 생기게 되었고 node를 기반으로 한 api 서버를 구축해보고자 인프런에서 온라인 강의를 듣게 되었다. 강의를 들으면서 알게 된 지식과 덧붙여 개인적으로 공부하여 알게 된 점들을 포스팅하려고 한다. Node.js 란? 구글링을 해보면 Node.js는 확장성 있는 네트워크 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 라고 나온다. 왜 그렇게 이야기할까? 다들 알고 있듯이 JavaScript는 브라우저에서 동작하는 언어이다. Node는 이런 Javascript 코드를 브라우저 밖에서도 실행할 수 있도록 해준다. 아마 직접 구현은 아직 못해봤지만, Electron 같은 프..

티스토리툴바