프로그래머스

코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요.

programmers.co.kr

문제풀이 의식의 흐름

문젠느 아주 간단하다

if, else if 쓰면 될 것 같은데?

const angle = i 라 하자,

만약에, 0 < i < 90 이면 1 (true)

그게 아니면 (false), i = 90 일 때 2 (true)

그게 아니면 (false), 90 < i <180 일 때 3 (true)

그게 아니면 (false), i = 180 일 때 4 (true)

 

거진 3시간 동안 삽질한 결과, 논리는 맞는거 같은데 자꾸 레퍼런스오류가 났다

다른 풀이들은 전부 변수를 angle 그대로 넣었더라;

알파벳 몇개 좀 안쓰려고 꼼수?부리다 되려 시간낭비만 했다

다음엔 고민하는 시간 리소스 분배에 신경써야겠다

  • 변수명을 따로 주지 않고 정정한 내 풀이
function solution(angle) {    
    if (angle < 90) {
        return 1;
    } else if(angle === 90) {
        return 2;
    } else if(angle <180) {
        return 3;
    } else {
        return 4;
    }
}
  • 더 좋아보이는 풀이 1.filter 활용
function solution(angle) {
    return [0, 90, 91, 180].filter(x => angle>=x).length;
}

한줄로 깔끔해보여서 가져왔는데, 가만보니 이해가 안가는 것이었다?!

각각 1,2,3,4 값을 리턴해야하는 문제인데 리턴값이 안 보이고, 왜 90 다음이 91인지? 모르겠더라

 

감사하게도, 알고리즘 스터디원 윤정님이 해석을 해주셨다

 

filter

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

 

Array.prototype.filter() - JavaScript | MDN

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

developer.mozilla.org

filter 는 함수를 만족하는 모든 요소들로 새로운 배열을 만들어 내는 메서드이다

.filter(x => angle>=x)


filter에 주어진 함수를 해석해보면

x (매개변수) 보다 angle (변수)가 크거나 같으면 새로운 배열로 걸러진다

 

return [0, 90, 91, 180].filter(x => angle>=x).length;

뒤에 .length가 붙으므로 새로운 배열의 길이를 나타내고 이 값이 곧 리턴값이 된다

 

예시로 90도 이하의 값인 30도가 변수, angle로 주어진다면?

앞의 배열에서부터 하나씩 x값으로 넣어보자

 

30 >=0 이므로 0은 새로운 배열의 요소가 된다

그러나 90, 91, 180은 성립하지 않는다

고로 생성된 배열의 길이는 [0], 1개가 된다

 

마찬가지로 angle 값을 90도인 직각이라면

새로운 배열은 [0,90]

배열의 길이는 2 가 된다

 

angle 값이 90도와 180도의 사이인 100도 라면?

새로운 배열은 [0,90,91]

배열의 길이는 3 가 된다

 

180도 라면?

새로운 배열은 [0,90,91,180]

배열의 길이는 4 가 된다

 

여기서, 잠깐!! 90과 91사이의 숫자가 변수로 온다면? 이를테면 90.5라면..??

이거 헛점이네~ 라고 생각한 순간 문제가 다시 보였다

응, 그렇구나!

  • 더 좋아보이는 풀이 2.삼항연산자 활용
function solution(angle) {
    return angle < 90 ? 1 : angle === 90 ? 2 : angle < 180 ? 3 : 4;
}

삼항연산자가 아직 익숙치 않아서 마치 다 한문장인 언어처럼 보이지만

angle < 90 ? true 일때 1
				false라면 다음 식으로
: angle === 90 ? true 일때 2
				false라면 다음 식으로
: angle < 180 ? true 일때 3
				false라면 다음 식으로
: 4;

뜯어보면 달리 설명할 필요도 없이 직관적이고 간결하다

깃과 깃허브를 언젠간 잡아야지 하다 마침내 때가 된것 같다

 

어떻게? 공부하는 방법으론

  1. 시중에 있는 좋은 영상들
    (더구나 깃&깃허브는 요약강좌도 많다)
  2. 책으로 공부

이렇게 크게 두가지가 아닐까?

 

여기, 영상도 보고 책으로도 자세히 공부하는 방법이 있다

 

 

타입스크립트 공부할 때 많이 도움받았던 두잇 시리즈!!

 

 

 

목차를 보면 완전 처음 설치하는 시작 단계부터 협업과 소통을 위한 응용 단계까지 있는 걸 알 수 있다

 

 

 

또, 혼자하기 쉽게 진도 계획표까지 짜여져있어 공부하기 편하다

 

 

 

Main 브랜치의 어원과 같은 '한걸음 더!' 섹션의 내용들이 흥미롭고 재밌었다

 

 

 

README 파일을 위한 마크다운까지 알려준다

 

 

 

공부하기 너무 좋다고 느낀점이 이렇게 장마다 퀴즈가 있어서 개념을 꾹꾹 담아주고

 

 

 

Do it! 스터디룸 카페를 운영해 스터디를 열어주고 질답도 가능한게 큰 이점이라고 느껴졌다

 

게다가 이번 깃허브 책은 이고잉님의 강의를 기반으로 만들어져

혼자하다 이해가 안가는 내용이 있다면 그 부분만 영상강의로 보아도 좋다 (물론, 다 보아도 좋다. 갓활코딩!갓고잉!)

 

*이지스퍼블리싱의 깃&깃허브 입문 서평단에 선정되어 책을 제공받았습니다 :)

FE 신입 개발자 최수빈 연사님

  • Google Docs 활용
    실시간 질답가능, 나의 속도 및 난이도 객관화
  • 키워드를 반만 가져가기
    생활코딩, 코딩애플로 가장 어려웠던 큰 개념 하나만 가볍게 복습

프로젝트

  1. 목표설정
    구글폼으로 설문
    목표 구체화, 기술 스택에 대한 왜?, 부담감이나 원인 파악
  2. 안전한 피드백
    시각화
    선택권
    피드백에 대한 피드백
    '우리'로의 환원
  • 주변 동료의 장점을 내 장점으로 '손민수'
  • 깃허브 위키에 문서화
    문서화가 중요하다 (모든 활동을 문서화 잘 해놓을 것)
  • 자바스크립트 딥다이브 공부해야겠다
  • 기술 면접에서 얇은 답변 여러개보다 딥한 답변 몇개가 낫다
    질문의 의도를 파악할 것 ex) let, var 차이 호이스팅
  • 블로그 글의 질을 높이는 방법
    문제 : 어려운 개념, 궁금한 주제를 '이유'와 함께 전개
    해결 : 깨달은 점(결과)를 서술하기 보다, 깨달아 가는 과정 자체를 기술
    학습 : 어떤 것을 배웠고, 다음에 시도해 볼 점
  • 기업규모, 취업기간, 연봉, 세부조건, 최종 목표
    코드리뷰 문화가 있는지, 어떤지
    빠른 성장 가능성, 배울 수 있는 환경

인터렉티브 웹페이지 실습 1분코딩 유준모 대표님

https://next.junni.co.jp/

 

Junni is...

アイデアとテクノロジーで、世界をもっとハッピーでワクワクしたものに。ジュニのものづくりの理想を少し、覗いてみませんか?

next.junni.co.jp

three.js 3D JavaScript Library

Node.JS

어우 어려웠다

 

Naver SmartEditor 개발, 프론트엔드 채용 담당, 네이버 프론트엔드 책임 리더 우상훈 연사님

FE개발자의 역할과 성장을 위한 이야기

  • 비판적인 사고
  • 리액트를 썼다면 왜 리액트를 썼는지
    ex) 어떤 문제를 해결하기 위해 리액트를 썼는데, 생각보다 안 좋았다.
    다음엔 이런 프레임워크를 써보려고 계획하고 있다
  • 사용자의 문제를 해결하기 위해 치열하게 고민한 해법으로 적절한 기술을 활용하여 시장이 원하는 시점에 제품으로 출시하는 개발자
  • 반복적으로 노력한 근거가 있어야한다
    → 좋은 개발자로 성장하기 위해 XX 프로젝트를 진행했고 GitHub에 주기적으로 커밋합니다
  • React 를 Y 년간 사용했어요 → XX 프로젝트의 YY한 특성을 극복하기 위해 React 를 사용했습니다
  • X년 동안 다른 분야에서 전문가로 활동했고 개발자로 전향했습니다 → X년 동안 Z,Y 프로젝트의 성공을 위해 XXX 의 노력을 했고 QQQ의 성과를 거두었습니다. 이제 새로운 산업을 경험하기 위해 개발자로 전향했습니다
  • 네이버가 원하는 신입 개발자의 모습 : 탄탄한 기본기를 바탕으로 빠르게 기술을 습득하는 분
    컴퓨터 사이언드가 단단해야한다.
  • 컴퓨터 공학 중 브라우저에 굉장히 필요한 부분, 자바스크립트의 이벤트 메모리를 이해하는 부분 같은 경우 하나하나 뽀개볼 자세가 필요하다
  • 자신감과 과장은 다르다. 어차피 다보인다
    메타인지 필요
  • 내가 팔로워형이라면 리더형들을 든든하게 받쳐 줄 수 있는 능력
  • 신입의 깃허브 코드 : 기본적인 요구사항을 잘 지키고 있는가를 중점
    코드가 동작하고 기본적으로 구현해야할 것들이 구현하고 있는가
    팀 컨벤션을 지키는가, 비효율적인 로직이 있나,없나
  • 조엘 온 소프트웨어
    좋은 코드, 나쁜 코드
    You don’t Know JS 2종 
    테스트 주도 개발💖 
    클린 코더
    클린 아키텍처
    Data-driven UX 

좋았던 점

  • 알고리즘 스터디를 시작해 멧돌을 굴리기 시작
  • 멋사 동료분들의 번개강의를 듣고나서 이해가 잘됨
  • 소풍

 

아쉬웠던 점

  • 그치만 내가 짜라고 하면 못짠다
    이해는 했지만, 알고 있다고 할 수 없다
  • 호르몬의 영향으로 감정 조절 실패
    (원인 : PMS, 놓아버린 운동, 영양제 안 챙겨먹음 ,
    결과 : 우울해서 뭘 할 수가 없음 그날 공부는 조짐. 일단 자야함)

 

다음 주 계획(+이번 주말)

  • 깃 & 깃허브 책 서평 제출
  • 퀄리티 있는 글 포스팅 해보기

 

 

<월요일> 비동기, TS 회의, 알고리즘 스터디 회의

우리 파트에 다른 분 내용이 추가되서 겸사겸사 수정할 부분도 같이 회의했다그래도 우리 파트는 거의 마무리 된 듯해 다행이다

 

오후 10시에 알고리즘 스터디 방향성에 대한 회의를 했다

빠르게 하기 팀과 천천히 하기 팀으로 나뉘어서 오프 스터디땐 공통 문제 1개씩 풀어오는 걸로 했다

나는 일단 알고리즘이 주가 될 짬이 아니라 천천히 하기로 했고,

일단 프로그래머스 Lv.0 화,목 주2회 21:30분마다 10개씩 하기로 했다

는 목요일에 특강도 있고 금요일엔 피크닉이 잡혀있어서 수요일에 하기로.

 

시험삼아 피자 나눠먹기 문제를 해봤는데, 처음 문제를 이해하는것도 살짝 헷갈렸다;

고민해보고 각자 풀이해봤는데 여러모로 알게된 점들이 많아서 좋았다

<화요일> 비동기 fetch, 알고리즘

드디어 알고리즘 문제를 풀어 봤다

진짜 쉬운 문제부터 어제 푼 문제도 다시 혼자 풀어보고 재밋어서 9개정도 풀었다

아직 로직보다 문법을 익히는 수준이긴하다

 

<수요일> 알고리즘 스터디

예정대로 9시 30분에 알고리즘 스터디했다

각자 어려웠던 문제 2개 뽑아서 얘기했다

 

<목요일> 테킷데이Node.JS, 이력서 특강

괴로운 테킷 데이

일단 따라하는 Node.JS 강의를 수강했다

저녁특강으로 개인 이력서 피드백 시간이 있었다

노션보다 웹사이트로 따로 만들고 싶어서 난 아직 제출하지 않았다

다른분들 이력과 피드백을 보는 것만으로도 지난번보다 도움이 되는 시간이었다

네이버 블로그는 지금 거의 방치중이지만, 나름 꾸준히 쓰고있는 티스토리 기술 블로그는 방향성을 다시 생각해 볼 수 있었다

끝나고 자취방에 올라왔다 밤이 되니까 날씨가 진짜 추워졌더라 가을 가디건 한번 제대로 못입어보고.. 돌려줘요 내 가을!

 

<금요일> 한강 피크닉

난 펭도리                                                     

점심에 저렇게 먹고 오후 활동중에도 운영진분이 아이스크림을 사주셔서 또먹고

배가 불러서 세빛섬쪽에서 더 머물다가 포토이즘에서 네컷 사진 찍었다

이날 사진을 그냥 엄청나게 많이 찍었다

회고조와 더 돈독해지는 즐거운 시간이었다ㅎ

7시부터는 3조와의 2차가 있었다

 

극I라 이런 자리 정말 어색하고 기빨리는데 비슷한 사람들끼리 모여서 다들 술들어가고 자리 돌아가며 반모해서 그런지 재밌었다

3차로 또 다른 사람들이 있는곳으로 갔는데 (이제 조원들도 막 섞여서 불분명)

교대 쪽이라 자취방이랑 가까워졌다 ㄱㅇㄷ?

 

는 갑자기 속이 안좋아져서 기회를 틈타 다른 분들 일부 나갈때 껴서 금방 나왔다

남자친구가 이것저것 사주고 데려다줬다 (까스활명수는 만병통치약이야!)

 

<토요일> 산책, JS특강

늦잠자려고 했지만 일찍 깨버렸고~ 오랜만에 자취방 세탁기도 돌리고

아점먹고 산책했다 바람은 시원한데 햇빛은 쨍쨍했다 빨래널고 인천왔다
 
돌아와서 잠깐 쉬고 저녁에 JS 기초 특강이 있었다
앞으로 주말마다 오후 7시~10시 까지는 특강이 있을 예정이다 왕 신난다
 
<일요일> 오프라인 알고리즘 스터디, 스터디카페 데이트

공통 문제는 문제에 대한 이해와 어떻게 로직을 짤것인가에 대한 구상정도는 했지만코드를 구현하는 것 까진 해내지 못했다

다른분들 코드를 보니까 일단 접근 방식도 완전 다르고 한 분이 여러가지 방법으로 푸신걸 보여주셨는데,이걸 이해하는 것도 한번에 되지는 않았었다

다시 질문하면서 이해가 가는 부분도 있었지만 완벽하게 안다고 표현할 순 없다

생각보다 시간이 오래 걸려서 문제 하나 하니까 대관시간이 끝났다 ㅋㅋ?

다음주는 더 레벨이 높은 문제를 공통문제로 선정했다 아주 흥미진진하다

점심은 규카츠 먹고 스터디카페에 짱박혀서 4시간 있었다

(+ 로직은 맞는데 변수 때문에 삽질한 시간이 많아서 조금 아쉽다. 시간을 좀 더 효율적으로 쓸 필요가 있는 듯)

저녁은 거의 3년만에 유가네 닭갈비를 먹었다

테이블 키오스크?라고 해야하나 아무튼 주문이 전자화되서 격세지감을 느꼈다

 

<월요일> 스프린트 회고, 페어 프로그래밍 회의, 동료 특강

메이커 준님의 스프린트 회고시간

페어 프로그래밍에 대해 예시를 보여주셨다

회고조 안에서 각각 2~3인으로 조를 3개로 나누어 우리조 공통의 주제를 정했다

또, 주말에 프로그래머스 문제 풀이도 페어프로그래밍으로 해보기로 했다

 

저녁에 3조의 ㅈㅇ님이 This 와 Prototype에 대해 특강해주셨다

무려 논스톱으로 2시간 가량...

 

<화요일> 객체지향프로그래밍, 생성자, 프로토타입, 알고리즘 스터디, 동료 특강

놀랍게도 어제 특강들은 내용이 수업시간에 귀신같이 나와서 수업을 따라가기 수월했다

9시 30분부터 알고리즘 스터디에서 각자 어려웠던 문제를 2개정도 찝어봤는데 난 3개나 어려웠다ㅋㅋ

우리가 문제를 정할 때 정답률이 높은 순으로 정렬해서 보는데, 문제 정답률이 많이 떨어져서 순위가 뒤로 밀렸었다. 어쩐지

10시부터 11시 45분까지 우리조 ㅈㄱ님이 프로토에 대해 강의해주셨다 아주 성황리에 진행됐다

 

<수요일> 우울해져서 일찍 잘..

려고 했는데 (한번 우울해지면 걷잡을 수 없는편, 자고일어나야 괜찮아진다)

회고 블로그도 써야하고 잔디도 심어야하고, 무엇보다 감정에 휘둘려서 할일을 못하는게 또 싫어서 꾸역꾸역하고 잤다

원인 파악을 해보자면 호르몬과 운동 부족의 콜라보인 것 같다

집순이라 스터디하러 갈때 빼고 밖에 거의 안나가는 편인데, 그러다보니까 광합성도 못하고,

챙겨먹던 영양제들 중에 PMS에 도움이 되는 영양제가 있는데, 그것도 안 챙겨먹어서인 것 같다

아 생각해보니까 겨울마다 뭐라도 운동을 다녔었다

 

<목요일> 특강데이, 회고, 알고리즘 스터디, 페어프로그래밍

오늘 일정

꽥!

그리고 강의 중에 자꾸 서초고용센터에서 국취제 연락왔는데 KDT 과정이랑 연계된 그런게 아니라 그런지, 상담 때문에 센터를 한달에 3번?은 방문해야 한다는 데 매우 불편한 것 같다 졸업증명서도 떼야함 귀찮; 하여튼 나랏돈 타먹기는 항상 까다롭다니깐 과정 끝나면 취업할건데 취업하려면 수강을 우선적으로 하게끔 해줘야하는거 아님? ㅠ,ㅠ

객체지향 프로그래밍 복습
  • 사실 실무가서 배워도 상관없다는 입장
    왜냐면 신입으로 들어가면 보통은 사수가 객체 지향으로 프로그래밍한 코드들을 볼테니까
  • 프로토 타입은 어떤 임의의 공간을 가르킨다
  •  
  • 생성자 함수로 만든 인스턴스의 기본 타입은 Object로 프로토
  • constructor는 instance의 프로토를 가르킨다

https://web.archive.org/

 

Wayback Machine

Due to a planned power outage on Friday, 1/14, between 8am-1pm PST, some services may be impacted.

web.archive.org

최척화 Optimization
  • Make it work, Make it right, Make it fast
    -Kent Beck

https://web.dev/why-speed-matters/

 

속도가 왜 중요합니까?

사용자 경험에서 속도는 중요한 역할을 합니다. 모바일 속도로 인한 지연은 실망스러울 뿐만 아니라 비즈니스 결과에도 부정적인 영향을 미칠 수 있습니다.

web.dev

https://kraken.io/

 

Kraken.io Image Optimizer

Kraken.io is a robust, ultra-fast image optimizer. Thanks to its vast array of optimization algorithms Kraken.io is a world ahead of other tools. Want to save bandwidth and improve your website's load times? Look no further and welcome to Kraken!

kraken.io

이미지 최적화 사이트

  • 폰트는 결국 이미지이기 때문에 3개 이하로 사용하되, 용량이 최적화 된 폰트로

https://pagespeed.web.dev/

 

PageSpeed Insights

올바른 URL을 입력하세요.

pagespeed.web.dev

https://web.archive.org/web/20220313150523/https://csstriggers.com/

 

CSS Triggers

@PROPERTY_DESCRIPTION@ B G W E Change from default B G W E Subsequent updates

web.archive.org

  • 대부분의 CSS속성이 reflow를 일으키는 편
  • Chrome : Blink
  • Edge : EdgeHTML→Blink
  • FireFox : Gecko
  • Safari : WebKit
  • InternetExploer : Trident

https://developer.mozilla.org/ko/docs/Web/API/Window/requestAnimationFrame

 

window.requestAnimationFrame() - Web API | MDN

화면에 새로운 애니메이션을 업데이트할 준비가 될때마다 이 메소드를 호출하는것이 좋습니다. 이는 브라우저가 다음 리페인트를 수행하기전에 호출된 애니메이션 함수를 요청합니다. 콜백의

developer.mozilla.org

 

https://www.inflearn.com/course/30%EB%B6%84-%EC%8B%9C%EC%A6%8C4-%EA%B9%83%ED%97%88%EB%B8%8C

 

[무료] 30분 요약 강좌 시즌4 : 알잘딱깔센 GitHub - 인프런 | 강의

알아서! 잘! 딱! 깔끔하고! 센스있게! 정리하는 GitHub 핵심 개념 책의 무료강의입니다. 해당 책과 Notion 링크도 무료로 다운로드 받을 수 있습니다. 비영리 프로젝트로 교재활용도 허락없이 가능합

www.inflearn.com

    • 얄팍한 코딩
    • 진유림님 깃&깃허브

  • git clone [url] .git폴더까지 다 가져온다
  • git pull 내가 이미 .git 폴더를 가지고 있고, 작업하고 있는 파일도 있는 상태
  • 수정
  • git add . : . 을 붙이는 이유는 바뀐내용 전부 add하겠다는 의미
  • git commit -m '메모'
  • git push

https://gitmoji.dev/

 

gitmoji

:truck: Move or rename resources (e.g.: files, paths, routes).

gitmoji.dev

CLI (Command Line Interface) : 코드로 치는 것

GUI (Graphic User Interface) : 클릭으로 하는 것

  • 회사 서버의 90%이상은 리눅스 환경
  • FE개발자들은 유저(개념) 보다는 개발자이기에 터미널과 같이 백지로 작업할 경우가 많다
  • 금융권 회사일 경우 VSC 사용하지 못하는 경우도 많다
  • 구글링도 개인적으로 해야 할 경우도 많다 ← 명령어로만 작업

나는 window라 git을 설치했다

(맥에는 기본적으로 깔려있다 최신버전을 깔아도 되지만 사용하는데 지장없음)

너 왜 갑자기 되냐??

git ignore은 추적되지않는다

  • $ ls   #폴더와 파일 볼 때
    $ pwd   #현재 폴더 알고 싶을 때
  • $ mkdir leehojun   # 폴더 생성
    $ cd ..                    # 상위 폴더 이동
    $ cd test                # test 폴더 이동
    $ cd baeggoose    # baeggoose 폴더 이동
    $ touch test.html   # test.html 파일 생성
    $ vi test.html         # 실무 vim을 사용합니다.
  • i
    ESC
    :wq!
    $ cat test.html
    $ cd ..
    $ rmdir baeggoose
  • $ git --version
    $ git config --global [user.name] (http://user.name/) "baeggoose"
    $ git config --global user.email [email@example.com](mailto:email@example.com)
    $ git config --list

웹 서비스 만들 때

  1. 기획자_ 서비스 기획
  2. 백엔드_ URL 구조
  3. 백엔드_ model 설계 : 게시판, 게시물 제목, 내용, 사진 등
  4. 디자이너_ 디자인
  5. 프론트엔드_ templates 작성 (HTML)
  6. model 설계한 것과 template연동
스프린트 회고

 페어프로그래밍

  • 10월 27일 : 19시 회고하고 페어프로그래밍
  • 주제 : 식당 메뉴판
  • 진행 방식 : 5분

페어 프로그래밍의 장점은 오류를 줄이는데 큰 도움이 된다

회고조 안에서 각각 2~3인으로 조를 3개로 나누어 우리조 공통의 주제를 정했다

또, 주말에 프로그래머스 문제 풀이도 페어프로그래밍으로 해보기로 했다

https://www.freecodecamp.org/korean/news/javascript-projects-for-beginners/#counter

 

초보자를 위한 40가지의 자바스크립트 프로젝트

프로그래밍 언어를 공부하기 가장 좋은 방법은 프로젝트를 해보는 것입니다. 누구나 쉽게 해볼 수 있는 40가지의 바닐라 자바스크립트, 리액트, 타입스크립트 프로젝트 튜토리얼을 만들었습니

www.freecodecamp.org

https://devfolio.kr/

 

DevFoliOh! - 개발자 토이프로젝트 모아보기 서비스

 

devfolio.kr

설문조사 Form

https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress

 

<progress> - HTML: Hypertext Markup Language | MDN

HTML <progress> 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다.

developer.mozilla.org

https://colorhunt.co/

 

Color Palettes for Designers and Artists - Color Hunt

Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

colorhunt.co

https://html.spec.whatwg.org/multipage/rendering.html#the-fieldset-and-legend-elements

 

HTML Standard

User agents are not required to present HTML documents in any particular way. However, this section provides a set of suggestions for rendering HTML documents that, if followed, are likely to lead to a user experience that closely resembles the experience

html.spec.whatwg.org

fieldset

legend

 

To do List

https://developer.mozilla.org/ko/docs/Web/HTTP/Basics_of_HTTP/Data_URLs

 

Data URIs - HTTP | MDN

Data URIs, 즉 data: 스킴이 접두어로 붙은 URL은 컨텐츠 작성자가 작은 파일을 문서 내에 인라인으로 임베드할 수 있도록 해줍니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/click

 

HTMLElement.click() - Web API | MDN

HTMLElement.click() 메소는 엘리먼트에 마우스 클릭을 시뮬레이션합니다.

developer.mozilla.org

 

  • 스타트업 지원은 원티드, 로켓펀지, 점핏 (사람인에서 만든 플랫폼)
  • 한재현 강사님 커리어 썰들었다
    부트캠프를 많이 들으셨는데, 어떤 학원은 국비지원을 받으려고 과정을 만들다보니 과정이 시작하기 직전까지도 강사님이 정해지지도 않고 실제로 w3schools.com 띄워놓고 스크린 리더마냥 읊어주는 곳도 있다고 하셨다 (그래서 스터디를 만들어서 직접 가르치기 시작...)
    두달쯤 되면 현타가 올 수있는데,주말에 따로 스터디를 하거나 어떻게든 도와주신다 했다

레퍼런스책 한 권 정도는 두자

  • 책을 정독하는 것보다도 필요한 부분만 찾아서 공부
  • 모던 자바스크립트 딥다이브(도마뱀)
  • 자바스크립트 완벽 가이드(코뿔소) ← 책이 베개두께이고 너무 어려워서 비추
  • 혹은 자바스크립트 중에서도 내용을 쪼개서
    모던자바스크립트(최신내용만), 객체지향에 관한 책, 자료구조와 알고리즘, DOM만 따로 다룬 책들도 있다( ex) DOM을 깨우치다)

초보용 책 추천

  • HTML&CSS 웹사이트 개발과 디자인 기초
  • 누구나 쉽게 배우는 자바스크립트(고양이)
  • 땡땡 따라하기 이런 책 비추, 오류가 많고 오타도 많다 (인프런이나 강의를 듣는게 낫다)

스터디 모임을 많이 해라!

ex)책 스터디, 리더가 주도 하는 스터디, 구성원들이 한번씩은 발표할 수 있는 능동적인 스터디

굉장히 많이 도움이 된다

 

  • 1세대 프론트 엔드 개발자 신현석님 블로그

https://hyeonseok.com/blog/306

 

HTML 코더, UI 개발자, 웹 퍼블리셔, 웹 개발자 - 신현석(Hyeonseok Shin)

web | 2006-11-26 웹 표준이 대두되면서 (X)HTML, CSS, Javascript 등을 담당하는 사람들의 중요도가 상승되고 이들을 업무를 정확하게 지칭하는 용어가 필요하게 되었다. 현재 이러한 롤을 맡은 사람들을

hyeonseok.com

프론트는 중간에 끼어서 바쁘다

HTML

HTML 5가 아니고 Living Standard라고 해야한다

 

SECTION

  • <Head>
  • <Body> 사용자에게 보여지는 부분
  • <Article> 연관된 주제가 없는 독자적인 내용 ex) 위젯
  • <Section> 그룹화에 초점

https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi/related

 

HeadingsMap

To show, browse and audit (for accessibility and SEO) the headings structure

chrome.google.com

구조보기 편한 확장프로그램

https://poiemaweb.com/ 

 

웹 프로그래밍 튜토리얼 | PoiemaWeb

Front-end Development Tutorial

poiemaweb.com

 

ol ul il

  • <ul> li가 3개이상 일 때
    ul이나 ol의 직계 자식태그는 반드시 li 이 들어가야한다! 
  • <di> <dt> <dd> 사전같이 정의할 때

이 요소들을 떨어뜨려 주고 싶을 때 <div>로 감싸주면 블록 레벨이기 때문에 간격이 생긴다

 

  • <p> 완결된 내용일 때 쓴다
  • <br> 완결이 아닌데 줄을 바꾸고 싶을 때
  • <pre> 코드에서 작성한대로 표현이 된다 (줄을 많이 띄웠을때 처럼)
  • <blockquote> 인용 블록
  • <cite> 출처
  • <q> 한줄일 때 
  • <hr> 내용이 구분될때 (구분선) p태그내에서 사용하지 말기
  • entity 엔티티 코드
    < &lt;
    > &gt;
  • <nav> 링크를 보여줄때

https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

 

HTML Standard

HTMLLiving Standard — Last Updated 30 August 2022 ← 13.2 Parsing HTML documents — Table of Contents — 14 The XML syntax → 13.5 Named character references 13.5 Named character references This table lists the character reference names that are supp

html.spec.whatwg.org

홈페이지를 캡쳐해 구조를 나누는 실습을했다

은근 너무 어렵더라

 

몇명 하고싶은 사람 봐주고

4시부터 자습시간이 되었다

 

과제로 홈페이지 이미지를 두개 받았다

10월 20일 이력서 특강 피드백 메모입니다

  • 블로그로 방향성을 직접 해보면서 궁금한점이나 문제해결한 경험을 어필할 수 있게끔 포스팅
  • 프로젝트는 무조건 최신순으로 BBD,SSD 같이 면접관이 물어볼만한 키워드는 미리 공부
  • Next.js를 썼다면 왜 썻는지도 이유도 함께 기술
  • 오픈소스기여
  • 가독성 좋은 레이아웃짜기
  • 화면을 반으로 나눠 여러 이력서를 같이 볼 수도 있으니 웹사이트라면 반응형까지 고려

늘 느끼는건데, '왜?' 가 참 중요한 듯

블로그 방향성을 잡는데 도움이 되었다

'메타인지'하고 면접관의 입장에서 나를 바라봐야 한다

 

개인적으로 나는 아직 내세울 활동이 없기에 시멘틱한 태그를 사용한

공들인 웹사이트로 이력서를 만드는게 조금이라도 나를 보여주는 데에 더 나을 것 같다는 생각을 했다

 

https://wonny.space/writing/work/engineer-resume

 

개발자 이력서 작성하기 (feat. 이력서 공개) | Wonny Log

이력서 작성 시 참고하면 좋을 정보와 체크리스트 공유 | 2022년 4월 8일 업데이트 안녕하세요, 워니입니다. 이력서 작성 방법에 대한 글을 올린 후, 수많은 강의 제안과 이력서 …

wonny.space

'개발자 이력서 작성하기' 워니님 이력서 포스팅

 

9월 29일 이력서 특강 피드백 메모입니다

  • 이력서의 목적
    면접자 1차 필터링
    질문할 거리
  • 구체적으로 기술, 역량을 수치화
    다른 이력보다 개발 이력 중점
    강점의 차별화
  • 20초 이내로 잘 읽히는 가독성있는 레이아웃
    섹션 그룹핑, 핵심 내용 강조
  • 제목
    식상한 한줄은 없는게 나음
  • 프로필
    연락처, 깃허브, 블로그, 사진
    불필요한 정보 필요없음
  • 자기소개
    2~5줄
    경력,경험, 성과, 태도 어필 (+수치화된 근거)
  • 경험1
    회사 경험, 프로젝트
    최신순, 양보다 질, 적절한 링크 활용
  • 경험2
    회사 외 경험
    기술 번역, 오픈소스
  • 기술
    실무 활용 가능한 기술만
  • 학력(전략적 선택)
  • 이력서 작성 후
    맞춤법
    링크 제대로 동작하는지 확인
    별도 파일 첨부하지 않는다
    PDF나 링크로 제출
  • 퇴고
    인사담당 입장에서 핵심내용 강조, 불필요한 내용 삭제
    체크리스트 활용
  • 피드백 잘 받는 법
    예의
    1.자기소개
    2.나의 상황/ 맥락 설명
    3.당신이 왜 나에게 도움이 될 수 있다 생각하는지
    4.감사인사
  • TIPs
    관심없는회사 → 관심많은 회사 순서로 일정 나누기
    탈락 시 피드백 요청, 개선
    지원 전 관심 회사와 티타임(동료, 기준 성립)
    가능한 추천 전형
    과제, 코테 준비
    수치 툴 : 라이트 하우스
    검색 키워드 : 웹 퍼포먼스

if문으로 풀고 싶었는 데, 뭔가 문법이 안 맞는지 풀 수 없었다

풀이보고 혼자 다시 적어보았다

  • 내 풀이
const solution = (num1, num2) => (num1 == num2)? 1 : -1
  • 틀린부분은 정정한 원래 내 오답
function solution(num1, num2) {
    if (num1 == num2){
        return 1;
    }
    else{
        return -1;
    }
}

틀린원인은

  1. eles 오타가 있었고
  2. return = 1 이러고 있었다

+ Recent posts