nhn / fe.javascript

FE DEV LAB

⚠️Notice: 이 레포지토리는 deprecated 상태이며 더 이상 업데이트 되지 않습니다.

이 레포지토리는 더 이상 관리되지 않으며, TOAST UI 어플리케이션과 컴포넌트에 대한 정보는 TOAST UI Brand Site 에서 보실 수 있습니다. Brand Site 에서 제품군 외에도 매주 업데이트되는 Weekly-pick과 FE개발랩의 노하우를 담은 FE 개발 가이드도 보실 수 있으니 참조해주세요!

FE개발

FE개발랩에서 프로젝트 및 내부 과제를 수행하면서 생산한 기술 산출물로, 공통 모듈 및 컴포넌트와 개발 가이드 등을 포함합니다.
배포되는 산출물은 FE개발랩에서 개발/관리하며 MIT 라이선스로 자유롭게 사용할 수 있습니다.
단, FE개발랩의 동의 없이 임의로 수정하여 사용된 코드에 대해서는 유지보수 및 산출물의 품질을 보증을 할 수 없으니,
추가/수정 요청 및 문의, 버그 신고는 [FE개발랩 DL]을 이용해주세요.

fe.javascript's Issues

이미지 저장용 쉐도우 돔

pig

you are a rubbish!

위키 문서 오타입니다.

(https://github.com/nhnent/fe.javascript/wiki/March-27---March-31,-2017#3%EA%B0%80%EC%A7%80-%EC%9B%90%EC%B9%99)[리덕스 분석하기] 위키에서

3가지 원칙 중

Changes from fure functions -> Changes from pure functions 을 잘못 쓰신 것 같습니다.
pure가 맞습니다.

감사합니다.

weekly #188 오탈자 제보

매주 올라오는 FE weekly 잘 보고 있습니다 :-)

https://github.com/nhnent/fe.javascript/wiki/%EB%B0%94%EB%B2%A8%EA%B3%BC-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%95%84%EB%A6%84%EB%8B%A4%EC%9A%B4-%EA%B2%B0%ED%98%BC

내용의 가장 마지막 부분에 오타가 있어 제보 드립니다.

현재 타입스크립트가 설치하기 어려우서 미루고 있었다면, 이제 더 이상 미룰 이유가 없다.
수정 타입스크립트가 설치하기 어려워서 미루고 있었다면, 이제 더 이상 미룰 이유가 없다.

이미지저장용

Copyright Infringement

Please take down the article published at https://github.com/nhnent/fe.javascript/wiki/%23193:-CSS%EB%A5%BC-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EB%B0%A9%EB%B2%95

This has been published without our permission, we have another Korean company pay for the article translation license.

Copying and pasting may save you a lot of time and bring you some traffic, however you won't be able to build up a reputation on the web. Stolen content can be noticed very quickly and the “author” of the post will consequently be marked as a thief. Therefore, if you've found an interesting post on Smashing Magazine or somewhere else, please don't copy it. Instead, quote it or publish an excerpt with a visible link plus a canonical link to the original source.

Get creative by the works of other people, but respect their work, their time and their willingness to give the information to you—for free. You’d want to be paid for your work? Cool, so do we, and if you don’t have purchased a content license from us, it’s stealing.

We urge you to remove this and any other posts you've copied from our website and have posted on your site. If we don't get any response from you, we'll contact your hosting provider inform them about the copyright infringement — you may be aware of the negative consequences this can lead for you.

Looking forward to hearing from you.

— Markus Seyfferth

오타

https://github.com/nhnent/fe.javascript/wiki/August-15-August-19,-2016#%EA%B2%B0%EB%A1%A0

링크에서 첫 번째 하얀 동그라미의
예를 들어 ~~ 항목에서 '정적 프론테 엔드' -> '정적 프론트 엔드'

오타를 찾았습니다.

오타가 난 부분

• 태스트 큐 -> 태스크 큐

자바스크립트가 싱글 스레드 기반인데 비동기 처리를 내부적으로 어떻게 하는지에 대해, 몇 개월 동안 자료를 뒤적여봐도 와닿는 자료를 못봤었는데 이번 아티클로 많이 배웠습니다. 감사합니다 👍

오타 제보합니다.

안녕하세요 문서를 보다가 오타 내용이 있어서 제보드립니다 ! 🙇‍♂️
https://ui.toast.com/fe-guide/ko/ 해당 페이지에서
위 스크린샷과 같이 '번들러' 와 'ES5 to ES6+' 내용이 같습니다.
감사합니다.

이미지저장용

이미지

이미지가 표시되지않는 두 부분 보고!

시작하기

'보통은 아래 그림과 같이 외부 코드를 lib와 같은 이름으로 별도의 폴더를 생성하여 관리한다.'
이 문장 바로 밑의 이미지가 보이지 않아요(directory라고 쓰여져있네요)

'Bracket' 에디터를 설명하는 부분에 Bracket 캡쳐라고 예상되는 부분의 이미지가 보이지않아요. 2016 03 26...으로 적혀있네요.

테스팅에서 오타

https://github.com/nhnent/fe.javascript/wiki/%ED%85%8C%EC%8A%A4%ED%8C%85#karma-test-runner

에서 Karma 로 이동하는 링크 문자가 Karama 라고 잘못적혀있습니다.

이미지 저장

이미지저장용

이미지 저장용

이미지저장용

위키 문서 오타

1. setTImeout -> setTimeout

https://github.com/nhnent/fe.javascript/wiki/%EA%B8%B0%EC%88%A0-%EC%9E%90%EB%A3%8C#settimeout%EA%B3%BC-setinterval

[Webkt 엔진] -> [Webkit 엔진]
disply:none; -> display:none;
최적하 기법 -> 최적화 기법
Refolw -> Reflow

https://github.com/nhnent/fe.javascript/wiki/Reflow%EC%99%80-Repaint

Editor 링크가 깨졌습니다.

Applications > Editor > Documentation 항목의 API, Example,부분 링크가 유효하지 않은것 같습니다.(404에러)

• https://nhn.github.io/tui.editor/api/latest/
• https://nhn.github.io/tui.editor/api/latest/tutorial-example00-demo.html

오류 수정 요청 드려요..

1. 시작하기 페이지에서
   영역 하단의 이미지가 노출되지 않습니다. 파일이 없는듯 합니다.
2. 코딩컨벤션 페이지에 포함된
   대부분의 참고의 링크가 https://github.nhnent.com 으로 되어 있어요.

처음 프로젝트/팀 셋업할 때 반드시 참고해야 할 좋은 내용이네요~

이미지용

이미지저장용

메일 구독도 가능하게 해주세요.

@icebelle 님 부탁드려요~

vue.js 한국어 관련 자료입니다.

https://github.com/nhnent/fe.javascript/wiki/October-10---October-14,-2016

안녕하세요 vue.js 로 검색하다 위키를 발견해서 글 남깁니다. 이슈에 남겨도 되는지는 모르겠습니다.
저는 https://github.com/vuejs-kr 를 관리하고 있는 박창주 입니다.

vue.js에 관심이 있으시면 도움이 될까 싶어 알려드립니다.

vue.js 한국어 홈페이지 : http://kr.vuejs.org
한국어 사용자 대화방 : https://gitter.im/vuejs-kr/vuejs-kr?utm_source=share-link&utm_medium=link&utm_campaign=share-link
vue-router : https://router.vuejs.org/kr/
vuex : https://vuex.vuejs.org/kr/
loader : http://vue-loader.vuejs.org/ko/

위 프로젝트 등을 진행하고 있습니다.

감사합니다.

오타 제보합니다~!

안녕하세요 :D
토스트밋업의 포스팅중 https://meetup.toast.com/posts/153

package.json에 script 추가하기

샘플 코드에서 오타 수정이 필요할거 같아 아래와 같이 제보합니다.

"mian": "index.js" -> "main": "index.js"

확인 부탁드립니다~ 감사합니다 😄

이미지저장용용

문서의 링크접근이 되지 않습니다.

WeeklyPick > 0.7KB로 Vue와 같은 반응형 시스템 만들기 문서를 읽다 제보 드립니다.
본문 하단에 만드신 라이브러리에 대한 링크 orphan/grid4 브랜치가 접근이 되지 않습니다.
어떤내용인지 궁금하네요. 🤔

이미지 저장 - File Input multiple

안티패턴 예시 관련

좋은 가이드 작성해 주셔서 감사합니다.
안티패턴 문서를 보다가 예시가 조금 이상해서 문의드려요.

https://github.com/nhnent/fe.javascript/wiki/%EC%95%88%ED%8B%B0-%ED%8C%A8%ED%84%B4#%EC%88%9C%ED%99%98%EB%AC%B8%EC%97%90%EC%84%9C-continue%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%A7%80-%EB%A7%88%EB%9D%BC

continue 는 기능 자체가 순환문을 빠져나가는게 아니라 블록 내부에서 continue 다음에 오는 명령을 수행하지 않는 것인데, '순환문을 빠져나갈 의도' 라는 문구가 continue 와 어울리지 않는 것 같습니다.
예시 코드 또한 [Bad] 코드가 순환문을 빠져나가는 것과 무관해 보입니다.

오타를 찾았습니다.

CommontJS 포맷에서 CommonJS 포맷로 수정 되어야 합니다.

위치: https://github.com/nhnent/fe.javascript/wiki/April-10---April-14,-2017#commontjs-%ED%8F%AC%EB%A7%B7

오타 제보

https://github.com/nhnent/fe.javascript/wiki/June-26---June-30,-2017#ecmascript-6

Promise.prototype.than -> Promise.prototype.then

weekly #163 예제 에러

    // es5.js
    "use strict";
    
    var myconst = 123;
    var mylet = 456;
    
    myconst = 555;

위 코드는 원래 정상적인 코드이므로, 아래 코드가 예시에 맞는것 같습니다.

const myconst = 123;
let mylet = 456;

myconst = 555;

2. modules => module

module.exports = (env, options) => {
      const config = {
        entry: {
          app: ['./src/index.js']
        },
        //... 중략 ...
        modules: { // => module
          rules: [
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader'
            }
          ]
        }

weekly #163 코드 관련

npx babel ./es6test.js --out-file es5.js --presets=es2015

위 라인 실행 시 Couldn't find preset "es2015" relative to directory "." 에러가 발생합니다.
--presets=es2015 부분을 --presets=env 로 변경하면 예상대로 실행되는데,
presets 옵션으로 es2015가 맞는건지 확인이 될까요??

참고:
package.json 일부

...
"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^0.1.19",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.12.2",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  },
...

이미지저장용

**

weekly #166 images

이미지저장용

weekly june-13 내용 관련

단일 호출 스택과 Run-to-Completion

실행 순서에 오타가 나신 건지,
bar -> foo -> baz 같아요..

images

링크가 내부용으로 되어있습니다.

안녕하세요.

https://github.com/nhnent/fe.javascript/wiki/jquery-가이드#설치하기
해당 링크의 참고 부분은 내부 OSS에 있는 아티클에 걸려있어서 접근이 안 됩니다.
수정해주시면 감사하겠습니다.

FE Weekly를 통해 유익한 정보를 주셔서 감사합니다.
꾸준히 구독중입니다 :)

오역 제보

글 너무 즐겁게 읽고 있습니다! 항상 감사합니다!

올려주신 틴더 케이스 스터디에서

Users swipe more on web than their native apps

의 번역이

사용자는 네이티브 앱보다 웹에서 이성을 더 많이 선택한다.

로 되어있는데,

틴더 앱의 특성상 이성 선택으로 의역이 가능한것 같지만
해당 글 문맥에서는 "Swipe" 유저 액션이 늘어났다는 이야기 같습니다.

혹시나 제가 잘못 이해한거면 다시 알려주세요 ^^;
감사합니다!!

이미지 깨짐

https://github.com/nhnent/fe.javascript/wiki/Reflow%EC%99%80-Repaint

이미지 URL 접근하니
Cannot proxy the given URL
요런 에러가 있어요.

wiki 재오픈 계획에 관한 문의

그동안 올려주셨던 번역본 덕분에 은혜입으며 살아왔었습니다.

이제 제 힘으로 일어서야 할 때 일까요?
사실 이렇게 팀 공유용 자료를 공개해 주시는 것도 쉬운 일은 아닐텐데 공짜로 도움 받아놓고 감사하다는 말씀을 그동안 못드렸던 것 같습니다.
덕분에 많은 도움되었었습니다. 리스펙합니다.

일도 많아 바쁘신데 라이센스 하나하나 따져가며 공개여부를 정하실 일은 없을거라 추측하고 있으니, 재오픈은 사실 기대하지는 않고 있습니다.

그래도 언젠가 다시 열린다면 정말 뛸 듯이 기쁠 것도 같습니다.
엔터 FE개발랩 여러분 모두 만수무강 하세요.

이미지 저장용

이미지저장용

redux

FE Weekly 문서 내용 중 샘플코드 오류

August 03 — August 07, 2015
13.2 파생클래스(Derived classes) 섹션에서
"ES6는 extends 절을 통해 내장된 서브클래싱을 지원한다." 부분의 샘플 코드가 잘못 들어간 것 같습니다.

https://github.com/nhnent/fe.javascript/wiki/August-03-%E2%80%94-August-07,-2015

오타 제보

https://github.com/nhnent/fe.javascript/wiki/November-27---December-1%2C-2017#네트워크
내용 중

• 크게 압축한다. (Brotli~q11, Zopfli 또는 gzip 사용) Brotil는 gzip보다 압축률이 좋다.

Brotil => Brotli

안티패턴에 내용 수정 요청드립니다.

https://ui.toast.com/fe-guide/ko_ANTI-PATTERN/
위 주소의 '변수 선언 없이 바로 변수를 사용하지 않는다' 파트인데요.

const와 let은 호이스팅 되지않는다고 써있는데요.
const와 let도 블록스코프 단위로 호이스팅이 발생합니다.

var a = 'outer';
(function() {
  var a;
  console.log(a);
  a = 'inner';
})();

console에서 실행해보면, undefined이 2번 출력되는데,
첫번째는 변수선언과 변수초기화가 동시에 일어나는 var의 특성과 호이스팅으로 인해 출력되는 undefined이고,
두번째는 return이 없어서 출력되는 undefined입니다.

const b = 'outer';
(function() {
  console.log(b);
  const b = 'inner';
})();

console에서 실행해보면, ReferenceError가 발생하는데요.
호이스팅이 발생했고 변수 선언이 된 다음, 변수 초기화가 이루어지지않아서 생기는 에러입니다.

두가지 케이스의 비교를 통해서 const와 let도 호이스팅이 발생하는 것을 알 수 있습니다.

확인부탁드리겠습니다!
감사합니다.

오타 제보합니다

## RequireJS [RequireJS](http://requirejs.org/)는 AMD 방식의 대표적인 자바스크립트 모듈 관리 라이브러리이다.
태그가 제대로 적용이 안되있는 것 같습니다

위치 :
https://github.com/nhnent/fe.javascript/wiki/%EC%9D%98%EC%A1%B4%EC%84%B1-%EA%B4%80%EB%A6%AC

## 목차 * [ECMAScript6](#ecmascript6) * [DTD](#dtd) * [박스모델](#박스모델) * [Reflow와 Repaint](#reflow와-repaint) * [setTimeout과 setInterval](#settimeout과-setinterval)

위치 :
https://github.com/nhnent/fe.javascript/wiki/%EA%B8%B0%EC%88%A0-%EC%9E%90%EB%A3%8C

이미지 저장용