i18next 는 자바스크립트로 작성된 국제화 프레임워크이다. i18next 커뮤니트는 react, Vue.js, Angular 와 같은 프론트엔드 프레임워크를 위한 통합도 만들었다. 나는 리액트를 라이브러리를 활용한 프로젝트를 진행중이기 때문에, react-i18

Emotion 은 JS 로 css 스타일을 작성하도록 설계된 라이브러리다. Emotion은 프레임워크에 구애 받지 않고 사용이 가능하며, React와 함께 사용할 수도 있다. 1. 패키지 소개 @emotion/css 패키지 @emotion/css 패키지는

React 로 Agree Checkbox 구현기다양한 서비스의 회원가입 페이지를 보면 위의 이미지처럼 동의 체크 버튼 그룹이 있다. 맨 위의 CheckBox 는 보통 '전체 or 모두 동의하기' 버튼이고 아래 CheckBox 는 필수 동의 사항이거나 선택 동의 사항이다

새로운 직장으로 입사한 첫날, 개발환경 셋팅을 했다. 데스크탑은 window 였는데 가상으로 리눅스 환경을 만들기 위해서 wsl2 위에 우분투를 설치해야 했다. 그 과정을 정리해 보려고 한다. Windows 컴퓨터에서 동시에 Linux의 전원에 엑세스 할 수있다. W

쿠키와 세션 방식의 큰 문제점은, 세션은 서버의 자원을 사용하는데 사용자가 많아질수록 메모리를 차지하므로 비효율적이고, 서버 확장시 서버간에 세션을 공유하기 어렵다는 것이다.이 문제를 보완하기 위해 '요청과 응답안에 사용자의 상태를 담아서 사용자의 인증과 인가를 처리해

로그인 인증을 통한 사용자 식별을 이해하기 위해서는 쿠키와 세션에 대한 개념을 알아야한다.로그인을 하면 브라우저와 서버가 같은 정보를 들고 있어야 한다.로그인을 했을 때, 누가 로그인을 했는지 서버는 프론트 서버와 브라우저에 알려줘야한다.백엔드 서버에 이메일, 닉네임,

나는 소분소분 서비스의 본격적인 프론트엔드 개발에 앞서 프로젝트 셋팅와 레이아웃 잡는 것을 맡아서 했다.이전에 만들어 본 개인 프로젝트에서 쓴 리액트 + Typescript 에 적합한 Foundation 을 기반으로 하였다.src 폴더 안쪽이 본격적으로 작업이 이루어지

넘블 나만의 지역커뮤니티 사이트 만들기 회고록

팀프로젝트에서 내가 맡은 부분인 지도에서 원하는 곳을 검색한 후 해당 장소의 이름과 주소를 가져오는 것을 구현한 것을 기술해 보려고 한다.kakao map api 가 1일 300,000 회에 한해 무료로 제공되고 있기 때문에 이것을 이용해 보려고 한다.https&#x3

이전 스터디에서 next.js 와 함께 Redux 를 쓰는 방법을 익혔었는데 React 에서 Redux를 쓰는 법이 궁금해졌다. 벨로퍼트님의 모던 리액트 정리해놓은 자료를 보면서 Redux에 대해 정리해보려고한다. 리덕스 설치 루트 디렉터리에 가서 redux 와 re

저번 회의 시간에 '소분소분'이라는 서비스 주제를 가지고 1) 어떻게 서비스 플로우가 흘러갈것인가? 2) 어떤 기능이 있으면 좋겠는가 3) 디자인 레퍼런스를 각자 조사해오기로 했다.지역 커뮤니티 서비스의 특이점은 자신이 사는 지역이 중심이 된다는 것이다.그래서

넘블에서 시작하는 지역기반 커뮤니티 만들기 프로젝트에 참여하게 되었다.디자이너, 백엔드 개발자, 프론트엔드 개발자가 협업해서 하나의 서비스를 만드는 프로젝트이다.실무에서도 만나게 될 다른 직군의 사람들과 나에게 필요한 기술스택인 React를 활용한 프로젝트를 하는 것은

프론트앤드 개발에 있어 next.js 는 서버사이드 랜더링을 위해 쓴다.웹의 주체는 크게 4개로 이루어져 있는데,브라우저, 프론트서버, 백앤드 서버, 데이터 베이스이다.Server Side Rendering 은 간단히 SSR 이라고도 하는데 이것은 전통적인 방식이다.브

HTML 폼 엘리먼트는 폼 엘리먼트 자체가 내부 상태를 가지기 때문에, React의 다른 엘리먼트와 다르게 동작한다. 순수한 HTML 에서 이 폼은 name 을 입력받는다.이 폼은 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행한다.리액트

엘리먼트 모음을 만들고 중괄호 {}를 이용해서 JSX에 포함시킬 수 있다.일반적으로 컴포넌트 안에서 리스트를 랜더링한다.이 코드를 실행하면 리스트의 각 항목에 key 를 넣어야 한다는 경고가 표시된다."key" 는 엘리먼트 리스트를 만들 때 포함해야 하는 특수한 문자열

리액트 공식문서 학습의 중요성을 깨닫고 정독 하기로 맘먹었다. 다른 리액트 강의 보기 이전에 필수로 읽어야하는 정석이랄까. 공식 문서 보면서 몰랐던 점이나 기억해야 할만한 것들을 적어보려고한다.프로덕션을 위해 웹사이트를 배포하기 전에 자바스크립트 파일을 압축하여 웹사이

이미지 파일을 서버에 올리고 그 올린 파일을 다시 출력하는 기능을 구현하고 싶었다.일단 assets 폴더에 image 태그를 집어 넣고 이미지를 출력하는 것을 태스트 해봤다.이미지 태그에 상대경로로 이미지를 연결해 주었는데이미지가 보이지 않았다.찾아보니 이미지를 src

1. polling 방식 쿼리가 일정 주기마다 실행되도록 하여 서버와 실시간에 가까운 동기화를 제공한다. 쿼리에 대한 polling을 활성화 하려면 pollInterval 옵션얼 설정해준다. refetching 방식 polling 방식처럼 일정 간격으로 update

form Submit 이벤트가 일어날 때 selectbox 의 선택된 값을 보내고 싶어서 'react-select' 라이브러리를 사용해보았다.1) react-select 설치2) import3) 사용하기handleSelectChange 함수에 e 객체의 타입을 명시해줘

오늘은 원티드 프론트앤드 강의 중에 유능한 개발자 분이 오셔서 모의면접을 해주셨다.나는 면접을 직접 참가 하지는 않았지만 혼자서 대답할 수 있는지 테스트해봤는데, 제대로 대답할 수 있었던게 거의 없었던 것 같다.모의 면접때 나왔던 질문들을 정리해보고 하나씩 채워나가면서