본문 바로가기

All Posts107

[ES2021] 새로운 기능들 하루만 자고 일어나도 새롭게 변화하는 프론트엔드.. 매우 다이나믹하고... 나는 아직도 이전꺼도 배우는 중인데 벌써 ES2021이 나와버렸다...! 몇 안되는 개발자 인맥 중에서 먼저 알려주신 분 덕분에 ..! 뭔가 전체적으로 보면 축약이 된 것같다. &&= 등등과 같이... 점점 알아보기 위해서 공부를 해야한다는 느낌을 받았다! https://h3manth.com/ES2021/ ES2021 features list ES2021 as approved by the Ecma General Assembly h3manth.com 링크는 위와 같고! 당장 쓰지는 못하더라도 일단은 알아두고 기억해둬야겠다! 2021. 6. 29.
[vscode] ftp-simple로 원격에서 소스 수정하기 회사에서 여러가지의 이유로... 서버에 있는 소스를 수정해서 리팩토링 개발을 진행하게 되었다. 서버에서 테스트로 돌리고 그걸 보면서 확인..! 그럼 vim으로 다 해야할까 했지만 vscode는 ftp-simple 익스텐션으로 원격의 파일을 vscode로 불러올 수 있도록 할 수 있었다! 설정과정을 남겨본다..! 1. 일단 ftp-simple 익스텐션을 설치한다. 2. 아래 Startup Settings을 보고 따라하면되는데, ftp 설정을 하기 위해서 F1을 누른다. (맥에서는 fn + 1) 창에다가 ftp라고 치면 아래와 같은 리스트가 나온다. 여기서 설정을 위해서는 Config - FTP connection setting 을 누른다. 3. 그리고 설정을 입력하면 된다. 처음 설정은 name, host.. 2021. 6. 23.
[Git] 커밋 메세지 컨벤션(Commit Message Convention) 면접을 보다가 질문 중에 하나가 커밋 컨벤션에 대해서 질문이 나왔었다. 커밋 컨벤션을 알고 있는지, 왜 쓰면 좋은지에 대해서 물어본거 였는데, 사실 커밋을 기능단위로 쪼개는 등 이런 생각은 많이해왔지만 특별하게 어떠한 규칙으로 해봐야겠다는 생각은 구체적으로 해보지 않았다. 그래서 커밋컨벤션에 대해서 정리해보고자 한다. (이렇게 면접으로 지식과 반성이 +1 됩니다) Commit convention이라고 검색을 해보면 가장 먼저 나온 conventionalcommits.org 를 기반으로 하였다. https://www.conventionalcommits.org/en/v1.0.0/ Conventional Commits A specification for adding human and machine readab.. 2021. 6. 17.
[프론트엔드 개발자] 공부하고싶은 것들 자바 개발자에서 벌써 프론트엔드 개발자로 전직한지 1년 2개월즈음 되어버렸다..! 확실히 자바하면서 개발하는거보다 더 의욕적이고 공부하고 싶은것도 많아졌다! 지금까지 해왔던거와 공부하고싶은 것들을 정리하고 매일 봐야지(거짓말) 지금까지 해왔던 것 1. 방통대 입학 (2020년 9월) CS에 약하다고 생각이 드니 열심히 다니고 있고! 이제 두 학기를 보냈다. 이제 더 열심히 하고싶은데.. 다시 대학생이 되어버렸더니... 대학생 때의 마인드가 불쑥불쑥 등장한다. 2. Svelte 훑어서 개발해보기(찍먹) 회사에서 인스타그램 크롤링해서 행사에 쓰기 위헤서 작업한 프로젝트가 있었다. 그 때 당시에 Svelte에 대해서 처음 들었고 가볍고 러닝커브가 높지 않다고 해서 도전을 해보았다. 한 워킹데이로 20일 정도 .. 2021. 6. 16.
[React] 나만의 폴더 트리 구성 일단 Next를 사용하기 전, 나름대로 규칙을 가지고 폴더 트리를 구성하였다. 기본적인 스펙은 react-router, redux-saga를 썼을 때의 나만의 폴더 트리를 정리해보았다. 1. App.tsx 리액트 라우터를 정리해 두었다. 라우터가 여기저기 분산되어있으면 보기도 불편하고 유지보수가 어려워서 이쪽에 다 몰아 넣는 편. 2. components 페이지가 아닌 컴포넌트들을 정리해두었다. 특별한 페이지에서만 사용되는 컴포넌트는 페이지에 해당되는 폴더안에 두고 공통은 common 폴더 안에 두도록 정리했다. 3. lib 어플리케이션 내에서 공통으로 사용되는 함수들을 넣어놓는 곳! 주로 여러 어플리케이션에서 사용되는 것들이 많아서 많은 복붙을 하는 곳이기도 하다. 3-1. lib/api 백엔드와의 통.. 2021. 6. 7.
[Javascript] 실행컨텍스트 자바스크립트에서 실행가능한 코드가 발생하기 위해 필요한 환경 ** 실행가능한 코드 = 전역코드, 함수코드, Eval코드 자바스크립트 엔진이 코드를 실행하기 위해 실행에 필요한 정보를 수집함. ** 실행에 필요한 정보 : 변수 선언, 함수 선언, 스코프, this 실행 컨텍스트들은 물리적으로 stack의 형태로 관리됨. 실행 컨텍스트가 담긴 stack은 함수가 호출될때 마다 쌓이고 끝나면 사라짐 실행컨텍스트의 구조 변수 객체 객체에는 변수, 함수가 있고, 함수 실행 컨텍스트에는 인자(파라미터)도 포함됨 함수일 때 는 활성객체, 전역일 때는 전역객체를 가리킴(요것들이 변수 객체라고 보면됨) 실행에서 필요한 정보를 담음 스코프체인 실행컨텍스트의 해당되는 전역/함수가 참조할 수 있는 변수, 함수 선언 등의 정보.. 2021. 6. 2.
[Javascript] Closure(클로저) 기초적인 공부를 하면서 Closure클로저는 매우 많이 나오지만 정확히 왜 써야 하는지 항상 의문이었다. 그런김에 클로저에 대해 정리하고 왜 쓰는지 공부를 해보았다. 클로저는 야구에서는 마무리 투ㅅ.... 사실 클로저는 닫는다는 의미가 있다. 그렇다면 자바스크립트에서는 무엇을 닫아버리는 것일까? 결론부터 보면 클로저는 외부에서부터 데이터를 보호할 수 있다. 자바의 private 키워드와 비슷한 역할을 할 수 있다고 보면된다. 즉, 은닉을 할 수 있다는 건데.. 그렇다면 클로저는 어떻게 생겼길래 그러는 것인지 확인을 해보아야겠다. function outer(name) { let firstName = name; return function() { console.log(firstName); } } const .. 2021. 6. 1.
[Javascript] var, let, const var는 이전부터 Javscript에서 사용하는 변수 선언 키워드 이다. let과 const는 ES6 이후에 나온 변수 선언의 키워드 이다. var와 let, const의 차이는 스코프에 차이가 있다. var는 함수스코프로 함수에 따라 독립적인 변수를 갖게 된다. 하지만 let과 const는 블럭 스코프로 함수를 포함하여 모든 블럭에서 독립적인 변수를 갖게 된다. 또, var와 let은 값의 할당이 다양하지만, const는 변경할 수 없는 상수로 설정된다. 이 외에도.. var는 전역에서 설정하게 되면 window.변수이름 으로 사용할 수 있지만, let과 const는 전역객체에 할당되지 않는다.(약간 가상의 블럭에 쌓여있다고 생각이 든다!) 이 포스트에서는 무엇을 이야기해볼까.. Javascript는 .. 2021. 5. 31.
[Javascript] 이벤트 루프(Event Loop) 이벤트 루프에 알기 전에 먼저, 자바스크립트 엔진의 구조를 먼저 보아야한다. 자바스크립트 엔진의 구조는 힙(heap)과 콜스택(callStack)으로 이루어져 있다. 힙은 메모리를 저장하는 공간이고 콜스텍은 함수가 실행이 되면 해당 함수에 대한 호출이 stack에 쌓여지고 처리하는 역할을 한다. 일단 자바스크립트는 싱글 스레드의 형식이다. 즉, 한 번에 하나밖에 처리를 하지 못한다. 이 처리도 콜스택에 쌓이고 위에서부터 하나씩 처리해야 다음 처리가 가능하다. 그러면 setTimeout과 setInterval, ajax와 같은 처리들을 어떻게 하는 것일까? 얘네들은 알아서 시간에 맞춰서 실행되고 그러던데..? 이건 브라우저나 NodeJS에서 제공하는 이벤트 큐와 콜스택을 확인해주는 이벤트 루프가 있어서 가.. 2021. 5. 28.

티스토리툴바