본문 바로가기

전체 글49

[5주차] 20220411 엘리스 TIL (비동기 복습, Node.js) 스타트업 기술 스택 확인할 수 있는 사이트 https://www.codenary.co.kr/ 스타트업들의 기술 스택과 기술 블로그를 한눈에 살펴보세요 | 코드너리 네이버, 카카오, 토스, 당근마켓과 같이 요즘 핫한 스타트업은 어떤 기술 스택을 사용하고 있을까요? 코드너리에서 국내 100개가 넘는 스타트업의 기술 정보를 확인하세요. www.codenary.co.kr 프론트엔드 기술면접 관련 공부 자료 https://github.com/JaeYeopHan/Interview_Question_for_Beginner GitHub - JaeYeopHan/Interview_Question_for_Beginner: Technical-Interview guidelines written for those who start.. 2022. 6. 30.
[4주차] 20220429 엘리스 TIL (JavaScript 심화) 01. 행맨 게임 만들기 01. 행맨 게임 소개 • 알파벳을 하나씩 선택하여 주어진 기회 안에 단어를 맞추는 게임. • 초기에는 단어의 길이와 공백 정도의 정보만 주어진다. • 알파벳을 하나씩 선택할 때마다, 그 알파벳이 들어 있는 위치가 드러난다. • 단어에 들어 있지 않은 알파벳을 선택하면 점차 행맨이 완성된다. • 총 7번의 기회, 혹은 60초 안에 단어를 맞추지 못하면 패배한다. 02. 행맨 게임 코드 구조 - 상태 관리 상태관리란? 행맨 게임에서는 남은 시간, 남은 기회, 선택한 알파벳, 게임의 진행 상태 등의 데이터를 저장하고, 그 정보에 따라 필요한 UI를 화면에 그려야 한다. 이때, 데이터를 앱의 상태라 한다. 앱의 상태는 하나의 State 객체로 관리한다.(이 State 객체는 불변한다... 2022. 6. 30.
[4주차] 20220428 엘리스 TIL (JavaScript 심화) 04 async / await async / await Promise를 활용한 비동기코드를 간결하게 작성하는 문법 (syntactic sugar 라고도 함) async/await 문법으로 비동기코드를 동기코드처럼 간결하게 작성할 수 있다. async 함수와 await 키워드를 이용한다 await 키워드는 반드시 async 함수 안에서만 사용해야 한다 async 로 선언된 함수는 반드시 Promise를 리턴한다 async 함수 async function asyncFunc() { let data = await fetchData() let user = await fetchUser(data) return user } async 함수는 function 키워드 앞에 async를 붙여 만든다 async 함수 내부에서.. 2022. 6. 30.
[4주차] 20220427 엘리스 TIL (JavaScript 심화) ** JSON 프로퍼티의 키는 문자열 큰 따옴표로 묶어줘야 한다. * db.json 의 내용을 변경한다고 바로 반영되지 않는다. ** json 저장소 생성 명령어(port 주소 조정해서 생성) npx json-server --watch -p 3004 db.json -p 3004 부분이 꼭 들어가야한다. 3004 부분이 주소 조정 부분 *** promise hell (callback hell) fetch('http://localhost:3004/topics') .then(function(response){ return response.json(); }) .then(function(topics){ let firstId = topics[0].id; fetch('http://localhost:3004/topic.. 2022. 6. 30.
[2주차] 20220412 엘리스 TIL (JavaScript) ** for문 배열 순회, for ... of 반복문 https://celltong.tistory.com/entry/JavaScript-%EB%B0%B0%EC%97%B4-%ED%95%98%EB%82%98%ED%95%98%EB%82%98-%EC%B6%9C%EB%A0%A5%ED%95%98%EA%B8%B0-for%EB%AC%B8-for-of-forEach?category=992498 https://bigtop.tistory.com/59 [JavaScript] 자바스크립트 for...of 반복문 이해하기 for.. of 반복문이란? for.. of 반복문은 일반적으로 배열에 많이 사용되는데, 배열의 요소 개수만큼 반복하고, 반복 때마다 각 요소들을 사용할 수 있는 변수가 주어지는 독특한 반복문이라고 할 수 bi.. 2022. 6. 30.
[2주차] 20220413 엘리스 TIL (JavaScript) ** 실습 ••• lorem inline 계열의 아무 의미없이 태그를 래핑하는 역할을 해주는 태그 = block 계열의 아무 의미없이 태그를 래핑하는 역할을 해주는 태그 = ** 일단은 어떻게든 구현만 되는 쪽으로 생각해보도록 하자 (최대한 세련된 코드를 짜려는 생각이 오히려 코드를 짜는 데 방해가 될 수 있음) *** innerHTML 두가지 목적 특정 태그 안에다 내용을 꽂아넣을 때 특정 태그 안의 정보를 가져올 때 ** innerHTML, innerTEXT 차이점 innerTEXT 안에는 태그를 넣을 수 없다(그냥 텍스트로만 출력됨), 위에 기술한 innerHTML 두가지 목적 중 2번째만을 충족하는 것이 목적 innerTEXT = 웹페이지 태그를 제외한 모든 텍스트를 긁어오는 데 활용(태그없이 텍.. 2022. 6. 30.
[PROJECT 1주차 - 2] 회의록 및 간단한 회고 전날 하나의 디스코드 팀 채팅 채널에서만 회의를 진행하고 사안들을 공유하니까 백엔드와 프론트엔드의 안건들, 각종 링크들이 섞여서 가독성이 많이 떨어지는 것을 확인했다.. 따라서 22팀 전용 디스코드 서버를 새로 파 백엔드/프론트엔드 채널을 나눠 회의하고 안건을 주고받았는데 이전보다 더 편해진 것을 느꼈다!! 기존 채팅방은 주요 공지방으로! 오늘은 팀원분들과 처음으로 오프라인 만남을 가진 날이었다. 선릉역에 있는 엘리스 미팅장을 미리 대여하여 12시에 만나 회의를 하고 각자 코딩하였다! 오늘은 각자 분배받은 역할을 확고히 하였고, 프론트엔드에서는 주로 스켈레톤 내에서 반복되는 html 코드(헤더 (nav) 부분)를 모듈화 시키고자 하는 회의, sass, ejs, pug 같은 걸 활용해 코드를 작성해도 될지.. 2022. 5. 25.
[PROJECT 1주차 - 1] 회의록 및 간단한 회고 우선 우리팀은 5명으로 구성되어 있고, 프론트 3명 / 백엔드 2명 조합이다! 그리고 나는 프론트엔드 단에 속해 있으면서 이 팀의 팀장을 맡았다!! 내가 팀원들에게 도움이 되는 팀장이었으면 좋겠다.... 😂😂 화이팅!! 일단 크게 오늘 해야할 것은 역할분담 브랜치 생성 DB 연결 이었다!!! 오전 세미나를 듣고, 우선 엘리스에서 제공해 준 gitlab에서 팀 repository를 작성한 뒤 거기서 브랜치 생성 및 commit 연습을 하였다. 나를 포함한 팀원분들이 아직 gitlab 에 익숙하지 않아서 이미 생성된 gitlab repository를 날릴 각오를 하고 수 많은 테스트를 하였다(하지만 이렇게 연습을 했음에도.. 기존에 만들어진 repository를 그냥 사용하기로 해서 master branch.. 2022. 5. 25.
TIL이 뜸해진 이유(어쩌면 핑계?) && 엘리스에서의 근황 엘리스를 들으면서 그동안 TIL을 매일 쓰고자 마음 먹었었는데... 중간에 필기 분량이 많은(강의가 이해가 안돼서 그냥 강사님이 말씀하시는 내용을 전부 받아적은) 강의가 있어서 그 부분을 빼고 포스팅을 하려다 보니... 그러면서 순서대로 올리고 싶어서 이후 포스팅을 전부 임시저장 하다보니... 그날의 포스팅 이후 작성해둔게 10개 가량... 어느새 블로그와 멀어지게 되었다... 애초에 강의 내용을 필사하고, 판서에 필기한 다음 블로그로 옮기는 방식은 비효율적이었던 것 같기도 하다. 그래서 블로그 접근성이 더 떨어진걸지도😥 이론 한번 더 필사할 시간에 예시코드 한번 더 쳐보는게 몇배는 더!! 도움될거라는 동료 레이서의 조언을 받아들여 강의를 듣는 방식을 바꾸었다. 아무튼! TIL을 안쓴것이 아닙니다..😂😭.. 2022. 5. 25.
[2주차] 20220411 엘리스 TIL (JavaScript) * 자바스크립트 = 프로그래밍 언어 어떤 순서대로 진행되는 과정을 정의하는 것 = program 이걸 만드는 것 = programming 만드는 사람 = programmer ** 프로그래밍 처음 배울 때 먼저 익히면 좋은 것 이 언어는 어떤 데이터 타입을 가지고 있는가(데이터 타입별로 연산 방법이 달라짐) 리터럴 표기법 ** console 창 JavaScript를 실행하는 창 * console.log로 JS 간단한 실습 해봤던 것 alert('안녕!') prompt('아이디?') confirm('진짜?') document.querySelector('body') speechSynthrsis.speak(newSpeechSynthrsisUtterance('꼭이요')) *** 자바스크립트 실행방법 3가지 con.. 2022. 4. 15.
[1주차] 20220408 엘리스 TIL (Github) 1장. Git 이란? git = 효율적인 협업을 위해 사용 git은 각각의 파일을 스냅샷 형태로 저장함. * Git의 특징 가지치기와 병합 - 여러가지의 작업을 섞이지 않게 독립적으로 진행할 수 있음 가볍고 빠르다 - git은 모든 작업이 로컬에서 진행된다. subversion(SVN)과의 차이점 (SVN = 항상 네트워크가 필요(코드가 서버에 올라가있고, 사용자들이 접속해서 열람함) / git = 코드를 공유할 때만 네트워크에 접속(사용자들이 각자 모든 코드를 가지고 있음)) 분산작업에 매우 효율적 데이터 보장 - 모든 파일은 체크섬이라는 검사를 거침(체크섬 = 16진수 문자열(=commit id)로 이루어짐 -> commit id가 같다? = 파일 or 구성이 완벽히 같다는 것 => 누가 어떤 파일을.. 2022. 4. 13.
[1주차] 20220407 엘리스 TIL (CSS 애니메이션, 반응형 웹) 1강. 움직이는 웹사이트 제작 01. Transform transform : 웹사이트의 특정영역에서 오브젝트의 각도를 틀거나, 회전하거나 할 때 사용하는게 transform rotate, scale rotate(숫자deg) = 입력한 각도만큼 회전(평면적인 회전), 음수도 입력 가능 scale(x값(width), y값(height)) = 숫자는 비율을 의미한다(width를 x값 만큼 곱해서 출력, height를 y값 만큼 곱해서 출력), 축소를 시키고 싶을 땐 " 0.5 " 와 같은 소숫값을 입력해주면 됨 skew, translate skew(숫자deg(x축), 숫자deg(y축)) = x축 y축을 기준으로 입력한 각도만큼 비틂(입체적인 회전) translate(숫자px(x축), 숫자px(y축)) = 선택.. 2022. 4. 8.
[1주차] 20220406 엘리스 TIL (HTML, CSS) 오늘은 생각보다 새로운 내용은 많이 없었다! 그래서 복습할 내용이 많진 않은데 그게 섭섭하다가도 그래도 중간에 이런날도 있어야지 싶고... 그래도 이고잉 코치님이 한번씩 주시는 반찬(꿀팁)은 너무 꿀맛이다 맨날 한 10개씩 받아먹고싶다.. 생코도 괜히 한번씩 더 들어가 보게 된다 ( https://seomal.com/map/1 ) 암튼 시작 🍕 시작하기 앞서 반찬 3가지 🍕 자동으로 코드 editing point 로 이동하는 방법이 있다? (이부분 약간 놓쳐서 검색도 하면서 찾아봤는데 잘 모르겠다... 나중에 계속 서치해보기) ( + vscode 단축키들 모음 : https://jhnyang.tistory.com/408 ) 코드치다가 '화살표로 끝까지 이동 -> 엔터' 를 한방에 하는 단축키!!! = C.. 2022. 4. 7.
[1주차] 20220405 엘리스 TIL (HTML, CSS) ※ 오늘은 내가 중요하다 생각하는 내용, 헷갈렸던 내용 위주로만 발췌하여 적을 예정 ※ 자세한 내용은 PDF 보면서 다시 공부하기!! 01장. 웹사이트의 정보와 디자인 01. 웹을 구성하는 요소 웹사이트 제작시 고려사항 웹 표준 = 웹사이트를 작성할때 따라야 할 공식 표준이나 기술 규격 웹 접근성 = 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식 크로스 브라우징 = 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법 02. HTML 기본 태그 HTML이란? (Hyper Text Markup Language) = 웹사이트에서 눈에 보이는 정보나 특정 구역을 설정할 때 사용하는 언어 (시간이 지남에 따라 HTML에서 자주 사용되지 않는 용어들은 사라지고, 시대에 맞추어 새.. 2022. 4. 6.
[1주차] 20220404 엘리스 TIL (HTML, CSS) 웹 작업 기본적인 컴포넌트 -> 설치(1. 브라우저, 2. 코드 편집기) / 실행(코딩) / 배포 ++ 비주얼 스튜디오에서 index.html 파일을 끌어서 브라우저 창에 올리면 브라우저에서 바로 열림 (단축키 : ctrl + O) * HTML 태그 = 열리는 태그, 닫히는 태그가 있고 슬래쉬로 구분한다. 🍟 사이트 추천 1 🍟 : https://unsplash.com/ Beautiful Free Images & Pictures | Unsplash Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos. unsplash.com 맘에 드는.. 2022. 4. 5.

티스토리툴바