본문 바로가기

전체 글62

[06AUG, 2021] TIL 벌써 8월의 첫 주 금요일이다! 시간이 빠르다 빨라⏰ ✔️ Absolute path(절대 경로) 사용 그동안 나는 Relative path(상대경로)를 사용했다. 오늘 검색하다 보니 상대 경로는 프로젝트 규모가 커지면 너무 비효율적이고 알아보기 어렵다는 단점이 크다는 것을 알았다. 그래서 절대 경로를 사용하려 했는데 사용하기 위해서 처음 세팅이 필요하다는 것을 알았다. 공식문서에 잘 나와있어서 금방 참고해서 쓸 수 있었다. jsconfig.json 또는 tsconfig.json 파일에서 이 코드만 추가해주면 된다. // jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } //상대경로 import Post from .... 2021. 8. 7.
[31JUL, 2021] TIL 7월의 마지막 TIL✨ 어제는 백신 맞고 일찍 자버렸다..! 사람마다 반응이 다르다는데 나는 졸림과 무기력함이 많이 온 것 같다..! 오늘도 많이 공부한 건 아니지만 간단히 정리하고 슝슝~ ✔️ TS에서 enum과 object 차이 요즘 계속 JS로 공부하고 코딩하고 있어서 TS를 다시 복습하다 enum부분에서 object(객체)와 차이에 대해 정리해본다. object는 새로운 속성을 자유롭게 추가할 수 있지만, enum 은 선언할 때 이후에 변경할 수 없다. object의 속성 값은 JS가 허용하는 모든 타입이 올 수 있지만, enum 의 속성 값으로는 문자열 혹은 숫자만 허용된다. 이렇기에 같은 ‘종류’를 나타내는 여러 개의 숫자 혹은 문자열을 다뤄야 하는데, 각각 적당한 이름을 붙여서 코드의 가독성.. 2021. 7. 31.
[29JUL, 2021] TIL 벌써 7월 29일 TIL이라니 껄껄..🤭 ✔️ 바벨(Babel) (웹팩을 정리하면서 바벨도 함께 정리할까 하다 블로그에는 간단히만 정리하고 싶어서 TIL로 뺐다.) 바벨은 트랜스 파일러다. 그래서 역할은 브라우저마다 동일하게 동작할 수 있는 코드로 변환시켜주는 것이다. 코드 변환은 아래와 같이 3단계에 걸쳐 이루어진다. 1. 코드를 각 토큰으로 분해한다. 2. ES5 스펙으로 변환한다. 3. 변환된 코드를 출력한다. ✔️ npm install 옵션 그동안 나는 npm insall --save -dev만 썼었는데 오늘 npm install -D를 보고 뭐지 하고 검색해보고 정리하게 되었다. npm install npm install --save 과거에는 dependencies에 패키지를 추가하기 위해 밑의.. 2021. 7. 29.
모듈과 모듈 번들러란?! (feat. Webpack) react에서 create-react-app을 사용하면 리액트에 집중할 수 있지만 웹팩, 바벨 등 번들링 도구들이 어떻게 동작하는지는 잘 모르고 넘어가게 된다. 하지만 프론트엔드 개발 환경을 이해하기 위해선 꼭 알아야 한다고 생각하기 때문에 정리를 해보고자 한다. 📝❗️ 모듈(Module)이란?! 한줄로 정의하자면 모듈은 파일 하나하나, 특정 기능을 갖는 작은 코드 단위를 의미한다. 우리가 개발을 하면서 규모가 커지면 언젠가 파일을 여러 개로 분리해야 하는 시점이 온다. 이때 분리된 파일 각각을 모듈이라고 부르는 것이다. 목적에 따라, 기능별로 여러 개의 파일로 분리해서 관리할 수 있으며 모듈로 분리하는 과정을 모듈화라고 한다. 그렇다면 모듈을 왜 사용해야 하는 걸까?! 모듈이 필요한 이유 : 브라우저 .. 2021. 7. 27.
[16JUL, 2021] TIL 오늘의 TIL은 간단한 개념 정리로 고고! ✔️ Sass / SCSS Sass(Syntactically Awesome Style Sheets), SCSS (Sassy CSS) 모두 CSS Preprocessor(CSS 전(예비) 처리기)이다. SCSS는 Sass의 3버전에서 새롭게 등장했고, Sass와 여러 가지 문법 차이가 있지만 더 넓은 범용성과 호환성 등을 장점으로 SCSS사용을 권장하고 있다고 한다. 둘의 간단하고 알아보기 쉬운 차이는 {}(중괄호)와 ;(세미콜론)의 유무이다. /* Sass */ .list width: 100px float: left li color: red background: url("./image.jpg") /* SCSS */ .list { width: 100px; floa.. 2021. 7. 17.
[14JUL, 2021] TIL 오늘은 듣고 싶은 강의가 있어서 찾아 듣다 보니 이렇게 늦게 TIL을..! 피곤하니 간단히 쓰고 사라지겠다 😌 ✔️ Move Zeroes LeetCode의 문제인데 왠지 기록하고 싶은 문제여서 기록해본다..! Input: nums = [0,1,0,3,12] Output: [1,3,12,0,0] nums 배열의 모든 0 값을 뒤로 이동시키고, 0이 아닌 다른 값들의 순서는 그대로 유지하는데 새로운 배열을 생성하지 않고 풀어야 하는 문제였다. function moveZeroes (nums) { let idx = 0; //nums[i]가 0이 아닐 때, nums[idx]에 nums[i]값 대입 for(let i = 0; i < nums.length; i++) { if(nums[i] !== 0) { nums[i.. 2021. 7. 15.
[13JUL, 2021] TIL 오늘은 쿠키와 세션을 정리하니 시간이 빨리 지나갔다 ⏰ ✨ 그래서 오늘은 정리 + 알고리즘 한 문제를 풀어서 쿠키, 세션 정리한 링크를 남기고 총총 사라지겠다!! (TIL을 안 쓸까 하다 짧은 TIL도 한 번 써보고 싶어서ㅎㅎ!! 얼마 안 되는 TIL역사상 가장 짧은 글! ㅎㅎ) 👉🏻 Link: Cookie & Session 2021. 7. 14.
Cookie & Session 정리 쿠키와 세션은 Http 프로토콜의 무상태성(stateless)이 가져오는 문제점을 해결할 수 있다. 무상태성은 리소스 낭비를 줄일 수 있지만 어떤 사용자가 접속했는지 정보 파악 등을 할 수 없다는 문제점이 있기 때문이다. 그럼 문제점을 해결할 수 있는데 두 가지의 차이점은 무엇인지 알아보자. Cookie (쿠키) : 쿠키는 클라이언트에 저장되는 키와 값(key, value)이 들어있는 작은 데이터 파일이다. 서버에서 HTTP 응답 Header에 Set-Cookie 속성을 이용하여 클라이언트에 쿠키를 제공한다. 그럼 브라우저에 저장이 되고, 이후 해당 도메인에 대해 쿠키가 존재하면 웹 브라우저는 http 요청 시 요청 헤더에 쿠키를 함께 전달한다. 쿠키는 하나의 도메인 당 20개의 값만 가질 수 있고 하나.. 2021. 7. 13.
[12JUL, 2021] TIL 오늘부터 시작된 4단계가 슬프긴 하지만 나는 열심히 내 할 일을 하면 되지!! 빨리 코로나 사라졌으면...! 🙏🏻 오늘은 당연히 알아야 하는 내용..?! 을 이렇게 늦게 정리하는 나를 반성하며..! ( 하지만 기록하는 습관은 좋은 거니까😉 ) ✔️ let / const / var let, const는 블록 스코프 (block scope)로 {...} 이러한 블록 내에서 접근이 가능하다. 반면 var는 함수 스코프(function scope)로 블록기준으로 스코프가 생기지 않기 때문에 블록 밖에서도 접근이 가능하다. 또한 let, const, var는 재할당과 재선언이 가능 여부에서도 차이점을 가진다. let : 재선언 불가능, 재할당 가능 const : 재선언, 재할당 불가능 var : 재선언, 재할당 .. 2021. 7. 13.

티스토리툴바