본문 바로가기
반응형

IT151

[엘리스 AI 트랙] 두 번째 프로젝트 완료 그리고 발표 두 번째 프로젝트 완료 그리고 발표 뜻밖의 문제 프로젝트를 시작한 지 2주가 지나 3주차가 되었을 무렵 팀에 뒤늦게 문제가 발생했다. 개인사정으로 프론트엔드 팀원 한 명이 중도에 프로젝트를 하차하게 되어, 그 자리를 매꾸어야했다. 프로젝트 마감일정까지 4일이 채 남지 않은 시점에서 심적으로 너무 힘들었지만, 다른 방법이 없지 않나, 책임지고 이번 프로젝트를 마무리하고 싶었다. 함께 작업하는 데이터분석팀, 백엔드팀, 그리고 다른 팀원에게도 피해를 끼치고 싶지 않았다. 최초 계획했던 일정과 상당히 달라졌지만 앞으로 나아가야 하니까, 긴급하게 계획을 변경하게 되었고, 남아있는 프론트엔드 팀원과 우리의 프로젝트를 마무리하기 위해 서로가 책임지고 잘 할 수 있는 부분을 논의하였고, 자연스럽게 업무를 분담할 수 있.. 2021. 10. 24.
[엘리스 AI 트랙] 두 번째 프로젝트 어느덧 엘리스에 교육을 받은 지 4개월이 다 되어 간다. 내가 과연 성장했을까? 처음보다 나은 사람은 되었을까? 내가 바라던 개발자가 되기 위해 나는 노력을 하고 있을까? 첫 번째 프로젝트 이후 나는 조금 나태해진걸까 아니면 번아웃이 온 걸까 싶을 정도로 잠깐 공부를 내려놓았던 적이 있었다. 처음 엘리스 교육을 들을 때의 나의 미래에 대한 모습과 환상에 대한 확신이, 공부를 하면서 점점 희미해져 가고있었고 그것이 나를 두렵게 만들기도 했던 것 같다. 하지만 시간은 흘렀고 어느덧 첫 번째의 개인프로젝트와 달리, 팀으로 이루어져 하나의 프로젝트를 진행하여야 하는 시간은 다가왔다. (두 번째 프로젝트가 끝나면, 그동안 하지 못했던 첫 번째 프로젝트에 대한 포스팅과 리팩토링을 반드시 진행할 예정이다!) 그리고 .. 2021. 10. 10.
세션 vs 토큰 vs 쿠키 해당 내용은 노마드코더 '세션 vs 토큰 vs 쿠키' 영상을 보고 정리한 것입니다. 세션 vs 토큰 vs 쿠키 Auth(인증)을 통해 서비스는 유저를 검증할 수 있다. Auth를 만들어야 한다면 쿠키, 세션, 토큰, JWT 같은 단어를 들어봤을 것이다. 쿠키, 세션, 토큰, JWT 아직도 헷갈리고 뭐가 무엇인지 정확히 구분이 가지않았다. 이 단어들의 각각 의미가 무엇이고, 어떻게 연결되는지 알아보자! 쿠키 쿠키 vs 토큰 결론적으로 쿠키와 토큰은 아주 다른것이다. 쿠키 쿠키를 이용해서, 서버는 클라이언트에 관한 것을 기억하기 위해 클라이언트의 브라우저에 데이터를 넣을 수 있다. 클라이언트가 사이트에 방문할 경우, 브라우저는 서버에 요청을 보내고 서버는 이에 응답(response)을 실시한다. 응답에는 모.. 2021. 10. 6.
[엘리스 AI 트랙 2기] 1차 스터디 및 2차 스터디 엘리스 스터디 엘리스 AI 트랙 2기 사전 설명회를 통해서, 엘리스에서 스터디를 적극적으로 권장하고 다양한 프로그램을 개설할 것이라는 이야기를 미리 들었었다. 그렇기 때문에 개발 공부를 본격적으로는 처음 하는 것이기 때문에, 어떤 스터디를 참여할지 많은 고민을 했던 것 같다. 코딩 테스트 준비를 해야 하나... CS 공부를 해야 하나... 엘리스 교육과정을 복습하는 스터디를 해야 하나 정말 많은 고민을 했고, 일단 어떤 스터디를 하게 되더라도 후회하지 않게 열심히 공부를 하리라 다짐했다(다짐만 했던 것 같네....😩) 엘리스 AI 트랙 2기 교육과정이 시작되었고, 엄청나게 많은 지식들을 머리에 담아보려다 토 나오는 줄 알았다..... 진짜 자료구조와 알고리즘 공포의 2주 차.... 덕분에 일단 자료구조와.. 2021. 9. 26.
[React] "리액트를 다루는 기술" 13.6 리액트 라우터 부가 기능 (함수형 컴포넌트로 변경해보기) [리액트를 다루는 기술] 13장 "리액트 라우터로 SPA 개발하기" "13.6 리액트 라우터 부가 기능" 학습 중 "13.6.1 history" 관련 학습 내용에서 사용된 class component를 function component로 변경해보았습니다. Class Component Code import React, { Component } from "react"; class HistorySample extends Component { // 뒤로 가기 handleGoBack = () => { this.props.history.goBack(); }; // 홈으로 이동 handleGoHome = () => { this.props.history.push("/"); }; componentDidMount() { .. 2021. 9. 19.
[React] "리액트를 다루는 기술" 9장 컴포넌트 스타일링 / React Sass-loader 설정 커스터마이징 오류 이슈 '리액트를 다루는 기술' 9장 컴포넌트 스타일링 학습 중 utils.scss 파일을 불러올 때 현재 생성된 utils.scss 파일의 위치와 상관없이 불러오고, 매번 불러오는 상황이 번거로울 때 utils.scss 파일을 자동으로 불러와, @import 를 사용하지 않아도 정상적으로 작동하기 위한 방법을 학습하였습니다. yarn eject를 통해 생성된 config 폴더 내 존재하는 webpack.config.js에 커스터마이징 된 sass-loader를 webpack.config.js에 넣어주려고 최종적으로 '리액트를 다루는 기술'에 적힌 코드를 입력하니, { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders({ importLoaders:.. 2021. 9. 17.
[React] useCallback '리액트를 다루는 기술'에 나오는 useCallback 개념을 정리하고, 이해가 가지 않아 찾아 본 내용들을 정리해보겠습니다. useCallback useMemo와 상당히 비슷한 함수 주로 렌더링 성능을 최적화해야 하는 상황에서 사용 ➡️ useCallback 사용 시 만들어 놨던 함수의 재사용이 가능 useCallback(fn, deps)은 useMemo(() => fn, deps)와 동일 useCallback 함수를 사용하지 않으면, 컴포넌트 내에 선언된 함수들은 컴포넌트가 리렌더링될 때마다 새로 만들어진 함수를 사용하게 됩니다. ▶️ 대부분의 경우에는 문제가 되지 않으나, 컴포넌트의 렌더링이 자주 발생하거나 렌더링해야 할 컴포넌트의 개수가 많아지면 이 부분을 최적화해 주는 것이 좋습니다. useCa.. 2021. 9. 17.
렉시컬 스코프(Lexical Scope) 재찬님께서 디코방에 올려주신 설명을 보다 렉시컬 스코프에 대해 정확히 인지를 하지 못하고 있다는 것을 깨닫고 렉시컬 스코프에 대해 알아보았습니다. (참고자료: https://poiemaweb.com/js-scope) Scope | PoiemaWeb 스코프는 참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙으로 자바스크립트는 이 규칙대로 식별자를 찾는다. poiemaweb.com 스코프에 대한 개념은 JavaScript를 이미 많이 접하셨기 때문에 자세한 내용은 언급하지 않도록 하겠습니다. 렉시컬 스코프에 대해 알아보기 전에, 예시 코드를 보겠습니다. var x = 1; function foo() { var x =.. 2021. 9. 17.
[React] 리액트를 다루는 기술 1-5장 키워드 정리 키워드: React, JSX, 컴포넌트, 이벤트, ref 1장 리액트 시작 React 1. React란 무엇인가? React는 페이스북에서 제공하는 자바스크립트 UI 라이브러리 ➡️ 즉, React 프론트엔드 라이브러리의 일종 Vue, Angular 등은 프레임워크인 데 반해 React는 라이브러리 ➡️ 웹을 만드는 데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 그런만큼 가볍고, 선택의 폭이 넓다. React는 컴포넌트 기반 ➡️ 컴포넌트에 데이터를 흘려보내면 설계된 대로 UI가 조립되어 사용자에게 보여진다. 자바스크립트 기반 프레임워크 (출처: 리액트를 다루는 기술) 1.1 React를 사용하는 이유 프로젝트 규모가 크고 다양한 UI와 상호작용이 필요하다면 DOM 요소 하나하나를 직접 관리하.. 2021. 9. 17.
728x90
반응형

티스토리툴바