front-end

그동안 iOS 앱 개발을 하면서, 개발과 오류 해결은 조금 힘들지만 보람차고 재밌었다. 그런데 검색으로도 해결되지 않는 오류들을 많이 만나면서 제대로 된 방향으로 나아가고 있는지, 이렇게 얼레벌레 코드를 짜도 되는지, 리팩토링을 대체 어떻게 해야하지..? 깃헙은 이렇게

Day 1 OT, 대표님 강의, team building & mission, 코드라이언 (html & css 수강) 1. OT 안내. 2. 대표님 강의 3. team building & mission 4. 코드라이언 강의 수강 html & css 웹으로

멋사 프론트엔드 스쿨에서 코드라이언 계정을 발급받아서 진행했다!!사실 이건 크게 고찰해 본 적이 없다. 당연히... 웹을 만드는 근간인데다가 요즘은 반응형으로 엄청난 페이지를 짜는 기업들이 많지만 외국에서는 아직도 충분한 컴퓨팅 파워를 가진 기기를 가지지 않은 사람을

1일 1 커밋, 1 벨로그 규칙을 정하니까 나중에 글이 섞일 것 같아서 정규 수업날 배우고 찾아본 것은 #day-번호 주말에 따로 공부하고 정리한 것은 #day.5 로 정리하려고 한다. 0. Web 기본 지식 > http://www.naver.com:80 Pr

1. CSS 1-1. CSS 기본 1 1. tag 선택자 특정 태그를 선택하여 속성을 변경하기 위해서 선택자 사용. 만약 같은 태그에 여러개 적용하면 맨 마지막에 넣은 것이 적용됨. > style 2. * 선택자 > 1-2. CSS 기본 2 1. id(#

첫 정규 수업날! 1일 1 커밋, 앞으로 배울 내용과 진행할 프로젝트, 수업 주의 사항을 먼저 들었다. 0. Web 접속 절차 > client - network - router - DNS (ip 찾아옴) client - network - router - 서버 (

1. CSS 속성 1 1-1. CSS 단위 > px : pixel % : 원래 크기가 100% em : 원래 크기가 1 em 1-2. url() > url을 속성으로 줄 수 있음. 1-3. display 1. block 자동 줄바꿈이 되는 태그들. >

1. Working Backwards 방법론을 활용한 포트폴리오 워크샵 우아한 테크 코스의 임동준 코치님의 포트폴리오 워크샵을 수강했다. > Working Backwards : 기업에서 제품을 설계할 때, 언론 보도 자료, 사용자 입장에서 생길 수 있는 FAQ부터

크롬 > 개발자 도구 > 설정 > Prefernces > Elements > Show user agent shadow DOM 켜기원래 작성 되어 있지만 안보이는 Shadow DOM 코드를 볼 수 있다. Shadow DOM 이란? HTML에서 캡슐화가 필요한 요소에 캡슐

1102~1105 멋사 CSS 수업

오늘도 CSS!! 1. animation sample code hover 로 구현된 animation 이 들어간 샘플 코드를 보면서 복습했다. 속성 선택자 우선순위 2. CSS #4-2 CSS 에 정리!

인프런 비밀번호 분명 저번주에 못찾아서 바꿨는데, 또 로그인을 못했다... 알고보니 비밀번호가 12자 이상이었다. 원래 12자보다 짧게 써서 절대 그거일거라고 예상도 못했다. 저번주에 바꿔놓고 아무튼 성공적으로 찾았으니까 추가 강의 듣기 스타트! 1. 웹 페이지 개요

1. float 복습 + 추가설명 [#6] 2. 네이버 로그인 창 클론코딩 3. 주의사항 안 넣어도 동작하는 width 같은 불필요한 코드는 꼭 빼자. 재사용성 : nth-child 는 자식 요소가 추가되었을 때 처음의 n번째가 지금도 n번째에 있지 않을 수 있

1105~1109 CSS Float, Flex, Grid & Animation 정리 - CSS 정리 1 에 다 넣고 싶었는데, CSS는 HTML보다 양이 많아서 글을 나누기로 결정했다.

인프런 HTML & CSS 15~16강에서 진행하는 실습을 강의 듣기 전에 직접 해보았다.소스코드최상단 nav를 global navigation bar, menu1~8이 적힌 nav를 local navigation bar라고 부른다.버튼 구현 시에는 anchor tag

\[velog 가운데 영역이 돌아가는 효과가 나는 코드이다. 코드를 똑같이 가져가서 8개(li 요소 9개)로도 만들어보았다.소스코드(4개), 소스코드(8개)애니메이션을 위한 주요 코드만 정리했다.\[애니메이션 overflow가 height를 넘어서는 요소를 가려주는 효

#6.5-1 에 한번에 쓰려고 했는데 생각보다 스마트폰 레이아웃 구현에서 새로 알게된 내용이 많아서 글이 너무 길어져서 태블릿 클론으로 분리하고, 프로젝트 하나인 반응형 웹까지 같이 담았다. 1. tablet layout 1-1. 태블릿 클론 1 1. header

1. Jungle Cinema (Weniv) 구현 [소스코드] 1. 일반적인 CSS file 구조! > 2. 웹 접근성 > 웹 접근성 고려시 글자를 숨기는 방법 으로 숨기면 screen reader에 안읽힌다. 3. naming convention 4.

1. Coding Convention 2. 라이캣 그리기 - Animation 카드 뒤집기 3. Media Query 4. 1만 시간의 법칙 웹페이지 제작 - Media Query 5. 느낀점 모바일을 우선적으로 설계한다는게 충격적이었다. 지금까지 경험상

1111 @media query 복습, 프로젝트 실습

1112 1. 1만 시간의 법칙 어제 진행한 수업에서 @media 를 이용해서 모바일 사이즈에 맞춘 화면 구현을 못하고 끝내서, 해당 부분부터 진행했다. 코드 리뷰와 코드에 관련된 내용은 #10에 전부 정리해 두었다.

1. 복습 1-1. font 보통 ttf 파일로 적용한다. 웹폰트로도 많이 사용한다. 웹폰트 불러올 때 깜빡임 방지 1-2. flex 복습 기본 속성들에 대해서 복습했다. #6-2 margin-right: auto; 로 잡으면 간격을 자동으로 잡아준다.

1. Grid 1-1. 복습, holy grail layout grid 에 대해 간단하게 복습하고 어제 만든 holy grail layout 도 flex 대신 grid를 사용해서 다시 만들어 보았다. 001~003.html 1-2. grid + animation

조코딩 님의 수업을 듣는 날이었다. 1. 쿨jjin 테스트 마크업을 잡고, 부트스트랩을 이용했다. 부트스트랩은 클래스를 미리 만들어둬서 웹을 만들기 편하게 해주는 프레임워크인데, 디자인이 나온 페이지가 아닐 때 사용하기 엄청 편할 것 같다!! > 꿀팁✨ > J

1. Animation 문자열을 글자별로 자른 뒤 입체적으로 돌리는 애니메이션을 구현해 보았다. 문자열을 자르기 위해 가져온 라이브러리 근데 단어별이 아니라 글자별이라서 조금 아쉬웠다. js 코드를 바꿔보려고 했지만... 봐도 잘 모르겠어서..... --으로 숫자

1. Vending Machine CSS 통일성 있게 작성하자. float로 줬다면 float로! line-height로 중앙 정렬 했다면 계속 line-height로. media query : 나는 귀찮아서 주어진 디자인 크기에서만 잘 동작하게 맞추었는데 세분화

1. Winter Coding Test 프로그래머스 문제 풀려고 들어갔다가 메인 배너에 있어서 지원한 윈터코테! 2. Login Modal 재현님 코드 뜯어보기 모달 띄우는거 내거에도 붙이기. 코드 리뷰 받은 내용 뜯어보기. 현 단계에서 발전 시킬 수 있는게

\[bootstrap containerbootstrap container의 기본 구조: 12\*12 grid 처럼 쪼개놓고, row, col 에 대한 class 를 주면, class="col-md-4 숫자만큼 합쳐진 row, col 칸이 생긴다. 조코딩님 특강 시간에

어제의 bootstrap에 이어 Tailwind로 UI를 작성해보는 실습을 했다. (자동화순) bootstrap, tailwindcss, tachyons 많이 사용 부트스트랩 + php + mysql부트스트랩 + 워드프레스부트스트랩 + Django부트스트랩 + Nod

실무에서는 debian, redhat 계열을 많이 사용한다. \+) 우리는 실제 서비스를 런칭할 때 url을 사서 붙여야 함.NGINX는 웹 서버! apache가 업계 1등이었는데, 점점 무거워지면서 NGINX를 쓰는 사람들이 늘고 있다고 한다. NGINX란?추가적으로

어제에 이어서 조건문, 반복문, 함수에 대해 진도를 나갔다.\[poistion 을 주면 inline-block 처럼 넓이 전체를 다 차지하는 속성이 없어지게 된다.border를 이용한 화살표 만들기!역시 width는 가장 큰 단위에 주고 부모의 padding을 이용해서

대망의 JavaScript를 배우는 날이었다!!!먼저, 웹에 대한 배경에 대해서 먼저 짚고 넘어갔다. 인터넷이 어쩌다 만들어졌는지에 대한 얘기를 들었다. 입자 가속 연구소에서 정보를 공유하기 위함 이었다고 하는데, 인터넷이 없던 시절에 입자 가속기가 개발이 되어 있었다

JavaScript 기본 문법은 한 글에 한번에 정리하기 위해서 글을 나눴다. 오늘은 처음으로 JavaScript를 들은 날인데, 사실 기초라서 간단하게 호로록 짚어주실 줄 알았더니 여러가지 실습 해보면서 처음 접하는 JavaScript type에 대한 논란(?) 이라

1. Geo JS Challenge 마지막 날인데, API에서 정보 가져오는 것까지 간단하게 다룬게.. 대박이었다. 사실 지금까지 데이터 흐름 만들고 API 가져와서 데이터 뽑아 쓰는 부분이 좀 어려웠는데 예외처리도 없고 해서 그렇긴 하겠지만.. 되게 간단하게 끝나서

노마드 코더 Vanilla.js Chaellenge 0. > JavaScript 페이지를 interactive 하게 만들기 위해! 모든 브라우저에 기본 내장 프론트엔드는 html, css, javascript 밖에 없다. js 역시 css처럼 html 파일에 연결해

\[문법 정리는 변수 할당 시 값을 메모리에 넣고 그것을 변수가 가리키게 만든다. 각 변수에 같은 수를 할당해도 주소는 모두 다른게 정석적인데, 파이썬 같은 경우는 메모리 관리를 위해 0~256은 미리 메모리에 올려놓고 변수가 선언되면 그것을 가리키게 만든다.&& ||

1. 멋사 수업 오늘은 이전 시간에 나갔던 반복문부터 다시 시작했다. for문에 대해 이어서 이해를 하면서 나가고, for ... of 사용법과 forEach 에 대해서도 간단하게 다루고, String built-in 함수들을 몇가지 보고 넘어갔다. indexOf,

공통 : github / 정규표현식 / HTTP(BE에서 더 중요) / SEO (FE에 가까움)FE : HTML / CSS / JS(AJAX) / REACT / (SASS) / (JQery) / WebPack BE : JS / tailwind or bootstrap

재귀함수피보나치 수열처럼 함수를 여러번 호출해서 return 하는 경우는 메모리 효율이 안좋다.즉시 실행 함수mapCall by value, reference, sharingjs 는 모두 call by value. reference type 을 인자로 넘기면 refer

배운 내용들을 되짚고, 앞으로 배울 내용들을 백신 맞듯이 가볍게 살펴보았다.객체객체는 반복이 안되기 때문에 (iterable이 아님), iterable로 만들고 싶으면 Symbol.iterator를 사용한다.객체는 클래스의 인스턴스. property와 method를 가

1. 멋사 수업 이력서와 깃헙 이야기.. 를 먼저 들었다. 가장 중요하게 배워야 할 것은 페이지 구현. 1. Array, String, Math method 복습 2. strict mode 원래 js는 최대한 오류를 내지 않게 설계되어 있는데 해당 부분들을 엄격

오늘은 어제 만들었던 table(https://velog.io/@ddosang/Front-end-27그리고 손코딩을 다하고 prototype과 class에 대해서 나가려고 했는데.. 시간이 돼서 면접보러 떠났다.면접 봤으니 어쩔 수 없지만 수업 못따라가고 있는

1. 멋사 수업 > ### overriding, overloading overriding - 메서드를 상속받아서 같은 이름의 새로운 함수로 만드는 것. overloading - 이름이 같은 매개변수 개수/타입이 다른 함수를 만들면 다른 함수로 취급하는 것. (js에는

saa

1. DOM 1. createElement outerHTML : innerHTML : 요소에 포함된 HTML 마크업 -> XSS 공격 가능. 그래서 Node.textContent 같은 걸로 입력값 처리 필요. innerText : 요소 + 자손의 렌더링된 텍스트 콘

모듈 패턴 : 클로저를 이용해서 값을 은닉.캡슐화를 왜하는데?????? 에 대한 의문이 계속 있었는데, 예시를 드느라고 변수를 하나만 넣고 get set 하는 함수를 다 구현해서 그냥 객체랑 차이가 없어보였던 것 같다. 해당 객체에 필요한 변수가 여러개이고, 어떤 것은

1. 알고리즘 1. 알고리즘 > 컴퓨터가 어떤 일을 하기 위해서 알려줘야 하는 순서, 절차 > 시간 복잡도 계산 복잡도 - Big O 공간 복잡도 > #### coding test tips✨ 프로그래머스, 구름 EDU 같은 플랫폼에 익숙해지기. 사용 가능한

\[모두 오름차순 기준 설명, 필기!배열에서 최솟값을 찾아서 새로운 배열에 넣는다. 그리고 남은 배열에서 또 최솟값을 찾아서 새로운 배열에 넣는다...첫번째 값은 그냥 넣고, 그 다음 것이 자신의 위치를 찾아서 들어간다.(mergesort - 분할 정복 방법)배열을 원

1.

Same Origin Policy어떤 도메인에서 문서를 불러올 때, 도메인 주소가 같아야 서로 상호작용 할 수 있게 하는 보안방식. 다른 리소스를 불러올 때 악의적인 스크립트를 받지 못하도록 사전에 차단하는 것이다. 출처(프로토콜, 포트, 호스트)가 다 같아야함.Cro

1108~1128 팀원들과 클론 스터디를 진행하기로 해서, MDN 메인 페이지를 클론해보기로 했다. BEM 방식을 사용했더니 이름 짓는데 마크업보다 더 많은 시간이 걸렸다. BEM 예시 프로젝트 와 여러 자료들, BEM을 썼다는 LinkedIn, BBC 등을 한번

1. 최적화 1. 최적화 하는 이유 사용자 경험이 좋아진다. 2. 성능 측정의 척도 올바르게 동작하게 만들고 === 리소스 (자원 소모를 얼마나 하는지 - 메모리, 네트워크 트래픽) 빠르게 동작하게 만든다 === 시간 3. 시간 측정 1. 초기 구동 시간 :

1.

1. 정규표현식 문제를 몇 개 풀었는데, #38 에 이어서 정리했다. 2. 시각화 1. Chart.js https://www.chartjs.org chart.js, bootstrap 을 이용해서 데이터 시각화를 해보았다. cdn 으로 script를 가져와서 l

1210~1212 : 모듈화 1213~1218 : 메인 페이지 마크업, JavaScript 1219~1220 : JavaScript 못 붙인 것, 미디어쿼리 (4단계) 1. 사이트 분석 마크업을 하기 전에 간단하게 사이트를 분석해 보았다. 사이트가 너무 길어서 안의

\[JavaScript 런타임 : JavaScript가 동작할 수 있는 환경(실행기)을 말한다. 원래 JavaScript는 브라우저에서만 동작했으니까.서버를 만들 수 있다.특징Non-Blocking I/O (비동기 Input/Output, 캐셔가 다 처리하지 않고 바리

오늘은 실시간 강의가 아니라 코드라이언의 '일단 만드는 node.js'를 수강하는 날이었다!! 하루만에 노드를 다 듣는다고..? 백엔드에 ㅂ도 모르는데..? 싶었지만, 강의를 듣다보니 조금은 감이 왔다. 이 감을 놓치지 않고 복습해야할 것 같아서, 펫 프로젝트 부분은

반려동물 SNS 만들기 회원가입, 로그인 글쓰기 / 조회 / 수정 / 삭제 좋아요, 댓글 실시간 채팅 (socket io)