분류 전체보기16 Next.js 초기세팅( +TypeScript + Emotion (styled)) React + Styled-Components로 작업했던 프로젝트를 Next.js로 리팩토링하는데 초기 설정도 쉽지 않았다. 프론트엔드에서 중요하다고 생각되는 next.js와 typescript를 알아가고 싶은 마음으로 세팅을 시작하게 되었다. 📎 Reference https://snupi.tistory.com/203 처음에 VSCode를 열고 desktop에서 작업할 폴더를 만들고 싶어 cd desktop을 한 다음 TypeScript 기반으로 Next.js 를 설치했다. 명령어에서 .은 vscode에 열려 있는 폴더 기준으로 생성하겠다는 의미다. yarn create next-app *$*{*프로젝트 폴더명/.}* --typescript 그러면 아래와 같이 선택지가 나온다. Tailwind Css 말.. 2024. 3. 14. Project | 의료인 인증 미니앱(23.07.31~08.24) 치즈톡에서 쓰던 “의료인 면허 인증” 치즈톡을 통하지 않고도 바로 진입하여 의료인 인증을 할 수 있는 서비스로 만드는 작업을 했다. 서비스의 유저 플로우 📎 User Flow 1.Redirect가 있는 경우 치즈톡 → 회원가입 → 미니앱 본인인증(passVerify) → 면허 타입&면허 번호 선택해서 확인(Certification/Verify) → 성공하면 치즈톡으로 이동하여 면허인증카드 획득 Redirect가 없는 경우 홈화면(Home) → 면허타입 선택(SelectType)→ 미니앱 본인인증(PassVerify) → 면허번호 확인(LicenseNumber) → 성공하면 같은 경로에서 면허인증 카드를 획득(Card) 🎨 Figma(리다이렉트가 없는 경우 flow 화면) theme color :(블루 계.. 2024. 3. 14. JavaScript | MPA와 SPA & SSR과 CSR MPA와 SPA MPA multi page application 의 약자 여러 페이지(HTML파일)로 구성된 웹 어플리케이션 클릭과 같이 인터렉션이 발생할 때마다 서버로부터 새로운 html 을 받아와서 해당 링크로 이동하여 페이지 전체를 새로 렌더링하는 전통적인 웹 페이지 구성 방식 SPA Single Page Application의 약자 하나의 페이지(HTML파일)로 구성된 웹 어플리케이션 브라우저에 최초에 한 번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식 단인 페이지 어플리케이션(SPA)는 현재 웹개발 트렌드 react/vue, 앵귤러와 같은 자바스크립트 프레임워크 등이 SPA 방식 SSR과 CSR - SSR은 새로운 파일을 불러오지만, CSR은 json.. 2023. 7. 4. TypeScript | 게시판 리스트 추가 기능 구현(+리스트번호 매기기) 게시판 리스트 추가하기 타입스크립트로 게시판 리스트 추가하기 기능 구현을 연습하고 있는데 문제점이 있었고 해결과정에서 사수님의 도움도 들어가있기 때문에 다시 생각해보고 적어보려고 한다. BoardItemType.tsx 'boardItemType' 이 나열되어 있는 목록 전체(배열)를 recoil상태관리 라이브러리를 사용해 'list' 에 할당해주었다. 는 boardItemType 으로 된 객체를 담고 있는 배열 타입으로 지정해준다는 거다. Atom은 상태의 일부를 나타내는데, Atom에 어떤 변화가 있으면 Atom 을 구독하는 모든 컴포넌트가 재렌더링된다. list.ts ‘BoardDetail’ 은 글쓰기 페이지로 'boardItemType' 이 나열되어 있는 배열인 'list' 를 가져왔다. ‘list.. 2023. 5. 20. 이전 1 2 3 4 다음
