전체 글250

• 나만의 포트폴리오 웹사이트...가 아니고 홈페이지를 만들어 가는 여정 싸피 당시에 자율 마지막 주에 포트폴리오를 만들 수 있는 시간을 마련해 주셨는데, 완성을 못해서 많은 아쉬움이 남는다. 아무래도 채용 과정에서 한 눈에 쭉 스크롤을 내려 볼 수 있는 예쁜 포트폴리오가 좋다고 생각해서, 지금 내 이력서는 아무래도 너무 못나서 첫 토이 프로젝트로 정했다 ㅎㅎ 매일매일 조금씩 만들어 가면서 여기에 정리해 보기로! 2023.01.17. 트위터 타임라인 한 개발자 분이 Vercel에 배포하면 무료 플랜으로 개인 홈페이지 트래픽은 전부 커버된다고. Next.js or Svelte 둘 중 하나로 개발하고 Vercel에 배포해봐야겠다. 벌써 다른 분들 웹사이트 예시 보면서 두근두근 2023.02.03 사내 스터디에서 코드리뷰를 하면서 진행하는 프로젝트로 이 홈페이지 만들기를 선정하고 .. My/Riverlog 2022. 12. 28.

• 새줄 문자(newline) Carrige Return, Line Feed, CRLF https://ko.wikipedia.org/wiki/%EC%83%88%EC%A4%84_%EB%AC%B8%EC%9E%90 새줄 문자 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. "Hello"와 "world" 단어 사이에 추가된 새 줄 새줄 문자(newline)는 텍스트의 한 줄이 끝남을 표시하는 문자 또는 문자열이다. 개행 문자, 줄바꿈 문자(line break), EOL(end- ko.wikipedia.org Programming/ETC 2022. 12. 27.

• 

  [Javascript] constructor 싸피에서 잠시 OOP에 대해 배웠지만 초반에 매우 짧게 배우고 지나가 class 관련 개념이 부족함을 느낀다. Nest.js 역시 OOP를 도입하고 있어 모르는 용어들이 나오고 있는 것 같다. constructor란 클래스의 인스턴스 객체를 생성하고 초기화하는 특별한 메서드 constructor를 사용하면 다른 모든 메서드 호출보다 앞선 시점인, 인스턴스 객체를 초기화할 때 수행할 초기화 코드를 정의할 수 있다. class Polygon { constructor() { this.name = 'Polygon'; } } const poly1 = new Polygon(); console.log(poly1.name); // expected output: "Polygon" Programming/Javascript, Typescript 2022. 12. 23.

• 

  [Javascript] filter() 함수 filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다. Array.prototype.filter() - JavaScript | MDN filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다. developer.mozilla.org Programming/Javascript, Typescript 2022. 12. 23.

• 

  [Javascript] 구조 분해 할당과 전개 구문 서버 유지보수도 하게 될 것 같아 Nest.js 공부하다 갑자기 오랜만에 만나버린 구조 분해 할당. MDN 오랜만에 읽어봤는데 생각보다 용법이 굉장히 많았다. 면접이나 코딩 테스트 나오면 진짜 당황할듯...ㅋㅋㅋㅋㅋㅋ 이 곳에 적힌 것은 자료형 별 기본적인! 분해 할당이고, MDN에서 추가적인 용법들을 살펴보는 것이 좋다. 구조 분해 할당이란 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 변수에 담을 수 있게 하는 Javascript 표현식이다. 구문 var a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(a).. Programming/Javascript, Typescript 2022. 12. 23.

• 

  PostgreSQL이란? 맡고 있는 프로젝트에서 포스트그레스큐엘을 사용중이라 정리해본다. 아마 실제로 Nest.js 서버를 관리해보면서 더 추가되어야 할 글. ORDBMS(객체관계 데이터베이스) 객체관계 데이터베이스 또는 객체 관계형 데이터베이스관리 시스템(ORDBMS)은 객체지향 데이터베이스 모델을 가진 관계형 데이터베이스 관리 시스템을 말한다. 오브젝트 지향 모델 (OODBMS)과 관계형 모델 (RDBMS) 사이의 하이브리드 인 데이터베이스 관리 시스템으로, 두 모델의 장점을 결합해 쓸 수있다고 한다. 하지만 최근 경향으로는 ORDBMS와 RDBMS를 구분하는 것에 큰 의미는 없다고 하는데, RDMBS들의 대부분이 객체 지향 기능을 수용했기 때문이다. RDBMS란? 관계형 데이터베이스(RDB)는 테이블, 행, 열의 정보를 구.. Programming/Database 2022. 12. 22.

• 

  'export default function', 왜 쓰는 걸까? SSAFY에서 개발하면서 import하기 편리하다는 이유로 항상 default로 export해왔다. curly braces를 쓰지 않고 이름만 적어주면 import할 수 있기 때문이다. 코드를 덜 쳐도 되기 때문에 안 쓸 이유가 없었다. 하지만 정말 그 이유밖에 없을까? 문득 궁금해 관련 내용을 정리해 봤다. export란 export는 모듈을 내보내고 가져오기 위한 지시자다. 변수나 함수, 클래스를 선언할 때 맨 앞에 'export'만 붙이면 내보내기가 가능하다. + 대부분의 스타일 가이드는 export clas나 function 뒤에 세미콜론을 붙이지 말라고 권고하고 있다. 또, 선언부와 export가 떨어져 있어도 내보내기를 할 수 있다. // 📁 say.js function sayHi(user) .. Programming/ETC 2022. 12. 21.

• 

  내가 만든 페이지를 web server에 띄우고 싶을 때, 'serve' npm에서 serve에 대해 검색하면 (영어로) 'serve는 정적 사이트, SPA 혹은 단순 정적 파일(내 디바이스에 있든 로컬 네트워크에 있든)을 serve 하는 것을 도와준다. 또, 디렉토리의 콘텐츠를 깔끔하게 보여주는 인터페이스를 제공한다'고 한다. 우선 global로 설치하고, serve라는 명령어로 실행할 수 있다. serve Static file serving and directory listing. Latest version: 14.1.2, last published: a month ago. Start using serve in your project by running `npm i serve`. There are 657 other projects in the npm registry usi.. Programming/ETC 2022. 12. 20.

• Web Assembly https://tech.kakao.com/2021/05/17/frontend-growth-08/ FE개발자의 성장 스토리 08 : WebAssembly 개발기 안녕하세요, FE플랫폼팀에서 전사 에디터 및 웹 사진 편집기를 개발하고 있는 sky입니다. 기존 사진 편집기 성능 개선을 위한 방법으로 Web Assembly를 조사하게 되었습니다. Web Assembly를 사용해 본 tech.kakao.com Programming/ETC 2022. 12. 19.

• [Nest.js] DTO란? https://resilient-923.tistory.com/356 [Nest.js]DTO란? Entity란? 요즘 진행 중인 백앤드 리뉴얼 프로젝트는 express 기반에서 Nest.js 기반으로 migration 하고 있습니다. 프레임워크를 바꾸는 만큼 대공사가 진행 중인데요, express에서는 mongoose로 하나의 controller에서 resilient-923.tistory.com 카테고리 없음 2022. 12. 19.

• 

  [Nest.js] API 만들어 보기(유저 등록) 구조 설계 Nest.js가 client 요청을 받은 후의 과정 @Controller -> @Service -> Database(Repository) CLI를 이용해 module, controller, service 생성 *Service: Controller가 사용자가 HTTP 요청을 통해 사용자가 보낸 데이터를 처리하면서 비즈니스 로직을 위임하는 기능. Provider의 하나로, Provider에는 services, repositories, factories, helpers 등이 있다. Provider는 @Injectable() 데코레이터가 달린 클래스인데, Dependency Injection이 가능하도록 한다. user.module.ts import { Module } from '@nestjs/com.. Programming/Nest.js 2022. 12. 19.

• 

  [Nest.js 기초] 설치와 controller 설치 npm i -g @nestjs/cli nest new 프로젝트-명 서버 실행(yarn 기준) 서버 실행: yarn start dev 모드: yarn start:dev 프로젝트 디렉토리와 기본 요소 살펴보기 scr 폴더 안의 core 파일들 app.controller.ts: 단일 경로가 있는 기본 컨트롤러(MVC 패턴에서의 컨트롤러. Django에서의 View) app.controller.spec.ts 컨트롤러를 위한 유닛 테스트 app.module.ts: 애플리케이션의 루트 모듈 app.service.ts: 기본 서비스 main.ts: 핵심 기능인 NestFactory를 사용하여 nest application instance를 생성하는 시작 파일 main.ts import { NestFactory .. Programming/Nest.js 2022. 12. 16.

• 

  Nest.js란? Nest는 효율적이고 확장 가능한 Node.js 서버 측 애플리케이션을 구축하기 위한 프레임워크다. Like Django! *Node.js: Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임(프로그래밍 언어가 구동되는 환경)이다. 즉 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다.즉, 스크립트 언어가 아닌 환경이다. JavaScript는 독립적인 언어가 아닌 스크립트 언어(응용 프로그램에 삽입되어 제어하는 프로그래밍 언어. JavaScript는 표준 HTML 문서 내에 삽입되어 사용된다.)이기 때문에, 웹 브라우저 프로그램 안에서만 동작을 한다. 그러나 Node.js를 설치하면 JavaScript가 웹 브라우저에서.. Programming/Nest.js 2022. 12. 16.

• 

  [Javascript] 단축 평가 1.1 단축 평가 1.1.1 논리 연산자를 사용한 단축 평가 논리합(||) 또는 논리곱 (&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가됩니다. 'Cat' && 'Dog' // "Dog" 논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환하며, 좌항에서 우항으로 평가가 진행됩니다. 첫 번째 피연산자 'Cat'은 Truthy 값이므로 true로 평가됩니다. 하지만 위 표현식은 이 시점에서 평가할 수 없습니다. 두 번째 피연산자까지 평가해 보아야합니다. 즉, 두 번째 피연산자가 논리곱 연산자 표현식의 평가 결과를 결정하며, 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자 'Dog'를 그대로 반환합니다. 'Cat' || 'Dog' // "C.. Programming/Javascript, Typescript 2022. 12. 15.

• 

  [React Native] KeyboardAvoidingView & ScrollView 사용법 회원 로그인 화면에서 input을 클릭했을 때 키보드가 위로 올라가게 되는데, 이 떄 하단의 내용 일부가 키보드에 가려지는 문제가 있었다. 그래서 React Native의 KeyboardAvoidingView와 그 내부의 ScrollView를 활용해 문제를 해결했다.LoginScreen.js... 회원 아이디 ... 먼저 기존의 최상위 View를 KeyboardAvoidingView로 교체한다. 두 가지 인자를 볼 수 있는데, 첫째는 behavior이고, 둘째는 keyboardVerticalOffset이다.behaviorbehavior는 키보드가 올라왔을 때, 기존 화면이 어떻게 동작할지를 정하는 인자다... Programming/React Native 2022. 12. 15.