반응형

분류 전체보기 269

오랜만에 쓰는 3개월차의 기록

오랜만에 블로그를 켰다. 사실 지난 한달간 블로그를 쳐다볼 시간이 없었다. 그간 회사에서 우여곡절이 있었지만 다시 제자리로 돌아오게 되었다. 야근이 익숙해지고, 야근 택시가 익숙해졌다. 오지 않을 것 같은 수습기간의 끝이 다가오고 있다. 그 동안 무엇을 했는지 뒤돌아보니 뭔가 이것저것 많이 한 것 같다. 못할 것 같았다. 개발은 너무 어려웠다. 물론 지금도 어렵다. 뭘 공부해야할지도 모르겠고... 어떻게 손 대야할지도 모르는 태스크들이 주어지기도 했다. 그런데, 중요한 것은 나는 혼자가 아니라는 것이다. 그 생각이 들자 압박과 스트레스에서 한 발자국 뒤로 갈 수 있었다. 나는 정말 유능한 개발자분들과 일하고 있다. N사 출신의 대표님을 비롯한 사수님, 새로 오신 앱 개발자분 뿐만 아니라 나보다 훨씬 어리..

[TIL] 211002 오늘 공부는 git clone / xcode 설치 / commandline 설치

회사에서 노트북을 바꾸면서 개발 환경을 다시 세팅해야 할 일이 생겼다. 역시나 git clone할때 헷갈려서 동료분이 도와주셨는데, 집에와서 스스로 다시 해보고 싶어서 추석선물로 받은 맥북에 처음부터 해봤다. 한번 해본거라 금방할 수 있었다. (사실 한번 실수해서 폴더 지우고 다시 함) 토요일인데 사무실로 안가고 푹 자다가 파주에 "포레스팅 아웃팅스"라는 식물원같은 카페에 왔다... 힐링... 이런데서 코딩하니까 기분이 좋다... ❤️ 보안때문에 brew를 설치하지 못해서 xCode를 받아서 설치했다. 13버전이 오류가 많은 것 같아서 12.5 버전으로 받았다. https://developer.apple.com/download/all/ 로그인 - Apple idmsa.apple.com 나는 애플에서 직접..

개발일지/TIL 2021.10.02

[TIL] 210924 오늘 공부는 스터디( 메모리 구조 - 스택,힙 / 자바스크립트의 비동기 처리 과정)

입사 동료분과 스터디를 했다. 이벤트 루프를 주제로 공부하다가, 비동기 처리 과정을 좀 더 자세히 공부하면 좋겠다고 생각했다. 뿐만 아니라 useRef로 만들어진 객체가 힙에 저장되어 같은 주소값을 참조하여 렌더링에 영향을 받지 않는다고 했다. 힙이 무엇인지 알려면 먼저 메모리 구조를 공부해야 할 것 같다. 끝나고 웹팩하고 바벨 정복하러 가야한다. 바쁘다 바빠 개린이 😎 메모리의 구조 프로그램이 실행되려면 메모리에 먼저 로드 되어야 함. 프로그램에서 사용되는 변수를 저장할 메모리가 필요하다. 운영체제는 프로그램을 위해 메모리 공간을 할당해주고, 운영체제가 제공하는 메모리는 총 4가지 영역이다. 1. 코드(code) : 실행할 프로그램의 코드가 저장되는 영역, CPU는 코드 영역에 저장된 명령어를 하나씩 ..

개발일지/TIL 2021.09.25

[TIL] 210923 오늘 공부는 디바운싱, 쓰로틀링

추석연휴가 끝났다. 역시나 오늘도 크런치모드로 열일하는 회사다ㅎㅎ 신입 나부랭이라 언제나 하는일은 작고 귀엽지만, 폭풍 구글링으로 버텨내고 있다. 디바운싱과 쓰로틀링 요것은 항해때 무한 스크롤을 하려고 lodash 라이브러리를 쓰면서 겉핥기로 했었던 것인데, 현업코드에서 디바운싱을 만나게 되었다. 꼭 라이브러리를 쓰지 않아도, 무한 스크롤을 구현하거나 검색창을 구현하지 않아도 성능을 위해 쓴다. 🌼 디바운싱: 연이어 호출되는 함수들 중 마지막 함수(또는 제일 처음)만 호출하도록 하는 것 - 검색어 개발에서 많이 쓰임 - 만약 검색어 개발하는데 쓰로틀링을 쓴다면? 이상한(미완성된) 검색어에도 무조건 일정 시간마다 호출되기 때문에 서버에 부하를 줄 수 있으니 디바운싱을 쓴다. - 꼭 검색어 개발에만 쓰이는것..

개발일지/TIL 2021.09.24

[CS] 프론트엔드 에러 핸들링

https://www.youtube.com/watch?v=FXtooPhupr4 우아한 테크톡의 프론트엔드 에러 핸들링에 대한 영상을 보고, 이 부분에 대해 좀 더 공부해보고 싶었다!! ✨ 오류: 하드웨어의 고장 또는 소프트웨어가 본래의 동작을 할 수 없는 상태 ✨ 소프트웨어의 오류는 컴파일 오류, 런타임 오류로 나뉜다. - 컴파일 오류: 코드가 컴파일 될 때 컴파일러가 해석하지 못해서 발생 - 런타임 오류: 프로그램이 동작할 때 발견할 수 있는 에러 -> 자바스크립트에서 이를 예외라고 부른다. 자바스크립트 언어는 동적 타입 언어이기 때문에 프로그램이 동작할 때 실시간으로 타입이 결정되어서 모든 에러가 컴파일 단계가 아닌 런타임 환경에서 발생한다. 이를 방지하려면 타입스크립트를 사용 ✨ 예외: 런타임 오류..

개발공부/CS 2021.09.18

[리액트] 스터디 (git 포함)

✨ useEffect dependency에 state로 인한 무한 렌더링을 야기하는 경우*(코드) - 무한루프에 빠지는 경우를 먼저 알아야할 것 같다. 1) 의존성 배열이 없을 경우 2) 의존성 배열이 있으나, useEffect 함수 내에서 의존성 배열 내의 값을 수정하고 있는 경우 3) 의존성 배열이 있으나, useEffect내에서 state의 변경을 야기하는 경우 const obj = { name: "amy", age:28 } const [myInfo, setMyInfo] = useState({...obj}); useEffect(()=>{ setMyInfo({...myInfo, age:22}); },[obj]) obj가 바뀌지 않았는데, 무한 렌더링이 발생한다. 이 이슈를 찾는데 사수님께서 알려주셨다..

[리액트를 다루는 기술] ~71p (2-4-6 리액트 & JSX) // 한달만에 독파하기

📚📚리다기 한달만에 독파하기 스타뜨!!!!! 1. 리액트 시작 - 리액트는 V(view)만 신경 쓰는 라이브러리 - render() 함수는 뷰가 어떻게 생겼는지, 작동하는지에 대한 객체를 반환한다. 렌더링 작업이 끝나면 가지고 있는 정보로 HTML 마크업을 만들어서 DOM 요소에 주입한다. - DOM은 Document Object Model의 약어이다. 객체로 문서 구조를 표현하는 방법으로 XML과 HTML로 작성한다. Tree 형태라 특정 노드를 찾고, 수정하고, 제거, 추가 할 수 있다. - DOM 자체는 빠르지만 매 업데이트마다 돔에 접근하여 변화를 주면 성능이슈 발생. 리액트는 가상돔을 두고 변화된 것만 감지하여 실제 돔을 변경하여 성능을 개선했다. 즉 리액트는 페이스북이 리액트를 만든 이유인 "..

책책책book 2021.09.18

[WIL] 9월 3주차 회고 WIL (Weekly I Learned)

으..! 아니 회고를 쓰는 날이 왜이렇게 빨리 돌아오는지 모르겠다. 오늘도 연속 2주 토요일 출근을 했다!~ 일하는 것은 아니지만 (일도 하긴 함) 밀렸던 공부를 좀 하고 싶은데, 그러기엔 하루가 너무 짧다 ㅠㅠ 그리고 체력도 모자름. 그래도 이번엔 연휴가 있어서 체력관리 하면서 공부할 수 있을 것 같다. 얼마나 기다려왔던 추석인디 딱히 명절 같은 느낌이 없다. 여튼 명절 끝나면 10월이 되고, 그럼 근무한지 2달째가 될 것이다. 실력에 비해 시간이 너무 빨리가는 것 같아 시간이 흐르는게 무섭다. 여튼 리액트 관련 책을 한 권 독파하기로 했다. 그래서 리다기를 목표로 잡았다. 1000페이지라 한달 안에 읽으려면 하루에 33페이지는 읽어야 함. 오키 고고 그리고 리액트 네이티브 공부를 시작하려고 한다. 그..

개발일지/WIL 2021.09.18

[TIL] 2109017 오늘 공부는 sessionStorage

세션 스토리지! 들어보기만 했지 사용할일이 있을까 했는데 오늘 써보게 되었다. 쿠키 / 웹스토리지(로컬,세션 스토리지)와의 차이를 먼저 알고 넘어가면 좋을 것 같다. 쿠키는 매 http요청마다 api 호출이 되어 서버에 부담이 된다고 한다. 웹 스토리지는 쿠키의 단점을 보완해서 만든 기술로, 서버가 아닌 클라이언트에 정보를 저장한다. 서버를 건드리지 않음! 보통 자동 로그인은 로컬 스토리지에 저장하고, 비 로그인한 장바구니는 세션 스토리지에 저장한다고 한다.(오호) 로컬 스토리지랑 쿠키에만 뭘 담아봤는데 세션 스토리지에 담게되다니, 어려울줄 알았는데 사용법이 로컬 스토리지랑 똑같다. 다만 로컬 스토리지와 약간의 차이점이 있다. 탭별로 값을 다르게 두고 싶어서 크롬에 탭 아이디가 있는지 검색하다가 세션 스..

개발일지/TIL 2021.09.17

[TIL] 2109016 오늘 공부는 getElementById/useRef

리액트에서 getElementsByClassName 로 html 태그들을 가져오려고 했다. 리액트에서 DOM에 직접 접근하기 위해 자바스크립트 코드를 쓰지말고 리액트에서 제공하는 useRef를 쓰는게 좋다는 코드 리뷰를 받았다. 이유는 여러가지가 있지만, 1. id를 사용하는 리스크, 컴포넌트는 여러개의 인스턴스를 가질 수 있기 때문 = id가 중복될 수 있다. - JSX 안에서 DOM에 id를 달면 해당 돔을 렌더링할때 그대로 전달된다고 한다. 컴포넌트를 여러번 사용하면 돔에서 유일해야하는 id가 여러개 생기는 이슈가 생길 수 있다고 한다. 2. ref를 사용하면 내가 정한 스코프에서만 접근할 수 있다. ref는 전역적으로 사용되지 않고 해당 컴포넌트 내부에서만 사용하기 때문에 1번의 문제가 해소된다...

개발일지/TIL 2021.09.17