반응형

frontend 4

Javascript Array.Reduce

안녕하세요. Array 메소드가 공부를 멈추면 어떤 문제를 해결할 때 제가 아는 범주에서만 생각하게 되는 듯 합니다. 문제는 해결 할 수 있지만, 성장이 더뎌지는 느낌이 나서 제가 몰라서 자주 사용하지 않았던 Javascript Array.reduce 에 대하여 알아 보도록 하겠습니다. 설명 예시1 예시2 1. 설명 Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. 라고 mdn web doc에 나와있습니다. 값이 나열 되어있는 배열에서, 한 값을 도출 할 때 사용하면 유용하다 것으로 인식 하면 될 듯합니다 참고 : https://developer.mozilla.org/ko/docs/W..

쓰려고 하면 기억 안 나는 Window Web Api

안녕하세여, 오랜만에 포스팅을 진행합니다. 어깨 수술이랑 새프로젝트 때문에 생각한 포스팅이 밀려있습니다. 오늘은 자주 사용하지는 않으나 까먹어서 매번 검색하는 window api 입니다. 1. window.innerWidth, window.innerHeight 현재 열려있는 윈도우(창)의 크기를 구하는 Web Api 입니다. 반응형웹을 만들때, 햄버거(메뉴창)를 만들때 유용합니다. 미디어 쿼리를 사용해서, 사용하는 방법도있으나, 저는 JS 가 익숙해서 컴포넌트를 올렸다 내렸다 하는 방식이 편하더라구요. 각자 다른방법이 있을테니 상황에 맞게 사용하면 될듯합니다. 아래 예제코드를 간단히 기입했습니다. innerWidth를 innerHeight으로 수정하면 반대 작업도 가능하겠죠? See the Pen Unt..

쉽게 놓치고 지나갈 수 있는 실수 정리 : HTML (1)

안녕하세요. 저희 회사에서는 개발하면서 Warning과 Error관해 깐깐한 편인데요. 이전 회사와, 공부할 때는 원하는 기능만 되면, 개발이 완료되었다고 생각했었는데, Warning까지 다 잡아가면서 개발을 하니, 확실히 배우는 부분이 많습니다. 그래서 오늘은 많지는 않지만, 현재 사이드 프로젝트를 하면서 보였던 쉽게 놓치고 지나갈 수 있는 실수를 포스팅해보겠습니다. body태그 input:passowrd 태그 1. body태그 HTML 시멘틱에 대해서 알고 나서부터 신경 쓰면서 개발을 진행하고 있습니다. 난사를 막고, 좀 더 가독성 있는 코드를 짜고 싶은 욕심에 개발하고 있는 사이드 프로젝트에서도 적용시키려고 하고 있습니다. // app.tsx const app = ()= >{ return ( .....

FrontEnd/HTML & CSS 2021.09.01

TypeScript를 사용한 React를 기존 Express 서버에 올리기

안녕하세요. Express 서버 세팅을 완료 하고, 해당 프로젝트에 React를 올리는 작업을 포스팅진해도록 하겠습니다. TypeScript를 사용하여 Express 세팅하기 TypeSrcript를 사용하여 Express 세팅 안녕하세요. 사이드 프로젝트를 시작하며, TypeScript를 사용하여 Express 서버를 세팅해봤는데, 생각보다 찾아보고 설정해야할 항목이 많아서, 같은 상황에 도움이 될까하여 포스팅을 진행해봅니다 icecokel.tistory.com 설치환경 react 설치 및 확인 concurrently 설치 및 scripts 세팅 1. 설치환경 운영체제 Windows 10 Pro 사용 툴 VSCode 1.59 node v14.17.3 npm 6.14.13 2. react 설치 및 확인 r..

반응형