react-i18next 글로벌을 무대로 서비스하는 웹 애플리케이션은 국제화(i18n)가 필수다. 이를 해결하기 위해 반복적인 코드나 조건부렌더링으로 하드코딩할 수는 있지만 비효율적이다. react환경에서는 react-i18next를 설치하면 좀더 쉽게 해결이 가능하다. # npm $ npm install react-i18next i18next --save useTranslation (hook) 언어별 json파일을 만들어 두고 useTranslation훅으로 t function을 활용해 key을 활용하여 원하는 텍스트를 번역할수 있다. import React from 'react'; import { useTranslation } from 'react-i18next'; export function MyC..
분류 전체보기
오늘 배운것 fatal: the remote end hung up unexpectedly git에 파일 업로드시 자꾸 업로드가 실패되고 와이파이가 차단되길래 찾아보니 파일이 커서 차단되는 문제였다. https://codeground.tistory.com/35 fatal: the remote end hung up unexpectedly 오류 해결 열심히 commit한 내역을 push하려고 보니 갑자기 에러가 뜬다. send-pack: unexpected disconnect while reading sideband packet fatal: the remote end hung up unexpectedly 뭔 소린가 싶지만 구글링을 하니 단.. codeground.tistory.com 여기 블로그 참고해서 그대..
자바스크립트는 스크립트 언어라서 즉석에서 코드를 실행할 수 있음 REPL이라는 콘솔제공 R(Read),E(Evaluate),P(Print),L(Loop) 윈도우에서는 명령 프롬프트, 맥이나 리눅스에서는 터미널에서 node입력 프롬프트가 > 모양으로 바뀌면, 자바스크립트 코드 입력 입력한 값의 결과값이 바로 출력. 간단한 코드 테스트 용도 > const str = 'Hello World, hello node'; undefined > console.log(str) Hellor world, hello node undefined > 모듈 노드는 자바스크립트 코드를 모듈로 만들 수 있음 모듈 : 특정한 기능을 하는 함수나 변수들의 집합 모듈로 만들면 여러 프로그램에서 재사용 가능 module.exports로 모듈..
오늘 배운것 bitbucket pull request conflict Bitbucket을 쓰고 있는데 배포로 급히 수정된 코드들과 conflict가 생겨 해결되지 않으면 merge되지 않았다. 원격 origin에서 베이스 저장소를 내 저장소로 다시 풀해온뒤 conflict를 해결했다. https://velog.io/@ha0kim/GIT-conflict-%EC%8B%9C-%ED%95%B4%EA%B2%B0%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95 [ GIT ] conflict 시 해결하는 방법 Git 에서 Conflict 이란?개발자들이 각 feature을 따서 작업을 하고 master branch에 merge를 하게된다.merge 과정에서 파일의 이름이 같으면 충돌이 발생한다.파일..
오늘 배운것 React Antipatterns to Avoid https://www.youtube.com/watch?v=b0IZo2Aho9Y video태그 https://developer.mozilla.org/ko/docs/Web/HTML/Element/Video : 비디오 삽입 요소 - HTML: Hypertext Markup Language | MDN HTML 요소는 비디오 플레이백을 지원하는 미디어 플레이어를 문서에 삽입합니다. developer.mozilla.org git rebase https://suhwan.dev/2018/01/21/Git-Rebase-1/ Git Rebase (1) 안녕하세요, 이번 포스팅과 다음 포스팅에서는 git을 처음 배우는 사람들이 가장 어려워한다는 git rebas..
function one() { second(); console.log("하나") } function second() { third(); console.log("둘") } function third() { console.log("셋") } one(); 더보기 코드순서 셋 > 둘 > 하나 ↑ 이순서로 쌓이고 third() ↓이순서로 실행돰 second() first() anonymous 호출스택(함수의 호출, 자료구조의 스택) anonymous는 가상의 전역 컨텍스트(항상 존재) 함수 호출 순서대로 쌓이고 역순으로 실행됨 함수실행이 완료되면 스택에서 사라짐 LIFO(Last in first out)나중에 쌓인게 먼저나가는 후입 선출 구조로 스택이라 불림 function oneMore() { console.l..
샌드위치데이는 무조건 쉬어버리는 회사의 꿀 정책에 하루정도는 코딩이나 해야지 했지만 3차 백신맞고 연휴내내 골로가버렸다.ㄷㄷ 지난주 릴리즈에 대한 체험을 마치고 미흡한 부분에 대한 소스코드 및 QA를 통한 디버그 작업을 진행했다. 기존 소스코드가 익숙한듯 익숙하지 않지만 내코드와 접합부가 생기고 나서는 흐름을 따라갈수는 있을 것 같다. 반응형작업과 인터랙티브한 요소를 최대한 반영하는 중이다. 오늘 한일 스튜디오 예외처리 및 디버그 Node.js학습 오늘 배운것 공백과 줄바꿈 지정 white-space https://developer.mozilla.org/ko/docs/Web/CSS/white-space white-space - CSS: Cascading Style Sheets | MDN CSS white..
오늘까지 작업된 스튜디오 페이지가 처음으로 stage로 올라갔다. 반응형작업과 인터랙티브한 요소는 더 추가해줘야 하고, 클라이언트로 부터 정보를 입력받는 입력폼에 다양한 예외처리를 해줘야하는데 생각보다 쉽지 않아 애를 많이먹었다. 동료개발자분들과 CTO님의 코드리뷰를 받으면서 , 많이 배웠고 스스로도 왜 그러한 코드를 짜게되었는지 묻는 시간이 많이 생겼다. 오늘 한일 스튜디오 페이지 완료(예외처리 및 디버그) Node.js학습 오늘 배운것 정규표현 및 예외처리 각 입력에 대한 상태값과 유효성검사를 위한 상태값들을 만들어주었다. 초기에는 메시지를 보여주지 않다가 입력된 이후에 메시지를 보여주기 위해 입력값에 null값을 주어, 첫 렌더링시에는 보여주지 않고 이후에는 유효성검사를 통한 boolean에 따라 ..
노드교과서를 토대로 정리한 내용 1. 노드의 정의 Node.js는 크롬 V8자바스크립트 엔진으로 빌드된 자바스크립트 실행기로 브라우저의 종속성에서 벗어남 멀티쓰레드인 자바에비해 싱글쓰레드와 비동기가 가능하여 쉽게 접근이 가능한 장점으로 인기가 폭증 참고서 https://ko.javascript.info/ 모던 JavaScript 튜토리얼 ko.javascript.info 2. 내부구조 2008년 V8엔진 출시 후 09년 노드 프로젝트 시작
