티스토리

(수근수근)

검색하기

블로그 홈

(수근수근)

soonysoon.tistory.com/m

InformationFarm 님의 블로그입니다.

구독자: 4

방명록 방문하기

주요 글 목록

react memoization 2 ) React.memo 1편에서 pure component에 대해서 이야기 했다. pure component란 PureComponent is similar to Component but it skips re-renders for same props and state로 리액트 공식 사이트에서 설명되어있다. state와 prop가 동일하면 리렌더링을 건너뛰는 컴포넌트라는 것이다. 리액트 최적화 툴 중 하나인 React.memo는 사용자가 해당 컴포넌트가 pure component임을 인지하고 사용하는 최적화 함수이다. React.memo React.memo pure component를 최적화하는 escape hatch function Decoration() { return ( ⛵️ ); } const PureDecoration =.. 공감수 0 댓글수 1 2023. 10. 9.
react memoization 1 ) 왜 최적화 툴이 필요한가? 최적화가 사실 몸으로 와닿은적이 아직 없다. 따라서 공부도 제대로 안한 경향이 있고, 단순히 리렌더링 안해도되는 것은 최적화 툴(useMemo, useCallback)을 쓰면된다 이정도의 지식이었는데, 제대로 알지도 못하는데 어떻게 쓸 수 있는가 하는 생각이 들었고 좋은 강의(josh)를 통해서 해당 툴이 리액트에서 필요한 이유를 좀 더 깊게 이해할 수 있었다. 일단 왜 해당 같은 툴이 만들어졌을까? 리액트는 자동으로 최적화 할 수 없었을까? 최적화 툴이 만들어진 이유는 다음과 같다. 리액트는 불필요한 부분에도 리렌더링이 되기 때문이다. 리액트 리렌더링의 기본적인 규칙에 대에서 봐보자! The Basic rule 모든 리렌더링은 state value 변경으로 시작되고, 이는 유일한 트리거입니다. 따라서 .. 공감수 0 댓글수 0 2023. 10. 9.
useEffect callback함수 async키워드를 쓰면 안되는 이유 Async Effect Gotcha gotcha : 프로그래밍에서 문제는 문서화된 대로 작동하지만 호출하기 쉽고 결과가 예상치 못하거나 불합리하기 때문에 직관에 반하고 실수를 거의 유발하는 시스템, 프로그램 또는 프로그래밍 언어의 유효한 구성입니다. 모두 알다시피, await키워드를 사용할 때, async함수 내부여야만 사용할 수 있다. 리액트를 개발하면, useEffect내부에서 비동기 함수를 사용해야하는 일이 꽤나 빈번하다. 특히 컴포넌트가 mount될 때, api를 불러오고 싶은경우가 많을 것이다.(react query, swr을 처음부터 쓰면, 알아서 해줍니다..) 예를 들어보자, React.useEffect(async () => { const response = await fetch(ENDPOI.. 공감수 1 댓글수 0 2023. 10. 8.
datepicker 자동 masking하기 문제 - 현재 react-datepicker library를 활용하고 있는데 input에 날짜를 입력할 때 자동으로 MM-dd-yyyy형태로 작성되게 하고싶은데 mmddyyyy로 들어감 - locale에 따라 자동으로 formating형태에 따라 대쉬를 넣어주고 싶음 해결방법 - datepicker에서 열어둔 props의 customInput을 활용한다. - 자동으로 masking을 도와주는 라이브러리(react-text-mask) 사용 (https://github.com/text-mask/text-mask/tree/master/react) 필요한 부분 코드만 작성 (나머지 불필요한 부분들은 삭제함) - locale에 따라 다르게 mask부분의 배열을 변경해주면 됩니다. import ReactDatePi.. 공감수 0 댓글수 0 2023. 1. 5.
Typescript handbook 읽고 정리(Narrowing) Narrowing narrowing 타입을 좁혀나간다 이런 의미같다.. 살펴보자 해당 장에서 타입스크립트가 제공하는 (자바스크립트가 제공하는 키워드이기도 하지만..? 이를 타입스크립트는 narrowing용으로 사용도 하는 것 같다.) Type guards들에 대해서 하나씩 알아보자! 우선 첫 번째 예제를 하나 보여주는데 아래와 같다 function padLeft(padding: number | string, input: string) { if (typeof padding === "number") { return " ".repeat(padding) + input; } return padding + input; } 위의 함수를 보면 일단 자바스크립트 코드처럼보인다. 이 것이 요점인데, 타입스크립트는 타입안정.. 공감수 0 댓글수 0 2022. 10. 20.
Typescript handbook 읽고 정리 Everyday Types 배열 Array vs number[] 두개의 차이점을 이야기하자만, 전자는 generic syntax고, 후자는 shortand구문으로 제너릭이 필요한 경우 전자를 사용하면 된다. any 타입스크립트의 틀별한 타입으로, 타입 검사오류의 발생이 되지 않는다. any를 사용하는 경우 추가적인 타입검사 자체가 비활성화되며 보통 굳이 긴타입으로 정의하는 것이 비효율적일 때 사용한다. noImplicitAny 설정을 켜놓는 경우는 any를 사용하는 경우 오류를 발생시킵니다. (설정하기 나름이다…) 변수에 대한 타입 표기 아래와 같다 간단.. const name : string = “Mercury” 함수 함수의 주요목적이 입출력인 것처럼 타입스크립트도 입출력의 타입을 지정할 수 있다. 매.. 공감수 0 댓글수 0 2022. 10. 5.
HTTP 흐름 가볍게 이해하기 (1~3까지) 🌞 HTTP이 발전 이해하기 🌞 HTTP/0.9 GET메소드만 존재 HTML만 읽을 수 있고 클라이언트 정보 X 하지만 WWW의 근간이 되어 더욱이 발전할 수 있었음 HTTP/1.0 헤더를 통해 클라이언트와 서버 정보 전달이 가능해졌다. 또한, content-type헤더를 통해서 HTML뿐만 아니라, 이미지 동영상같은 다양한 정보를 주고 받을 수 있게 되었다. POST가 추가되어 클라이언트의 정보를 웹으로 전달할 수 있게 되었다. content-Encoding을 통해서 클라이언트와 서버간의 압축정보를 공유가 가능해졌다. HTTP/1.1 HTTP의 첫 번쨰 공식 표준버전이다 GET, POST, PUT, DELETE의 함수를 모두 지원 하나의 TCP 연결을 지속적 연결을 추가함으로 재사용해 많은 콘텐츠 전달.. 공감수 0 댓글수 1 2022. 8. 3.
CSS Ecosystem Vanilla CSS 장점 도구가 필요하지 않아 덜 복잡하고, 런타임 성능비용이 없음 단점 범위가 지정되지 않는 단점이 있다. 한 곳에 작성한 CSS는 모든 곳에 진행되기 때문에 BEM과 같은 명명법을 통해서 해결해 나갈 수 있으나, 이는.. 엄청난 노력이 필요함 최적의 브라우저 지원을 위해 많은 CSS에 대해서 브라우저의 접두서를 추가해야함 JS와의 공유가 어려움 Sass / Less Scss는 바닐라 CSS로 컴파일 되는 전처리기 입니다. 중첩, 변수 및 iteration의 기능으로 바닐라 CSS를 커버합니다. 작동방식은 타입스크립트와 비슷합니다. Less 도 Sass와 방식이 아주 유사한데, 차이점이라고 하면 변수에 지정을 다르게 한다 잠점 for-loop, mixin nesting 같은 강력한 도.. 공감수 0 댓글수 0 2022. 7. 18.
[ Rendering Logic2 ] Sticky Positioning Sticky Positioning position : sticky는 스크롤 할 때 요소가 상태적인 위치에서 고정위치로 전환되는 속성입니다. position : sticky 뿐만 아니라 top, right, left, bottom등 하나 이상을 선택해야 수행이 된다. Sticky position에는 몇가지 특이한 세부사항이 있는데 이를 살펴보자! Stays in their box position : sticky가 자주 간과되는 것은 상위 컨테이너에서 외부 스크롤을 따르지 않는다는 것이다. 고정요소는 상위 컨테이너가 보이는 동안에만 고정이 됩니다. 아래를 보면 스크롤을 내리면 상위 컨테이너에서 벗어나는 것을 확인 할 수 있습니다! 만약 스크롤을 내릴 때 어떤 컨텐츠와의 인접성을 유지되게 하고 싶으면 이를 활.. 공감수 0 댓글수 0 2022. 6. 26.
[ Rendering Logic2 ] Fixed Positioning Fixed Positioning fixed positioning은 absolute와 비슷한 역할을 한다. 차이점은 훨씬 반항적이여서 뷰포트에서만 억제가 가능하다. (viewport는 현재 눈에 보이는 웹사이트의 일부) 가장 많이 쓰이는 이유는 스크롤에 영향을 받지 않기 때문에 고정시킬때 많이 쓰인다. 위의 해당 버튼은 스크롤할 때도 움직이지 않고 고정되어있습니다. Instead of the closest non-static ancestor, it listens to the “initial containing block”, a box the size and position of the viewport absolute 로 modal을 만든 것 처럼, fixed 로도 모달같은 오버레이 효과를 줄 수 있습니다... 공감수 0 댓글수 0 2022. 6. 15.
[ Rendering Logic2 ] stack context - z-index/ portal 해당 글은 css josh강의를 요약 정리한 것 입니다. Stack Context 브라우저 요소가 겹칠 떄 맨위에 렌더링 될 요소를 결정하는 방법은? => 레이아웃 모드에 따라 다르다! => FLOW 레이아웃 모드에서는 Nagative margin으로 강제할 수 있다. 아래 예시를 보면 Margin top의 음수를 줌으로써 겹쳐지는 것을 확인 할 수 있다. 하지만 이는 DOM순서에 따라 변경이 되는 확인 할 수 있다. 만약 회색상자에 텍스트를 추가하면 어떻게 될까요? 글자는 핑크 박스 뒤에 갈까요? 아니면 앞으로 떠있는 형태로 될까요? 확인해보면 텍스트는 맨위에 떠있는 것을 확인할 수 있습니다. 그 이유는 ? Flow layout 자체는 레이어링을 염두해두고 만들지 않았습니다! 따라서 이를 해결하기 위.. 공감수 0 댓글수 0 2022. 6. 11.
Rendering Logic - 기초1 해당 글은 css josh강의를 요약 정리한 것 입니다. css의 목표는 앱 콘텐츠의 레이아웃과 모양을 컨트롤 하는 것 입니다. HTML태그에는 최소한의 몇가지 스타일이 실제로는 들어있는 것입니니다. 예를 들어 chrome에서 태그에 제공하고 있는 기본스타일을 확인해봅시다. a { color: -webkit-link; cursor: pointer; text-decoration: underline; } 실제로 브라우저는 이러한 기본 스타일로 가득찬 스타일 시트를 가지고 있습니다. HTML사양의 몇가지 엄격한 규칙이 있지만 대부분은 브라우저의 고유의 스타일을 제공하고 있습니다. 이 것이 같은 태그여도 브라우저마다 다르게 보이는 이유입니다. 보통 개발자들은 CSS reset 파일을 통해서 브라우저간의 일관성.. 공감수 0 댓글수 0 2022. 5. 17.
기본 CSS 요약 - Color / Units / Typography [ Color ] color formats css는 색상을 표현하는 다양한 방법이 있습니다. 대부분은 16진수코드(#FFFFFF)로 사용하지만 이말고도 더 나은 옵션들이 있습니다. 만약 red컬러를 표현하고 싶다면, 아래의 네가지 표현법이 있습니다. Hex codes -#FF0000 => 가장 흔하게 사용한다. 2개씩 쪼개서 16진법으로 표현된다 Keyword - red => 문제점이 많다. (사람마다 다름) RGB - rgb(255,0,0) => hex codes랑 호환이 가능하다 HSL - hsl(0deg, 100%, 50%) HSL을 쉽게 이해하기 위해서는 아래의 그림을 보면 이해하기 쉬운데, 방향(360도)을 동해 색을 나타내고 2번째 요소에 얼마나 색을 포화시킬지 3번째는 얼마나 밝게 표현할지 .. 공감수 0 댓글수 0 2022. 5. 9.
기본 CSS 요약 - Selectors Josh의 강의를 스터디 하고 있는데, 스터디하면서 정리하는 글이다. (영어라 잘못 해석할 수도 있다..) Selectors Selector / Pseudo-classes :hover 우리가 마우스를 버튼 위로 올렸을 때, JS로 처리한다면 어떻게 하나요? JS의 onMouseEnter / onMouseLeave의 내장함수를 사용하여 상태를 관리해야할 것입니다, 하지만 CSS를 사용한다면? Hover over me! 위 코드 처럼 : hover pseudo class를 사용하여 간단하게 구현할 수 있습니다. focus : 클릭하거나 탭했을 경우 포커스가 설정됩니다. 해당 스타일은 중요한데. 그 이유는 해당 스타일은 마우스, 터치스크린을 사용하지않는 접근성문제를 다루는데 있어서 중요하기 때문이다. 음성을 .. 공감수 0 댓글수 0 2022. 5. 2.
기본 CSS 요약 - 1장 Josh의 강의를 스터디 하고 있는데, 스터디하면서 정리하는 글이다. (영어라 잘못 해석할 수도 있다..) 모듈1에서는 기본적으로 사용하는 CSS를 전체적으로 요약한 내용이다. 스타일 규칙 해부하기 사실 CSS용어에 대한 정리가 잘 되어있지 않은 상황이었는데 해당장에서는 아주 자세히 설명해주고 있다. property : Css에서 property는 특정한 값을 지정할 수 있는 속성이다. (like font-size) selector : selector는 페이지의 특정 타겟 요소를 설명한다. 헷갈리는 것은 선택자라는 것은 .(class), #(id)를 같이 포함해주어야한다. /*여기서 selector는 apple이 아닌 .apple이다 (어떤 요소인지 선택까지) */ .apple { background-c.. 공감수 0 댓글수 0 2022. 4. 26.
Animations - Transforms and Transition Transform 기능 - translate 요소 이동시키기 transform을 통해 요소들을 이동시킬 수 있는데, transform: translate(x.px, y.px) -> 양수는 아래, 오른쪽, 음수는 위 왼쪽으로 이동을 합니다. transform 특이한 점으로 한가지는 백분율을 사용할 때 상위 컨테이너의 공간이 아니라, 요소 자체의 크기를 나타냅니다. Transform 기능 - scale로 요소를 줄이고 늘리기 독립적으로 x, y 축을 조정할 수 있다. height와 width 와 다른 점은 상자의 모형만 변형하는 것이 아니라 요소와 하위 요소도 변경을 한다는 것이다. Transform 기능 - Rotate 로 요소 회전 시키기 요소를 회전시키는 기능이다. 단위는 deg와 turn 이 있다. .. 공감수 0 댓글수 0 2022. 4. 19.
[클린코드 JS] 경계 다루기 해당 글은 유데미 클린코드 자바스크립트 강의를 정리한 내용입니다. 🟥 Min - Max ⭐ 최소값과 최대값을 다룬다. function genRandomNumber (min, max) { return Math.floor(Math.random()*(max-min+1)) + min; } const MIN_NUMBER = 20; const MAX_NUMBET = 45; //이름만 봐도 사용의 의미를 알 수 있음. genRandomNumber(MIN_NUMBER, MAX_NUMBET) ⭐최소값 최대값 포함여부를 결정해야한다. (이상/초과) (이하/미만) function isAdult(age){ //19살 초과만 가입을 원할 때이지만, // 포함인지 아닌지 판단하기 힘들다. } 포함여부는 중요하기 때문에, 이상 초.. 공감수 0 댓글수 0 2022. 2. 6.
[클린코드JS] 타입 다루기 해당 글은 유데미 클린코드 자바스크립트 강의를 정리한 내용입니다. ⬛ 타입 검사 typeof typeof는 문자열을 반환한다. typeof '문자열' // 'string' typeof true // 'boolean' typeof undefined // 'undefined' typeof 123 // 'number' typeof Symbol() // 'symbol' 🙅‍♀️ 하지만 typeof 만으로 모든 타입을 검사하는 것은 불가능, Reference Type 불가능 자바스크립트에는 primitive와 reference 타입으로 나눌 수 있는데, 위의 typeof로 타입을 알아낼 수 있는 것들은 대부분 primitive에 속하고 Reference타입에 Array, function, date와 같은 객체들은.. 공감수 0 댓글수 0 2022. 2. 2.
[컨퍼런스 정리] 디자인 시스템 토스 디자인 시스템 관련 영상 정리 글 입니다. 해당 영상을 접하면 좋은 사람들? 디자인 시스템을 구축하면 뭐가 좋아질지 궁금하다 디자인 시스템을 도입하고 관리하는데 어려움을 겪고있다. 큰 규모의 조직에 디자인 시스템을 적용하는데 어려움을 겪고있다. 운영하는 디자인 시스템을 한층 더 고도화 하고 싶다. 디자인과 프론트엔트 개발 작업의 생산성을 높이고 싶다. UI 개발의 일반적인 문제 개발의 규모가 커지고 화면이 많아질수록 반복적인 작업이 많아진다. 같은 버튼인데, 텍스트나 색상이 다른 경우가 많음 하나의 앱이나 서로 다른 서비스 처럼 보인다. UI가 많아지고 파편화가 심해져서 개발 생산성이 떨어지게 된다. → 일관성을 맞추기 어렵다. 재활용이 쉽지 않다. 디자인 일관성이 떨어진다 → 중복코드, 파편화가 .. 공감수 0 댓글수 0 2022. 1. 22.
react Build 및 실행하기 1. 개발프로젝트를 build 한다 → 빌드를 하면 build파일 이 생기고 해당 폴더 안에는 css, JS, HTML, 이미지파일 등 정적파일이 생성된다. 2. 웹페이지 열기 사실 빌드를 생각해보았을 때, 빌드를하고 정적파일(JS, HTML, CSS)파일이 만들어지고 index.html을 실행하면 끝이라고 생각이 들었다. 하지만 실제로 페이지를 열어보면 아래처럼 흰 페이지만 나오는 것을 확인할 수 있다. → 다시 콘솔을 확인해보자 해석을 해보자면, build 폴더는 배포될 준비가 되었다. 정적서버와 함께 제공될 수 있습니다. Server 설치 (npm serve 패키지 활용) build폴더의 정적파일들을 실행시키기 위해서는 웹서버가 필요하다. 웹서버란 HTTP 프로토콜 기반으로 하여 클라이언트(웹브라우.. 공감수 3 댓글수 0 2021. 12. 21.
드디어 웹개발자로... 우선 나는 2년간 회사의 C++솔루션을 유지보수하고 개발하던 일을 했다. 비전공자인 내가 개발을 시작한 이유는 웹개발을 너무너무 하고싶었다. 하지만 취업을 한 회사에서 갑자기 C++솔루션을 맡으라고 했다.. 정말 회사내에 웹이라는 것이 거의없었다..(이건 취업사기인가요...?) 그런데 왜 2년이나 내가 원하는 것을 진작의 찾지 않고 회사에서 있었을까? 우선 내일채움공제... 제일 1순위었다. → 나에게는 현실의 벽인 학자금이라는 것이 있었다.. 분명히 여기서도 배울 게 있을거야~! 맡은 솔루션이 다양하게 발전시킬수 있는 솔루션이라고 생각했고 배워보고 싶었다. → 실제로 통신에 관련 인프라에 대해서 많이 배웠다. 시간이 왜이렇게 빨리가나... 한 건 없고 시간만 가버렸다... 현실에 불평하지 말고 할 수 .. 공감수 2 댓글수 0 2021. 12. 20.
브라우저 저장소(Web Storage) 목차 Cookie란 무엇이고 어떤 문제가 있는가? Cookies의 구성요소 및 동작방식 브라우저 저장소란? 브라우저 저장소의 특징 브라우저 저장소의 종류 LocalStorage SessionStorage COOKIE Cookie와 그에 대한 문제점 쿠키는 클라이언트 로컬에 저장되는 key-value의 데이터 파일이다. 클라이언트에 300개까지 쿠키저장 가능, 하나의 도메인당 20개의 값만 가질 수 있음, 하나의 쿠기값은 4KB까지 저장한다. → 쿠키는 용량과 개수에 제한이 있다. → 대용량은 저장이 불가능하다.* Response Header에 Set-Cookie 속성을 사용하면 클라이언트에 쿠기를 만들 수 있다.쿠키는 사용자가 따로 요청하지 않아도 브라우저가 Request시에 Request HEader를.. 공감수 0 댓글수 0 2021. 11. 19.
[JS] 이벤트 시스템 - 이벤트 버블링, 이벤트 캡처링 해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다 이벤트시스템이란 브라우저가 제공하는 시스템 사용자가 UI에 언제 반응할지 알 수 없으므로 나온 시스템 보통 addEventListener의 형태로 DOM에 어떤 요청이 들어왔을때 어떤 함수를 호출해줘라고 등록하는 형태를 취한다 이벤트 버블링 버블링은 안쪽의 있는 요소가 클릭이 됐을 때, 발생한 이벤트가 바깥쪽으로 확산되어 나가는 것 아래와 같은 형식의 HTML의 형태를 가지고 있고, 해당 DIV태그 마다 addEventListener를 통해서 클릭이벤트를 시스템을 등록해 놓는다면 let divs = document.querySelectAll('div'); divs.forEach((div) => div.addEven.. 공감수 0 댓글수 0 2021. 11. 17.
[JS]동기와 비동기 해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다. 동기코드란? 앞에 것이 확정되기 전에 뒤에 코드가 실행할수 없는 상태 앞뒤가 종속적으로 묶여있는 상황 따라서 동기코드는 순차적으로 실행될 수 밖에없다. function double(x){ return x*2; } const x = double(100); const y = x; 비동기코드란? 동시에 실행될 수 있는 것을 비동기라고 할 수 있다. function calcValue(a, b) { setTimeout(()=>{ return a + b; },100) } const r = calcValue(10, 20); const z = r; 비동기와 동기를 한번에 진행시키고 싶다면? 콜백이라는 함수를 통해서 결과값이 일.. 공감수 0 댓글수 0 2021. 11. 17.
TDD로 하는 API 서버 개발 -(2) .해당 내용은 인프런의 '테스트주도개발(TDD)로 만드는 NodeJS API 서버'를 정리한 내용입니다. 사용자 삭제 API 성공시 - DELETE /users/:id 성공시 204를 응답한다 실패시 id가 숫자가 아닐 경우 400으로 응답한다 📕 DELETE /users/:id 성공시 코드 app.delete('/users/:id', (req, res) =>{ const id = parseInt(req.params.id, 10); users = users.filter(user => user.id !==id); res.status(204).end(); }) 🧩 DELETE /users/:id 성공시 테스트 코드 describe('Delete /users/1', ()=>{ describe('성공시', ().. 공감수 0 댓글수 0 2021. 10. 16.
TDD 로 하는 API 서버 개발 -(1) .해당 내용은 인프런의 '테스트주도개발(TDD)로 만드는 NodeJS API 서버'를 정리한 내용입니다. 사용자 목록 조회 API 테스트 코드 만들기 🔶 GET users 코드 [ API SPEC ] 성공 유저 객체를 담은 배열로 응답한다 최대 limit 갯수만큼 응답한다 실패 limit이 숫자가 아니면 400을 응답한다 offset이 숫자가 아니면 400을 응답한다 app.get('/users', function (req, res) { const limit = req.query.limit; res.json(users.slice(0,limit)); }); 🔶 GET users TEST 성공 유저 객체를 담은 배열로 응답한다 const app = require('./index'); const should .. 공감수 0 댓글수 0 2021. 10. 14.
[NodeJS]테스트 주도개발 해당 내용은 인프런의 '테스트주도개발(TDD)로 만드는 NodeJS API 서버'를 정리한 내용입니다. 테스트주도개발(TDD)이란? 개발을 먼저 진행하지 않고, 테스트 코드를 먼저 작성하는 것 개발시간이 많이 걸리긴 하지만 유지보수 시점에 가면 좋은 효율성을 가져다 준다. 모카(Mocha) https://mochajs.org/ 모카는 테스트 코드를 돌려주는 테스트 러너 테스트 수트 : 테스트 환경으로 모카에서는 describe()으로 구현한다 테스트 케이스 : 실제 테스트를 말하며 모카에서는 it()으로 구현한다 npm install mocha 명렁을 실행합니다. 1. utils.js에 테스트를 진행할 코드를 작성합니다. //테스트를 진행할 코드 function capitalize(str){ return.. 공감수 0 댓글수 0 2021. 10. 3.
[NodeJS] REST API란 해당 내용은 인프런의 '테스트주도개발(TDD)로 만드는 NodeJS API 서버'를 정리한 내용입니다. HTTP URL을 통해 resource를 명시하고 HTTP METHOD(GET, POST,PUT, DELETE)를 통해 자원에 한 CRUD를 지원한다 HTTP요청 모든 자원은 명사로 식별한다 HTTL경로로 자원을 요청한다 예 GET/users GET/users/{id} HTTP메서드 서버 자원에 대한 행동을 나타낸다 (동사로 표현) GET : 자원을 조회 POST : 자원을 생성 PUT : 자원을 갱신, 정보를 수정할 때. DELETE : 자원을 삭제 이는 익스프레스 어플리케이션의 메소드로 구현되어있다. app.get('/users', function (req, res) { //req, res http.. 공감수 0 댓글수 0 2021. 10. 3.
[ NodeJS ] Express 기초 해당 내용은 인프런의 '테스트주도개발(TDD)로 만드는 NodeJS API 서버'를 정리한 내용입니다. npm install express로 Express를 다운받은 가정하에 진행합니다. ExpressJS? ExpressJS는 Nodejs로 만들어진 웹프레임워크입니다. https://expressjs.com/ → 해당사이트에서Express에 대한 내용을 자세히 할 수 있습니다 시작하기를 읽어보는 것을 추천드립니다 [ 📝 Expressx개념.1 ] 어플리케이션 익스프레스 인스턴스를 어플리케이션이라고한다 const express = require('express'); const app = express(); //여기서 app을 어플리케이션이라고 합니다 서버에 필요한 기능인 미들웨어를 어플리케이션에 추가한다 .. 공감수 0 댓글수 0 2021. 10. 3.
[NodeJS] Hello Node 해당 내용은 인프런의 테스트주도개발(TDD)로 만드는 NodeJS API 서버를 정리한 내용입니다. node에서 제공하는 hello world노드버전 코드 노드의 헬로월드 코드 링크: https://nodejs.org/dist/latest-v6.x/docs/api/synopsis.html //index.js const http = require('http'); const hostname = '127.0.0.1'; const port = 3000; const server = http.createServer((req, res) => { res.statusCode = 200; res.setHeader('Content-Type', 'text/plain'); res.end('Hello World\n'); }); .. 공감수 0 댓글수 0 2021. 10. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.