본문 바로가기

005 프로그래밍22

[Python] Class에서 'self'를 사용하는 이유와 역할 Python 에서는 Class 형식을 제공해, 객체지향 프로그래밍을 가능하게 한다. Class 형식의 코드의 예시는 아래와 같다. # class 생성 class myClass : def myFunction(self) : print('This is myClass') myclass1 = myClass() # myclass1 이라는 변수에 myClass를 할당 myclass1.myFunction() # 'This is myClass' 출력 여기에서 "self"의 역할은 myFunction이라는 함수를 class의 밖에서도 사용할 수 있도록 해준다. 따라서, "self" 없이 작성한 아래의 코드블럭에서는 에러를 유발한다. # class 생성 class myClass2 : def myFunction() : pri.. 2023. 2. 17.
REST API란? 프론트엔드, 백엔드 모두에게 필요한 RESTful API 기초 지식 REST API란 무엇인가? REST API는 다음 두 가지의 합성어이다. REST (Representational State Transfer) API (Application Programming Interface) API란? 어렵게 생각할 필요가 없다. 먼저, API가 무엇인지를 알아보자. API란 조금 쉽고 뭉뚱그려 설명하자면, (프로그램을 만들기 위한) 응용 프로그램을 의미한다고 볼 수 있다. 아주 다양한 형태로 존재하지만, 우리에게 가장 익숙한 것은 아래의 카카오 API, 네이버 API, 공공데이터 API와 같은 것들이 있을 것이다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시.. 2023. 1. 20.
프론트엔드 개발자를 위한 vue, react, node 라이브러리 정리 (1) package.json 설명 package.json은 npm으로 생성된 패키지들의 정보를 담고, 관리하는 파일입니다. npm 명령으로 패키지를 설치할 때면 자동으로 설치가 됩니다. 따라서, Vue나 React같은 프레임워크를 생성할 때에도 자동으로 생성이 되었던 것을 보셨을 겁니다. npm init 하지만, 위의 명령을 통해 직접 package.json 파일을 생성, 옵션들을 부여할 수 있습니다. (파일 이름, Licence, Version 등의 여러 옵션을 설정할 수 있지만, 본 포스팅에서는 package.json을 대강 이해하는 데 주력하기 위해 생략하도록 하겠습니다) 2023. 1. 19.
프론트엔드 개발자를 위한 vue, react, node 라이브러리 정리 (0) eslint, babel, package, config ... 너희는 누구냐? Vue나 React 같은 프론트엔드 프레임워크의 환경을 설치하거나 세팅할 때면, 프레임워크 뿐만 아니라 아래처럼 다양한 라이브러리들이 포함되어 설치되는 것을 볼 수 있다. 프레임워크 세팅은 대부분은 강의를 통해서나, 공식 문서를 통해 진행하며, 세팅 후에도 이 라이브러리들에는 크게 손 댈 일이 많지 않아 큰 관심을 가지지 않았었다. 하지만, 몇 차례 이들 라이브러리 때문에 오류가 발생할 때면, 어디서부터 수정을 해야될 지 몰라 프로젝트를 처음부터 다시 세팅해야 하는 불미스러운 일들이 있었다. 이 때문에, 이들 라이브러리들이 왜 쓰이고 어떤 원리를 가지고 있는지 대충은 알아야겠다는 생각이 들어 본 포스팅을 준비하게 되었다. 앞으.. 2023. 1. 18.
GraphQL을 프론트엔드 개발자가 배워야 하는 이유 GraphQL이란? 페이스북에서 만든 쿼리 언어이다. GraphQL 예시 // 호출 { hero { name height } } // Return값 { "hero" : { "name" : "Iron Man", "height" : "184cm" } } SQL도 쿼리언어가 아닌가요? 둘의 차이점은? SQL은 데이터베이스(DB) 시스템에서 정보를 효율적으로 가져오는 것이 목적이다. 한편, GraphQL은 서버에서 정보를 효율적으로 가져오는 것이 목적이다. 따라서, SQL은 주로 백엔드 시스템에서 작성하고 호출하는 반면, GraphQL은 주로 클라이언트에서 작성하고 호출한다. REST API와의 차이점은? REST API에서는 URL + Method의 조합을 사용한다. 각각의 정보들이 (예를 들자면) '/wri.. 2023. 1. 17.
[Javascript 팁] 더 좋은 코드를 위한 Javascript 규칙 및 팁 코드 블럭 내 함수 선언 X IF 문이나 For 문 등의 코드 블록에서 함수 선언문을 통해 함수를 정의하지 않도록 한다. -> 호이스팅으로 인해 혼란이 발생할 수 있다. 전역 변수의 사용을 억제한다. (var 변수 자제) (긴 생명 주기) 전역 변수는 생명 주기가 길다. 이 때문에 메모리 리소스를 오랜 기간 소비하고, 작성자의 의도와는 다르게 전역 변수의 상태가 변경될 수 있는 가능성이 높아진다. (네임스페이스 오염) 자바스크립트는 파일이 분리되어 있어도 하나의 전역 스코프를 공유한다. 따라서 다른 파일 내의 전역 변수나 전역 함수와 동일한 이름을 사용하게 될 가능성이 있다. 2022. 12. 25.
[Vue와 Webpack] webpack은 무엇이고 왜 사용해야 하는가? webpack이란 웹팩은 모듈 번들러이다. 공식 홈페이지에서는 '서로 연관이 있는 모듈 간의 관계를 해석하여 정적인 자원으로 변환해 주는 변환 도구'라고 설명한다. 이를 좀 더 쉽게 설명하면, '파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구'이다. 다시 말해, 애플리케이션 동작과 관련된 여러 개의 파일(HTML, CSS, JS, 이미지 등)을 1개의 자바스크립트 파일 안에 다 넣어 버리고, 해당 자바스크립트 파일을 로딩해 이를 모두 구현할 수 있게 만드는 도구인 것이다. 장점 HTTP 네트워크 요청이 적어지기 때문에, 웹 화면 로딩 시간을 단축할 수 있다. 특징 대세 프레임워크 3가지 (Angular, React, Vue)에서 모두 권하는 모듈 번들러이다. 2022. 12. 23.
[Vue-Router] 더 빠른 페이지 전환, 새로고침 없는 화면 전환 설명 Vue의 라이브러리 중 하나이다. Router를 설치 및 사용할 수 있게 해주며, 이를 통해 새로고침 없이 페이지 이동을 가능할 수 있게 해 준다. 이는 빠르게 콘텐츠 내용을 바꿀 수 있게 해주며, 특히 Vue의 Component의 특성과 함께 사용될 때, 코드의 중복을 대다수 막는 데 도움을 줄 수 있다. SPA (Single-Page-Application)에서 자주 사용되는 기술이다. 헷갈리는 문법 정리 $router.push $router.push(경로) // 경로로 이동하게 해준다. // Example $router.push({path : '/'}) // 경로 직접 입력 $router.push( {name : 'Home', params : {id : 0} }) // 'Home'으로 저장되어 .. 2022. 12. 22.