y.developer

2024.01.02 화 filter] 밖의 값을 변형 (배열 개수(index) 변화) 조건에 맞는 값만 가져오거나, 삭제 원하는 값만 추출할 때 map] 안의 값을 변형 (배열 개수(index) 유지) 조건에 해당하는 값을 변경 내부의 원하는 값을 변경할 때 ♠API (Application Programming Interface) 소프트웨어가 다른 소프트웨어로부터 지정된 형식으로 요청, 명령을 받을 수 있는 수단 ♠Reatful URI HTTP 요청을 보낼 때 어떤 URI에 어떤 메소드를 사용할지 개발자들 사이에 널리 지켜지는 약속 형식이기 때문에 기술에 구애받지 않는다. 어떤 언어로 어떤 것을 써서 만들든 소프트웨어간 HTTP로 정보를 주고받는 부분이 있다면 이 규칙들을 준수해서 Restful한 서비스..

2023.12.28 목 git push 소요시간이 너무 길어지는 현상 팀프로젝트를 진행하던 중 git push를 하는데 소요되는 시간이 너무 길고, 파일도 너무 많다는 것을 알게되었다. 문제의 원인을 파악해보니 초반 프로젝트 세팅 때 .gitignore를 설정하는 것을 빼먹고 git push를 진행했더니 push 소요 시간이 너무 길어졌던 것이다. yarn dev나 yarn build 시 생성되는 .next 폴더는 Next를 구동하기 위해서 빌딩되는 파일로서 용량이 상당하다. git hub에 올리는 것에 큰 부담이 있을 법한 용량이며, 팀원들이 pull 받았을 때 yarn dev 또는 yarn build를 통해서 충분히 생성 가능하므로 .next 폴더를 제외하고 push를 하는 것이 좋다. .next를 ..

2023.12.19 화 Rendering Javascript를 이용해서 HTML을 만드는 행위 기존 SPA를 만들 때 사용하던 CSR에서의 rendering 표현에 가깝다. const element = ( Hello, world! ); // JSX의 동작 -> Javascript로 HTML 태그를 만든다. const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); Pre-rendering Client에 HTML이 이미 로드가 된 이후가 아닌, 이전에 Javascript를 이용해 HTML을 만드는 것을 말한다. 언제 HTML을 만드느냐에 따라서 Server-Side Rendering(SSR)과 Static-Si..

2023.12.15 금 ` Backtick(백틱), Back Quote(백 쿼트), Grave Accent(그레이브 액센트) 억음 부호 ~ Tilde(틸드) 물결표 ! Exclamation Mark(익스클라메이션 마크) 느낌표 @ At(엣), At Sign(엣 사인) 골뱅이 # Number Sign(넘버 사인), Sharp(샾), Hash(해쉬), Pound Sign(파운드 사인) 샾, 우물정자 $ Dollar Sign(달러 사인) 달러 % Percent Sign(퍼센트 사인) 퍼센트 ^ Caret(캐럿) 캐럿 기호 & Ampersand(엠퍼샌드) 앰퍼샌드 * Asterisk(에스터리스크) 별표 - Hyphen-minus(하이픈 마이너스), Dash(대쉬) 마이너스, 붙임표 _ Underscore(언더스..

2023.12.04 월 프래그래밍에서 모듈 시스템은 코드를 구조화하고 재사용 가능한 조각으로 분리하는데 중요한 역할을 하며 많은 부분에서 export와 import 된다. 모듈을 불러올 때 자동완성을 사용하다 보면 import, require 두 가지의 방법으로 입력되는 것을 볼 수 있다. 어떤 경우에 사용이 되는지, 어떤 것을 사용하는 것이 더 좋은지 궁금해서 찾아보게 되었다. 1. import ES6에서 도입된 표준 모듈 시스템이다. 주로 브라우저 측 JavaScript 및 모던 프론트엔드 프레임워크에서 사용된다. import는 비동기적으로 동작하며, 필요한 부분만 가져올 수 있다. import myModule from './myModule'; 사용 목적 브라우저에서의 사용을 강조하며, 더 최신의 J..

2023.11.30 목 그동안 메모했던 꿀팁들을 모아봤다. 나중에 찾아볼 나를 위해서라도 흩어져있는 정보들을 한 곳에 모아서 정리해야겠다. 1. ENV란? 웹,앱 개발을 하다보면 포트, DB관련 정보, API_KEY등 개발자 혼자서 또는 팀만 알아야 하는 값 즉, git, 오픈소스에 올리면 안되는 값들이 있다. 이때 필요한 것이 dotenv 패키지 이며 환경변수 파일을 외부에 만들어 URL, 포트, API_KEY 등을 저장시켜 소스코드 내에 하드코딩하지 않고 사용할수 있다. 기억해야할 것! - 환경변수의 이름은 REACT_APP_로 시작하게 만든다. process.env.REACT_APP_은 예약어이므로, 다른 이름은 사용하면 React가 인식하지 않는다. 이는 의도적인 것으로, 우연히 우연히 같은 이름..

2023.11.14 화 기존에는 CSS 만을 통해서 스타일을 정했다. 하지만 React에서는 작성한 코드에 색을 입혀주는 방법이 더 다양하다. 그중에서도 컴포넌트에 스타일을 적용하는 방법에 대해서 알아보자. Styled Components Css-in-JS : JS로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식 props를 통해서 조건부 스타일링 가능 지역 스타일링 : 단, 해당 컴포넌트 내에서만 사용 가능 CSS-in-JS 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 사입하는 스타일 기법이다. 기존에는 웹사이트를 개발할 때 HTML과 CSS, JavaScript는 각자 별도의 파일에 두는 것이 관행으로 여겨졌었다. 하지만 React나 Vue, Angular와 같은 모..

2023.11.08 수 리액트 컴포넌트를 작성하기 위해서 JSX 스니펫을 쓰다가 궁금해졌다. 자동으로 생성되는 코드는 어떤 것인지, 어떤 부분을 변경해 볼 수 있고 잘 작동하는지 알아보자. 스니펫 rafc, rafce 함수 표현식, 함수 선언식 export, export default props 받는 방법 최고의 조합 snippets (스니펫) '코드 조각'이라고 부르는데, 도구라기 보단 에디터마다 내장되어 있는 기능이다. 용도는 자주 사용되는 코드에 대해서 단축어를 만들어서 코드를 빠르게 생성해 낼 수 있게 도와준다. 기본적으로 JSX파일을 만들고 들어가면 빈화면이다. HTML은 ! 입력 후 Tab를 누르면 기본적인 양식이 제공된다. 이와 마찬가지로 JSX 파일에서도 대표적으로 rafc 또는 rafce..