전체 카테고리326 [Numble] 연계_내가 만드는 나만의 유형테스트 회고 요즘 마케팅, 상품기획, 콘텐츠 기획에서 많이 보이는 키워드인 '나만의 유형검사' 를 주제로한 디프백, '디자인' '프론트엔드' '백엔드' 연계 딥다이브를 6주간 진행했었습니다. 23.05.26 ~ 23.07.06 디프백 연계_ 내가 만드는 나만의 유형테스트 연계_ 내가 만드는 성격유형테스트 www.numble.it 시작전 넘블에서 마련한 오프라인 네트워킹을 통해 팀원들을 볼 수 있었고 그 덕분인지 이후 온라인(디스코드)에서 크게 어색함을 찾아볼 수 없었습니다. 여러 사람들과 함께 공통 목표를 통해 나가면서 재미도 있었고 트러블도 있었지만 무엇보다 무언가를 함께 만들어 간다는 것과 디스코드가 쉬질 않아 그동안 한 배를 탄 동료가 있다는 것이 좋았습니다. 회사일 때문에 많은 시간을 투자할 수 없었고 많이 .. 2023. 7. 17. 리액트네이티브, 목표추가 모달, 추가, 지우기, 이미지 새 목표 추가 버튼 클릭 모달로 입력 창이 나타나고 목표추가 추가 완료시 모달창이 사라지고 다시 메인 창이 보여짐 화면 크기 이상 늘어날 시 스크롤 기능 작동 App.js import { useState } from 'react'; import { StyleSheet, View, FlatList, Button} from 'react-native'; import { StatusBar } from 'expo-status-bar'; import GoalItem from './components/GoalItem'; import GoalInput from './components/GoalInput'; export default function App() { const [modalIsVisible, setModal.. 2023. 6. 14. 리엑트네이티브 프로퍼티, 컴포넌트 나누기 GoalItem 부분 나누기 App.js const addGoalHandler = () => { setCourseGoals((currentCourseGoals) => [ ...currentCourseGoals, { text: enteredText, id: Math.random().toString() }, ]); } { return ; }} keyExtractor={(item, index) => { return item.id; }} alwaysBounceVertical={false} /> GoalItem.js import { StyleSheet, View, Text } from "react-native"; function GoalItem(props) { return ( {props.text} ); } ex.. 2023. 5. 22. 리액트네이티브 스타일링, FlatList 리액트 네이티브 디버 npm install --save @react-native-community/cli-debugger-ui $ react-devtools 애뮬레이트 실행 or 재실행(ctrl + m - Reload) 그러면 이렇게 React 개발할 때 사용하던 devtools 가 작동됩니다. 컴포넌트의 주요 역할 다른 자식 컴포넌트들을 구조화하고 묶음 HTML 요소 (div, p ,input) 과 같은 요소 사용불가 > 웹이 아니기 때문에 네이티브 views로 컴파일할 수 없음. 컴포넌트 스타일링과 CSS 관계 React Native 컴포넌트 스타일링은 CSS의 영향을 받아 만들어짐 const styles = StyleSheet.create({})을 사용하는 이유 StyleSheet를 통해 유효성 검.. 2023. 5. 21. Vue 3 쇼핑몰 만들기 - 2 (+ Spring Boot) 기능 추가 장바구니 주문하기 상품 Card.vue {{item.name}} {{ lib.getNumberFormatted(item.price) }}원 {{ lib.getNumberFormatted(item.price - (item.price * item.discountPer / 100)) }} {{ item.discountPer }}% 스프링부트 컨트롤러 @PostMapping("/api/cart/items/{itemId}") public ResponseEntity pushCartItem(@PathVariable int itemId, @CookieValue(value = "token", required = false) String token){ isTokenValid(token); int memberId.. 2023. 4. 20. [Numble] Spring으로 타임딜 서버 구축 - 트러블 슈팅과 회고 4 (핀포인트, nGrinder) 10. Pinpoint 설치 약 8시간 삽질 pinpoint는 대규모 분산 시스템에서의 성능 모니터링과 분석을 위한 도구로, 다양한 기능과 통계 정보를 제공합니다. 10.1. 핀포인트 설치 pinpoint-apm/pinpoint-docker: Official Dockerized components of the Pinpoint (github.com) 깃허브에 설치하는 방법이 나와있다. java 와 도커가 설치돼있기 때문에 docker-compose를 통해 설치할 것입니다. 설치전 현재 아키텍처에 대해 보여주자면 젠킨스를 통해 배포 서버를 원격으로 배포중이기 때문에 *(중요)배포 서버에 root 가 아닌 배포 사용자로 접속후 설치 진행해야됨 (이것때매 삽질,, 나중에 agent가 jar파일을 root로 설치.. 2023. 4. 17. [Numble] Spring으로 타임딜 서버 구축 - 트러블 슈팅과 회고 3 (동시성 처리) 9. 동시성 구현 개요 스프링에서는 하나의 요청에 스레드 풀에서 스레드를 하나 꺼내 한 요청을 수행합니다. 만약 여러 요청이 올 경우 여러 스레드들이 동시에 요청을 수행을 할 것입니다. 이러한 멀티 스레드 환경에서 자원들이 공유되는 상황에서 프로그래밍을 할 때, 타이밍에 의한 Race Condition(경쟁상태 : 여러 개의 스레드 혹은 프로세스가 공유 데이터를 동시에 변경하려고 할 때 생기는 문제) 가 발생해 문제를 야기할 수도 있습니다. 동시성 문제는 변경되는 데이터에 의해 발생한다고 생각한다.(변경되기 전의 데이터에 대한 접근과 변경된 후에 데이터에 대한 접근에 대한 데이터 정합성 문제) 그래서 변경되는 부분을 focus 해서 처리하자. 동시성문제 처리에 있어서 동시성, 가시성, 원자성에 대한 용어.. 2023. 4. 17. [Numble] Spring으로 타임딜 서버 구축 - 트러블 슈팅과 회고 2 (CI/CD) 8. 네이버 클라우드에서 CI/CD 구축 무중단 배포 과정 푸시를 하면 젠킨스 서버에서 젠킨스가 webhook으로 인식 해당 깃허브 레포지토리를 pull 한뒤 gradle로 빌드하여 .jar 파일 완성 도커는 기존 컨테이너 종료시키고, 컨테이너와 이미지 삭제 jenkins 에서 Dockerfile 빌드하여 Docker hub로 push 배포서버에서 Docker hub에 있는 jar 파일을 이미지로 가져오고 실행 (pull & run) 8.1. 젠킨스 구축용 서버에서 젠킨스, 도커 설치 [Jenkins] CentOS에 Jenkins 설치하기 (tistory.com) 설치 목차 1. jdk11 설치 및 환경변수 설정 2. 빌드 도구 설치 (Gradle) 3. 젠킨스 설치 4. 도커 설치 젠킨스 이용하여 도커.. 2023. 4. 17. [Numble] Spring으로 타임딜 서버 구축 - 트러블 슈팅과 회고 1 (DB, 아키텍처, 테스트) 1. ERD 작성 나름대로 스스로 ERD를 설계했습니다. 타임딜 이라는 것은 상품에서 확장된 느낌이라 생각했습니다. 재설정된 세일가격, 제한물량, 시작시간을 추가했습니다. 타임딜 상품은 일반상품과 동일하게 상품명, 상품설명 등을 가질 수 있다고 생각했습니다. 한 상품으로 여러 타임테이블을 생성할 수 있다고 생각하여 상품과 타임딜 테이블을 1:N으로 설정했습니다. 유저와 상품의 관계테이블로 구매테이블이 생성됩니다. 2. API목록 API 명세 각각의 도메인 별로 API 정리 3. 와이어프레임 피그마로 작성 4. 아키텍처 젠킨스 서버와 배포 서버를 운영하였습니다. 젠킨스 서버에서 GitHub 코드를 pull 하여 코드를 가져오고 빌드시켜 DockerHub에 Push 합니다. 배포 서버에서 젠킨스를 통해 원격.. 2023. 4. 17. Vue 3 쇼핑몰 만들기 - 1 (+ Spring Boot) Spring Boot 인텔리제이에서 간단하게 DataBase 사용하기 - View - Tool Windows - Database - Data Source 로그인 JWT 적용하고, 쿠키에 토큰 저장 개발자 도구에서 응용프로그램(애플리케이션)에서 확인가능 컨트롤러 @RestController public class AccountController { @Autowired private MemberRepository memberRepository; @PostMapping("/api/account/login") public ResponseEntity login(@RequestBody Map loginDto, HttpServletResponse httpServletResponse){ Member member = m.. 2023. 4. 16. VUE 3 간단한 메모앱 실습 뷰 명령어 npm install -g @vue/cli 뷰 프로젝트 생성 vue create frontend 실행 cd .\frontend\ npm run serve 실행 화면 코드 App.vue Ground 컴포넌트 하나로 만들었다. Ground.vue Ground 뷰는 헤더, 메모, 푸터 컴포넌트들로 이루어져 있다. * 부트스트랩을 적용시키기 위해 index.html에 cdn을 작성했다. Memo.vue + 추가 {{ d }} template 태그 내에는 화면을 구성할 코드를 보통 작성한다. + 추가 {{ d }} v-for을 통해서 반복을 처리한다. 액션 처리는 @를 붙인다. 표시할 데이터는 중괄호 2개를 붙여 표현한다. {{ d }} js 코드는 script 태그내에 작성 import {reacti.. 2023. 4. 13. [Numble] Spring으로 타임딜 서버 구축 - 클린코드를 포함한 리팩토링 (TOP3 선정!) 처음 참가한 넘블 벡엔드 챌린지에서 무려 TOP3 안에 들게 되었습니다!! 👏👏👏👏👏 감사하게도 처음으로 현직자 분에게 코드리뷰를 받게 되었고 코드리뷰 받은 것과 클린코드(좋은 코드)를 토대로 리팩토링을 할 것입니다. 총평에 대한 코멘트 블로그와 깃허브 read me 칭찬을 받았습니다! llsrrll96/numble-timedeal-server: 넘블챌린지-Spring으로 타임딜 서버 구축하기 (github.com) 성능테스트에서 TPS 개선은 미흡했습니다 ㅠ 아직 테스트 지표를 보고 성능 개선에 대한 지식이 부족: 책이나 강의를 보아야겠습니다. API 명세를 노션으로 정리해 두었습니다. Swagger 를 사용하여 문서화를 한 경험이 있었으니 이번 챌린지에는 적용하지는 않았습니다. projects 를 활.. 2023. 4. 9. 이전 1 2 3 4 5 6 ··· 28 다음