Web Frontend (8) 썸네일형 리스트형 React + Express 개발 환경 세팅 초보 개발자에게 있어 개발 프로젝트에서 넘어야 하는 첫 번째 난관은 개발 환경 세팅입니다. 개발 환경 세팅으로 몇 분, 혹은 몇 시간을 삽질로 태우게 된다면 '시작이 반이다' 라는 말에 격하게 공감하게 될 것입니다. 저도 공감하고 싶지는 않았습니다. 오늘은 React, Typescript, Tailwind를 사용하는 프론트엔드 개발 환경 설정과 Express로 서버를 만들어 client에서 data fetching을 할 수 있도록 하는 과정에 대해 설명하고자 합니다. 우선 프로젝트의 루트 폴더로 이동해서 server 디렉토리를 만들고 server로 이동해주세요 Express 서버 만들기 npm init -y 위의 코드로 package.json 파일을 만듭니다. 뒤에 붙는 -y는 모든 값을 디폴트로 하겠다.. [Next.js] Parallel Routes - 병렬 라우팅을 이용한 Tabs 구현 Parallel Routes 병렬 라우팅이란 하나의 레이아웃에서 여러 페이지를 동시에 렌더링하는 것입니다. (아래의 예시에서 team과 analytics, 2개의 page를 동시에 렌더링 중) Convention 슬롯(@folder) 을 사용하여 생성하며, 동일 레벨의 layout에 props로 전달됩니다. /*app/layout.tsx*/ export default function Layout(props: { children: React.ReactNode analytics: React.ReactNode team: React.ReactNode }) { return ( {props.children} {props.team} {props.analytics} ) } 추가로, children은 암묵적인 slot입.. iOS 한글 버퍼 오류 iOS에서 키보드로 한글을 입력하고 엔터를 누르면, 마지막으로 입력한 한 음절이 버퍼에 저장되고 다시 한글을 입력할 때 나타나는 치명적인 오류가 있다. '샌드'를 보고 '위치'를 입력한 후 엔터를 누르니 '치'가 버퍼에 들어갔다가 '관리'의 'ㄱ'을 입력한 순간 앞에 붙어 결과적으로 '치관리'가 된 모습이다. '카스'를 보고 '테라'를 입력한 후 엔터를 누르니 '라'가 버퍼에 들어갔다가 '콥터'의 'ㅋ'을 입력한 순간 앞에 붙어 결과적으로 '라콥터'가 된 모습이다. 마찬가지로 튀르키예-Enter를 눌렀을 뿐인데 '예' 가 불쑥 나타나버린다... 근데 골 때리게도 받침이 없어야만 버퍼에 들어가버린다. 이 근본 없는 에러는 도대체 뭘까... 해결 방법은 input의 focus를 없애버리는 것이다. 근데 fo.. [CSS] reset.css (iOS 스타일 초기화) 각 브라우저마다 기본 CSS가 다르게 설정되어 있습니다. 우리가 원하는 디자인을 모든 브라우저에서 동일하게 보고 싶다면 각 브라우저의 기본 CSS를 모두 초기화시켜야 되겠죠? 그럴 때 사용하는 것이 reset.css 입니다. CSS Tools: Reset CSS (meyerweb.com) CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was disc.. [Vue] 프로젝트 시작하기 Vue로 새로운 프로젝트를 만드는 과정을 설명드리겠습니다. 우선 Vue_Projects라는 폴더를 만들고 vscode로 열어주세요. npm install -g @vue/cli Vue CLI를 설치하는 코드인데 Vue 프로젝트 구성하는 것을 도와주는 역할입니다. Vue를 처음 시작할 때에만 설치하시면 되고 나중에 다시 새로운 프로젝트를 만들 때에는 스킵하시면 됩니다. vue create [프로젝트명] 위의 코드로 vue 프로젝트를 만드는데 아래 그림의 화면이 나오면 Vue3를 선택해주세요. cd [프로젝트명] code . 'cd'는 'change directory'의 약자로 여러분이 만든 프로젝트의 루트 디렉토리로 들어가는 명령어, 'code .' 은 현재 위치에서 vscode를 여는 명령어 입니다. 이제.. [Javascript] Query String 암호화하기 - crypto-js URL을 통해 data를 넘겨줄 때 암호화를 하지 않으면 만천하에 중요한 data를 노출하게 되기 때문에 중요한 내용을 넘겨야 하는 경우 반드시 암호화를 해줘야 한다. 백엔드가 있는 경우 백엔드 내부적으로 암호화 해주는 코드를 작성하면 되는데, 프론트엔드만 사용하는 경우 crypto-js를 사용하면 간단하게 해결할 수 있다. crypto-js 공식 페이지는 다음과 같다. crypto-js - npm (npmjs.com) crypto-js JavaScript library of crypto standards.. Latest version: 4.2.0, last published: a month ago. Start using crypto-js in your project by running `npm i cr.. [Javascript] URL query string 컴포넌트에서 컴포넌트로 데이터를 전달해줄 때 Prop을 사용할 수 있지만, URL을 통해 정보를 넘기는 방법도 있다. 변수에 값을 담아 URL로 보내는 것이 바로 query string 이다. 다음 코드는 query string을 Vue 프로젝트에서 사용하는 방법이다.import router from "../router/index.js"; export default { setup() { const score = ref(0); const timer = ref(0); // score, timer 올라가는 코드 router.push({ path: "/result", query: { score: score.value, timer: timer.value, }, }); }, };router.push는 지정한 pat.. [Javascript] 네 글자 퀴즈 - Vue3 Project Vue를 인프런 강의로 공부하던 와중 이론만 공부하는 것이 너무 지쳐서 토이프로젝트를 해보았습니다. 링크네 글자 퀴즈 (fourlettersquizz.web.app) four-letters-quizfourlettersquizz.web.app 소스코드seojin3154/four-letters-quiz (github.com) GitHub - seojin3154/four-letters-quizContribute to seojin3154/four-letters-quiz development by creating an account on GitHub.github.com 플레이 화면프로젝트 설명네 글자짜리 단어의 두 글자만 보고 단어를 완성하는 단순한 게임입니다. 엔터를 눌러서 다음 문제로 넘어갈 수 있으며 오답을.. 이전 1 다음
