narlo의 Devlog

팀 프로젝트 구현 https://github.com/CNU-SW6/proj-fe/tree/mainpage 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 메뉴바 이벤트 구현 코딩테스트

5회차(2023.02.02 19:00 ~ 22:00) 오늘의 목표 1. 프로그래머스 강의 1. 프로그래머스 강의 Redux Todo 프로젝트 Redux로 리팩토링하기 라이브러리 추천 redux-logger - 상태가 변경될 때 console에 log를 찍어주는 middleware 라이브러리 npm i redux-logger npm i @types/redux-logger redux-devtools-extension - redux의 상태를 편하게 보고 추적할 수 있다. npm i redux-devtools-extension redux-persist 상태가 localStorage나 sessionStorage를 통해 남아 있을 수 있도록 도와주는 middleware 라이브러리 npm i redux-persist..

프로그래머스 - 프론트엔드 미니 데브코스 SPA의 역사(Single Page Application) - 태초에는 MPA(Multi Page Application) - 2000년 초반, 그 이전 - javascript의 영향이 크지 않았음 점점 브라우저에 요구사항이 많아짐 => Ajax(Asynchronous JavaScript and Xml) 등장 - 구글 지도 : 지도를 동적으로 보여줌 페이지 이동 없이 페이지를 가져올 수 있지 않을까? - Hashbang 화면 전환 시 깜빡임이 없어지고, 로딩도 보여줄 수 있게 되었다. 문제점으로는 검색 엔진에 잡히지 않는다는 것 HTML5 History API - pushState - replaceState 페이지 이동없이 브라우저의 주소 변경 가능 pjax pus..

프로그래머스 - 프론트엔드 미니 데브코스 axios를 이용한 네트워크 API 실습 axios - 브라우저나 Node.js에서 사용 가능한 http 클라이언트 라이브러리 - promise 기반으로 동작 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. As of Oct 2022, serving ~1.7 billion requests each month. jsonplaceholder.typicode.com useReducer - u..

프로그래머스 - 프론트엔드 미니 데브코스 Firebase api, database, hosting, 데이터 분석 등 다양한 도구를 지원 Netlify 배포가 매우 쉽고 간단 github repo와 연결하도록 되어 있음 서버에 한국이 없다 => 접속이 느리다 Vercel Netlify와 비슷 한국 서버가 있어서 훨씬 빠르다 spa routing ReactDOM.createPortal - 원하는 곳으로 jsx를 위치시키고 싶을 때 사용 https://github.com/narlo23/SW_Academy_React/tree/storybook GitHub - narlo23/SW_Academy_React: CNU SW Academy React 학습을 위한 레포입니다. CNU SW Academy React 학습을 ..

3주차 목표 컴퓨터비전 최신 논문 리뷰, 딥러닝 모델 실습 컴퓨터비전 컴퓨터에게 시각 데이터 처리 능력을 부여하는 기술 CNN(Convolution Neural Networks) - 컨볼루션 신경망 - 이미지나 영상 데이터 처리에 쓰임 - Convolution(전처리) - DNN은 1차원 형태의 데이터를 사용하는데, 영상 데이터를 1차원 형태로 변화시키며 공간적 / 지역적 정보가 손실됨 => 영상 데이터를 그대로 받아 공간적 / 지역적 정보를 유지하는 해결책이 CNN 1. Image Classification - 이미지가 들어왔을 때, 그 이미지가 어떤 클래스에 해당하는지 판단 Challenges 1. Illumination(빛에 의해 사물이 잘 보이지 않는 경우) 2. Occlusion(가려져서 잘 보..

프로그래머스 - 프론트엔드 미니 데브코스 타입스크립트(TypeScript) - 타입이 적용된 JavaScript - MS에서 만듦 - 장점 - 타입이 있다는 것 => 안정성 : 컴파일 단계에서 미리 오류를 감지할 수 있다. => 가독성 : 타입을 보고 무엇을 하는지 미리 알 수 있다. - 단점 - 초기 설정을 해야한다. - 스크립트 언어의 유연성이 낮아진다. - 컴파일 시간이 길어질 수 있다. (한 번 빌드해야 한다. => 빌드에 시간이 오래 걸린다.) 문법 1. 타입 주석과 타입 추론 - 변수, 상수 혹은 반환값이 무슨 타입인지를 나타내는 것을 의미 - 생략하면 컴파일 타임에 알아낸다. let a: number = 1;// 타입 주석 let b = 2;// 타입 추론 let c: boolean = fa..

4회차(2023.01.26 19:00 ~ 22:00) 오늘의 목표 1. Github 꾸미기 2. 프로그래머스 React 강의 듣기 1. Github 꾸미기 https://github.com/narlo23/narlo23 GitHub - narlo23/narlo23 Contribute to narlo23/narlo23 development by creating an account on GitHub. github.com README를 작성해보았다. 기술스택이 프론트엔드에만 많이 집중되있다고 느꼈다. Spring을 꾸준히 공부해서 빨리 추가할 수 있으면 좋겠다. 백준 티어가 생각보다 낮다. 코딩테스트 문제를 더 열심히 풀어야겠다. 그동안 진행했던 프로젝트도 README를 잘 작성해서 정리해놓으면 좋겠다고 생각했..

프로그래머스 - 프론트엔드 미니 데브코스 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인 경우 표시되지 않도록 구현할 수 있다..