본문 바로가기
728x90
반응형

분류 전체보기238

Layered Pattern이란? Layered Pattern이란? Presentation Layer / Business Layer / Persistence Layer Presentation Layer 해당 시스템을 사용하는 클라이언트와 직접적으로 연결되는 부분 백엔드 API에서 엔드포인트 부분 API의 엔드포인트를 정의하고 전송된 http 요청들을 읽는 로직을 구현한다 실제 시스템이 구현하는 비즈니스 로직은 Business Layer에서 담당! Business Layer 비즈니스 로직을 구현하는 부분 회원가입 / 로그인 유효성 검증 로직 등이 있다 Persistence Layer 데이터베이스 관련된 로직 구현 부분 데이터 생성 / 수정 / 읽기 등을 처리하여 데이터를 저장, 수정, 읽어 들이는 역할을 합니다. Layered 아키텍처의 .. 2023. 2. 27.
2023.02.26, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 공부 1. 이번 주는 주로 왜 이 기술을 쓰는지에 대해서 나의 언어로 말할 수 있을 정도로 습득하는데 시간을 썼다. 예를 들면 왜 리액트를 쓰는지, 단점과 장점은 무엇인지 등등 가장 기본적인 이유도 막상 정리해 말하는 건 정말 어려운 일인걸 새삼 깨달은 주였다. 2. 본격적으로 node 백엔드 공부를 하기 전에 터미널 세팅을 했다. 세상 예쁜 내 터미널 ^___^ 누군가 만들어 놓은 세팅을 clone 받아 실행했는데 터미널 크기를 조정하면 요 밑 예쁜 타임라인(?) 이 여러개 뜨는 오류가 생기지만 터미널을 켤 때마다 넘나 즐거울 거 같다. 프론트는 보이는 게 중요하다구 ^__________^ 3. mySQL을 사용해 간단히 테이블을 만들고 삭제하는 것까지 .. 2023. 2. 26.
my SQL 데이터베이스 객체(Database object)란 데이터베이스 내에 실체를 가지는 것을 말하며, 2차원 테이블(Table), 뷰(View), 인덱스(Index) 등이 있습니다. 스키마(Schema)는 데이터베이스 내의 객체(table, view, index)를 담는 컨테이너입니다. SQL의 DDL(Data Define Language)은 Schema 내의 객체를 정의하고 관리할 때 사용되는 쿼리문을 의미합니다. MySQL 에 원하는 데이터베이스를 생성하는 명령어는 CREATE DATABASE {database_name}; 입니다. 생성된 데이터베이스에 접근하는 명령어는 USE {database_name} 입니다. 데이터베이스 내부에 테이블을 생성하는 명령어는 CREATE TABLE {table_name}.. 2023. 2. 26.
next.js 왜 사용하나요 요즘 프론트엔드 개발자 필수템 next.js 어떻게 저떻게 사용은 했지만 프리렌더링과 html 파일 만들어져서 빠르고 SEO 좋다~ 하는 점만 두리뭉실하게 알았지 딱히 뭘 알고 쓴다는 느낌은 없었다 그래도 next 왜 쓰는지 뭐가 좋은지 는 정확히 알아야하지 않을까... 🤔 싶어 시작한 글 React.js : Html과 JS파일을 한꺼번에 보내고 클라이언트가 js 코드를 통해 웹 화면을 렌더링 Next.js : Pre-Rendering된 웹 페이지를 클라이언트에게먼저 보내고, React가 번들링된 자바스크립트 코드들을 클라이언트에게 전송함. SSR vs CSR SSR 서버사이드 렌더링 CSR 클라이언트 사이드 렌더링 👆 SSR 클라이언트가 데이터에 요청하면 프->백->데이터베이스->백->프->브라우저 순.. 2023. 2. 26.
js 느낌표 두개 연산자 !! 부정의 부정은 긍정..? 이라는 생각이 드는 연산자 다른 타입의 데이터를 boolean 타입으로 형변환하기 위해 사용한다 null 이나 undefined 도 boolean 처리해준다 2023. 2. 26.
js 물음표 두개 연산자 js 연산자 표를 볼 때마다 아 이런 게 있구나~ 하면서 넘겨왔던 ?? 연산자 처음 봤을 땐 저런게 있구나~ 하는 생각으로 넘겼지만 react 에서 저 연산자를 볼 줄은 몰랐다 undefined 나 null를 내지 않고 확실한 결과값을 내기 위해 사용하는데 ?? 사용 전 function test(food,price,num){ let foodPrice = num*price console.log(price) console.log(food +"과 "+foodPrice+"원") } // 결과 test("빵",5000,2) 5000 '빵과 10000원' // null 지정 시 test("밥",null,2) null '밥과 0원' // undefined 지정 시 test("면",undefined,2) undefin.. 2023. 2. 26.
타입스크립트 any, unknown typescript : 타입 시스템이 없는 자바스크립트(약한 타입 언어)는 런타임에서 타입이 결정된다. 때문에 런타임 오류에 있어서 (try catch 로 잡아주더라도) 예상치 못한 에러가 발생한다면 프로그램은 멈출 수 있기 때문에 이를 보안하기 위해 타입을 직접 지정해주는 타입스크립트를 사용한다 브라우저는 자바스크립트를 읽기 때문에 타입스크립트를 자바스크립트로 바꾸어주는 컴파일 단계가 있는데 타입스크립트는 이 컴파일 과정에서 에러를 잡아내기 때문에 런타임에서 발생하던 에러를 그 전, 개발 단계에서 잡아낼 수 있다. any : 어떤 타입도 허용하는 타입 타입스크립트에서 가장 치명적인 any 타입 어떤 타입인진 모르지만 기능을 먼저 확인하고 싶을 때 빨간 줄을 없애려 가끔 any를 넣어놓고 작업하는데 까먹.. 2023. 2. 26.
useEffect counter로 작동 순서 정리 import { useEffect, useState } from 'react'; const Counter = () => { const [count, setCount] = useState(0); const handleOnClick = () => { setCount(prev => prev + 1); }; console.log('useEffect 전'); useEffect(() => { console.log('실행'); return () => console.log('-------cleanUP--------'); }, [count]); console.log('useEffect 다음'); return ( {count} button ); }; export default Counter; useEffect 는 컴포넌트.. 2023. 2. 21.
2023.02.19, weekly memoirs weekly memoirs 이번 주에 한 일 ✅ 공부 1. 다시 하얗게 불태운 이번 주... 오랜만에 무한스크롤을 구현했다. 무한 캐러셀도 구현해봤는데 생각보다 어렵지 않아서 재미있게 작업했던 거 같다. 무한스크롤은 observer 사용해서 구현했고 캐러셀은 setTimeout 사용해서 3초마다 아이디 id값 +1 해서 돌리는 방법으로 구현했다. 둘 다 멍때리고 보기 좋은 기능들이라 구현 후에 재밌게 멍을 때리기도 했다.(?) 2. next.js 는 어디가서 썼다고 말 못할 정도로 넘 구리게 썼다. 다행히 금요일에 동기와 함께 채팅 어플 리팩토링하며 나름 pages/api 폴더를 사용해서 auth 페이지에서 받은 user 정보를 서버로 post했고 이를 home 페이지에서 받아 getstaticprops.. 2023. 2. 19.
728x90
반응형

티스토리툴바