기록

자바스크립트에서 외부 입력을 받아 출력할 때는 Node.js의 모듈로 readline과 fs를 주로 사용합니다. 아래 간단한 개념 정리와 readline모듈을 활용한 예제를 통해 알아봅시다.Node.js로 입력값 출력 방법 두가지1. fs 모듈fs(File System) 모듈은 Node.js에서 파일 시스템과 상호작용하기 위한 기본 모듈입니다. 동기적혹은 비동기적 방식으로 파일을 읽거나 쓸 때 사용됩니다.특징동기적/비동기적 파일 I/O: fs.readFileSync()와 fs.readFile() 등을 사용해 파일을 읽을 수 있습니다.온라인 저지 환경에 적합: 코딩 테스트나 알고리즘 문제 풀이 시, Node.js 환경에서는 /dev/stdin을 이용해 입력을 받을 수 있습니다.예제 (동기적 방식)const..

방법론 스터디 첫 모임을 가졌습니다. 다 함께 모인 첫날이라 서로에 대해 알아가기 위해 간단한 이력 소개와 소속 도메인, 사용 기술 스택에 대해 소개 나누었습니다. 다들 최소 2년차부터 4년 차까지 모두 개발 현업 경험이 있는 팀원들이었습니다. 현업에 있는 사람들과 스터디를 하는 건 두 번째인데, 같은 기술 스택을 학습하는 사람들과 모인 것은 처음이라 앞으로의 스터디가 기대되었습니다. 한편으로는 혼자 현업 경험이 없는 만큼 다른 때보다 더 열심히 스터디 발표 자료를 준비해야겠다는 생각이 들었습니다. 정규 과정이 들어가기 전에 모인 사전 스터디라 스터디를 이끌 팀장이 필요하였습니다. 팀장이 부담이 될 수 있는 자리라 누가 하자고 쉽게 권하지는 못하였습니다. 그렇게 어쩌다 보니 팀장이 되었습니다. 잠깐의 O..

Next.js와 React, 어떤 것을 써야 할까? Next.js는 React.js의 프레임워크이다. React.js에서도 SSR, SSG, ISR 등을 할 수 있지만 Next.js가 보다 편리하게 할 수 있다는 점만 해도 엄청난 장점이다. 하지만 Next의 단점은 리액트를 깊이 이해하고 있지 않거나, 아예 서버에 대한 개념이 무지하다면 초기 러닝커브가 있을 수 있다는 점이다.넥스트에서 서버/클라이언트 컴포넌트를 분리한다는 개념을 처음 학습할 때는 프런트에서 API요청하는 비동기 코드들과 ui 관련된 코드들을 분리하고 싶던 욕구가 있었기에 반가웠다. 그래서 리액트 프로젝트에서는 Middleware 같은 Hook을 만들어서 감싸서 사용하려는 시도를 하다 결국 프로젝트 데드라인에 쫓겨 기존 방식대로 마무리하..

클럽 99 Next.js 스터디 4주차 현황( ...이라하고 트러블 모음집이라고 부르기 )  명절 기간에 많이 뒤쳐진 것 같아서 따라잡으려고 달렸는데, 다들 비슷했나보다. 인원이 작기도 한데, 지금 진도율에 1등이라니이 확실히 상태관리 내용이 나오니앞 주차보다 진도가 뎌디다. 4주차 강의는 바로 이해가 안되어서 여러번 돌려보았다. 이번 스터디 강사님은 설명할 때 같은 개념을 다른 말로 여러 번 끊어서 말하는 스타일인데 처음에는 귀에 쏙쏙 들어온다는 생각했는데, 뒤로 갈 수록 오히려 흐름도 같이 끊기는 느낌이었다 ㅠㅠ  4주차 강의 중 Zustand 로 next에서 상태관리하는 법 강의 듣고 있다. 넥스트에서 서버 컴포넌트와 클라이언트 컴포넌트를 구분하는 방식이 너무 좋아보였다. 유지관리하기 훨씬 깔끔해진..

캐싱은 NextJS에서 핵심이라고 할 수 있습니다. Next는 브라우저의 메서드인 fetch를 기반으로 NextJS에서 확장된 새로운 API를 도입하였습니다. 그래서 NextJS에서의 fetch 메서드는 우리가 기존에 알고 있던 브라우저에서의 fetch와 달리 NextJs에서 캐싱을 다루는 속성이 있어, 우리가 손쉽게 랜더링 방식을 제어할 수 있다는 장점이 있습니다. 주로 우리는 크게 두 가지 관점에서 캐싱을 진행합니다. 바로 build할때와 데이터를 요청할 때입니다 NextJS의 캐싱 전략Full Route CacheFull Route Cache는 우리가 캐시를 정적 사이트로 만들어주면 알아서 빌드 시점에 캐싱해주는 것을 말합니다.기본적으로 넥스트 14버전에서의 fetch는 아무 것도 입력을 하지 않는..

chrome 브라우저에서 자주 사용하는 탭 관련 단축키에 대해 정리한 포스팅입니다. 더 많은 단축키를 확인하려면 아래 링크를 확인하세요! chrome 기기별 단축키 window일 경우 아래 cmd를 ctrl버튼으로 대체하면 됩니당탭 닫고 열기현재 탭 닫기 : cmd + w최근 닫은 탭 열기 : cmd + shift + t새 탭 열기 : cmd + t특정 탭으로 이동하기cmd + (1~8) : 탭 열린 순서로 번호로 이동 가능표로 브라우저 탭 단축키 확인

텍스트 중간 정렬하는 방법 2가지이미지와 같이 간혹 font 이슈로 text태그는 flex를 align-item : center; justify-content: center;를 하여도 간혼 중간 정렬이 안됩니다. 이때, 텍스트를 중간 정렬을 하는 방법은 2가지가 있습니다. 첫번째는 padding에 위아래 높이를 주어 중간 정렬을 하기, 두 번째는 div와 같은 요소안의 텍스트의 높이(line-height)와 감싸진 요소의 높이(height)를 맞춰주는 것입니다. 필자는 padding을 활용하여 중간 정렬 하는 것을 선호하는 편입니다. 아래 이미지로 가운데 정렬을 주려합니다. padding 값 위아래 주기위 코드는 a태그로 만들어진 버튼입니다.padding값을 아래 코드처럼 주면 중간 정렬이 되는 것을 확..

box-sizing 기본값 알기기본으로는  태그들은 box-sizing: content-box로 기본 속성을 가진다.width : 100px일때 padding을 16px로 하면 전체 width가 132px이 된다. 즉, content-box일때 padding이랑 margin값을 추가하면 기존 컨텐츠 박스의 값 + (마진값 or 패딩값)이 된다.이때, 컨텐츠박스안에 패딩값을 포함되게하고 싶다면 box-sizing 속성을 border-box로 변경해주면 width가 100px인 박스안에 패딩값이 들어가게 된다.  예시 코드아래 이미지처럼 padding값만 추가했을 경우에는 box-sizing 속성이 content-box로 돼있기 때문에 padding값 + width값으로 표시된다. 만약 width값은 100..

리액트 코드 스니펫 깃허브단축어로 리액트 코드 작성하기React 프로젝트를 진행하다 보면 반복적으로 작성해야 하는 코드가 많아져 번거로울 때가 있습니다. 특히, 컴포넌트를 생성하거나 useState, useEffect와 같은 훅을 사용할 때마다 동일한 반복해서 작성하는 시간이 지루하게도 느껴집니다. 이런 반복되는 코드 작업을 줄여주는 익스텐션이 ES7+ React/Redux/React-Native Snippets 입니다.해당 익스텐션은 VS Code 코드에서 React, Redux, React-Native 관련 코드 스니펫을 제공하여 생산성을 크게 높여줍니다. 단축어 자동완성 기능을 통해 리액트 코드를 빠르게 작성할 수 있습니다.ES7+ React/Redux/React-Native Snippetsrfce..

프리티어 공식 홈페이지Prettier란?프리티어는 내가 원하는 코드 컨벤션을 자동으로 맞춰주는 코드 포맷터입니다.Visual Studio Code에 전역으로 Prettier 설정하기1. VScode extention에서 prettier 설치VScode 화면 좌측 블럭 아이콘을 눌러 extensions 마켓에 prettier를 검색합니다. 다운로드 횟수가 제일 많은 prettier 클릭 후 우리가 설치하려는 프리티어 익스텐션이 맞는지 확인 후 install을 클릭해 설치를 해주세요.2. VScode 포맷터 기본값 prettier로 설정해주기 설치가 완료되었으면 우리의 VSCode에 기본 포맷터를 프리티어로 설정해주어야 합니다. cmd+, 로 VS code 설정창 들어가 주세요.아래 이미지처럼 설정화면 상단..