narlo의 Devlog

프로그래머스 - 프론트엔드 미니 데브코스 React II Divider 컴포넌트 위 아래 또는 좌우로 나누는 컴포넌트로 사용 footer에 이용약관이나 개인정보처리방침 등을 넣을 때 divider를 이용할 수 있다. Skeleton 컴포넌트 로딩을 보여줄 때 사용 Flux 컴포넌트 레이아웃을 쉽게 만들기 위해 사용 기업설명회 쎄트랙아이 전민연구소, 문지연구소 인공위성, 지상국 시스템, 부품들 개발 자회사 중 영상 제공, 영상분석 서비스 개발 자회사 O 도전과 기술혼, 고객에 대한 진실, 구성원의 안녕 -> 잘 알고있으면 자소서 작성에 도움이 될 것 인재상 정직, 책임감, 배려, 성과 자체채용홈페이지로 서류접수 신입 경력 상관없이 pt면접 - 자기소개 및 경력에 대해서(10분이내) 3,4월 10,11월 공..

프로그래머스 - 프론트엔드 미니 데브코스 upload 컴포넌트 단점은 꾸밀수가 없다는 것 => toggle을 이용하여 숨기고 다른 스타일을 보여줄 수 있다. onDrop, onDragEnter, onDragLeave, onDragOver 이벤트를 이용하여 파일드롭을 구현할 수 있다. - preventDefault를 이용하여 브라우저 기본 이벤트를 막고, - stopPropagation을 이용하여 부모나 자식 컴포넌트로 이벤트가 전파되는 것을 막는다. Badge 컴포넌트 sns에서 알림 등이 왔을 때 알림이 몇개가 쌓였는지 확인할 수 있는 UI를 Badge라고 부른다. maxCount, showZero prop을 이용하여 100 이상인 경우 100+로 표현하거나, 0인 경우 표시되지 않도록 구현할 수 있다..

팀 프로젝트 구현 Component vs Element https://ko.reactjs.org/docs/rendering-elements.html 엘리먼트 렌더링 – React A JavaScript library for building user interfaces ko.reactjs.org Component HTML, Style, 로직을 담을 수 있으며, 상태와 이벤트를 가질 수 있다. 컴포넌트는 트리 구조로 이루어져 있다. props라는 입력을 받아 화면에 어떻게 표시되는지를 기술하는 Element를 반환하는 함수이다. 컴포넌트의 이름은 항상 대문자로 시작한다. - 함수 컴포넌트 - 클래스 컴포넌트 여러 개의 컴포넌트가 모여 하나의 App을 만든다. Element React 앱의 가장 작은 단위로,..

프로그래머스 - 프론트엔드 미니 데브코스 프론트엔드에서 검색 기능 구현해보기 https://github.com/narlo23/SW_Academy_React/tree/search GitHub - narlo23/SW_Academy_React: CNU SW Academy React 학습을 위한 레포입니다. CNU SW Academy React 학습을 위한 레포입니다. Contribute to narlo23/SW_Academy_React development by creating an account on GitHub. github.com 이모지 JSON 파일을 이용해 emoji, title, description을 컴포넌트로 만들어 화면에 띄우고, filter를 이용하여 검색을 구현하였다. 각 행을 클릭하면 이..

프로그래머스 - 프론트엔드 미니 데브코스 React 강의 듣기 css 속성 중 objectFit을 이용하여 이미지의 모드를 적용할 수 있다. cover, fill, contain 속성을 가질 수 있다. storybook 정의 시, control 타입을 inline-radio로 지정하여 radio 타입으로 선택받을 수 있도록 구현할 수 있다. Intersection Observer API 이용해 lazy loading 구현하기 https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API Intersection Observer API - Web APIs | MDN The Intersection Observer API provides a..

프로젝트 구현 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으로 만들 수 있다. => 여러 중복 로직을 제거하고, 코드도 더 깔끔하게 작성할 ..

역량평가 시험 (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..

프로그래머스 - 프론트엔드 미니 데브코스 자동 저장 편집기 만들기 - 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..