narlo의 Devlog

프로젝트 구현 https://github.com/CNU-SW6/proj-fe GitHub - CNU-SW6/proj-fe: CNU SWAcademy 6조 frontend 레포입니다. CNU SWAcademy 6조 frontend 레포입니다. Contribute to CNU-SW6/proj-fe development by creating an account on GitHub. github.com eslint 설정이 거슬려서 갈아엎고 다시 시작했다. eslint 설정하는데 어려움이 많았다... 프로그래머스 강의에서 들은 storybook을 활용해보았다. npm run storybook 명령어를 실행하 localhost의 6006번 포트에 접속하면 storybook에 작성한 컴포넌트들을 확인할 수 있다. 버튼..

프론트엔드 미니 데브코스 useMemo 1. 함수 컴포넌트는 자신의 상태가 변경될 때 리렌더링된다. 2. 부모 컴포넌트로부터 받는 prop에 변경될 때 리렌더링된다. 3. 부모 컴포넌트의 상태가 변경되면 리렌더링된다. 3번은 불합리하다. 이를 해결하기위해 React.memo 이용 컴포넌트를 React.memo로 감싸면 리렌더링을 막을 수 있다. useCallback 함수가 다시 정의되는 것을 막기 위해 사용 함수를 useCallback으로 감싸주고, 두번째 인자로는 []를 넣어준다. Custom Hook(사용자 정의 hook) 기존 hook을 조합해서 사용 가능 자주 사용될 수 있는 상태 로직을 별도의 사용자 정의 hook으로 만들 수 있다. => 여러 중복 로직을 제거하고, 코드도 더 깔끔하게 작성할 ..

2주차 목표 자율주행개론 강의 리뷰 및 정리 자율주행차 센서 분석 자율주행개론 강의 리뷰 및 정리 자동차의 구조 - 차체 - 메인 차체 : 차체의 골격으로 하중, 충격, 진동에 충분히 견디어야 함 - 차체 외장 : 메인 차체에 설치되어 자동차의 스타일을 표현함 - 차체 내장 : 자동차의 거주성, 운전성, 안정성을 위한 장치 - Chassis - 엔진 : 자동차를 주행시키기 위해 동력을 발생하는 부분 - 동력전달장치 : 엔진에서 발생한 동력을 바퀴까지 전달하는 장치 - 조향장치 : 조향 핸들로 조향바퀴의 방향을 바꾸어 자동차를 직진 또는 선회시키는 장치 - 제동장치 : 주행 중의 자동차를 감속 또는 정지시키는 장치 - 현가장치 : 보디를 차축에 결합하는 부분으로 충격이나 흔들림을 막아주는 장치 - 프레임 ..

역량평가 시험 (10:00 ~ 11:00) 팀프로젝트 구현 협업 환경 세팅 및 로그인 페이지 UI 구현 https://github.com/CNU-SW6/proj-fe/tree/hj GitHub - CNU-SW6/proj-fe Contribute to CNU-SW6/proj-fe development by creating an account on GitHub. github.com 하석재강사님 강의 백엔드 - 성능 => 로드밸런싱(네트워크장비, L4/L7 스위치) L4(전송계층, TCP/UDP/포트) L7(응용계층, GET/PUT/POST/DELETE => REST) - 데이터 안정성 => DBMS(트랜잭션 / 이중화) WAS - DB(트랜잭션 / 이중화) + 로드밸런싱 1. Java - JDBC 2. Sp..

2회차(2023.01.12 19:00 ~ 22:00) 오늘의 목표 1. 객체지향, OS, DB, 네트워크 복습 1. 객체지향, OS, DB, 네트워크 복습 내일 SW 아카데미 시험이 있는 관계로 급하게 계획을 수정했다. 객체지향 컴파일 : 프로그램을 번역하는 과정 컴파일러 : 컴파일을 수행하는 주체 => 컴파일러는 프로그램을 번역하는 프로그램 컴파일러에 의해 번역되는 프로그래밍 언어 : C/C++, Java, OCmal 등 해석(interpretation) : 프로그램을 해석 & 실행하는 과정 인터프리터 : 해석을 수행하는 주체 => 인터프리터는 프로그램을 컴퓨터 대신 해석하는 프로그램 인터프리터에 의해 해석&실행되는 프로그래밍 언어 : Python, JavaScript 등 객체란? 객체 = Object..

프로그래머스 - 프론트엔드 미니 데브코스 자동 저장 편집기 만들기 - url에 따른 라우팅 처리 필요 debounce 같은 이벤트를 반복시킨 다음, 가장 마지막에 발생한 이벤트만 실행시키는 기 setTimeout을 이용해 1초 사이에 들어오는 입력을 감지 clearTimeout을 이용해 1초 사이에 들어오는 입력이 있다면 기존 작업을 밀고 새 작업 실행 입력 간격이 1초가 넘었을 때 storage에 저장이 되는 코드 localStorage와 DB에 저장하는 역할을 나누면 좀 더 안전하다. 클릭하지 않아도 클릭 이벤트를 발생시킬 수 있음(new Event) 서버에서 내려오는 개행값 \n textarea에서는 \n으로 개행을 처리해줌 \n을 모두 로 바꾸기 팀 프로젝트 https://github.com/CN..

장진수교수님 - 리눅스 운영체제(OS) - CPU, Memory, I/O device들을 관리하는 프로그램 - 다른 컴퓨터와 통신을 할 수 있게 도와주는 역할 - access control(접근제어) - 실행중인 프로세스를 관리 - HW에 접근할 수 있는 인터페이스를 제공 리눅스(Linux) - pc 기반 운영체제 - UNIX(서버용) => 개인용으로 만든 것이 Linux GNU(GNU'S Not Unix) - 자유 소프트웨어 - 소스코드를 다운받아 자유롭게 실행할 수 있다는 장점 Kernal - File Management - IPC(Inter process Communication) - CPU Scheduler - Process Management - Primary and Secondary Stora..

프로그래머스 - 프론트엔드 미니 데브코스 무한 스크롤 UI 구현하기 - 컨텐츠를 페이징하는 기법 중 하나 - 아래로 스크롤하다 컨텐츠의 마지막 요소를 볼 즈음 다음 컨텐츠가 있으면 불러오는 방식 1. window의 scroll 이벤트를 통해 스크롤링이 일어날 때마다 화면 전체의 height와 스크롤 위치를 통해 스크롤이 컨텐츠 끝 즈음에 다다랐는지 체크해서 처리하는 방식 scroll 할 때마다 이벤트가 발생하기 때문에 성능 문제가 발생할 수 있음 2. intersection observer 방식 window.addEventListener('scroll', () => { const isScrollEnded = (window.innerHeight + window.scrollY) + 100 >= documen..

프로그래머스 - 프론트엔드 미니 데브코스 (2023. 01. 05 19:00 ~ 22:00) https://narlo23.tistory.com/entry/2022-%EB%8F%99%EA%B3%84-%EB%AA%A8%EA%B0%81%EC%BD%94-1%ED%9A%8C%EC%B0%A8-%ED%9A%8C%EA%B3%A0%EB%A1%9D [2022 동계 모각코] 1회차 회고록 1회차(2023.01.05 19:00 ~ 22:00) 오늘의 목표 1. 프로그래머스 - React 강의 듣기 2. Spring 개요, 강의, 책 찾기 1. 프로그래머스 - React 강의 듣기 React 소개 리액트는 페이스북에서 만들어졌고, 2013년 5월에 narlo23.tistory.com 김종익교수님 - DB 복습 (2023.01...

1주차 목표 모빌리티 산업 트렌드 조사 기업 조사 발전 가능성 자율주행개론 최신동향 조사 모빌리티 산업 트렌드 조사 UAM(Urban Air Mobility) - 도심 항공 이동수단 - 도심항공교통은 항공기를 활용하여 사람과 화물을 운송하는 도시교통체계를 말한다. - 하늘을 이동 통로로 이용한다는 점에서 도심에서의 이동효율성을 극대화한 차세대 모빌리티 솔루션으로 떠올랐다. 대한민국 정부는 UAM 2025년 실용화를 목표로 법, 제도 정비 등 실증 시범사업을 단계적으로 추진하겠다고 밝혔다. 향후 3년간 국토교통부와 산업통상자원부가 협력해 자율비행 PAV 개발 사업을 공동으로 진행한다. 더불어 전문인력 양성, 수출 산업화 등 파급효과 극대화 방안도 함께 검토한다. 미국의 경우 지난 2005년 차세대교통시스템..