림찌의 개발일기 💻

✅ 무엇을 공부했는지 - CSR, SSR, TTV, TTI, SSG ✅ 공부한 것에 대한 짧막한 요약 클라이언트사이드 렌더링 : 웹 사이트 접속시 우선 빈 html 파일을 클라에 불러오고 그 후에 동적인 js 와 같은 프레임워크, 라이브러리를 불러온다. 장점 : TTV 와 TTI 가 불일치할 일이 없다. 단점 : 검색엔진최적화가 최악이다. 빈화면만 최초에 보내지기 때문에 검색엔진에 걸러지게 된다. 또한 최초 로딩이 엄청 길수도.... 서버사이드 렌더링 : 웹 사이트 접속시 필요한 데이터들을 모두 가져와 html 파일을 생성하게 되고, 이렇게 만들어진 html 파일을 동적으로 제어할 수 있는 소스 코드를 클라이언트에 보내주게 된다. 장점 : 최초 로딩이 빠르다, 검색엔진최적화에 좋다 단점 : TTV 와 T..

✅ 무엇을 공부했는지 - 자바스크립트 클래스의 사용법 / 재활용성 ✅ 공부한 것에 대한 짧막한 요약 - 자바스크립트 클래스의 사용법 / 재활용성 자바스크립트 클래스 내부에서 함수를 생성하면 function 키워드 없이 그냥 함수 이름만 적어서 생성해줘도 된다. 만들어준 클래스는 `new` 연산자를 통해 클래스를 생성하게 되면 constructor가 실행이 되는데, 여기서 초기값을 설정해주면 된다. 클래스를 new 연산자를 이용해 생성할때, 인자 값으로 서로 다른 함수 이름을 보내주면, 같은 클래스를 사용하지만 받아온 함수 값은 달라서 한 개의 클래스로 다양한 오브젝트를 생성할 수 있다. 그리고 클래스를 이용해 함수를 여러번 호출할때... 매번 인자값에 함수 이름을 적어주기 번거로우면 constructor..

✅ 무엇을 공부했는지 - async / await - promise 의 apis ✅ 공부한 것에 대한 짧막한 요약 async, await 은 promise 를 좀더 간편하게 사용하도록 도와주는 syntactic sugar 이다. 사용법은 함수 앞에 async를 붙이면 자동으로 그 블록안에 있는 코드들은 promise에 감싸지게 된다. await을 사용하면 몇 초뒤에 실행할건지 등의 제약(?) 을 걸수 있다. 이를 활용하면 프로미스 체이닝에 의한 콜백지옥을 빗겨나갈 수 있다. 또한 서로 관계 없이 병렬적으로 실행되는 함수라면, 서로 기다려줄 필요가 없으니 프로미스를 미리 불러와서 실행시켜서 기다릴 필요 없이 동시 출력을 하는게 효율적이다. 이러한 구조를 좀더 코드로 짧게 구현할 수 있는 프로미스 api가 ..

✅ 무엇을 공부했는지 - promise 의 생성 방법 - promise 에서 then, catch, finally 사용법 - 콜백 지옥 함수를 promise 로 변경하기 ✅ 공부한 것에 대한 짧막한 요약 - promise 는 자바스크립트 내장함수이고 exector 라는 콜백함수를 전달해주어야 하는데 이 안에서 성공,실패 두가지 콜백함수를 또 전달해주어야 한다. then은 성공시, catch는 실패시, finally는 성공,실패 상관없이 맨 마지막에 호출된다. 그리고 프로미스 체이닝을 통해 then을 묶어서 비동기적인 처리를 묶어서 처리할 수 있다. catch를 쓰지 않고 에러메세지를 도출하면 unCautgt 에러가 뜨므로 catch를 통해서 잡아야한다. 에러 메세지는 new Error 연산자를 통해 도출..

✅ 무엇을 공부했는지 - 콜백함수, 콜백지옥의 문제점 - js 최대공약수, 최소공배수 구하기 (유클리드 호제법) ✅ 공부한 것에 대한 짧막한 요약 - 콜백함수를 통해 동기, 비동기에 대한 개념을 다시 파악했고 함수 선언시에 이뤄지는 자바스크립트 호이스팅에 대해서도 다시 복습이 됐다. 그리고 콜백 지옥이 얼마나 가독성이 떨어지는가...얼마나 안좋은 코드인가에 대해서도 다시 한번 각인이 됐다. - js 를 통해 최대공약수, 최소공배수를 출력하는 알고리즘 문제에 대해 풀이를 알아보았다. 유클리드 호제법이라는 나누기를 통해 최대 공약수를 구하고, 이렇게 구한 최대 공약수를 통해 최대 공배수도 구할 수 있다는 걸 알았다. ✅ 공부한 것에 대한 느낀점 - 알고리즘 문제에 대한 중요성.... 수학적 개념에 대한 중요..

✅ 무엇을 공부했는지 - 리액트 context API ✅ 공부한 것에 대한 짧막한 요약 - context API 를 통한 전역 상태 관리 - createContext 사용법 ✅ 공부한 것에 대한 느낀점 - context API 말고 리덕스를 먼저 접했어서 context API는 개념만 알고 실제 구현을 해본적은 없었다. 실제로 구현을 해보니 나름 편리..한거 같았으나 그래도 리덕스 쪽이 더 편한거 같다. 어쨌든 리덕스도 context API 를 기반으로 만든거니...동적으로 사용하는 context API는 좀 복잡하다고 나는 느꼈다...

✅ 무엇을 공부했는지 리액트 스타일링에 대한 방법들과 간단한 예제를 통한 사용 ✅ 공부한 것에 대한 짧막한 요약 리액트로 스타일링을 할 때는 일반 css를 주는 방법도 있고 sass(scss) 를 사용하는 방법도 있고 css Module를 사용하고 (이 안에서도 classnames 라이브러리를 사용하는 등... 여러가지 방법론이 있다) styled-compoents 라는 라이브러리를 설치해서 사용하는 방법도 알아 보았다. 예전에 제로초님 강의에서 사용한 ant-design 도 한번 더 살펴보았다... ✅ 공부한 것에 대한 느낀점 중복되는 부분을 함수로 빼서 처리하면 굉장히 편리할 거 같은데... 여러번 뭔갈 만들어봐야 감이 잡히지 않을까 싶다..! 퍼블리셔 경력을 이용해서 이것저것 해보자구!

✅ 무엇을 공부했는지 - 리액트 Hook 1. useMemo 2. useCallback 3. useRef 4. 커스텀 Hook ✅ 공부한 것에 대한 짧막한 요약 - 리액트 Hooks 정리 - 커스텀 훅 만들어보기, 커스텀 훅 사용해보기 ✅ 공부한 것에 대한 느낀점 - hook을 어떨 때 사용해야할지 전보다 감이 오는 것 같다. 커스텀 Hook을 사용하면 코드가 엄청 짧아질 거같은데 응용하는데엔 연습이 필요할거 같다! 🤔

✅ 무엇을 공부했는지 - 리액트 라이프 사이클 - 리액트 Hooks ✅ 공부한 것에 대한 짧막한 요약 - 리액트 라이프 사이클 정리 - 리액트 Hooks 정리 ✅ 공부한 것에 대한 느낀점 - 프로젝트를 한번 경험해보고 한 번더 리액트 개념을 들여다 보니, 잘 모르고 썼던 것들에 대한 이해가 더 잘 되는것 같았다. 그리고 hooks 가 정말 간편하다는걸... 다시 한번 느꼈다!

Today I Learned 요즘 클라우드 웹 개발자 과정을 수강하며 프로젝트를 만드느라 공부를 제대로 못했다 😂 다시 기초부터! 튼튼히! 다져보자 ✅ 무엇을 공부했는지 ✅ 공부한 것에 대한 짧막한 요약 ✅ 공부한 것에 대한 느낀점 이제부터 꾸준히 작성하는 버릇을 들이자. 이렇게 세가지를 중심으로 작성해보자 ㅎㅎ 아자아자 화이팅!